mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-04-26 16:00:56 -04:00
feat: rewrite js rpg project (#46515)
* chore: remove existing steps - clean slate * chore: rename step file * feat: start rewrite * feat: progress * feat: continuing rewrite * feat: almost done with new steps (: * feat: complete step rewrite * Step 1 tests without `link` testing * chore: apply sem's review suggestions Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com> * chore: missed one Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com> * chore: missed one Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com> * Step 2 tests and hints * step 3 stats hints and tests * cleared the grammers issues, I added. * removed type="text/css" from the seed code * Tests and hints for step 4 * removed tests from step 4 because they aren't working * feat: starting the tests * feat: add another step * feat: more tests * feat: tests through step 80 * feat: tests through step 117 * feat: to step 148 * feat: finish step tests * feat: apply Jessica's suggestions * chore: apply muhammed's review Co-authored-by: Muhammed Mustafa <muhammed@freecodecamp.org> * chore: fix up tests * chore: thought I got all of them * chore: apply jessica's review suggestions * chore: apply suggestions from code review Co-authored-by: gikf <60067306+gikf@users.noreply.github.com> Co-authored-by: Muhammed Mustafa <MuhammedElruby@gmail.com> * chore: apply yoko's reviews * fix: use text content * chore: apply tom's review * fix: forgot to commit meta * fix: broken tests * feat: apply dario's review Co-authored-by: Muhammed Mustafa <MuhammedElruby@gmail.com> Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com> Co-authored-by: Muhammed Mustafa <muhammed@freecodecamp.org> Co-authored-by: gikf <60067306+gikf@users.noreply.github.com> Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
This commit is contained in:
Naomi Carrigan
@@ -16,611 +16,700 @@
|
||||
"Step 1"
|
||||
],
|
||||
[
|
||||
"5d5a8dd907f328a948d398ce",
|
||||
"62a115879a6d51422652cbfc",
|
||||
"Step 2"
|
||||
],
|
||||
[
|
||||
"5d5a8f1c07f328a948d398cf",
|
||||
"62a1166ed9a56d439c0770e7",
|
||||
"Step 3"
|
||||
],
|
||||
[
|
||||
"5d5a903507f328a948d398d0",
|
||||
"62a23c1d505bfa13747c8a9b",
|
||||
"Step 4"
|
||||
],
|
||||
[
|
||||
"5d5aaa5807f328a948d398d1",
|
||||
"62a23cb9bc467a147516b500",
|
||||
"Step 5"
|
||||
],
|
||||
[
|
||||
"5d5aab5d07f328a948d398d2",
|
||||
"62a23d1c5f1c93161f3582ae",
|
||||
"Step 6"
|
||||
],
|
||||
[
|
||||
"5d5aac9c07f328a948d398d3",
|
||||
"62a2401b9842721796b72850",
|
||||
"Step 7"
|
||||
],
|
||||
[
|
||||
"5d5aad2307f328a948d398d4",
|
||||
"62a24068d60b671847d1d4e2",
|
||||
"Step 8"
|
||||
],
|
||||
[
|
||||
"5d5aae1207f328a948d398d5",
|
||||
"62a2409897ec621942234cf6",
|
||||
"Step 9"
|
||||
],
|
||||
[
|
||||
"5d5ab57f07f328a948d398d6",
|
||||
"62a240c67f3dbb1a1e6d95ee",
|
||||
"Step 10"
|
||||
],
|
||||
[
|
||||
"5d5b66ce07f328a948d398d7",
|
||||
"62a24128d5e8af1b47ad1aab",
|
||||
"Step 11"
|
||||
],
|
||||
[
|
||||
"5d64cf8f853b56a21cd16319",
|
||||
"62fc1ee0c5a89717d4785729",
|
||||
"Step 12"
|
||||
],
|
||||
[
|
||||
"5d651ee1ee291f75bbd738ee",
|
||||
"62a24190868ca51c0b6e83c7",
|
||||
"Step 13"
|
||||
],
|
||||
[
|
||||
"5d652e5a6e6bf7a6a27aa80a",
|
||||
"62a241df03c1f61ce936f5d9",
|
||||
"Step 14"
|
||||
],
|
||||
[
|
||||
"5d653b2d6e6bf7a6a27aa80b",
|
||||
"62a2509ba163e020bb9d84ea",
|
||||
"Step 15"
|
||||
],
|
||||
[
|
||||
"5d653c4d6e6bf7a6a27aa80c",
|
||||
"62a255dae245b52317da824a",
|
||||
"Step 16"
|
||||
],
|
||||
[
|
||||
"5d6542826e6bf7a6a27aa80d",
|
||||
"62a257659d0d1e2456f24ba2",
|
||||
"Step 17"
|
||||
],
|
||||
[
|
||||
"5d65f2c62012114c7d7c57eb",
|
||||
"62a39f5a5790eb27c1e5d4bf",
|
||||
"Step 18"
|
||||
],
|
||||
[
|
||||
"5d65f4cd2012114c7d7c57ec",
|
||||
"62a3a0a3c0a4b32915d26a6e",
|
||||
"Step 19"
|
||||
],
|
||||
[
|
||||
"5d65f6392012114c7d7c57ed",
|
||||
"62a3a488b24fb32b91155d56",
|
||||
"Step 20"
|
||||
],
|
||||
[
|
||||
"5d6606634bab337fbb433884",
|
||||
"62a3a75d8466a12e009eff76",
|
||||
"Step 21"
|
||||
],
|
||||
[
|
||||
"5d66093c4bab337fbb433885",
|
||||
"62a3a7e4f1060e2fc5ffb34b",
|
||||
"Step 22"
|
||||
],
|
||||
[
|
||||
"5d660a32e0696bdec46938d5",
|
||||
"62a3b365f1cdeb33efc2502e",
|
||||
"Step 23"
|
||||
],
|
||||
[
|
||||
"5d6616d8e0696bdec46938d6",
|
||||
"62a3b3eab50e193608c19fc6",
|
||||
"Step 24"
|
||||
],
|
||||
[
|
||||
"5d661814e0696bdec46938d7",
|
||||
"62a3b41c9494f937560640ab",
|
||||
"Step 25"
|
||||
],
|
||||
[
|
||||
"5d66198de0696bdec46938d8",
|
||||
"62a3b49686792938718b90d3",
|
||||
"Step 26"
|
||||
],
|
||||
[
|
||||
"5d661bc6e0696bdec46938d9",
|
||||
"62a3b506dbaead396f58a701",
|
||||
"Step 27"
|
||||
],
|
||||
[
|
||||
"5d6653d5e0696bdec46938da",
|
||||
"62a3b5843544ce3a77459c27",
|
||||
"Step 28"
|
||||
],
|
||||
[
|
||||
"5d665983e0696bdec46938dc",
|
||||
"62a3b79d520a7f3d0e25afd6",
|
||||
"Step 29"
|
||||
],
|
||||
[
|
||||
"5d674fd9e0696bdec46938dd",
|
||||
"62b46e3a8d4be31be5af793d",
|
||||
"Step 30"
|
||||
],
|
||||
[
|
||||
"5d6752e3e0696bdec46938de",
|
||||
"62a3bb9aeefe4b3fc43c6d7b",
|
||||
"Step 31"
|
||||
],
|
||||
[
|
||||
"5d6755fce0696bdec46938df",
|
||||
"62fc20387ef88d1d1998aac5",
|
||||
"Step 32"
|
||||
],
|
||||
[
|
||||
"5d675726e0696bdec46938e0",
|
||||
"62a3bec30ea7f941412512dc",
|
||||
"Step 33"
|
||||
],
|
||||
[
|
||||
"5d678366e0696bdec46938e1",
|
||||
"62fc211760bfc220f4734800",
|
||||
"Step 34"
|
||||
],
|
||||
[
|
||||
"5d67845ee0696bdec46938e2",
|
||||
"62a3c0ab883fd9435cd5c518",
|
||||
"Step 35"
|
||||
],
|
||||
[
|
||||
"5d67880ee0696bdec46938e3",
|
||||
"62a3c2fccf186146b59c6e96",
|
||||
"Step 36"
|
||||
],
|
||||
[
|
||||
"5d67ad3de0696bdec46938e4",
|
||||
"62a3c4a0e52767482c5202d4",
|
||||
"Step 37"
|
||||
],
|
||||
[
|
||||
"5d67ae95e0696bdec46938e5",
|
||||
"62a3c668afc43b4a134cca81",
|
||||
"Step 38"
|
||||
],
|
||||
[
|
||||
"5d67b284e0696bdec46938e6",
|
||||
"62a3c8bf3980c14c438d2aed",
|
||||
"Step 39"
|
||||
],
|
||||
[
|
||||
"5d67b945e0696bdec46938e7",
|
||||
"62a3c91a2bab1b4d6fabb726",
|
||||
"Step 40"
|
||||
],
|
||||
[
|
||||
"5d68c3b1e0696bdec46938e8",
|
||||
"62a3cdb11478a34ff4a6470d",
|
||||
"Step 41"
|
||||
],
|
||||
[
|
||||
"5d68c51ee0696bdec46938e9",
|
||||
"62a3cfc8328d3351b95d4f61",
|
||||
"Step 42"
|
||||
],
|
||||
[
|
||||
"5d68c5efe0696bdec46938ea",
|
||||
"62a7beb1ad61211ac153707f",
|
||||
"Step 43"
|
||||
],
|
||||
[
|
||||
"5d68c758e0696bdec46938eb",
|
||||
"62a7bf06d2ad9d1c5024e833",
|
||||
"Step 44"
|
||||
],
|
||||
[
|
||||
"5d68c947e0696bdec46938ec",
|
||||
"62a7bfabe119461eb13ccbd6",
|
||||
"Step 45"
|
||||
],
|
||||
[
|
||||
"5d68ca40e0696bdec46938ed",
|
||||
"62a7bfd9179b7f1f6a15fb1e",
|
||||
"Step 46"
|
||||
],
|
||||
[
|
||||
"5d68d3f7e0696bdec46938ee",
|
||||
"62a7c011eef9fb2084b966db",
|
||||
"Step 47"
|
||||
],
|
||||
[
|
||||
"5d68d4fde0696bdec46938ef",
|
||||
"62a7c071219da921758a35bb",
|
||||
"Step 48"
|
||||
],
|
||||
[
|
||||
"5d68d631e0696bdec46938f0",
|
||||
"62a7c23e6b511f22ed71197a",
|
||||
"Step 49"
|
||||
],
|
||||
[
|
||||
"5d68dbf7e0696bdec46938f1",
|
||||
"62a7cc99577fbf25ee7a7d76",
|
||||
"Step 50"
|
||||
],
|
||||
[
|
||||
"5d6904b6e0696bdec46938f2",
|
||||
"62a8a929e4260d08093756d2",
|
||||
"Step 51"
|
||||
],
|
||||
[
|
||||
"5d6905ace0696bdec46938f3",
|
||||
"62a8a9d876b2580943ba9351",
|
||||
"Step 52"
|
||||
],
|
||||
[
|
||||
"5d6f6bfc7c812010bf3327cc",
|
||||
"62a8aa98a8289d0a698eee1d",
|
||||
"Step 53"
|
||||
],
|
||||
[
|
||||
"5d6f6e3c7c812010bf3327cd",
|
||||
"62a8ab0e27cbaf0b54ba8a42",
|
||||
"Step 54"
|
||||
],
|
||||
[
|
||||
"5d6f6f747c812010bf3327ce",
|
||||
"62a8ac194679e60cb561b0a8",
|
||||
"Step 55"
|
||||
],
|
||||
[
|
||||
"5d6f70937c812010bf3327cf",
|
||||
"62a8ad8e01d7cb0deae5ec66",
|
||||
"Step 56"
|
||||
],
|
||||
[
|
||||
"5d6f72657c812010bf3327d0",
|
||||
"62a8ade9b2f5b30ef0b606c2",
|
||||
"Step 57"
|
||||
],
|
||||
[
|
||||
"5d6f736b7c812010bf3327d2",
|
||||
"62a8ae85fcaedc0fddc7ca4f",
|
||||
"Step 58"
|
||||
],
|
||||
[
|
||||
"5d6f776c7c812010bf3327d3",
|
||||
"62a8b0b5053f16111b0b6b5f",
|
||||
"Step 59"
|
||||
],
|
||||
[
|
||||
"5d6f785f7c812010bf3327d4",
|
||||
"62a8b1762b7775124622e1a3",
|
||||
"Step 60"
|
||||
],
|
||||
[
|
||||
"5d6f79667c812010bf3327d6",
|
||||
"62a8b3cc436db8139cc5fc09",
|
||||
"Step 61"
|
||||
],
|
||||
[
|
||||
"5d6f7b917c812010bf3327d7",
|
||||
"62a8b6536156c51500739b41",
|
||||
"Step 62"
|
||||
],
|
||||
[
|
||||
"5d6f82da7c812010bf3327d8",
|
||||
"62a8b711ab7a12161c7d9b67",
|
||||
"Step 63"
|
||||
],
|
||||
[
|
||||
"5d6f919f7c812010bf3327d9",
|
||||
"62a8b9770050d217d2247801",
|
||||
"Step 64"
|
||||
],
|
||||
[
|
||||
"5d6f94347c812010bf3327da",
|
||||
"62a8c0c8313e891a15ec23e7",
|
||||
"Step 65"
|
||||
],
|
||||
[
|
||||
"5d6f96747c812010bf3327db",
|
||||
"62a8c1154d3ae11aee80353f",
|
||||
"Step 66"
|
||||
],
|
||||
[
|
||||
"5d6f98247c812010bf3327dc",
|
||||
"62a8c151b23bf21bc7c4fcba",
|
||||
"Step 67"
|
||||
],
|
||||
[
|
||||
"5d6f9a4c7c812010bf3327dd",
|
||||
"62a8c173949f851c83c64756",
|
||||
"Step 68"
|
||||
],
|
||||
[
|
||||
"5d70850e066dac7142a6d797",
|
||||
"62a8c242b25a531f2909e5bc",
|
||||
"Step 69"
|
||||
],
|
||||
[
|
||||
"5d70862e066dac7142a6d798",
|
||||
"62a8c2bbbd8aa82052f47c53",
|
||||
"Step 70"
|
||||
],
|
||||
[
|
||||
"5d7086d4066dac7142a6d799",
|
||||
"62a8c31ec0ec78216a1c36a0",
|
||||
"Step 71"
|
||||
],
|
||||
[
|
||||
"5d7088d2066dac7142a6d79a",
|
||||
"62a8c370ad8c68227137e0bc",
|
||||
"Step 72"
|
||||
],
|
||||
[
|
||||
"5d708ab5066dac7142a6d79b",
|
||||
"62a8c3ebc6c35e23785e1a19",
|
||||
"Step 73"
|
||||
],
|
||||
[
|
||||
"5d708be9066dac7142a6d79c",
|
||||
"62a8c41ecaf1bd24536129b8",
|
||||
"Step 74"
|
||||
],
|
||||
[
|
||||
"5d708c9a066dac7142a6d79d",
|
||||
"62a8c465fa7b0c252f4a8f0c",
|
||||
"Step 75"
|
||||
],
|
||||
[
|
||||
"5d708dd7066dac7142a6d79e",
|
||||
"62a8c4db0710f3260f867a92",
|
||||
"Step 76"
|
||||
],
|
||||
[
|
||||
"5d708fae066dac7142a6d79f",
|
||||
"62a8c56247609626fa4a8d6e",
|
||||
"Step 77"
|
||||
],
|
||||
[
|
||||
"5d709664066dac7142a6d7a0",
|
||||
"62a8c5db7888af27af23f0dd",
|
||||
"Step 78"
|
||||
],
|
||||
[
|
||||
"5d709bbc066dac7142a6d7a2",
|
||||
"62a8c65b75664c28a8e59c16",
|
||||
"Step 79"
|
||||
],
|
||||
[
|
||||
"5d71b58b848f6914ab89897d",
|
||||
"62a8c6815f5f1a29735efe1b",
|
||||
"Step 80"
|
||||
],
|
||||
[
|
||||
"5d71bdca848f6914ab89897e",
|
||||
"62a8c7322e42962ad53ad204",
|
||||
"Step 81"
|
||||
],
|
||||
[
|
||||
"5d71bfdf848f6914ab89897f",
|
||||
"62a8c7a59e72c02bb1c717d2",
|
||||
"Step 82"
|
||||
],
|
||||
[
|
||||
"5d71c20f848f6914ab898980",
|
||||
"62a8c89e4272512d44fc1c66",
|
||||
"Step 83"
|
||||
],
|
||||
[
|
||||
"5d71c80e848f6914ab898981",
|
||||
"62a8c8cee8e5cf2e001789b4",
|
||||
"Step 84"
|
||||
],
|
||||
[
|
||||
"5d71cab4f27e5122af9f1178",
|
||||
"62a8ca22d29fe62f3952bdf5",
|
||||
"Step 85"
|
||||
],
|
||||
[
|
||||
"5d71ea30f27e5122af9f1179",
|
||||
"62a8cb19bd7f8a304e5427a1",
|
||||
"Step 86"
|
||||
],
|
||||
[
|
||||
"5d71eb0bf27e5122af9f117a",
|
||||
"62a8cbd1e3595431d5a2b3f1",
|
||||
"Step 87"
|
||||
],
|
||||
[
|
||||
"5d71f787e39bedcf8f0998ff",
|
||||
"62a8cce1b0c32c33017cf2e9",
|
||||
"Step 88"
|
||||
],
|
||||
[
|
||||
"5d71ed88f27e5122af9f117b",
|
||||
"62a8ce1dfc990134162b3bd9",
|
||||
"Step 89"
|
||||
],
|
||||
[
|
||||
"5d71f217e39bedcf8f0998fd",
|
||||
"62a8ce73d0dce43468f6689c",
|
||||
"Step 90"
|
||||
],
|
||||
[
|
||||
"5d71f669e39bedcf8f0998fe",
|
||||
"62a8cf22272d6d35af80d4ac",
|
||||
"Step 91"
|
||||
],
|
||||
[
|
||||
"5d72027ce39bedcf8f099900",
|
||||
"62a8d0337d7c67377a4a76c6",
|
||||
"Step 92"
|
||||
],
|
||||
[
|
||||
"5d721925e39bedcf8f099901",
|
||||
"62a8d08668fa8b38732486e9",
|
||||
"Step 93"
|
||||
],
|
||||
[
|
||||
"5d7dea508360d21c6826a9af",
|
||||
"62a8d0c4f12c2239b6618582",
|
||||
"Step 94"
|
||||
],
|
||||
[
|
||||
"5d7deecc8360d21c6826a9b0",
|
||||
"62a8d0fdf2dad83a92883a80",
|
||||
"Step 95"
|
||||
],
|
||||
[
|
||||
"5d7df0458360d21c6826a9b1",
|
||||
"62a8d143f2a58e3b6d6e9c33",
|
||||
"Step 96"
|
||||
],
|
||||
[
|
||||
"5d7df2a68360d21c6826a9b2",
|
||||
"62a8d1c72e8bb13c2074d93c",
|
||||
"Step 97"
|
||||
],
|
||||
[
|
||||
"5d7df41a8360d21c6826a9b3",
|
||||
"62a8d2146a3e853d0a6e28ca",
|
||||
"Step 98"
|
||||
],
|
||||
[
|
||||
"5d7df75a8360d21c6826a9b4",
|
||||
"62a8d24c97461b3ddb9397c8",
|
||||
"Step 99"
|
||||
],
|
||||
[
|
||||
"5d7dfb908360d21c6826a9b5",
|
||||
"62a8d2e2a073be3edb46116f",
|
||||
"Step 100"
|
||||
],
|
||||
[
|
||||
"5d7e02c88360d21c6826a9b7",
|
||||
"62a8d31ebbc10e3fe1b28e03",
|
||||
"Step 101"
|
||||
],
|
||||
[
|
||||
"5d7e06728360d21c6826a9b8",
|
||||
"62a8d35660db4040ba292193",
|
||||
"Step 102"
|
||||
],
|
||||
[
|
||||
"5d7e077e8360d21c6826a9b9",
|
||||
"62a8d382cd075f4169223e14",
|
||||
"Step 103"
|
||||
],
|
||||
[
|
||||
"5d7e13798360d21c6826a9bb",
|
||||
"62a8d539dc11cb42b5dd7ec8",
|
||||
"Step 104"
|
||||
],
|
||||
[
|
||||
"5d7f3b6c7c4263f469c36b17",
|
||||
"62a8d61ddfe35744369365b7",
|
||||
"Step 105"
|
||||
],
|
||||
[
|
||||
"5d7f405c7c4263f469c36b18",
|
||||
"62a8d6c7001ebc45350e3d16",
|
||||
"Step 106"
|
||||
],
|
||||
[
|
||||
"5d7f410b7c4263f469c36b19",
|
||||
"62a8d7b8ab568b4649998954",
|
||||
"Step 107"
|
||||
],
|
||||
[
|
||||
"5d7f41fa7c4263f469c36b1a",
|
||||
"62a8d81f539f004776dd9b1e",
|
||||
"Step 108"
|
||||
],
|
||||
[
|
||||
"5d7f43947c4263f469c36b1b",
|
||||
"62a8dd468debb449b4454086",
|
||||
"Step 109"
|
||||
],
|
||||
[
|
||||
"5d7f44ac7c4263f469c36b1c",
|
||||
"62a8dd9cdb16324b04cfd958",
|
||||
"Step 110"
|
||||
],
|
||||
[
|
||||
"5d7f459421b11cdaa3f6b15f",
|
||||
"62a8dfcf7fb1044d2f478fd1",
|
||||
"Step 111"
|
||||
],
|
||||
[
|
||||
"5d7f4d9421b11cdaa3f6b160",
|
||||
"62a8e0d1d0110b4ec421489f",
|
||||
"Step 112"
|
||||
],
|
||||
[
|
||||
"5d80c1d821b11cdaa3f6b164",
|
||||
"62a8e142f7f0bd4fed898de3",
|
||||
"Step 113"
|
||||
],
|
||||
[
|
||||
"5d80c3c021b11cdaa3f6b165",
|
||||
"62a8e1dc897df55108bcb5e8",
|
||||
"Step 114"
|
||||
],
|
||||
[
|
||||
"5d80d20d21b11cdaa3f6b166",
|
||||
"62a8e21398ad61520edb724f",
|
||||
"Step 115"
|
||||
],
|
||||
[
|
||||
"5d80d67021b11cdaa3f6b167",
|
||||
"62a8e24c673b075317cc0b09",
|
||||
"Step 116"
|
||||
],
|
||||
[
|
||||
"5d80da7521b11cdaa3f6b168",
|
||||
"62a8e271f8e3d1541f9624ad",
|
||||
"Step 117"
|
||||
],
|
||||
[
|
||||
"5dbab6d36ef5fe3a704f848c",
|
||||
"62a8e35675c18c56354c08cf",
|
||||
"Step 118"
|
||||
],
|
||||
[
|
||||
"5dbabb746ef5fe3a704f848d",
|
||||
"62a8e41e2f190c58404dd46e",
|
||||
"Step 119"
|
||||
],
|
||||
[
|
||||
"5dbac08e6ef5fe3a704f848f",
|
||||
"62a8e45cc600c3591cee671a",
|
||||
"Step 120"
|
||||
],
|
||||
[
|
||||
"5dbac0c86ef5fe3a704f8490",
|
||||
"62a8e49f4df7af5ae2d7a616",
|
||||
"Step 121"
|
||||
],
|
||||
[
|
||||
"5dbac1f16ef5fe3a704f8491",
|
||||
"62a8e4dc6a60f85bf256a0cb",
|
||||
"Step 122"
|
||||
],
|
||||
[
|
||||
"5dbac2b06ef5fe3a704f8492",
|
||||
"62a8ed36d7a7915dfa444ba2",
|
||||
"Step 123"
|
||||
],
|
||||
[
|
||||
"5dbbb5076ef5fe3a704f849d",
|
||||
"62a8edd05e27cc668051686f",
|
||||
"Step 124"
|
||||
],
|
||||
[
|
||||
"5dbac6176ef5fe3a704f8493",
|
||||
"62a8ee154c8946678775c4a4",
|
||||
"Step 125"
|
||||
],
|
||||
[
|
||||
"5dbaca566ef5fe3a704f8494",
|
||||
"62a8ee71f018e968a056d369",
|
||||
"Step 126"
|
||||
],
|
||||
[
|
||||
"5dbae0446ef5fe3a704f8495",
|
||||
"62a8eec45f77bc69e8775294",
|
||||
"Step 127"
|
||||
],
|
||||
[
|
||||
"5dbae1f66ef5fe3a704f8496",
|
||||
"62a8eefe2e68b66ac563816b",
|
||||
"Step 128"
|
||||
],
|
||||
[
|
||||
"5dbba5716ef5fe3a704f8497",
|
||||
"62a8ef6a52292f6bdca4f6f8",
|
||||
"Step 129"
|
||||
],
|
||||
[
|
||||
"5dbba70e6ef5fe3a704f8498",
|
||||
"62a8ef8f0c76a46cd221a68c",
|
||||
"Step 130"
|
||||
],
|
||||
[
|
||||
"5dbba89e6ef5fe3a704f8499",
|
||||
"62a8efb0e3ce826db8daf80f",
|
||||
"Step 131"
|
||||
],
|
||||
[
|
||||
"5dbbaeb56ef5fe3a704f849a",
|
||||
"62a8eff21c0b0f6ebe5b8e38",
|
||||
"Step 132"
|
||||
],
|
||||
[
|
||||
"5dbbb00e6ef5fe3a704f849b",
|
||||
"62a8f06fb318666fef69f91e",
|
||||
"Step 133"
|
||||
],
|
||||
[
|
||||
"5dbbb1466ef5fe3a704f849c",
|
||||
"62a8f14fe6d1fc72454648c7",
|
||||
"Step 134"
|
||||
],
|
||||
[
|
||||
"5dbbf3796ef5fe3a704f849e",
|
||||
"62a8f1d5f5ddbf74c07f733b",
|
||||
"Step 135"
|
||||
],
|
||||
[
|
||||
"5dbbf8d86ef5fe3a704f849f",
|
||||
"62a8f20463b324759953edad",
|
||||
"Step 136"
|
||||
],
|
||||
[
|
||||
"5dbc23a66ef5fe3a704f84a0",
|
||||
"62ba17beef16c563069a65d8",
|
||||
"Step 137"
|
||||
],
|
||||
[
|
||||
"5dbc2c506ef5fe3a704f84a1",
|
||||
"62a8f256b813a476cae51f49",
|
||||
"Step 138"
|
||||
],
|
||||
[
|
||||
"5dbc2d056ef5fe3a704f84a2",
|
||||
"62a8f2bc37675e77d5835235",
|
||||
"Step 139"
|
||||
],
|
||||
[
|
||||
"5dbc2f2d6ef5fe3a704f84a3",
|
||||
"62a8f35bde1750791f58773f",
|
||||
"Step 140"
|
||||
],
|
||||
[
|
||||
"5dbc33956ef5fe3a704f84a4",
|
||||
"62a94114ce0b8918b487390f",
|
||||
"Step 141"
|
||||
],
|
||||
[
|
||||
"5dbc35326ef5fe3a704f84a5",
|
||||
"62aa1cea594f152ba626b872",
|
||||
"Step 142"
|
||||
],
|
||||
[
|
||||
"5dbfced07736e5ee7d235544",
|
||||
"62aa1d6736ba262cfa74344b",
|
||||
"Step 143"
|
||||
],
|
||||
[
|
||||
"5dbfd4837736e5ee7d235545",
|
||||
"62aa1d9f535e102e4663e7a6",
|
||||
"Step 144"
|
||||
],
|
||||
[
|
||||
"5dbfdb737736e5ee7d235546",
|
||||
"62aa1e3c7c3d552fb04f0f18",
|
||||
"Step 145"
|
||||
],
|
||||
[
|
||||
"5dbfdc377736e5ee7d235547",
|
||||
"62aa1e8ccd579330e097ce44",
|
||||
"Step 146"
|
||||
],
|
||||
[
|
||||
"5dbfe2f37736e5ee7d235548",
|
||||
"62aa1eec891ed731db227a36",
|
||||
"Step 147"
|
||||
],
|
||||
[
|
||||
"5dbfeffe7736e5ee7d235549",
|
||||
"62aa1fed3d4e873366ff3131",
|
||||
"Step 148"
|
||||
],
|
||||
[
|
||||
"5dbff18d7736e5ee7d23554a",
|
||||
"62aa204c1e1d33348ff09944",
|
||||
"Step 149"
|
||||
],
|
||||
[
|
||||
"5dbff2d07736e5ee7d23554b",
|
||||
"62aa20e9cf1be9358f5aceae",
|
||||
"Step 150"
|
||||
],
|
||||
[
|
||||
"5dbffd907736e5ee7d23554c",
|
||||
"62aa2136fc49b836dfedb959",
|
||||
"Step 151"
|
||||
],
|
||||
[
|
||||
"5dbffe887736e5ee7d23554d",
|
||||
"62aa21971e3b743844849985",
|
||||
"Step 152"
|
||||
],
|
||||
[
|
||||
"5dc01a727736e5ee7d23554f",
|
||||
"62aa21ea8d9d9f396b95dd87",
|
||||
"Step 153"
|
||||
],
|
||||
[
|
||||
"62aa226207f33d3ad4c6f546",
|
||||
"Step 154"
|
||||
],
|
||||
[
|
||||
"62aa22aba186563bcbf2c395",
|
||||
"Step 155"
|
||||
],
|
||||
[
|
||||
"62aa234322d4ad3e8bce42cc",
|
||||
"Step 156"
|
||||
],
|
||||
[
|
||||
"62aa2469c77b363fdb4f0e06",
|
||||
"Step 157"
|
||||
],
|
||||
[
|
||||
"62aa252c3b1073415ba2b898",
|
||||
"Step 158"
|
||||
],
|
||||
[
|
||||
"62aa258da314ef42ba0a1858",
|
||||
"Step 159"
|
||||
],
|
||||
[
|
||||
"62aa25fcb5837d43b4d9873d",
|
||||
"Step 160"
|
||||
],
|
||||
[
|
||||
"62aa2626c3c10244b94c787b",
|
||||
"Step 161"
|
||||
],
|
||||
[
|
||||
"62aa264d23cdaa45a20efada",
|
||||
"Step 162"
|
||||
],
|
||||
[
|
||||
"62aa26cca3cd3d46c431e73b",
|
||||
"Step 163"
|
||||
],
|
||||
[
|
||||
"62aa27227399d647e1c37a3c",
|
||||
"Step 164"
|
||||
],
|
||||
[
|
||||
"62aa27560def7048d7b4a095",
|
||||
"Step 165"
|
||||
],
|
||||
[
|
||||
"62aa27c40ca6f04ab8be5fac",
|
||||
"Step 166"
|
||||
],
|
||||
[
|
||||
"62aa28032d863d4bd8058799",
|
||||
"Step 167"
|
||||
],
|
||||
[
|
||||
"62aa287434dc284cea01157c",
|
||||
"Step 168"
|
||||
],
|
||||
[
|
||||
"62aa28bbd6323e4dfb3ac43e",
|
||||
"Step 169"
|
||||
],
|
||||
[
|
||||
"62aa28fb651bf14efa2dbb16",
|
||||
"Step 170"
|
||||
],
|
||||
[
|
||||
"62aa2943669c9d5026af6985",
|
||||
"Step 171"
|
||||
],
|
||||
[
|
||||
"62aa2999ec27ec516655eba6",
|
||||
"Step 172"
|
||||
],
|
||||
[
|
||||
"62aa29d8f8f88152c91350ca",
|
||||
"Step 173"
|
||||
],
|
||||
[
|
||||
"62aa2aec2f09d454253aad6c",
|
||||
"Step 174"
|
||||
],
|
||||
[
|
||||
"62aa2ba9cd881355a6f0a5a8",
|
||||
"Step 175"
|
||||
]
|
||||
]}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
---
|
||||
id: 5d5a813321b9e3db6c106a46
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
JavaScript is a powerful language which allows you to build websites that are interactive. To get started, create your standard HTML boilerplate with a `DOCTYPE`, `html`, `head`, and `body`. Include a `title` element and a `link` for your stylesheet, and your `meta` tag for the `charset`. Then, create a `div` element with the id `game` within your `body`. Use the text `RPG - Dragon Repeller` for your `title` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should contain the `DOCTYPE` reference.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE/gi));
|
||||
```
|
||||
|
||||
You should include a space after the `DOCTYPE` reference.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+/gi));
|
||||
```
|
||||
|
||||
You should define the document type to be `html`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+html/gi));
|
||||
```
|
||||
|
||||
You should close the `DOCTYPE` declaration with a `>` after the type.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
|
||||
```
|
||||
|
||||
Your `html` element should have an opening tag. Don't forget the `lang` attribute.
|
||||
|
||||
```js
|
||||
assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
|
||||
```
|
||||
|
||||
Your `html` element should have a closing tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/html\s*>/));
|
||||
```
|
||||
|
||||
Your `DOCTYPE` declaration should be at the beginning of your HTML.
|
||||
|
||||
```js
|
||||
assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
|
||||
```
|
||||
|
||||
You should have an opening `head` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head\s*>/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(/<body\s*>/i));
|
||||
```
|
||||
|
||||
You should have a closing `body` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/body\s*>/i));
|
||||
```
|
||||
|
||||
The `head` and `body` elements should be siblings.
|
||||
|
||||
```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'));
|
||||
```
|
||||
|
||||
Your code should have a `meta` element.
|
||||
|
||||
```js
|
||||
const meta = document.querySelector('meta');
|
||||
assert.exists(meta);
|
||||
```
|
||||
|
||||
Your `meta` element should have a `charset` attribute with the value `UTF-8`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<meta[\s\S]+?charset=('|"|`)UTF-8\1/i)
|
||||
```
|
||||
|
||||
Your code should have a `title` element.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.exists(title);
|
||||
```
|
||||
|
||||
Your code should have a `link` element.
|
||||
|
||||
```js
|
||||
const link = document.querySelector('head > link');
|
||||
assert.exists(link);
|
||||
```
|
||||
|
||||
You should have a `div` element.
|
||||
|
||||
```js
|
||||
const div = document.querySelector('div');
|
||||
assert.exists(div);
|
||||
```
|
||||
|
||||
Your `div` element should have an `id` attribute with the value `game`.
|
||||
|
||||
```js
|
||||
const div = document.querySelector('div');
|
||||
assert.equal(div?.id, 'game');
|
||||
```
|
||||
|
||||
Your `div` element should be within the `body` element.
|
||||
|
||||
```js
|
||||
const div = document.querySelector('div');
|
||||
assert.equal(div?.parentElement?.localName, 'body');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,78 @@
|
||||
---
|
||||
id: 62a115879a6d51422652cbfc
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create four `div` elements within your `#game` element. Give them the following respective `id` values, in order: `stats`, `controls`, `monsterStats`, and `text`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create four new `div` elements.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('div')?.length, 5);
|
||||
```
|
||||
|
||||
You should give one of the new `div` elements an `id` of `stats`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div#stats'));
|
||||
```
|
||||
|
||||
You should give one of the new `div` elements an `id` of `controls`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div#controls'));
|
||||
```
|
||||
|
||||
You should give one of the new `div` elements an `id` of `monsterStats`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div#monsterStats'));
|
||||
```
|
||||
|
||||
You should give one of the new `div` elements an `id` of `text`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div#text'));
|
||||
```
|
||||
|
||||
You should place the new `div` elements in the correct order.
|
||||
|
||||
```js
|
||||
function __t(a, b) {
|
||||
return document.querySelector(a)?.nextElementSibling?.getAttribute('id') === b;
|
||||
}
|
||||
assert(__t('div#stats','controls') && __t('div#controls','monsterStats') && __t('div#monsterStats','text'));
|
||||
```
|
||||
|
||||
You should place the new `div` elements within the `#game` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('#game')?.children?.length, 4);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<div id="game">
|
||||
</div>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: 62a1166ed9a56d439c0770e7
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create three `span` elements within your `#stats` element. Give each of them the class `stat`. Then give the first one the text `XP: 0`, the second one the text `Health: 100`, and the third one the text `Gold: 50`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have three `span` elements within the `#stats` element.
|
||||
|
||||
```js
|
||||
const spans = document.querySelectorAll('#stats > span');
|
||||
assert.equal(spans?.length, 3);
|
||||
```
|
||||
|
||||
You should give the new three `span` elements a class of `stat`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('#stats > .stat')?.length, 3);
|
||||
```
|
||||
|
||||
Your first `.stat` element should have the provided text `XP: 0`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#stats > .stat')?.[0]?.innerText === 'XP: 0');
|
||||
```
|
||||
|
||||
Your second `.stat` element should have the provided text `Health: 100`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#stats > .stat')?.[1]?.innerText === 'Health: 100');
|
||||
```
|
||||
|
||||
Your third `.stat` element should have the provided text `Gold: 50`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('#stats > .stat')?.[2]?.innerText === 'Gold: 50');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
|
||||
</div>
|
||||
<div id="controls"></div>
|
||||
<div id="monsterStats"></div>
|
||||
<div id="text"></div>
|
||||
</div>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,167 @@
|
||||
---
|
||||
id: 62a23c1d505bfa13747c8a9b
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Wrap the numbers `0`, `100`, and `50` in `span` elements, and wrap those new `span` elements in `strong` elements. Then give your new `span` elements `id` values of `xpText`, `healthText`, and `goldText`, respectively.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `strong` element in your first `.stat` element.
|
||||
|
||||
```js
|
||||
const stat = document.querySelectorAll('.stat')[0];
|
||||
const strong = stat?.querySelector('strong');
|
||||
assert.exists(strong);
|
||||
```
|
||||
|
||||
Your first new `strong` element should have a `span` element.
|
||||
|
||||
```js
|
||||
const stat = document.querySelectorAll('.stat')[0];
|
||||
const strong = stat?.querySelector('strong');
|
||||
const span = strong?.querySelector('span');
|
||||
assert.exists(span);
|
||||
```
|
||||
|
||||
Your first nested `span` element should have the `id` of `xpText`.
|
||||
|
||||
```js
|
||||
const stat = document.querySelectorAll('.stat')[0];
|
||||
const strong = stat?.querySelector('strong');
|
||||
const span = strong?.querySelector('span');
|
||||
assert.equal(span?.id, 'xpText');
|
||||
```
|
||||
|
||||
Your first `span` element should be wrapped around the text `0`.
|
||||
|
||||
```js
|
||||
const stat = document.querySelectorAll('.stat')[0];
|
||||
const strong = stat?.querySelector('strong');
|
||||
const span = strong?.querySelector('span');
|
||||
assert.equal(span.innerText, '0');
|
||||
```
|
||||
|
||||
The text of your first `.stat` element should still be `XP: 0`.
|
||||
|
||||
```js
|
||||
const stat = document.querySelectorAll('.stat')[0];
|
||||
assert.equal(stat.innerText, 'XP: 0');
|
||||
```
|
||||
|
||||
You should add a `strong` element in your second `.stat` element.
|
||||
|
||||
```js
|
||||
const stat = document.querySelectorAll('.stat')[1];
|
||||
const strong = stat?.querySelector('strong');
|
||||
assert.exists(strong);
|
||||
```
|
||||
|
||||
Your second new `strong` element should have a `span` element.
|
||||
|
||||
```js
|
||||
const stat = document.querySelectorAll('.stat')[1];
|
||||
const strong = stat?.querySelector('strong');
|
||||
const span = strong?.querySelector('span');
|
||||
assert.exists(span);
|
||||
```
|
||||
|
||||
Your second nested `span` element should have the `id` of `healthText`.
|
||||
|
||||
```js
|
||||
const stat = document.querySelectorAll('.stat')[1];
|
||||
const strong = stat?.querySelector('strong');
|
||||
const span = strong?.querySelector('span');
|
||||
assert.equal(span?.id, 'healthText');
|
||||
```
|
||||
|
||||
Your second `span` element should be wrapped around the text `100`.
|
||||
|
||||
```js
|
||||
const stat = document.querySelectorAll('.stat')[1];
|
||||
const strong = stat?.querySelector('strong');
|
||||
const span = strong?.querySelector('span');
|
||||
assert.equal(span.innerText, '100');
|
||||
```
|
||||
|
||||
The text of your second `.stat` element should still be `Health: 100`.
|
||||
|
||||
```js
|
||||
const stat = document.querySelectorAll('.stat')[1];
|
||||
assert.equal(stat.innerText, 'Health: 100');
|
||||
```
|
||||
|
||||
You should add a `strong` element in your third `.stat` element.
|
||||
|
||||
```js
|
||||
const stat = document.querySelectorAll('.stat')[2];
|
||||
const strong = stat?.querySelector('strong');
|
||||
assert.exists(strong);
|
||||
```
|
||||
|
||||
Your third new `strong` element should have a `span` element.
|
||||
|
||||
```js
|
||||
const stat = document.querySelectorAll('.stat')[2];
|
||||
const strong = stat?.querySelector('strong');
|
||||
const span = strong?.querySelector('span');
|
||||
assert.exists(span);
|
||||
```
|
||||
|
||||
Your third nested `span` element should have the `id` of `goldText`.
|
||||
|
||||
```js
|
||||
const stat = document.querySelectorAll('.stat')[2];
|
||||
const strong = stat?.querySelector('strong');
|
||||
const span = strong?.querySelector('span');
|
||||
assert.equal(span?.id, 'goldText');
|
||||
```
|
||||
|
||||
Your third `span` element should be wrapped around the text `50`.
|
||||
|
||||
```js
|
||||
const stat = document.querySelectorAll('.stat')[2];
|
||||
const strong = stat?.querySelector('strong');
|
||||
const span = strong?.querySelector('span');
|
||||
assert.equal(span.innerText, '50');
|
||||
```
|
||||
|
||||
The text of your third `.stat` element should still be `Gold: 50`.
|
||||
|
||||
```js
|
||||
const stat = document.querySelectorAll('.stat')[2];
|
||||
assert.equal(stat.innerText, 'Gold: 50');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
--fcc-editable-region--
|
||||
<span class="stat">XP: 0</span>
|
||||
<span class="stat">Health: 100</span>
|
||||
<span class="stat">Gold: 50</span>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div id="controls"></div>
|
||||
<div id="monsterStats"></div>
|
||||
<div id="text"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,99 @@
|
||||
---
|
||||
id: 62a23cb9bc467a147516b500
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For your `#controls` element, create three `button` elements. The first should have the `id` set to `button1`, and the text `Go to store`. The second should have the `id` set to `button2`, and the text `Go to cave`. The third should have the `id` set to `button3`, and the text `Fight dragon`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add three `button` elements to your `#controls` element.
|
||||
|
||||
```js
|
||||
const buttons = document.querySelectorAll('#controls > button');
|
||||
assert.exists(buttons);
|
||||
assert.equal(buttons.length, 3);
|
||||
```
|
||||
|
||||
Your first button should have the `id` set to `button1`.
|
||||
|
||||
```js
|
||||
const buttons = document.querySelectorAll('#controls > button');
|
||||
const button1 = buttons[0];
|
||||
assert.equal(button1.id, 'button1');
|
||||
```
|
||||
|
||||
Your first button should have the text `Go to store`.
|
||||
|
||||
```js
|
||||
const buttons = document.querySelectorAll('#controls > button');
|
||||
const button1 = buttons[0];
|
||||
assert.equal(button1.innerText, 'Go to store');
|
||||
```
|
||||
|
||||
Your second button should have the `id` set to `button2`.
|
||||
|
||||
```js
|
||||
const buttons = document.querySelectorAll('#controls > button');
|
||||
const button2 = buttons[1];
|
||||
assert.equal(button2.id, 'button2');
|
||||
```
|
||||
|
||||
Your second button should have the text `Go to cave`.
|
||||
|
||||
```js
|
||||
const buttons = document.querySelectorAll('#controls > button');
|
||||
const button2 = buttons[1];
|
||||
assert.equal(button2.innerText, 'Go to cave');
|
||||
```
|
||||
|
||||
Your third button should have the `id` set to `button3`.
|
||||
|
||||
```js
|
||||
const buttons = document.querySelectorAll('#controls > button');
|
||||
const button3 = buttons[2];
|
||||
assert.equal(button3.id, 'button3');
|
||||
```
|
||||
|
||||
Your third button should have the text `Fight dragon`.
|
||||
|
||||
```js
|
||||
const buttons = document.querySelectorAll('#controls > button');
|
||||
const button3 = buttons[2];
|
||||
assert.equal(button3.innerText, 'Fight dragon');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div id="controls">
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div id="monsterStats"></div>
|
||||
<div id="text"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,104 @@
|
||||
---
|
||||
id: 62a23d1c5f1c93161f3582ae
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Similar to your `#stats` element, your `#monsterStats` element needs two `span` elements. Give them the class `stat` and give the first element the text `Monster Name: ` and the second the text `Health: `. After the text in each, add a `strong` element with an empty nested `span` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `monsterStats` element should have two `span` elements.
|
||||
|
||||
```js
|
||||
const spans = document.querySelectorAll(`#monsterStats > span`);
|
||||
assert.equal(spans.length, 2);
|
||||
```
|
||||
|
||||
Your new `span` elements should both have a `class` value of `stat`.
|
||||
|
||||
```js
|
||||
const spans = document.querySelectorAll(`#monsterStats > span`);
|
||||
assert.equal(spans[0].className, 'stat');
|
||||
assert.equal(spans[1].className, 'stat');
|
||||
```
|
||||
|
||||
Your first `span` element should have the text `Monster Name: `. Make sure the spacing is correct.
|
||||
|
||||
```js
|
||||
const spans = document.querySelectorAll(`#monsterStats > span`);
|
||||
assert.equal(spans[0].innerText, 'Monster Name: ');
|
||||
```
|
||||
|
||||
Your second `span` element should have the text `Health: `. Make sure the spacing is correct.
|
||||
|
||||
```js
|
||||
const spans = document.querySelectorAll(`#monsterStats > span`);
|
||||
assert.equal(spans[1].textContent, 'Health: ');
|
||||
```
|
||||
|
||||
Your first `span` element should have a `strong` element with an empty nested `span` element.
|
||||
|
||||
```js
|
||||
const spans = document.querySelectorAll(`#monsterStats > span`);
|
||||
const strong = spans[0]?.querySelector('strong');
|
||||
const span = strong?.querySelector('span');
|
||||
assert.exists(strong);
|
||||
assert.exists(span);
|
||||
```
|
||||
|
||||
Your second `span` element should have a `strong` element with an empty nested `span` element.
|
||||
|
||||
```js
|
||||
const spans = document.querySelectorAll(`#monsterStats > span`);
|
||||
const strong = spans[1]?.querySelector('strong');
|
||||
const span = strong?.querySelector('span');
|
||||
assert.exists(strong);
|
||||
assert.exists(span);
|
||||
```
|
||||
|
||||
Your `strong` and `span` elements should come after the text.
|
||||
|
||||
```js
|
||||
const spans = document.querySelectorAll(`#monsterStats > span`);
|
||||
assert.match(spans[0].innerHTML, /Monster Name: <strong>/);
|
||||
assert.match(spans[1].innerHTML, /Health: <strong>/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div id="monsterStats">
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div id="text"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,59 @@
|
||||
---
|
||||
id: 62a2401b9842721796b72850
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give your `#text` element the following text:
|
||||
|
||||
> 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.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `#text` element should have the above quoted text.
|
||||
|
||||
```js
|
||||
const text = document.querySelector('#text');
|
||||
assert.equal(text.innerText, "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.");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div id="text">
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 62a24068d60b671847d1d4e2
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now we need some quick styling. Start by giving the `body` a `background-color` set to `darkblue`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `body` selector.
|
||||
|
||||
```js
|
||||
const body = new __helpers.CSSHelp(document).getStyle('body');
|
||||
assert.exists(body);
|
||||
```
|
||||
|
||||
Your `body` selector should have a `background-color` property set to `darkblue`.
|
||||
|
||||
```js
|
||||
const background = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color');
|
||||
assert.equal(background, 'darkblue');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,86 @@
|
||||
---
|
||||
id: 62a2409897ec621942234cf6
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `#text` element a `background-color` of `black`, a `color` of `white`, and `10px` of padding on all sides.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `#text` selector.
|
||||
|
||||
```js
|
||||
const text = new __helpers.CSSHelp(document).getStyle('#text');
|
||||
assert.exists(text);
|
||||
```
|
||||
|
||||
Your `#text` element should have a `background-color` of `black`.
|
||||
|
||||
```js
|
||||
const background = new __helpers.CSSHelp(document).getStyle('#text')?.getPropertyValue('background-color');
|
||||
assert.equal(background, 'black');
|
||||
```
|
||||
|
||||
Your `#text` element should have a `color` of `white`.
|
||||
|
||||
```js
|
||||
const color = new __helpers.CSSHelp(document).getStyle('#text')?.getPropertyValue('color');
|
||||
assert.equal(color, 'white');
|
||||
```
|
||||
|
||||
Your `#text` element should have `10px` of padding on all sides.
|
||||
|
||||
```js
|
||||
const padding = new __helpers.CSSHelp(document).getStyle('#text')?.getPropertyValue('padding');
|
||||
assert.equal(padding, '10px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,113 @@
|
||||
---
|
||||
id: 62a240c67f3dbb1a1e6d95ee
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give your `#game` a maximum width of `500px` and a maximum height of `400px`. Set the `background-color` to `lightgray` and the `color` to `white`. Finally, use margins to center it and give it `10px` of padding on all four sides.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `#game` selector.
|
||||
|
||||
```js
|
||||
const game = new __helpers.CSSHelp(document).getStyle('#game');
|
||||
assert.exists(game);
|
||||
```
|
||||
|
||||
Your `#game` selector should have a `max-width` of `500px`.
|
||||
|
||||
```js
|
||||
const maxWidth = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('max-width');
|
||||
assert.equal(maxWidth, '500px');
|
||||
```
|
||||
|
||||
Your `#game` selector should have a `max-height` of `400px`.
|
||||
|
||||
```js
|
||||
const maxHeight = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('max-height');
|
||||
assert.equal(maxHeight, '400px');
|
||||
```
|
||||
|
||||
Your `#game` selector should have a `background-color` of `lightgray`.
|
||||
|
||||
```js
|
||||
const background = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('background-color');
|
||||
assert.equal(background, 'lightgray');
|
||||
```
|
||||
|
||||
Your `#game` selector should have a `color` of `white`.
|
||||
|
||||
```js
|
||||
const color = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('color');
|
||||
assert.equal(color, 'white');
|
||||
```
|
||||
|
||||
Your `#game` selector should have a `margin` set to `0 auto`.
|
||||
|
||||
```js
|
||||
const margin = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('margin');
|
||||
assert.equal(margin, '0px auto');
|
||||
```
|
||||
|
||||
Your `#game` selector should have `10px` of padding on all sides.
|
||||
|
||||
```js
|
||||
const padding = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('padding');
|
||||
assert.equal(padding, '10px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
#text {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,101 @@
|
||||
---
|
||||
id: 62a24128d5e8af1b47ad1aab
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give both your `#controls` and `#stats` elements a `border` of `1px solid black`, a `black` text color, and `5px` of padding.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `#controls, #stats` selector.
|
||||
|
||||
```js
|
||||
const selector = new __helpers.CSSHelp(document).getStyle('#controls, #stats');
|
||||
assert.exists(selector);
|
||||
```
|
||||
|
||||
Your `#controls, #stats` selector should have a `border` of `1px solid black`.
|
||||
|
||||
```js
|
||||
const border = new __helpers.CSSHelp(document).getStyle('#controls, #stats')?.getPropertyValue('border');
|
||||
assert.equal(border, '1px solid black');
|
||||
```
|
||||
|
||||
Your `#controls, #stats` selector should have a `color` of `black`.
|
||||
|
||||
```js
|
||||
const color = new __helpers.CSSHelp(document).getStyle('#controls, #stats')?.getPropertyValue('color');
|
||||
assert.equal(color, 'black');
|
||||
```
|
||||
|
||||
Your `#controls, #stats` selector should have `5px` of padding.
|
||||
|
||||
```js
|
||||
const padding = new __helpers.CSSHelp(document).getStyle('#controls, #stats')?.getPropertyValue('padding');
|
||||
assert.equal(padding, '5px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,127 @@
|
||||
---
|
||||
id: 62a24190868ca51c0b6e83c7
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Hide your `#monsterStats` element for now. Do not change any of the other styling.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `#monsterStats` selector.
|
||||
|
||||
```js
|
||||
const monsterStats = new __helpers.CSSHelp(document).getStyle('#monsterStats');
|
||||
assert.exists(monsterStats);
|
||||
```
|
||||
|
||||
Your `#monsterStats` selector should have a `display` property of `none`.
|
||||
|
||||
```js
|
||||
const display = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('display');
|
||||
assert.equal(display, 'none');
|
||||
```
|
||||
|
||||
Your `#monsterStats` selector should have a `border` of `1px solid black`.
|
||||
|
||||
```js
|
||||
const border = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('border');
|
||||
assert.equal(border, '1px solid black');
|
||||
```
|
||||
|
||||
Your `#monsterStats` selector should have `5px` of padding.
|
||||
|
||||
```js
|
||||
const padding = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('padding');
|
||||
assert.equal(padding, '5px');
|
||||
```
|
||||
|
||||
Your `#monsterStats` selector should have a `color` of `white`.
|
||||
|
||||
```js
|
||||
const color = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('color');
|
||||
assert.equal(color, 'white');
|
||||
```
|
||||
|
||||
Your `#monsterStats` selector should have a `background-color` of `red`.
|
||||
|
||||
```js
|
||||
const background = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('background-color');
|
||||
assert.equal(background, 'red');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#monsterStats {
|
||||
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,101 @@
|
||||
---
|
||||
id: 62a241df03c1f61ce936f5d9
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Finally, give your `.stat` elements a `padding-right` of `10px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.stat` selector.
|
||||
|
||||
```js
|
||||
const stat = new __helpers.CSSHelp(document).getStyle('.stat');
|
||||
assert.exists(stat);
|
||||
```
|
||||
|
||||
Your `.stat` selector should have a `padding-right` of `10px`.
|
||||
|
||||
```js
|
||||
const paddingRight = new __helpers.CSSHelp(document).getStyle('.stat')?.getPropertyValue('padding-right');
|
||||
assert.equal(paddingRight, '10px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,108 @@
|
||||
---
|
||||
id: 62a2509ba163e020bb9d84ea
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you can start writing your JavaScript. Begin by creating a `script` element. This element is used to load JavaScript into your HTML file. You should use an opening `<script>` and closing `</script>` tag.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `script` element.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('script').length, 2);
|
||||
```
|
||||
|
||||
Your `script` element should have an opening tag.
|
||||
|
||||
```js
|
||||
assert.match(code, /<script\s*>/i);
|
||||
```
|
||||
|
||||
Your `script` element should have a closing tag.
|
||||
|
||||
```js
|
||||
assert.match(code, /<\/script\s*>/i);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,108 @@
|
||||
---
|
||||
id: 62a255dae245b52317da824a
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
One of the most powerful tools is your developer console. Depending on your browser, this might be opened by pressing `F12` or `Ctrl+Shift+I`. You can also click the "Console" button above the preview window to see our built-in console. The developer console will include errors that are produced by your code, but you can also use it to see values of variables in your code, which is helpful for debugging.
|
||||
|
||||
Add a `console.log("Hello World");` line between your `script` tags, then click the "Console" button to open our console, and you should see the text `Hello World` in your console.
|
||||
|
||||
Note how the line ends with a semi-colon. It is common practice in JavaScript to end your code lines with semi-colons.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `console.log("Hello World");` line to your code. Don't forget the semi-colon.
|
||||
|
||||
```js
|
||||
assert.match(code, /console\.log\("Hello World"\);/);
|
||||
```
|
||||
|
||||
Your `console.log("Hello World");` line should be between your `script` tags.
|
||||
|
||||
```js
|
||||
assert.match(code, /<script>\s*console\.log\("Hello World"\);\s*<\/script>/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
--fcc-editable-region--
|
||||
<script>
|
||||
|
||||
</script>
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,109 @@
|
||||
---
|
||||
id: 62a257659d0d1e2456f24ba2
|
||||
title: Step 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Before you start writing your project code, you should move it to its own file to keep things organized. Remove your `console.log("Hello World");` line. Then give your now empty `script` element a `src` attribute set to `./script.js`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not have a `console.log("Hello World");` line in your code.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /console\.log\("Hello World"\);/);
|
||||
```
|
||||
|
||||
Your `script` element should have a `src` attribute set to `./script.js`.
|
||||
|
||||
```js
|
||||
const script = document.querySelector("script[data-src$='script.js']");
|
||||
assert.exists(script);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
--fcc-editable-region--
|
||||
<script>
|
||||
console.log("Hello World");
|
||||
</script>
|
||||
--fcc-editable-region--
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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
|
||||
|
||||
```
|
||||
@@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 62a39f5a5790eb27c1e5d4bf
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Your view has been switched to your new `script.js` file. Remember that you can use the tabs above to switch between files.
|
||||
|
||||
Add your `console.log("Hello World");` line to this file, and see it appear in your console.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `console.log("Hello World");` line in your code.
|
||||
|
||||
```js
|
||||
assert.match(code, /console\.log\("Hello World"\);/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<script src="./script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,132 @@
|
||||
---
|
||||
id: 62a3a0a3c0a4b32915d26a6e
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Remove your `console.log("Hello World");` line to begin writing your project code.
|
||||
|
||||
In JavaScript, a <dfn>variable</dfn> is used to hold a value. To use a variable, you must first <dfn>declare</dfn> it. For example, to declare a variable called `camperbot`, you would write:
|
||||
|
||||
```js
|
||||
var camperbot;
|
||||
```
|
||||
|
||||
The `var` keyword tells JavaScript you are declaring a variable. Declare a variable called `xp`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not have a `console.log("Hello World");` line in your code.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /console\.log\("Hello World"\);/);
|
||||
```
|
||||
|
||||
You should use the `var` keyword to declare your variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /var/);
|
||||
```
|
||||
|
||||
You should declare a variable named `xp`.
|
||||
|
||||
```js
|
||||
assert.match(code, /xp/);
|
||||
```
|
||||
|
||||
You should not assign a value to your variable.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /var xp =/);
|
||||
```
|
||||
|
||||
Don't forget the semi-colon at the end of the line.
|
||||
|
||||
```js
|
||||
assert.match(code, /var xp;/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<script src="./script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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--
|
||||
console.log("Hello World");
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,112 @@
|
||||
---
|
||||
id: 62a3a488b24fb32b91155d56
|
||||
title: Step 20
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Variables can be <dfn>assigned</dfn> a value. When you do this while you declare it, this is called <dfn>initialization</dfn>. For example:
|
||||
|
||||
```js
|
||||
var camperbot = "Bot";
|
||||
```
|
||||
|
||||
This would initialize the `camperbot` variable with a value of `Bot`. Initialize your `xp` variable to have a value of `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`xp` should have a value of `0`.
|
||||
|
||||
```js
|
||||
assert.equal(xp, 0);
|
||||
```
|
||||
|
||||
You should initialize the `xp` variable to `0`. Don't forget the semi-colon at the end of the line.
|
||||
|
||||
```js
|
||||
assert.match(code, /var\s+xp\s*=\s*0\s*;/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<script src="./script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,136 @@
|
||||
---
|
||||
id: 62a3a75d8466a12e009eff76
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Initialize another variable called `health` with a value of `100`, and a variable called `gold` with a value of `50`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `var` to declare a variable called `health`.
|
||||
|
||||
```js
|
||||
assert.match(code, /var health/);
|
||||
```
|
||||
|
||||
You should initialize a variable called `health` with a value of `100`.
|
||||
|
||||
```js
|
||||
assert.match(code, /var health\s?=\s?100/);
|
||||
```
|
||||
|
||||
You should use `var` to declare a variable called `gold`.
|
||||
|
||||
```js
|
||||
assert.match(code, /var gold/);
|
||||
```
|
||||
|
||||
You should initialize a variable called `gold` with a value of `50`.
|
||||
|
||||
```js
|
||||
assert.match(code, /var gold\s?=\s?50/);
|
||||
```
|
||||
|
||||
`health` should have a value of `100`.
|
||||
|
||||
```js
|
||||
assert.equal(health, 100);
|
||||
```
|
||||
|
||||
`gold` should have a value of `50`.
|
||||
|
||||
```js
|
||||
assert.equal(gold, 50);
|
||||
```
|
||||
|
||||
`xp` should still have a value of `0`.
|
||||
|
||||
```js
|
||||
assert.equal(xp, 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<script src="./script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,122 @@
|
||||
---
|
||||
id: 62a3a7e4f1060e2fc5ffb34b
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create another variable called `currentWeapon` and set it to 0.
|
||||
|
||||
When a variable name has multiple words, the convention in JavaScript is to use what's called <dfn>camelCase</dfn>. The first word is lowercase, and the first letter of every following word is uppercase.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `var` to declare a variable called `currentWeapon`.
|
||||
|
||||
```js
|
||||
assert.match(code, /var currentweapon/i);
|
||||
```
|
||||
|
||||
You should use camelCase to name your variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /currentWeapon/);
|
||||
```
|
||||
|
||||
Your `currentWeapon` variable should be set to `0`.
|
||||
|
||||
```js
|
||||
assert.equal(currentWeapon, 0);
|
||||
```
|
||||
|
||||
You should initialize your variable to `0`.
|
||||
|
||||
```js
|
||||
assert.match(code, /var currentWeapon\s?=\s?0/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<script src="./script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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;
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,138 @@
|
||||
---
|
||||
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
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<script src="./script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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--
|
||||
```
|
||||
@@ -0,0 +1,115 @@
|
||||
---
|
||||
id: 62a3b3eab50e193608c19fc6
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Using the `let` keyword, declare a variable called `fighting` but do not initialize it with a value. Remember to end your line with a semi-colon.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `let` to declare a variable `fighting`.
|
||||
|
||||
```js
|
||||
assert.match(code, /let fighting/);
|
||||
```
|
||||
|
||||
Your `fighting` variable should not have a value.
|
||||
|
||||
```js
|
||||
assert.isUndefined(fighting);
|
||||
```
|
||||
|
||||
You should not assign a value to your `fighting` variable. Don't forget the semi-colon at the end of the line.
|
||||
|
||||
```js
|
||||
assert.match(code, /let fighting;/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<script src="./script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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--
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,140 @@
|
||||
---
|
||||
id: 62a3b41c9494f937560640ab
|
||||
title: Step 25
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Declare two more variables named `monsterHealth` and `inventory`, but do not initialize them.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `let` to declare your `monsterHealth` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /let monsterHealth/i);
|
||||
```
|
||||
|
||||
You should use camelCase to name your `monsterHealth` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /monsterHealth/);
|
||||
```
|
||||
|
||||
`monsterHealth` should not have a value.
|
||||
|
||||
```js
|
||||
assert.isUndefined(monsterHealth);
|
||||
```
|
||||
|
||||
You should not assign a value to your `monsterHealth` variable. Remember your semi-colon.
|
||||
|
||||
```js
|
||||
assert.match(code, /let monsterHealth;/);
|
||||
```
|
||||
|
||||
You should use `let` to declare your `inventory` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /let inventory/i);
|
||||
```
|
||||
|
||||
`inventory` should not have a value.
|
||||
|
||||
```js
|
||||
assert.isUndefined(inventory);
|
||||
```
|
||||
|
||||
You should not assign a value to your `inventory` variable. Remember your semi-colon.
|
||||
|
||||
```js
|
||||
assert.match(code, /let inventory;/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<script src="./script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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--
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,118 @@
|
||||
---
|
||||
id: 62a3b49686792938718b90d3
|
||||
title: Step 26
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The variables you have assigned have all had values that are numbers. JavaScript has multiple different data types. The next one you will be use is the <dfn>string</dfn>. Strings are used to store things like words or text. Strings are surrounded with double quotes, single quotes, or backticks. Here is an example of declaring a variable with a string:
|
||||
|
||||
```js
|
||||
let developer = "Naomi";
|
||||
```
|
||||
|
||||
Assign the `inventory` variable to have the value of `stick`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set `inventory` to the string `stick`.
|
||||
|
||||
```js
|
||||
assert.equal(inventory, "stick");
|
||||
```
|
||||
|
||||
You should initialize your `inventory` variable with the string `stick`.
|
||||
|
||||
```js
|
||||
assert.match(code, /let\s+inventory\s*=\s*('|"|`)stick\1/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<script src="./script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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--
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory;
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,142 @@
|
||||
---
|
||||
id: 62a3b506dbaead396f58a701
|
||||
title: Step 27
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The player's inventory in your game will be able to hold multiple items. You will need to use a data type that can do this. An <dfn>array</dfn> can be used to hold multiple values. For example:
|
||||
|
||||
```js
|
||||
let order = ["first", "second", "third"];
|
||||
```
|
||||
|
||||
This is an array which holds three values. Notice how the values are separated by commas. Change your `inventory` variable to be an array with the strings `stick`, `dagger`, and `sword`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `inventory` variable should be an array.
|
||||
|
||||
```js
|
||||
assert.isArray(inventory);
|
||||
```
|
||||
|
||||
Your `inventory` variable should have three values.
|
||||
|
||||
```js
|
||||
assert.lengthOf(inventory, 3);
|
||||
```
|
||||
|
||||
Your `inventory` variable should include the string `stick`.
|
||||
|
||||
```js
|
||||
assert.include(inventory, "stick");
|
||||
```
|
||||
|
||||
Your `inventory` variable should include the string `dagger`.
|
||||
|
||||
```js
|
||||
assert.include(inventory, "dagger");
|
||||
```
|
||||
|
||||
Your `inventory` variable should include the string `sword`.
|
||||
|
||||
```js
|
||||
assert.include(inventory, "sword");
|
||||
```
|
||||
|
||||
Your `inventory` variable should have the values in the correct order.
|
||||
|
||||
```js
|
||||
assert.deepEqual(inventory, ["stick", "dagger", "sword"]);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<script src="./script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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--
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = "stick";
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,118 @@
|
||||
---
|
||||
id: 62a3b5843544ce3a77459c27
|
||||
title: Step 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For now, you want the player to start with just the `stick`. Change the `inventory` array to have `stick` as its only value.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `inventory` variable should still be an array.
|
||||
|
||||
```js
|
||||
assert.isArray(inventory);
|
||||
```
|
||||
|
||||
Your `inventory` variable should only have one value.
|
||||
|
||||
```js
|
||||
assert.lengthOf(inventory, 1);
|
||||
```
|
||||
|
||||
Your `inventory` variable should include the string `stick`.
|
||||
|
||||
```js
|
||||
assert.include(inventory, "stick");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<script src="./script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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--
|
||||
let xp = 0;
|
||||
let health = 100;
|
||||
let gold = 50;
|
||||
let currentWeapon = 0;
|
||||
let fighting;
|
||||
let monsterHealth;
|
||||
let inventory = ["stick", "dagger", "sword"];
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,128 @@
|
||||
---
|
||||
id: 62a3b79d520a7f3d0e25afd6
|
||||
title: Step 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
JavaScript interacts with the HTML using the <dfn>Document Object Model</dfn>, or DOM. The DOM is a tree of objects that represents the HTML. You can access the HTML using the `document` variable, which represents your entire HTML document.
|
||||
|
||||
One method for finding specific elements in your HTML is using the `querySelector()` method. The `querySelector()` method takes a CSS selector as an argument and returns the first element that matches that selector. For example, to find the `<h1>` element in your HTML, you would write:
|
||||
|
||||
```js
|
||||
let h1 = document.querySelector("h1");
|
||||
```
|
||||
|
||||
Note that `h1` is a string and matches the CSS selector you would use. Create a `button1` variable and use `querySelector()` to assign it your element with the `id` of `button1`. Remember that CSS `id` selectors are prefixed with a `#`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `let` to declare a `button1` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /let button1/);
|
||||
```
|
||||
|
||||
You should use `document.querySelector()`.
|
||||
|
||||
```js
|
||||
assert.match(code, /document\.querySelector/);
|
||||
```
|
||||
|
||||
You should use the `#button1` selector.
|
||||
|
||||
```js
|
||||
assert.match(code, /querySelector\(('|")#button1\1\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
<script src="./script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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"];
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,116 @@
|
||||
---
|
||||
id: 62a3bb9aeefe4b3fc43c6d7b
|
||||
title: Step 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`button1` is a variable that is not going to be reassigned. If you are not going to assign a new value to a variable, it is best practice to use the `const` keyword to declare it instead of the `let` keyword. This will tell JavaScript to throw an error if you accidentally reassign it.
|
||||
|
||||
Change your `button1` variable to be declared with the `const` keyword.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `button1` variable should be declared with `const`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const button1/);
|
||||
```
|
||||
|
||||
Your `button1` variable should still have the value of your `#button1` element.
|
||||
|
||||
```js
|
||||
assert.deepEqual(button1, document.querySelector("#button1"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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"];
|
||||
|
||||
--fcc-editable-region--
|
||||
let button1 = document.querySelector("#button1");
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,181 @@
|
||||
---
|
||||
id: 62a3bec30ea7f941412512dc
|
||||
title: Step 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Just like you did with the buttons, create variables for the following `id`s and use `querySelector()` to give them the element as a value:
|
||||
|
||||
`text`, `xpText`, `healthText`, `goldText`, `monsterStats`, and `monsterName`.
|
||||
|
||||
Remember to declare these with the `const` keyword, and name the variables to match the `id`s.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should declare a `text` variable with `const`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const text/);
|
||||
```
|
||||
|
||||
Your `text` variable should have the value of your `#text` element.
|
||||
|
||||
```js
|
||||
assert.deepEqual(text, document.querySelector('#text'));
|
||||
```
|
||||
|
||||
You should declare a `xpText` variable with `const`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const xpText/);
|
||||
```
|
||||
|
||||
Your `xpText` variable should have the value of your `#xpText` element.
|
||||
|
||||
```js
|
||||
assert.deepEqual(xpText, document.querySelector('#xpText'));
|
||||
```
|
||||
|
||||
You should declare a `healthText` variable with `const`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const healthText/);
|
||||
```
|
||||
|
||||
Your `healthText` variable should have the value of your `#healthText` element.
|
||||
|
||||
```js
|
||||
assert.deepEqual(healthText, document.querySelector('#healthText'));
|
||||
```
|
||||
|
||||
You should declare a `goldText` variable with `const`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const goldText/);
|
||||
```
|
||||
|
||||
Your `goldText` variable should have the value of your `#goldText` element.
|
||||
|
||||
```js
|
||||
assert.deepEqual(goldText, document.querySelector('#goldText'));
|
||||
```
|
||||
|
||||
You should declare a `monsterStats` variable with `const`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const monsterStats/);
|
||||
```
|
||||
|
||||
Your `monsterStats` variable should have the value of your `#monsterStats` element.
|
||||
|
||||
```js
|
||||
assert.deepEqual(monsterStats, document.querySelector('#monsterStats'));
|
||||
```
|
||||
|
||||
You should declare a `monsterName` variable with `const`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const monsterName/);
|
||||
```
|
||||
|
||||
Your `monsterName` variable should have the value of your `#monsterName` element.
|
||||
|
||||
```js
|
||||
assert.deepEqual(monsterName, document.querySelector('#monsterName'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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"];
|
||||
|
||||
--fcc-editable-region--
|
||||
const button1 = document.querySelector("#button1");
|
||||
const button2 = document.querySelector("#button2");
|
||||
const button3 = document.querySelector("#button3");
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,134 @@
|
||||
---
|
||||
id: 62a3c0ab883fd9435cd5c518
|
||||
title: Step 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Comments allow you to add notes to your code. In JavaScript, single-line comments can be written with `//` and multi-line comments can be written with `/*` and `*/`. For example, here are single and multi-line comments that say "Hello World":
|
||||
|
||||
```js
|
||||
// hello world
|
||||
/*
|
||||
hello world
|
||||
*/
|
||||
```
|
||||
|
||||
Add a single-line comment that says `initialize buttons`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `//` symbol to start a single-line comment.
|
||||
|
||||
```js
|
||||
assert.match(code, /\/\//);
|
||||
```
|
||||
|
||||
Your comment should have the text `initialize buttons`.
|
||||
|
||||
```js
|
||||
assert.match(code, /\/\/\s*initialize buttons/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,134 @@
|
||||
---
|
||||
id: 62a3c2fccf186146b59c6e96
|
||||
title: Step 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`button1` represents your first `button` element. These elements have a special property called `onclick`, which you can use to determine what happens when someone clicks that button. Properties in JavaScript can be accessed in a couple of ways - the first is with <dfn>dot notation</dfn>. Accessing the `onclick` property of a button would look like `button.onclick`.
|
||||
|
||||
Use dot notation to set the `onclick` property of your `button1` to the variable `goStore`. This variable will be something you write later. Note that `button1` is already declared, so you do not need to use `let` or `const`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use dot notation to access the `onclick` property of `button1`.
|
||||
|
||||
```js
|
||||
assert.match(code, /button1\.onclick/);
|
||||
```
|
||||
|
||||
You should not use `let` or `const`.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /(let|const)\s+button1\.onclick/);
|
||||
```
|
||||
|
||||
You should set the `onclick` property of `button1` to the variable `goStore`.
|
||||
|
||||
```js
|
||||
assert.match(code, /button1\.onclick\s*=\s*goStore/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
|
||||
--fcc-editable-region--
|
||||
// initialize buttons
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,151 @@
|
||||
---
|
||||
id: 62a3c4a0e52767482c5202d4
|
||||
title: Step 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Using the same syntax, set the `onclick` properties of `button2` and `button3` to `goCave` and `fightDragon` respectively.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use dot notation to access the `onclick` property of `button2`.
|
||||
|
||||
```js
|
||||
assert.match(code, /button2\.onclick/);
|
||||
```
|
||||
|
||||
You should not use `let` or `const` to assign `button2.onclick`.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /(let|const)\s+button2\.onclick/);
|
||||
```
|
||||
|
||||
You should set the `onclick` property of `button2` to the variable `goCave`.
|
||||
|
||||
```js
|
||||
assert.match(code, /button2\.onclick\s*=\s*goCave/);
|
||||
```
|
||||
|
||||
You should use dot notation to access the `onclick` property of `button3`.
|
||||
|
||||
```js
|
||||
assert.match(code, /button3\.onclick/);
|
||||
```
|
||||
|
||||
You should not use `let` or `const` to assign `button3.onclick`.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /(let|const)\s+button3\.onclick/);
|
||||
```
|
||||
|
||||
You should set the `onclick` property of `button3` to the variable `fightDragon`.
|
||||
|
||||
```js
|
||||
assert.match(code, /button3\.onclick\s*=\s*fightDragon/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
|
||||
--fcc-editable-region--
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,150 @@
|
||||
---
|
||||
id: 62a3c668afc43b4a134cca81
|
||||
title: Step 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Functions are special tools that allow you to run sections of code at specific times. You can declare functions using the `function` keyword. Here is an example of a function called `functionName` - note the opening and closing curly braces. These indicate the section of code that is within the function.
|
||||
|
||||
```js
|
||||
function functionName() {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
Create an empty function named `goStore`. This will match the `goStore` variable you used earlier.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should declare `goStore` with the `function` keyword.
|
||||
|
||||
```js
|
||||
assert.match(code, /function\s*goStore()/);
|
||||
```
|
||||
|
||||
`goStore` should be defined.
|
||||
|
||||
```js
|
||||
assert.isDefined(goStore);
|
||||
```
|
||||
|
||||
`goStore` should be a function.
|
||||
|
||||
```js
|
||||
assert.isFunction(goStore);
|
||||
```
|
||||
|
||||
`goStore` should be an empty function.
|
||||
|
||||
```js
|
||||
assert.equal(goStore.toString(), "function goStore() {}");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,138 @@
|
||||
---
|
||||
id: 62a3c8bf3980c14c438d2aed
|
||||
title: Step 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For now, make your `goStore` function output the message `Going to store.` to the console. For example, here is a function that outputs the message "Hello World".
|
||||
|
||||
```js
|
||||
function functionName() {
|
||||
console.log("Hello World");
|
||||
}
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `console.log("Going to store.");` line in your code. Don't forget the semi-colon.
|
||||
|
||||
```js
|
||||
assert.match(code, /console\.log\(('|")Going to store\.\1\);/);
|
||||
```
|
||||
|
||||
Your `console.log("Going to store.");` line should be in your `goStore` function.
|
||||
|
||||
```js
|
||||
assert.match(goStore.toString(), /console\.log\(('|")Going to store\.\1\);/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
--fcc-editable-region--
|
||||
function goStore() {
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,146 @@
|
||||
---
|
||||
id: 62a3c91a2bab1b4d6fabb726
|
||||
title: Step 40
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now create a `goCave` function that prints `Going to cave.` to the console.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `function` keyword to declare `goCave`.
|
||||
|
||||
```js
|
||||
assert.match(code, /function goCave/);
|
||||
```
|
||||
|
||||
`goCave` should be a function.
|
||||
|
||||
```js
|
||||
assert.isFunction(goCave);
|
||||
```
|
||||
|
||||
You should have a `console.log("Going to cave.");` line in your code.
|
||||
|
||||
```js
|
||||
assert.match(code, /console.log\(('|")Going to cave\.\1\)/);
|
||||
```
|
||||
|
||||
Your `console.log("Going to cave.");` line should be inside your `goCave` function.
|
||||
|
||||
```js
|
||||
assert.match(goCave.toString(), /console.log\(('|")Going to cave\.\1\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function goStore() {
|
||||
console.log("Going to store.");
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,152 @@
|
||||
---
|
||||
id: 62a3cdb11478a34ff4a6470d
|
||||
title: Step 41
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now create a `fightDragon` function that prints `Fighting dragon.` to the console.
|
||||
|
||||
Once you have done that, open your console and try clicking the buttons on your project.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `function` keyword to declare `fightDragon`.
|
||||
|
||||
```js
|
||||
assert.match(code, /function fightDragon/);
|
||||
```
|
||||
|
||||
`fightDragon` should be a function.
|
||||
|
||||
```js
|
||||
assert.isFunction(fightDragon);
|
||||
```
|
||||
|
||||
You should have a `console.log("Fighting dragon.");` line in your code.
|
||||
|
||||
```js
|
||||
assert.match(code, /console.log\(('|")Fighting dragon\.\1\)/);
|
||||
```
|
||||
|
||||
Your `console.log("Fighting dragon.");` line should be inside your `fightDragon` function.
|
||||
|
||||
```js
|
||||
assert.match(fightDragon.toString(), /console.log\(('|")Fighting dragon\.\1\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function goStore() {
|
||||
console.log("Going to store.");
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,164 @@
|
||||
---
|
||||
id: 62a3cfc8328d3351b95d4f61
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `innerText` property controls the text that appears in an HTML element. For example:
|
||||
|
||||
```js
|
||||
const info = document.querySelector("#info");
|
||||
info.innerText = "Hello World";
|
||||
```
|
||||
|
||||
This code would change the element assigned to the `div` variable to have the text `Hello World`.
|
||||
|
||||
When a player clicks your `Go to store` button, you want to change the buttons and text. Remove the code inside the `goStore` function and add a line that updates the text of `button1` to say `Buy 10 health (10 gold)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not have a `console.log("Going to store.");` line in your code.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /console.log\(('|")Going to store\.\1\)/);
|
||||
```
|
||||
|
||||
You should use dot notation to access the `innerText` property of `button1`.
|
||||
|
||||
```js
|
||||
assert.match(code, /button1\.innerText/);
|
||||
```
|
||||
|
||||
You should not use `let` or `const` to access the `innerText` property of `button1`.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /(let|const)\s+button1.innerText/);
|
||||
```
|
||||
|
||||
You should update the `innerText` property of `button1` to be `Buy 10 health (10 gold)`.
|
||||
|
||||
```js
|
||||
assert.match(code, /button1\.innerText\s*=\s*('|")Buy 10 health \(10 gold\)\1/);
|
||||
```
|
||||
|
||||
You should update the `innerText` property within your `goStore` function.
|
||||
|
||||
```js
|
||||
assert.match(goStore.toString(), /button1\.innerText\s*=\s*('|")Buy 10 health \(10 gold\)\1/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.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");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
--fcc-editable-region--
|
||||
function goStore() {
|
||||
console.log("Going to store.");
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,176 @@
|
||||
---
|
||||
id: 62a7beb1ad61211ac153707f
|
||||
title: Step 43
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now add a line that updates the text of `button2` to say `Buy weapon (30 gold)` and update the text of `button3` to say `Go to town square`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use dot notation to access the `innerText` property of `button2`.
|
||||
|
||||
```js
|
||||
assert.match(code, /button2\.innerText/);
|
||||
```
|
||||
|
||||
You should not use `let` or `const` to access the `innerText` property of `button2`.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /(let|const)\s+button2.innerText/);
|
||||
```
|
||||
|
||||
You should update the `innerText` property of `button2` to be `Buy weapon (30 gold)`.
|
||||
|
||||
```js
|
||||
assert.match(code, /button2\.innerText\s*=\s*('|")Buy weapon \(30 gold\)\1/);
|
||||
```
|
||||
|
||||
You should update the `innerText` property within your `goStore` function.
|
||||
|
||||
```js
|
||||
assert.match(goStore.toString(), /button2\.innerText\s*=\s*('|")Buy weapon \(30 gold\)\1/);
|
||||
```
|
||||
|
||||
You should use dot notation to access the `innerText` property of `button3`.
|
||||
|
||||
```js
|
||||
assert.match(code, /button3\.innerText/);
|
||||
```
|
||||
|
||||
You should not use `let` or `const` to access the `innerText` property of `button3`.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /(let|const)\s+button3.innerText/);
|
||||
```
|
||||
|
||||
You should update the `innerText` property of `button3` to be `Go to town square`.
|
||||
|
||||
```js
|
||||
assert.match(code, /button3\.innerText\s*=\s*('|")Go to town square\1/);
|
||||
```
|
||||
|
||||
You should update the `innerText` property within your `goStore` function.
|
||||
|
||||
```js
|
||||
assert.match(goStore.toString(), /button3\.innerText\s*=\s*('|")Go to town square\1/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
--fcc-editable-region--
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,202 @@
|
||||
---
|
||||
id: 62a7bf06d2ad9d1c5024e833
|
||||
title: Step 44
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You will also need to update the functions that run when the buttons are clicked. Update the `onclick` property for each button to run `buyHealth`, `buyWeapon`, and `goTown`, respectively.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use dot notation to access the `onclick` property of `button1`.
|
||||
|
||||
```js
|
||||
assert.match(code, /button1\.onclick/);
|
||||
```
|
||||
|
||||
You should not use `let` or `const` to access the `onclick` property of `button1`.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /(let|const)\s+button1.onclick/);
|
||||
```
|
||||
|
||||
You should set the `onclick` property of `button1` to be `buyHealth`.
|
||||
|
||||
```js
|
||||
assert.match(code, /button1\.onclick\s*=\s*buyHealth/);
|
||||
```
|
||||
|
||||
You should set the `onclick` property of `button1` in your `goStore` function.
|
||||
|
||||
```js
|
||||
assert.match(goStore.toString(), /button1\.onclick\s*=\s*buyHealth/);
|
||||
```
|
||||
|
||||
You should use dot notation to access the `onclick` property of `button2`.
|
||||
|
||||
```js
|
||||
assert.match(code, /button2\.onclick/);
|
||||
```
|
||||
|
||||
You should not use `let` or `const` to access the `onclick` property of `button2`.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /(let|const)\s+button2.onclick/);
|
||||
```
|
||||
|
||||
You should set the `onclick` property of `button2` to be `buyWeapon`.
|
||||
|
||||
```js
|
||||
assert.match(code, /button2\.onclick\s*=\s*buyWeapon/);
|
||||
```
|
||||
|
||||
You should set the `onclick` property of `button2` in your `goStore` function.
|
||||
|
||||
```js
|
||||
assert.match(goStore.toString(), /button2\.onclick\s*=\s*buyWeapon/);
|
||||
```
|
||||
|
||||
You should use dot notation to access the `onclick` property of `button3`.
|
||||
|
||||
```js
|
||||
assert.match(code, /button3\.onclick/);
|
||||
```
|
||||
|
||||
You should not use `let` or `const` to access the `onclick` property of `button3`.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /(let|const)\s+button3.onclick/);
|
||||
```
|
||||
|
||||
You should set the `onclick` property of `button3` to be `goTown`.
|
||||
|
||||
```js
|
||||
assert.match(code, /button3\.onclick\s*=\s*goTown/);
|
||||
```
|
||||
|
||||
You should set the `onclick` property of `button3` in your `goStore` function.
|
||||
|
||||
```js
|
||||
assert.match(goStore.toString(), /button3\.onclick\s*=\s*goTown/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
--fcc-editable-region--
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,157 @@
|
||||
---
|
||||
id: 62a7bfabe119461eb13ccbd6
|
||||
title: Step 45
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you need to modify your display text. Change the `innerText` of the `text` to be `You enter the store.`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use dot notation to access the `innerText` propertry of `text`.
|
||||
|
||||
```js
|
||||
assert.match(code, /text\.innerText/);
|
||||
```
|
||||
|
||||
You should not use `let` or `const` to access the `innerText` property of `text`.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /(let|const)\s+text.innerText/);
|
||||
```
|
||||
|
||||
You should update the `innerText` property of `text` to be `You enter the store.`.
|
||||
|
||||
```js
|
||||
assert.match(code, /text\.innerText\s*=\s*('|")You enter the store.\1/);
|
||||
```
|
||||
|
||||
You should update the `innerText` property within your `goStore` function.
|
||||
|
||||
```js
|
||||
assert.match(goStore.toString(), /text\.innerText\s*=\s*('|")You enter the store.\1/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
--fcc-editable-region--
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,172 @@
|
||||
---
|
||||
id: 62a7bfd9179b7f1f6a15fb1e
|
||||
title: Step 46
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create three new empty functions called `buyHealth`, `buyWeapon`, and `goTown`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should declare `buyHealth` with the `function` keyword.
|
||||
|
||||
```js
|
||||
assert.match(code, /function buyHealth/);
|
||||
```
|
||||
|
||||
You should declare `buyWeapon` with the `function` keyword.
|
||||
|
||||
```js
|
||||
assert.match(code, /function buyWeapon/);
|
||||
```
|
||||
|
||||
You should declare `goTown` with the `function` keyword.
|
||||
|
||||
```js
|
||||
assert.match(code, /function goTown/);
|
||||
```
|
||||
|
||||
`buyHealth` should be an empty function.
|
||||
|
||||
```js
|
||||
assert.equal(buyHealth.toString(), 'function buyHealth() {}');
|
||||
```
|
||||
|
||||
`buyWeapon` should be an empty function.
|
||||
|
||||
```js
|
||||
assert.equal(buyWeapon.toString(), 'function buyWeapon() {}');
|
||||
```
|
||||
|
||||
`goTown` should be an empty function.
|
||||
|
||||
```js
|
||||
assert.equal(goTown.toString(), 'function goTown() {}');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,162 @@
|
||||
---
|
||||
id: 62a7c011eef9fb2084b966db
|
||||
title: Step 47
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Move your `goTown` function above your `goStore` function. Then copy and paste the contents of the `goStore` function into the `goTown` function.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `goTown` function should come before your `goStore` function.
|
||||
|
||||
```js
|
||||
const goTown = code.split(" ").indexOf("goTown()");
|
||||
const goStore = code.split(" ").indexOf("goStore()");
|
||||
assert.isBelow(goTown, goStore);
|
||||
```
|
||||
|
||||
Your `goTown` function should have the same contents as your `goStore` function.
|
||||
|
||||
```js
|
||||
const goTownString = goTown.toString().replace("goTown", "");
|
||||
const goStoreString = goStore.toString().replace("goStore", "");
|
||||
assert.equal(goTownString, goStoreString);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
--fcc-editable-region--
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,194 @@
|
||||
---
|
||||
id: 62a7c071219da921758a35bb
|
||||
title: Step 48
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In your `goTown` function, update your button `innerText` properties to be `Go to store`, `Go to cave`, and `Fight dragon`. Update your `onclick` properties to be `goStore`, `goCave`, and `fightDragon`, respectively. Finally, update your text's `innerText` property to be `You are in the town square. You see a sign that says Store.`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `button1.innerText` property to be `Go to store` in your `goTown` function.
|
||||
|
||||
```js
|
||||
assert.match(goTown.toString(), /button1\.innerText\s*=\s*('|")Go to store\1/);
|
||||
```
|
||||
|
||||
You should set the `button2.innerText` property to be `Go to cave` in your `goTown` function.
|
||||
|
||||
```js
|
||||
assert.match(goTown.toString(), /button2\.innerText\s*=\s*('|")Go to cave\1/);
|
||||
```
|
||||
|
||||
You should set the `button3.innerText` property to be `Fight dragon` in your `goTown` function.
|
||||
|
||||
```js
|
||||
assert.match(goTown.toString(), /button3\.innerText\s*=\s*('|")Fight dragon\1/);
|
||||
```
|
||||
|
||||
You should set the `button1.onclick` property to be `goStore` in your `goTown` function.
|
||||
|
||||
```js
|
||||
assert.match(goTown.toString(), /button1\.onclick\s*=\s*goStore/);
|
||||
```
|
||||
|
||||
You should set the `button2.onclick` property to be `goCave` in your `goTown` function.
|
||||
|
||||
```js
|
||||
assert.match(goTown.toString(), /button2\.onclick\s*=\s*goCave/);
|
||||
```
|
||||
|
||||
You should set the `button3.onclick` property to be `fightDragon` in your `goTown` function.
|
||||
|
||||
```js
|
||||
assert.match(goTown.toString(), /button3\.onclick\s*=\s*fightDragon/);
|
||||
```
|
||||
|
||||
You should set the `text.innerText` property to be `You are in the town square. You see a sign that says Store.` in your `goTown` function.
|
||||
|
||||
```js
|
||||
assert.match(goTown.toString(), /text\.innerText\s*=\s*('|")You are in the town square. You see a sign that says Store\.\1/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
--fcc-editable-region--
|
||||
function goTown() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,164 @@
|
||||
---
|
||||
id: 62a7c23e6b511f22ed71197a
|
||||
title: Step 49
|
||||
challengeType: 0
|
||||
dashedName: step-49
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You need to wrap the text `Store` in double quotes. Because your string is already wrapped in double quotes, you'll need to escape the quotes around `Store`. You can escape them with a backslash `\`. Here is an example:
|
||||
|
||||
```js
|
||||
const escapedString = "Naomi likes to play \"Zelda\" sometimes.";
|
||||
```
|
||||
|
||||
Wrap the text `Store` in double quotes within your `text.innerText` line.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should wrap the text `Store` in double quotes.
|
||||
|
||||
```js
|
||||
assert.match(goTown.toString(), /text\.innerText\s*=\s*"You are in the town square. You see a sign that says \\"Store\\"."/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
--fcc-editable-region--
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says Store.";
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,180 @@
|
||||
---
|
||||
id: 62a7cc99577fbf25ee7a7d76
|
||||
title: Step 50
|
||||
challengeType: 0
|
||||
dashedName: step-50
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You have repetition in the `goTown` and `goStore` functions. When you have repetition in your code, this is a sign that you need another function. Functions can take parameters, which are values that are given to the function each time it is run. Here is a function that takes a parameter called `param`:
|
||||
|
||||
```js
|
||||
function myFunction(param) {
|
||||
console.log(param);
|
||||
}
|
||||
```
|
||||
|
||||
Create an empty `update` function that takes a parameter called `location`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `function` keyword to declare `update`.
|
||||
|
||||
```js
|
||||
assert.match(code, /function\s+update/);
|
||||
```
|
||||
|
||||
Your `update` function should take a parameter called `location`.
|
||||
|
||||
```js
|
||||
assert.match(update.toString(), /update\(location\)/);
|
||||
```
|
||||
|
||||
Your `update` function should be empty.
|
||||
|
||||
```js
|
||||
assert.equal(update.toString(), function update(location) {});
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,176 @@
|
||||
---
|
||||
id: 62a8a929e4260d08093756d2
|
||||
title: Step 51
|
||||
challengeType: 0
|
||||
dashedName: step-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create a variable called `locations` and set it to an empty array.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `const` to declare `locations`.
|
||||
|
||||
```js
|
||||
assert.match(code, /const locations/);
|
||||
```
|
||||
|
||||
`locations` should be an array.
|
||||
|
||||
|
||||
```js
|
||||
assert.isArray(locations);
|
||||
```
|
||||
|
||||
`locations` should be empty.
|
||||
|
||||
```js
|
||||
assert.equal(locations.length, 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,171 @@
|
||||
---
|
||||
id: 62a8a9d876b2580943ba9351
|
||||
title: Step 52
|
||||
challengeType: 0
|
||||
dashedName: step-52
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You previously used an array to store strings. But arrays can store any data type. This time, your array will be storing objects. Objects are similar to arrays, but with a few differences. One difference is that objects use properties, or keys, to access and modify data.
|
||||
|
||||
Objects are indicated by curly braces. An empty object would look like `{}`. Add an empty object to your `locations` array.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your first value of `locations` should be an object.
|
||||
|
||||
```js
|
||||
assert.isObject(locations[0]);
|
||||
```
|
||||
|
||||
Your first value of `locations` should be an empty object.
|
||||
|
||||
```js
|
||||
assert.deepEqual(locations[0], {});
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
--fcc-editable-region--
|
||||
const locations = [];
|
||||
--fcc-editable-region--
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,187 @@
|
||||
---
|
||||
id: 62a8aa98a8289d0a698eee1d
|
||||
title: Step 53
|
||||
challengeType: 0
|
||||
dashedName: step-53
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Object <dfn>properties</dfn> are written as `key: value` pairs, where `key` is the name of the property (or the key), and `value` is the value that property holds. For example, here is an object with a key of `name` set to `Quincy Larson`.
|
||||
|
||||
```js
|
||||
{
|
||||
name: "Quincy Larson"
|
||||
}
|
||||
```
|
||||
|
||||
Add a `name` property to your empty object and give it a value of `town square`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your first value of `locations` should be an object.
|
||||
|
||||
```js
|
||||
assert.isObject(locations[0]);
|
||||
```
|
||||
|
||||
Your first value of `locations` should have a `name` property.
|
||||
|
||||
```js
|
||||
assert.isDefined(locations[0].name);
|
||||
```
|
||||
|
||||
Your first value of `locations` should have a `name` property with a value of `town square`.
|
||||
|
||||
```js
|
||||
assert.equal(locations[0].name, "town square");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
--fcc-editable-region--
|
||||
const locations = [
|
||||
{
|
||||
|
||||
}
|
||||
];
|
||||
--fcc-editable-region--
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,200 @@
|
||||
---
|
||||
id: 62a8ab0e27cbaf0b54ba8a42
|
||||
title: Step 54
|
||||
challengeType: 0
|
||||
dashedName: step-54
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Just like array values, object properties are separated by a comma. Add a comma after your `name` property and add a `button text` property with the value of an empty array. Note that because the property name has more than one word, you'll need to surround it in quotes.
|
||||
|
||||
For example:
|
||||
|
||||
```js
|
||||
{
|
||||
name: "Naomi",
|
||||
"favorite color": "purple"
|
||||
}
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Your first `locations` value should be an object.
|
||||
|
||||
```js
|
||||
assert.isObject(locations[0]);
|
||||
```
|
||||
|
||||
Your first `locations` value should have a `button text` property.
|
||||
|
||||
```js
|
||||
assert.isDefined(locations[0]["button text"]);
|
||||
```
|
||||
|
||||
Your first `locations` value should have a `button text` property with a value that is an array.
|
||||
|
||||
```js
|
||||
assert.isArray(locations[0]["button text"]);
|
||||
```
|
||||
|
||||
Your first `locations` value should have a `button text` property with a value that is an empty array.
|
||||
|
||||
```js
|
||||
assert.equal(locations[0]["button text"].length, 0);
|
||||
```
|
||||
|
||||
You should not remove or change the `name` property.
|
||||
|
||||
```js
|
||||
assert.equal(locations[0].name, "town square");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
--fcc-editable-region--
|
||||
const locations = [
|
||||
{
|
||||
name: "town square"
|
||||
}
|
||||
];
|
||||
--fcc-editable-region--
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,194 @@
|
||||
---
|
||||
id: 62a8ac194679e60cb561b0a8
|
||||
title: Step 55
|
||||
challengeType: 0
|
||||
dashedName: step-55
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give your empty `button text` array three string elements. Use the three strings being assigned to the button `innerText` properties in the `goTown` function. Remember that array values are separated by commas.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `button text` array should have three elements.
|
||||
|
||||
```js
|
||||
assert.lengthOf(locations[0]["button text"], 3);
|
||||
```
|
||||
|
||||
Your `button text` array should have three strings.
|
||||
|
||||
```js
|
||||
assert.isString(locations[0]["button text"][0]);
|
||||
assert.isString(locations[0]["button text"][1]);
|
||||
assert.isString(locations[0]["button text"][2]);
|
||||
```
|
||||
|
||||
The first value in the `button text` array should be "Go to store".
|
||||
|
||||
```js
|
||||
assert.equal(locations[0]["button text"][0], "Go to store");
|
||||
```
|
||||
|
||||
The second value in the `button text` array should be "Go to cave".
|
||||
|
||||
```js
|
||||
assert.equal(locations[0]["button text"][1], "Go to cave");
|
||||
```
|
||||
|
||||
The third value in the `button text` array should be "Fight dragon".
|
||||
|
||||
```js
|
||||
assert.equal(locations[0]["button text"][2], "Fight dragon");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
--fcc-editable-region--
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": []
|
||||
}
|
||||
];
|
||||
--fcc-editable-region--
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,198 @@
|
||||
---
|
||||
id: 62a8ad8e01d7cb0deae5ec66
|
||||
title: Step 56
|
||||
challengeType: 0
|
||||
dashedName: step-56
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create another property in your object called `button functions`. Give this property an array containing the three functions assigned to the `onclick` properties in the `goTown` function. Remember that these functions are variables, not strings, and should not be wrapped in quotes.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your first `locations` object should have a `button functions` property.
|
||||
|
||||
```js
|
||||
assert.isDefined(locations[0]["button functions"]);
|
||||
```
|
||||
|
||||
Your `button functions` property should be an array.
|
||||
|
||||
```js
|
||||
assert.isArray(locations[0]["button functions"]);
|
||||
```
|
||||
|
||||
Your `button functions` property should have three values in it.
|
||||
|
||||
```js
|
||||
assert.lengthOf(locations[0]["button functions"], 3);
|
||||
```
|
||||
|
||||
Your first `button functions` array value should be the function `goStore`.
|
||||
|
||||
```js
|
||||
assert.equal(locations[0]["button functions"][0], goStore);
|
||||
```
|
||||
|
||||
Your second `button functions` array value should be the function `goCave`.
|
||||
|
||||
```js
|
||||
assert.equal(locations[0]["button functions"][1], goCave);
|
||||
```
|
||||
|
||||
Your third `button functions` array value should be the function `fightDragon`.
|
||||
|
||||
```js
|
||||
assert.equal(locations[0]["button functions"][2], fightDragon);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
--fcc-editable-region--
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"]
|
||||
}
|
||||
];
|
||||
--fcc-editable-region--
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,181 @@
|
||||
---
|
||||
id: 62a8ade9b2f5b30ef0b606c2
|
||||
title: Step 57
|
||||
challengeType: 0
|
||||
dashedName: step-57
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add one final property to the object named `text`. Give this property the final `text.innerText` value from the `goTown` function.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your first `locations` value should have a `text` property.
|
||||
|
||||
```js
|
||||
assert.isDefined(locations[0]["text"]);
|
||||
```
|
||||
|
||||
Your `text` property should be a string.
|
||||
|
||||
```js
|
||||
assert.isString(locations[0]["text"]);
|
||||
```
|
||||
|
||||
Your `text` property should have the value `You are in the town square. You see a sign that says \"Store\".`
|
||||
|
||||
```js
|
||||
assert.equal(locations[0]["text"], "You are in the town square. You see a sign that says \"Store\".");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
--fcc-editable-region--
|
||||
const locations = [
|
||||
{
|
||||
name: "town square",
|
||||
"button text": ["Go to store", "Go to cave", "Fight dragon"],
|
||||
"button functions": [goStore, goCave, fightDragon]
|
||||
}
|
||||
];
|
||||
--fcc-editable-region--
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,235 @@
|
||||
---
|
||||
id: 62a8ae85fcaedc0fddc7ca4f
|
||||
title: Step 58
|
||||
challengeType: 0
|
||||
dashedName: step-58
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add a second object to your `locations` array (remember to separate them with a comma). Following the pattern you used in the first object, create the same properties but use the values from the `goStore` function. Set the `name` property to `store`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `locations` array should have two values.
|
||||
|
||||
```js
|
||||
assert.lengthOf(locations, 2);
|
||||
```
|
||||
|
||||
Both `locations` values should be objects.
|
||||
|
||||
|
||||
```js
|
||||
assert.isObject(locations[0]);
|
||||
assert.isObject(locations[1]);
|
||||
```
|
||||
|
||||
Your second `locations` object should have a `name` property with the value of `store`.
|
||||
|
||||
```js
|
||||
assert.equal(locations[1].name, "store");
|
||||
```
|
||||
|
||||
Your second `locations` object should have a `button text` property which is an array.
|
||||
|
||||
```js
|
||||
assert.isArray(locations[1]["button text"]);
|
||||
```
|
||||
|
||||
Your `button text` property should have the string values `Buy 10 health (10 gold)`, `Buy weapon (30 gold)`, and `Go to town square`.
|
||||
|
||||
```js
|
||||
assert.equal(locations[1]["button text"][0], "Buy 10 health (10 gold)");
|
||||
assert.equal(locations[1]["button text"][1], "Buy weapon (30 gold)");
|
||||
assert.equal(locations[1]["button text"][2], "Go to town square");
|
||||
```
|
||||
|
||||
Your second `locations` object should have a `button functions` property which is an array.
|
||||
|
||||
```js
|
||||
assert.isArray(locations[1]["button functions"]);
|
||||
```
|
||||
|
||||
Your `button functions` property should have the function values `buyHealth`, `buyWeapon`, and `goTown`.
|
||||
|
||||
```js
|
||||
assert.equal(locations[1]["button functions"][0], buyHealth);
|
||||
assert.equal(locations[1]["button functions"][1], buyWeapon);
|
||||
assert.equal(locations[1]["button functions"][2], goTown);
|
||||
```
|
||||
|
||||
Your second `locations` object should have a `text` property which is a string.
|
||||
|
||||
```js
|
||||
assert.isString(locations[1].text);
|
||||
```
|
||||
|
||||
Your second `locations` object should have a `text` property with the value of `You enter the store.`.
|
||||
|
||||
```js
|
||||
assert.equal(locations[1].text, "You enter the store.");
|
||||
```
|
||||
|
||||
You should not modify the first `locations` object.
|
||||
|
||||
```js
|
||||
assert.deepEqual(locations[0], {
|
||||
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\"."
|
||||
});
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
--fcc-editable-region--
|
||||
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\"."
|
||||
}
|
||||
];
|
||||
--fcc-editable-region--
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,224 @@
|
||||
---
|
||||
id: 62a8b0b5053f16111b0b6b5f
|
||||
title: Step 59
|
||||
challengeType: 0
|
||||
dashedName: step-59
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now you can consolidate some of your code. Start by copying the code from inside the `goTown` function and paste it into your `update` function. Then, remove all the code from inside the `goTown` and `goStore` functions.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `update` function should set `button1.innerText` to `Go to store`.
|
||||
|
||||
```js
|
||||
assert.match(update.toString(), /button1\.innerText\s*=\s*('|")Go to store\1/);
|
||||
```
|
||||
|
||||
Your `update` function should set `button2.innerText` to `Go to cave`.
|
||||
|
||||
```js
|
||||
assert.match(update.toString(), /button2\.innerText\s*=\s*('|")Go to cave\1/);
|
||||
```
|
||||
|
||||
Your `update` function should set `button3.innerText` to `Fight dragon`.
|
||||
|
||||
```js
|
||||
assert.match(update.toString(), /button3\.innerText\s*=\s*('|")Fight dragon\1/);
|
||||
```
|
||||
|
||||
Your `update` function should set `button1.onclick` to `goStore`.
|
||||
|
||||
```js
|
||||
assert.match(update.toString(), /button1\.onclick\s*=\s*goStore/);
|
||||
```
|
||||
|
||||
Your `update` function should set `button2.onclick` to `goCave`.
|
||||
|
||||
```js
|
||||
assert.match(update.toString(), /button2\.onclick\s*=\s*goCave/);
|
||||
```
|
||||
|
||||
Your `update` function should set `button3.onclick` to `fightDragon`.
|
||||
|
||||
```js
|
||||
assert.match(update.toString(), /button3\.onclick\s*=\s*fightDragon/);
|
||||
```
|
||||
|
||||
Your `update` function should set `text.innerText` to `You are in the town square. You see a sign that says "Store".`.
|
||||
|
||||
```js
|
||||
assert.match(update.toString(), /text\.innerText\s*=\s*"You are in the town square. You see a sign that says \\"Store\\"\."/);
|
||||
```
|
||||
|
||||
Your `goTown` function should be empty.
|
||||
|
||||
```js
|
||||
assert.match(goTown.toString(), /function goTown\(\) \{\}/);
|
||||
```
|
||||
|
||||
Your `goStore` function should be empty.
|
||||
|
||||
```js
|
||||
assert.match(goStore.toString(), /function goStore\(\) \{\}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
--fcc-editable-region--
|
||||
function update(location) {
|
||||
|
||||
}
|
||||
|
||||
function goTown() {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
button1.innerText = "Buy 10 health (10 gold)";
|
||||
button2.innerText = "Buy weapon (30 gold)";
|
||||
button3.innerText = "Go to town square";
|
||||
button1.onclick = buyHealth;
|
||||
button2.onclick = buyWeapon;
|
||||
button3.onclick = goTown;
|
||||
text.innerText = "You enter the store.";
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,176 @@
|
||||
---
|
||||
id: 62a8b1762b7775124622e1a3
|
||||
title: Step 60
|
||||
challengeType: 0
|
||||
dashedName: step-60
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Instead of assigning the `innerText` and `onclick` properties to specific strings and functions, the `update` function will use data from the `location` that is passed into it. First, that data needs to be passed. Inside the `goTown` function, call the `update` function. Here is an example of calling a function named `myFunction`: `myFunction();`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should call the `update` function in the `goTown` function.
|
||||
|
||||
```js
|
||||
assert.match(goTown.toString(), /update\(\)/);
|
||||
```
|
||||
|
||||
Don't forget your ending semi-colon.
|
||||
|
||||
```js
|
||||
assert.match(goTown.toString(), /update\(\);/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function goTown() {
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function goStore() {
|
||||
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,170 @@
|
||||
---
|
||||
id: 62a8b3cc436db8139cc5fc09
|
||||
title: Step 61
|
||||
challengeType: 0
|
||||
dashedName: step-61
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You now need to pass the `location` argument into the `update` call. You pass arguments by including them within the parentheses of the function call. For example, calling `myFunction` with an `arg` argument would look like: `myFunction(arg)`. Pass your `locations` array into the `update` call.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should pass the `locations` array into the `update` call.
|
||||
|
||||
```js
|
||||
assert.match(goTown.toString(), /update\(locations\);/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function goTown() {
|
||||
update();
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function goStore() {
|
||||
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,190 @@
|
||||
---
|
||||
id: 62a8b6536156c51500739b41
|
||||
title: Step 62
|
||||
challengeType: 0
|
||||
dashedName: step-62
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `locations` array contains two locations: the town square and the store. Currently you are passing that entire array into the update functions. Pass in only the first element of the `locations` array by adding `[0]` at the end of the variable. For example: `myFunction(arg[0]);`.
|
||||
|
||||
This is called <dfn>bracket notation</dfn>. Values in an array are accessed by index. Indices are numerical values and start at 0 - this is called zero-based indexing. `arg[0]` would be the first element in the `arg` array.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use bracket notation with `locations`.
|
||||
|
||||
```js
|
||||
assert.match(code, /locations\[/);
|
||||
```
|
||||
|
||||
You should access the first object in the `locations` array. Remember that arrays are zero-based.
|
||||
|
||||
```js
|
||||
assert.match(code, /locations\[0\]/);
|
||||
```
|
||||
|
||||
You should pass the first object in the `locations` array into the `update` function.
|
||||
|
||||
```js
|
||||
assert.match(code, /update\(locations\[0\]\);/);
|
||||
```
|
||||
|
||||
This call should still be in your `goTown()` function.
|
||||
|
||||
```js
|
||||
assert.match(goTown.toString(), /update\(locations\[0\]\);/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function goTown() {
|
||||
update(locations);
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function goStore() {
|
||||
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,176 @@
|
||||
---
|
||||
id: 62a8b711ab7a12161c7d9b67
|
||||
title: Step 63
|
||||
challengeType: 0
|
||||
dashedName: step-63
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now your `update` function needs to use the argument you pass into it. Inside the `update` function, change the `button1.innerText` assignment to be `location["button text"]`. That uses bracket notation to get the `button text` property of the `location` object passed into the function.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `update` function should use bracket notation to get the `button text` property of the `location` object passed into the function.
|
||||
|
||||
```js
|
||||
assert.match(update.toString(), /location[('|")button text\1]/);
|
||||
```
|
||||
|
||||
You should assign the value of the `button text` property of the `location` object to the `innerText` property of `button1`.
|
||||
|
||||
```js
|
||||
assert.match(update.toString(), /button1\.innerText\s*=\s*location\[('|")button text\1\]/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
--fcc-editable-region--
|
||||
function update(location) {
|
||||
button1.innerText = "Go to store";
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,176 @@
|
||||
---
|
||||
id: 62a8b9770050d217d2247801
|
||||
title: Step 64
|
||||
challengeType: 0
|
||||
dashedName: step-64
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`location["button text"]` is an array with three elements. Change the `button1.innerText` assignment to be the first element of that array instead.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should access the first element of the `button text` property of the `location` argument.
|
||||
|
||||
```js
|
||||
assert.match(update.toString(), /location\[('|")button text\1\]\[0\]/);
|
||||
```
|
||||
|
||||
You should set the `button1.innerText` property to be the first element of the `button text` property of the `location` argument.
|
||||
|
||||
```js
|
||||
assert.match(update.toString(), /button1\.innerText\s*=\s*location\[('|")button text\1\]\[0\]/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
--fcc-editable-region--
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"];
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,188 @@
|
||||
---
|
||||
id: 62a8c0c8313e891a15ec23e7
|
||||
title: Step 65
|
||||
challengeType: 0
|
||||
dashedName: step-65
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now update `button2.innerText` and `button3.innerText` to be assigned the second and third values of the `button text` array, respectively.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should access the second element of the `button text` property of the `location` argument.
|
||||
|
||||
```js
|
||||
assert.match(update.toString(), /location\[('|")button text\1\]\[1\]/);
|
||||
```
|
||||
|
||||
You should set the `button2.innerText` property to be the second element of the `button text` property of the `location` argument.
|
||||
|
||||
```js
|
||||
assert.match(update.toString(), /button2\.innerText\s*=\s*location\[('|")button text\1\]\[1\]/);
|
||||
```
|
||||
|
||||
You should access the third element of the `button text` property of the `location` argument.
|
||||
|
||||
```js
|
||||
assert.match(update.toString(), /location\[('|")button text\1\]\[2\]/);
|
||||
```
|
||||
|
||||
You should set the `button3.innerText` property to be the third element of the `button text` property of the `location` argument.
|
||||
|
||||
```js
|
||||
assert.match(update.toString(), /button3\.innerText\s*=\s*location\[('|")button text\1\]\[2\]/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
--fcc-editable-region--
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = "Go to cave";
|
||||
button3.innerText = "Fight dragon";
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,200 @@
|
||||
---
|
||||
id: 62a8c1154d3ae11aee80353f
|
||||
title: Step 66
|
||||
challengeType: 0
|
||||
dashedName: step-66
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Following the same pattern as you did for the button text, update the three buttons' `onclick` assignments to be the first, second, and third values of the `button functions` array.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should access the first element of the `button functions` property of the `location` argument.
|
||||
|
||||
```js
|
||||
assert.match(update.toString(), /location\[('|")button functions\1\]\[0\]/);
|
||||
```
|
||||
|
||||
You should set the `button1.onclick` property to be the second element of the `button functions` property of the `location` argument.
|
||||
|
||||
```js
|
||||
assert.match(update.toString(), /button1\.onclick\s*=\s*location\[('|")button functions\1\]\[0\]/);
|
||||
```
|
||||
|
||||
You should access the second element of the `button functions` property of the `location` argument.
|
||||
|
||||
```js
|
||||
assert.match(update.toString(), /location\[('|")button functions\1\]\[1\]/);
|
||||
```
|
||||
|
||||
You should set the `button2.onclick` property to be the third element of the `button functions` property of the `location` argument.
|
||||
|
||||
```js
|
||||
assert.match(update.toString(), /button2\.onclick\s*=\s*location\[('|")button functions\1\]\[1\]/);
|
||||
```
|
||||
|
||||
You should access the third element of the `button functions` property of the `location` argument.
|
||||
|
||||
```js
|
||||
assert.match(update.toString(), /location\[('|")button functions\1\]\[2\]/);
|
||||
```
|
||||
|
||||
You should set the `button3.onclick` property to be the third element of the `button functions` property of the `location` argument.
|
||||
|
||||
```js
|
||||
assert.match(update.toString(), /button3\.onclick\s*=\s*location\[('|")button functions\1\]\[2\]/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
--fcc-editable-region--
|
||||
function update(location) {
|
||||
button1.innerText = location["button text"][0];
|
||||
button2.innerText = location["button text"][1];
|
||||
button3.innerText = location["button text"][2];
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
text.innerText = "You are in the town square. You see a sign that says \"Store.\"";
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,176 @@
|
||||
---
|
||||
id: 62a8c151b23bf21bc7c4fcba
|
||||
title: Step 67
|
||||
challengeType: 0
|
||||
dashedName: step-67
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Finally, update the `text.innerText` assignment to equal the `text` from the location object. However, instead of using bracket notation, use <dfn>dot notation</dfn>. Here is an example of accessing the `name` property of an object called `obj`: `obj.name`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use dot notation to access the `text` property of the `location` object.
|
||||
|
||||
```js
|
||||
assert.match(update.toString(), /location\.text/);
|
||||
```
|
||||
|
||||
You should set the `text.innerText` property to be the `text` property of the `location` object.
|
||||
|
||||
```js
|
||||
assert.match(update.toString(), /text\.innerText\s*=\s*location\.text/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
--fcc-editable-region--
|
||||
function update(location) {
|
||||
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 = "You are in the town square. You see a sign that says \"Store\".";
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function goTown() {
|
||||
update(locations[0]);
|
||||
}
|
||||
|
||||
function goStore() {
|
||||
|
||||
}
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,178 @@
|
||||
---
|
||||
id: 62a8c173949f851c83c64756
|
||||
title: Step 68
|
||||
challengeType: 0
|
||||
dashedName: step-68
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now update your `goStore` function to call the `update` function. Pass the second element of the `locations` array as your argument.
|
||||
|
||||
To make sure your refactoring is correct, try clicking your first button again. You should see the same changes to your webpage that you saw earlier.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `goStore` function should call the `update` function.
|
||||
|
||||
```js
|
||||
assert.match(goStore.toString(), /update\(/);
|
||||
```
|
||||
|
||||
Your `goStore` function should pass the second element of the `locations` array as your argument to `update()`.
|
||||
|
||||
```js
|
||||
assert.match(goStore.toString(), /update\(locations\[1\]\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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]);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function goStore() {
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,190 @@
|
||||
---
|
||||
id: 62a8c242b25a531f2909e5bc
|
||||
title: Step 69
|
||||
challengeType: 0
|
||||
dashedName: step-69
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create two more empty functions named `fightSlime` and `fightBeast`. These functions will be used in your upcoming `cave` object.
|
||||
|
||||
# --hints--
|
||||
|
||||
`fightSlime` should be a function.
|
||||
|
||||
```js
|
||||
assert.isFunction(fightSlime);
|
||||
```
|
||||
|
||||
`fightBeast` should be a function.
|
||||
|
||||
```js
|
||||
assert.isFunction(fightBeast);
|
||||
```
|
||||
|
||||
`fightSlime` should be empty.
|
||||
|
||||
```js
|
||||
assert.match(fightSlime.toString(), /function fightSlime\(\) \{\}/);
|
||||
```
|
||||
|
||||
`fightBeast` should be empty.
|
||||
|
||||
```js
|
||||
assert.match(fightBeast.toString(), /function fightBeast\(\) \{\}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
},
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@@ -0,0 +1,234 @@
|
||||
---
|
||||
id: 62a8c2bbbd8aa82052f47c53
|
||||
title: Step 70
|
||||
challengeType: 0
|
||||
dashedName: step-70
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add a third object to the `locations` array. Give it the same properties as the other two objects.
|
||||
|
||||
Set `name` to `cave`. Set `button text` to an array with the strings `Fight slime`, `Fight fanged beast`, and `Go to town square`. Set the `button functions` to an array with the variables `fightSlime`, `fightBeast`, and `goTown`. Set the `text` property to `You enter the cave. You see some monsters.`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have three values in your `locations` array.
|
||||
|
||||
```js
|
||||
console.log(locations);
|
||||
assert.lengthOf(locations, 3);
|
||||
```
|
||||
|
||||
Your third `locations` value should be an object.
|
||||
|
||||
```js
|
||||
assert.isObject(locations[2]);
|
||||
```
|
||||
|
||||
Your third `locations` object should have a `name` property with the value of `cave`.
|
||||
|
||||
```js
|
||||
assert.equal(locations[2].name, "cave");
|
||||
```
|
||||
|
||||
Your third `locations` object should have a `button text` property which is an array.
|
||||
|
||||
```js
|
||||
assert.isArray(locations[2]["button text"]);
|
||||
```
|
||||
|
||||
Your `button text` property should have the string values `Fight slime`, `Fight fanged beast`, and `Go to town square`.
|
||||
|
||||
```js
|
||||
assert.equal(locations[2]["button text"][0], "Fight slime");
|
||||
assert.equal(locations[2]["button text"][1], "Fight fanged beast");
|
||||
assert.equal(locations[2]["button text"][2], "Go to town square");
|
||||
```
|
||||
|
||||
Your third `locations` object should have a `button functions` property which is an array.
|
||||
|
||||
```js
|
||||
assert.isArray(locations[2]["button functions"]);
|
||||
```
|
||||
|
||||
Your `button functions` property should have the function values `fightSlime`, `fightBeast`, and `goTown`.
|
||||
|
||||
```js
|
||||
assert.equal(locations[2]["button functions"][0], fightSlime);
|
||||
assert.equal(locations[2]["button functions"][1], fightBeast);
|
||||
assert.equal(locations[2]["button functions"][2], goTown);
|
||||
```
|
||||
|
||||
Your third `locations` object should have a `text` property which is a string.
|
||||
|
||||
```js
|
||||
assert.isString(locations[2].text);
|
||||
```
|
||||
|
||||
Your third `locations` object should have a `text` property with the value of `You enter the cave. You see some monsters.`.
|
||||
|
||||
```js
|
||||
assert.equal(locations[2].text, "You enter the cave. You see some monsters.");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
},
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,204 @@
|
||||
---
|
||||
id: 62a8c31ec0ec78216a1c36a0
|
||||
title: Step 71
|
||||
challengeType: 0
|
||||
dashedName: step-71
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you have a `cave` location object, update your `goCave` function to call `update` and pass that new `cave` location. Remember that this is the third element in your `locations` array.
|
||||
|
||||
Don't forget to remove your `console.log` call!
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use bracket notation to access the third element in your `locations` array.
|
||||
|
||||
```js
|
||||
assert.match(code, /locations\[2\]/);
|
||||
```
|
||||
|
||||
You should pass the third element in your `locations` array to `update`.
|
||||
|
||||
```js
|
||||
assert.match(code, /update\(locations\[2\]\)/);
|
||||
```
|
||||
|
||||
You should call `update` with the third element in your `locations` array in your `goCave` function.
|
||||
|
||||
```js
|
||||
assert.match(goCave.toString(), /update\(locations\[2\]\)/);
|
||||
```
|
||||
|
||||
You should not have the `console.log` statement in your `goCave` function.
|
||||
|
||||
```js
|
||||
assert.notMatch(goCave.toString(), /console\.log/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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]);
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function goCave() {
|
||||
console.log("Going to cave.");
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,194 @@
|
||||
---
|
||||
id: 62a8c370ad8c68227137e0bc
|
||||
title: Step 72
|
||||
challengeType: 0
|
||||
dashedName: step-72
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that your `store` and `cave` locations are complete, you can code the actions the player takes at those locations. Inside the `buyHealth` function, set `gold` equal to `gold` minus `10`.
|
||||
|
||||
For example, here is how you would set `num` equal to `5` less than `num`: `num = num - 5;`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should subtract `10` from `gold`.
|
||||
|
||||
```js
|
||||
assert.match(code, /gold\s*=\s*gold\s*-\s*10/);
|
||||
```
|
||||
|
||||
Your `buyHealth` function should reduce `gold` by `10`.
|
||||
|
||||
```js
|
||||
gold = 10;
|
||||
buyHealth();
|
||||
assert.equal(gold, 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function buyHealth() {
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,192 @@
|
||||
---
|
||||
id: 62a8c3ebc6c35e23785e1a19
|
||||
title: Step 73
|
||||
challengeType: 0
|
||||
dashedName: step-73
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
After the `gold` is updated, add a line to set `health` equal to `health` plus `10`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add `10` to `health`.
|
||||
|
||||
```js
|
||||
assert.match(code, /health\s*=\s*health\s*\+\s*10/);
|
||||
```
|
||||
|
||||
Your `buyHealth` function should increase `health` by `10`.
|
||||
|
||||
```js
|
||||
health = 10;
|
||||
buyHealth();
|
||||
assert.equal(health, 20);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function buyHealth() {
|
||||
gold = gold - 10;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,203 @@
|
||||
---
|
||||
id: 62a8c41ecaf1bd24536129b8
|
||||
title: Step 74
|
||||
challengeType: 0
|
||||
dashedName: step-74
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
There is a shorthand way to add or subtract from a variable called <dfn>compound assignment</dfn>. For example, changing `num = num + 5` to compound assignment would look like `num += 5`.
|
||||
|
||||
Update both lines inside your `buyHealth` function to use compound assignment.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should change `gold` to use compound assignment.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /gold\s*=\s*gold\s*-\s*10/);
|
||||
```
|
||||
|
||||
You should change `health` to use compound assignment.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /health\s*=\s*health\s*\+\s*10/);
|
||||
```
|
||||
|
||||
Your `buyHealth` function should still update the values.
|
||||
|
||||
```js
|
||||
gold = 10;
|
||||
health = 10;
|
||||
buyHealth();
|
||||
assert.equal(gold, 0);
|
||||
assert.equal(health, 20);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function buyHealth() {
|
||||
gold = gold - 10;
|
||||
health = health + 10;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,207 @@
|
||||
---
|
||||
id: 62a8c465fa7b0c252f4a8f0c
|
||||
title: Step 75
|
||||
challengeType: 0
|
||||
dashedName: step-75
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you are updating the `gold` and `health` variables, you need to display those new values on the game screen. After your assignment lines, assign the `innerText` property of `goldText` to be the variable `gold`. Use the same pattern to update `healthText` with the `health` variable.
|
||||
|
||||
Here is an example:
|
||||
|
||||
```js
|
||||
let value = 100;
|
||||
const total = document.querySelector('#total');
|
||||
total.innerText = value;
|
||||
```
|
||||
|
||||
You can test this by clicking your "Go to store" button, followed by your "Buy Health" button.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `buyHealth` function should update the text of `healthText` to be the value of `health`.
|
||||
|
||||
```js
|
||||
health = 10;
|
||||
buyHealth();
|
||||
const target = document.querySelector('#healthText');
|
||||
assert.equal(target.innerText, '20');
|
||||
```
|
||||
|
||||
Your `buyHealth` function should update the text of `goldText` to be the value of `gold`.
|
||||
|
||||
```js
|
||||
gold = 10;
|
||||
buyHealth();
|
||||
const target = document.querySelector('#goldText');
|
||||
assert.equal(target.innerText, '0');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function buyHealth() {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,209 @@
|
||||
---
|
||||
id: 62a8c4db0710f3260f867a92
|
||||
title: Step 76
|
||||
challengeType: 0
|
||||
dashedName: step-76
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
What if the player doesn't have enough gold to buy health? When you want to run code conditionally, you can use the `if` statement. Put all of the code in your `buyHealth` function inside an `if` statement. For example:
|
||||
|
||||
```js
|
||||
function myFunction() {
|
||||
if ("condition") {
|
||||
console.log("Hello World!");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
For now, follow that pattern to use a string `condition` inside your `if` statement.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `buyHealth` function should have an `if` statement.
|
||||
|
||||
```js
|
||||
assert.match(buyHealth.toString(), /if/);
|
||||
```
|
||||
|
||||
Your `if` statement should have the string `condition` for the condition.
|
||||
|
||||
```js
|
||||
assert.match(buyHealth.toString(), /if\s*\(('|")condition\1\)/);
|
||||
```
|
||||
|
||||
All of your `buyHealth` code should be inside the `if` statement.
|
||||
|
||||
```js
|
||||
assert.match(buyHealth.toString(), /if\s*\(('|")condition\1\)\s*\{[\s\S]*\}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function buyHealth() {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,221 @@
|
||||
---
|
||||
id: 62a8c56247609626fa4a8d6e
|
||||
title: Step 77
|
||||
challengeType: 0
|
||||
dashedName: step-77
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `condition` string is just a placeholder. Change the `if` statement condition to check if `gold` is greater than or equal to `10`.
|
||||
|
||||
Here is an `if` statement that checks if `num` is greater than or equal to `5`:
|
||||
|
||||
```js
|
||||
if (num >= 5) {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `if` statement should check if `gold` is greater than or equal to `10`.
|
||||
|
||||
```js
|
||||
assert.match(buyHealth.toString(), /if\s*\(gold\s*>=\s*10\)/);
|
||||
```
|
||||
|
||||
Your `buyHealth` function should update `health` and `gold` if `gold` is greater than or equal to `10`.
|
||||
|
||||
```js
|
||||
gold = 10;
|
||||
health = 10;
|
||||
buyHealth();
|
||||
assert.equal(health, 20);
|
||||
assert.equal(gold, 0);
|
||||
const healthElement = document.getElementById('healthText');
|
||||
assert.equal(healthElement.innerText, '20');
|
||||
const goldElement = document.getElementById('goldText');
|
||||
assert.equal(goldElement.innerText, '0');
|
||||
```
|
||||
|
||||
Your `buyHealth` function should not update `health` and `gold` if `gold` is less than `10`.
|
||||
|
||||
```js
|
||||
gold = 5;
|
||||
health = 10;
|
||||
buyHealth();
|
||||
assert.equal(health, 10);
|
||||
assert.equal(gold, 5);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function buyHealth() {
|
||||
if ("condition") {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,206 @@
|
||||
---
|
||||
id: 62a8c5db7888af27af23f0dd
|
||||
title: Step 78
|
||||
challengeType: 0
|
||||
dashedName: step-78
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now when a player tries to buy health it will only work if they have enough money. If they do not, nothing will happen. Add an `else` statement where you can put code to run if a player does not have enough money.
|
||||
|
||||
Here is an example of an empty `else` statement:
|
||||
|
||||
```js
|
||||
if (num >= 5) {
|
||||
|
||||
} else {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `buyHealth` function should have an `else` statement.
|
||||
|
||||
```js
|
||||
assert.match(buyHealth.toString(), /else/);
|
||||
```
|
||||
|
||||
Your `else` statement should come after your `if` statement.
|
||||
|
||||
```js
|
||||
const split = buyHealth.toString().split(/\s/);
|
||||
assert.isAbove(split.indexOf('else'), split.indexOf('if'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,200 @@
|
||||
---
|
||||
id: 62a8c65b75664c28a8e59c16
|
||||
title: Step 79
|
||||
challengeType: 0
|
||||
dashedName: step-79
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the `else` statement, set `text.innerText` to equal `You do not have enough gold to buy health.`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `buyHealth` function should set `text.innerText` to equal `You do not have enough gold to buy health.`.
|
||||
|
||||
```js
|
||||
assert.match(buyHealth.toString(), /text\.innerText\s*=\s*('|")You do not have enough gold to buy health\.\1/);
|
||||
```
|
||||
|
||||
Your `buyHealth` function should update `text.innerText` when `gold` is less than `10`.
|
||||
|
||||
```js
|
||||
gold = 5;
|
||||
health = 10;
|
||||
buyHealth();
|
||||
assert.equal(text.innerText, 'You do not have enough gold to buy health.');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function buyHealth() {
|
||||
if (gold >= 10) {
|
||||
gold -= 10;
|
||||
health += 10;
|
||||
goldText.innerText = gold;
|
||||
healthText.innerText = health;
|
||||
} else {
|
||||
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,204 @@
|
||||
---
|
||||
id: 62a8c6815f5f1a29735efe1b
|
||||
title: Step 80
|
||||
challengeType: 0
|
||||
dashedName: step-80
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use `const` to create a `weapons` variable above your `locations` array. Assign it an empty array.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `const` to declare your `weapons` variable.
|
||||
|
||||
```js
|
||||
assert.match(code, /const weapons/i);
|
||||
```
|
||||
|
||||
Your `weapons` variable should be an array.
|
||||
|
||||
```js
|
||||
assert.isArray(weapons);
|
||||
```
|
||||
|
||||
Your `weapons` variable should be empty.
|
||||
|
||||
```js
|
||||
assert.equal(weapons.length, 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
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() {
|
||||
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,229 @@
|
||||
---
|
||||
id: 62a8c7322e42962ad53ad204
|
||||
title: Step 81
|
||||
challengeType: 0
|
||||
dashedName: step-81
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Just like your `locations` array, your `weapons` array will hold objects. Add four objects to the `weapons` array, each with two properties: `name` and `power`. The first should have the `name` set to `stick` and the `power` set to `5`. The second should be `dagger` and `30`. The third, `claw hammer` and `50`. The fourth, `sword` and `100`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `weapons` array should have four values.
|
||||
|
||||
```js
|
||||
assert.lengthOf(weapons, 4);
|
||||
```
|
||||
|
||||
Your `weapons` array should have four objects.
|
||||
|
||||
```js
|
||||
assert.isObject(weapons[0]);
|
||||
assert.isObject(weapons[1]);
|
||||
assert.isObject(weapons[2]);
|
||||
assert.isObject(weapons[3]);
|
||||
```
|
||||
|
||||
Your first `weapons` object should have the `name` set to `stick` and the `power` set to `5`.
|
||||
|
||||
```js
|
||||
assert.equal(weapons[0].name, 'stick');
|
||||
assert.equal(weapons[0].power, 5);
|
||||
```
|
||||
|
||||
Your second `weapons` object should have the `name` set to `dagger` and the `power` set to 30`.
|
||||
|
||||
```js
|
||||
assert.equal(weapons[1].name, 'dagger');
|
||||
assert.equal(weapons[1].power, 30);
|
||||
```
|
||||
|
||||
Your third `weapons` object should have the `name` set to `claw hammer` and the `power` set to 50.
|
||||
|
||||
```js
|
||||
assert.equal(weapons[2].name, 'claw hammer');
|
||||
assert.equal(weapons[2].power, 50);
|
||||
```
|
||||
|
||||
Your fourth `weapons` object should have the `name` set to `sword` and the `power` set to 100.
|
||||
|
||||
```js
|
||||
assert.equal(weapons[3].name, 'sword');
|
||||
assert.equal(weapons[3].power, 100);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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");
|
||||
--fcc-editable-region--
|
||||
const weapons = [];
|
||||
--fcc-editable-region--
|
||||
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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
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() {
|
||||
|
||||
}
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,203 @@
|
||||
---
|
||||
id: 62a8c7a59e72c02bb1c717d2
|
||||
title: Step 82
|
||||
challengeType: 0
|
||||
dashedName: step-82
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside your `buyWeapon` function, add an `if` statement to check if `gold` is greater than or equal to `30`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `buyWeapon` function should have an `if` statement.
|
||||
|
||||
```js
|
||||
assert.include(buyWeapon.toString(), 'if');
|
||||
```
|
||||
|
||||
Your `if` statement should check if `gold` is greater than or equal to `30`.
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /if\s*\(gold\s*>=\s*30\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
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.";
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function buyWeapon() {
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,215 @@
|
||||
---
|
||||
id: 62a8c89e4272512d44fc1c66
|
||||
title: Step 83
|
||||
challengeType: 0
|
||||
dashedName: step-83
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Similar to your `buyHealth` function, set `gold` equal to 30 less than its current value. Make sure this is inside your `if` statement.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use compound assignment to subtract `30` from `gold`.
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /gold\s*-=\s*30/);
|
||||
```
|
||||
|
||||
Your `buyWeapon` function should reduce `gold` by `30`.
|
||||
|
||||
```js
|
||||
gold = 30;
|
||||
buyWeapon();
|
||||
assert.equal(gold, 0);
|
||||
```
|
||||
|
||||
Your code should be in your `if` statement.
|
||||
|
||||
```js
|
||||
gold = 20;
|
||||
buyWeapon();
|
||||
assert.equal(gold, 20);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
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.";
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,219 @@
|
||||
---
|
||||
id: 62a8c8cee8e5cf2e001789b4
|
||||
title: Step 84
|
||||
challengeType: 0
|
||||
dashedName: step-84
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The value of the `currentWeapon` variable corresponds to an index in the `weapons` array. The player starts with a `stick`, since `currentWeapon` starts at `0` and `weapons[0]` is the `stick` weapon.
|
||||
|
||||
In the `buyWeapon` function, add one to `currentWeapon` - the user is buying the next weapon in the `weapons` array.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use compound assignment to add one to `currentWeapon`.
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /currentWeapon\s*\+=\s*1/);
|
||||
```
|
||||
|
||||
Your `buyWeapon` function should increase `currentWeapon` by `1`.
|
||||
|
||||
```js
|
||||
gold = 30;
|
||||
currentWeapon = 0;
|
||||
buyWeapon();
|
||||
assert.equal(currentWeapon, 1);
|
||||
```
|
||||
|
||||
Your code should be in your `if` statement.
|
||||
|
||||
```js
|
||||
gold = 20;
|
||||
currentWeapon = 0;
|
||||
buyWeapon();
|
||||
assert.equal(currentWeapon, 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
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.";
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,208 @@
|
||||
---
|
||||
id: 62a8ca22d29fe62f3952bdf5
|
||||
title: Step 85
|
||||
challengeType: 0
|
||||
dashedName: step-85
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Increasing a value by 1, or <dfn>incrementing</dfn>, has a special operator in JavaScript: `++`. If you wanted to increase `num` by 1, you could write `num++`.
|
||||
|
||||
Change your `currentWeapon` assignment to use the increment operator.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the increment operator to increase `currentWeapon` by `1`.
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /currentWeapon\s*\+\s*\+/);
|
||||
```
|
||||
|
||||
You should not use compound assignment to increase `currentWeapon` by `1`.
|
||||
|
||||
```js
|
||||
assert.notMatch(buyWeapon.toString(), /currentWeapon\s*\+=\s*1/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
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.";
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon += 1;
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,206 @@
|
||||
---
|
||||
id: 62a8cb19bd7f8a304e5427a1
|
||||
title: Step 86
|
||||
challengeType: 0
|
||||
dashedName: step-86
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now update the `goldText` element to display the new value of `gold`, and update the `text` element to display `You now have a new weapon.`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should update the `innerText` property of the `goldText` element to be `gold`.
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /goldText\.innerText\s*=\s*gold/);
|
||||
```
|
||||
|
||||
You should update the `innerText` property of the `text` element to be `You now have a new weapon.`.
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /text\.innerText\s*=\s*('|")You now have a new weapon\.\1/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
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.";
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,222 @@
|
||||
---
|
||||
id: 62a8cbd1e3595431d5a2b3f1
|
||||
title: Step 87
|
||||
challengeType: 0
|
||||
dashedName: step-87
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You should tell the player what weapon they bought. In between the two lines you just wrote, use `let` to initialize a new variable called `newWeapon`. Set this to equal `weapons`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `buyWeapon` function should have a variable named `newWeapon`.
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /newWeapon/);
|
||||
```
|
||||
|
||||
You should use `let` to declare `newWeapon`.
|
||||
|
||||
```js
|
||||
assert.match(code, /let\s+newWeapon/);
|
||||
```
|
||||
|
||||
`newWeapon` should be initialised to have the value of `weapons`. Don't forget your semi-colon.
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /newWeapon\s*=\s*weapons;/);
|
||||
```
|
||||
|
||||
`newWeapon` should be declared before you modify `text`.
|
||||
|
||||
```js
|
||||
const contents = buyWeapon.toString().split(/\s+/);
|
||||
assert.isBelow(contents.indexOf('newWeapon'), contents.indexOf('text.innerText'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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": [buyWeapon, 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
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.";
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
|
||||
text.innerText = "You now have a new weapon.";
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,211 @@
|
||||
---
|
||||
id: 62a8cce1b0c32c33017cf2e9
|
||||
title: Step 88
|
||||
challengeType: 0
|
||||
dashedName: step-88
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For your `newWeapon` variable, use bracket notation to use the `currentWeapon` variable to access an object within the `weapons` array.
|
||||
|
||||
When you use a variable in bracket notation, you are accessing the property or index by the *value* of that variable.
|
||||
|
||||
For example, this code uses the `index` variable to access a value of `array`.
|
||||
|
||||
```js
|
||||
let value = array[index];
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should update `newWeapon` to have the value of `weapons[currentWeapon]`.
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /newWeapon\s*=\s*weapons\[currentWeapon\]/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
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.";
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons;
|
||||
text.innerText = "You now have a new weapon.";
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,203 @@
|
||||
---
|
||||
id: 62a8ce1dfc990134162b3bd9
|
||||
title: Step 89
|
||||
challengeType: 0
|
||||
dashedName: step-89
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`weapons[currentWeapon]` is an object. Use dot notation to get the `name` property of that object.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should update `newWeapon` to have the value of `weapons[currentWeapon].name`.
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /newWeapon\s*=\s*weapons\[currentWeapon\]\.name;/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
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.";
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon];
|
||||
text.innerText = "You now have a new weapon.";
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,222 @@
|
||||
---
|
||||
id: 62a8ce73d0dce43468f6689c
|
||||
title: Step 90
|
||||
challengeType: 0
|
||||
dashedName: step-90
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You can insert variables into a string with the <dfn>concatenation operator</dfn> `+`. Update the `You now have a new weapon.` string to say `You now have a ` and the name of the new weapon. Remember to end the sentence with a period.
|
||||
|
||||
Here is an example that creates the string `Hello, our name is freeCodeCamp.`:
|
||||
|
||||
```js
|
||||
const ourName = "freeCodeCamp";
|
||||
const ourStr = "Hello, our name is " + ourName + ".";
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should update the `text.innerText` assignment to start with the string `You now have a `.
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /text\.innerText\s*=\s*('|")You now have a \1/);
|
||||
```
|
||||
|
||||
You should use the concatenation operator to add `newWeapon` to the end of the `text.innerText` string.
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /text\.innerText\s*=\s*('|")You now have a \1\s*\+\s*newWeapon/);
|
||||
```
|
||||
|
||||
You should use the concatenation operator to end your `text.innerText` string with a `.`.
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /text\.innerText\s*=\s*('|")You now have a \1\s*\+\s*newWeapon\s*\+\s*('|")\.\2/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
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.";
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a new weapon.";
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,229 @@
|
||||
---
|
||||
id: 62a8cf22272d6d35af80d4ac
|
||||
title: Step 91
|
||||
challengeType: 0
|
||||
dashedName: step-91
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Back at the beginning of this project, you created the `inventory` array. Add the `newWeapon` to the end of the `inventory` array using the `push()` method.
|
||||
|
||||
Here is an example:
|
||||
|
||||
```js
|
||||
const arr = ["first"];
|
||||
const next = "second";
|
||||
arr.push(next);
|
||||
```
|
||||
|
||||
`arr` would now have the value `["first", "second"]`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `push` method on `inventory`.
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /inventory\.push/)
|
||||
```
|
||||
|
||||
You should `push` the value of `newWeapon` to the `inventory` array.
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /inventory\.push\s*\(\s*newWeapon\s*\)/)
|
||||
```
|
||||
|
||||
Your `buyWeapon` function should add the value of `newWeapon` to the `inventory` array.
|
||||
|
||||
```js
|
||||
inventory = [];
|
||||
currentWeapon = 0;
|
||||
buyWeapon();
|
||||
assert.deepEqual(inventory, ["dagger"]);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
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.";
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,218 @@
|
||||
---
|
||||
id: 62a8d0337d7c67377a4a76c6
|
||||
title: Step 92
|
||||
challengeType: 0
|
||||
dashedName: step-92
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Up until now, any time `text.innerText` was updated the old text was erased. This time, use the `+=` operator to add text to the end of `text.innerText`. Add the string ` In your inventory you have: ` - include the spaces at the beginning and the end.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a new line with `text.innerText`.
|
||||
|
||||
```js
|
||||
const matches = buyWeapon.toString().match(/text\.innerText/g);
|
||||
assert.lengthOf(matches, 2);
|
||||
```
|
||||
|
||||
You should use the `+=` operator to add to `text.innerText`.
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /text\.innerText\s*\+=\s*/)
|
||||
```
|
||||
|
||||
You should add the string ` In your inventory you have: ` to the end of `text.innerText`. Mind the spaces!
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /text\.innerText\s*\+=\s*('|")\sIn your inventory you have:\s\1/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
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.";
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function buyWeapon() {
|
||||
if (gold >= 30) {
|
||||
gold -= 30;
|
||||
currentWeapon++;
|
||||
goldText.innerText = gold;
|
||||
let newWeapon = weapons[currentWeapon].name;
|
||||
text.innerText = "You now have a " + newWeapon + ".";
|
||||
inventory.push(newWeapon);
|
||||
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,211 @@
|
||||
---
|
||||
id: 62a8d08668fa8b38732486e9
|
||||
title: Step 93
|
||||
challengeType: 0
|
||||
dashedName: step-93
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
At the end of the second `text.innerText` string you just added, use the concatenation operator to add the contents of `inventory` to the string.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not change the ` In your inventory you have: ` string.
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /text\.innerText\s*\+=\s*('|")\sIn your inventory you have:\s\1/)
|
||||
```
|
||||
|
||||
You should use the concatenation operator `+` to add the contents of `inventory` to the string.
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /text\.innerText\s*\+=\s*('|")\sIn your inventory you have:\s\1\s*\+\s*inventory/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
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.";
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function buyWeapon() {
|
||||
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: ";
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,226 @@
|
||||
---
|
||||
id: 62a8d0c4f12c2239b6618582
|
||||
title: Step 94
|
||||
challengeType: 0
|
||||
dashedName: step-94
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add an `else` statement to your `buyWeapon` function. In that statement, set `text.innerText` to equal `You do not have enough gold to buy a weapon.`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add an `else` statement to your `buyWeapon` function.
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /else/);
|
||||
```
|
||||
|
||||
Your `else` statement should come after your `if` statement.
|
||||
|
||||
```js
|
||||
const split = buyWeapon.toString().split(/\s|\n/);
|
||||
assert.isAbove(split.indexOf('else'), split.indexOf('if'));
|
||||
```
|
||||
|
||||
You should set `text.innerText` to `You do not have enough gold to buy a weapon.`.
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /text.innerText\s*=\s*('|")You do not have enough gold to buy a weapon.\1/);
|
||||
```
|
||||
|
||||
Your `else` statement should set `text.innerText` to `You do not have enough gold to buy a weapon.`.
|
||||
|
||||
```js
|
||||
gold = 20;
|
||||
buyWeapon();
|
||||
assert.equal(text.innerText, 'You do not have enough gold to buy a weapon.');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
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.";
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function buyWeapon() {
|
||||
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;
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,225 @@
|
||||
---
|
||||
id: 62a8d0fdf2dad83a92883a80
|
||||
title: Step 95
|
||||
challengeType: 0
|
||||
dashedName: step-95
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Once a player has the best weapon, they cannot buy another one. Wrap all of the code in your `buyWeapon` function inside another `if` statement. The condition should check if `currentWeapon` is less than `3` - the index of the last weapon.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a new `if` statement that checks if `currentWeapon` is less than `3`.
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /currentWeapon\s*\<\s*3/)
|
||||
```
|
||||
|
||||
Your existing `if` statement should be within your new `if` statement.
|
||||
|
||||
```js
|
||||
currentWeapon = 5;
|
||||
gold = 50;
|
||||
buyWeapon();
|
||||
assert.equal(gold, 50);
|
||||
```
|
||||
|
||||
Your existing `else` statement should be within your new `if` statement.
|
||||
|
||||
```js
|
||||
currentWeapon = 5;
|
||||
gold = 10;
|
||||
buyWeapon();
|
||||
assert.notEqual(text.innerText, "You do not have enough gold to buy a weapon.");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
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.";
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function buyWeapon() {
|
||||
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.";
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,215 @@
|
||||
---
|
||||
id: 62a8d143f2a58e3b6d6e9c33
|
||||
title: Step 96
|
||||
challengeType: 0
|
||||
dashedName: step-96
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Arrays have a `length` property that returns the number of items in the array. You may want to add new values to the `weapons` array in the future. Change your `if` condition to check if `currentWeapon` is less than the length of the `weapons` array. An example of checking the length of an array `myArray` would look like `myArray.length`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `length` property on the `weapons` array.
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /weapons\.length/);
|
||||
```
|
||||
|
||||
Your `if` statement should check if `currentWeapon` is less than `weapons.length`.
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /currentWeapon\s*<\s*weapons\.length/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
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.";
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < 3) {
|
||||
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.";
|
||||
}
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,215 @@
|
||||
---
|
||||
id: 62a8d1c72e8bb13c2074d93c
|
||||
title: Step 97
|
||||
challengeType: 0
|
||||
dashedName: step-97
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You now have an error to fix. The `currentWeapon` variable is the index of the `weapons` array, but array indexing starts at zero. The index of the last element in an array is one less than the length of the array. Change the `if` condition to check `weapons.length - 1`, instead of `weapons.length`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should update the condition to subtract `1` from `weapons.length`.
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /weapons\.length\s*-\s*1/);
|
||||
```
|
||||
|
||||
Your condition should check if `currentWeapon` is less than `weapons.length - 1`.
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /currentWeapon\s*<\s*weapons\.length\s*-\s*1/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
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.";
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function buyWeapon() {
|
||||
if (currentWeapon < weapons.length) {
|
||||
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.";
|
||||
}
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,224 @@
|
||||
---
|
||||
id: 62a8d2146a3e853d0a6e28ca
|
||||
title: Step 98
|
||||
challengeType: 0
|
||||
dashedName: step-98
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add an `else` statement for your outer `if` statement. Inside this new `else` statement, set `text.innerText` to `You already have the most powerful weapon!`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have another `else` statement in your `buyWeapon` function.
|
||||
|
||||
```js
|
||||
const matches = buyWeapon.toString().match(/else/g);
|
||||
assert.equal(matches.length, 2);
|
||||
```
|
||||
|
||||
You should set `text.innerText` to `You already have the most powerful weapon!`.
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /('|")You already have the most powerful weapon!\1/);
|
||||
```
|
||||
|
||||
You should modify your `text.innerText` to `You already have the most powerful weapon!` within your outer `else` statement.
|
||||
|
||||
```js
|
||||
currentWeapon = 5;
|
||||
buyWeapon();
|
||||
assert.equal(text.innerText, "You already have the most powerful weapon!");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
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.";
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
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.";
|
||||
}
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,229 @@
|
||||
---
|
||||
id: 62a8d24c97461b3ddb9397c8
|
||||
title: Step 99
|
||||
challengeType: 0
|
||||
dashedName: step-99
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Once a player has the most powerful weapon, you can give them the ability to sell their old weapons. In the outer `else` statement, set `button2.innerText` to `Sell weapon for 15 gold`. Also set `button2.onclick` to the function name `sellWeapon`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the value of `button2.innerText`.
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /button2\.innerText/);
|
||||
```
|
||||
|
||||
You should set the value of `button2.innerText` to `Sell weapon for 15 gold`.
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /button2\.innerText\s*=\s*('|")Sell weapon for 15 gold\1;/);
|
||||
```
|
||||
|
||||
You should set the value of `button2.onclick`.
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /button2\.onclick/);
|
||||
```
|
||||
|
||||
You should set the value of `button2.onclick` to `sellWeapon`.
|
||||
|
||||
```js
|
||||
assert.match(buyWeapon.toString(), /button2\.onclick\s*=\s*sellWeapon;/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
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.";
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
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!";
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,221 @@
|
||||
---
|
||||
id: 62a8d2e2a073be3edb46116f
|
||||
title: Step 100
|
||||
challengeType: 0
|
||||
dashedName: step-100
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Create an empty `sellWeapon` function.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `function` keyword to declare a `sellWeapon` variable.
|
||||
|
||||
```js
|
||||
assert.isFunction(sellWeapon);
|
||||
```
|
||||
|
||||
`sellWeapon` should be an empty function.
|
||||
|
||||
```js
|
||||
assert.match(sellWeapon.toString(), /sellWeapon\(\)\s*\{\s*\}/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,223 @@
|
||||
---
|
||||
id: 62a8d31ebbc10e3fe1b28e03
|
||||
title: Step 101
|
||||
challengeType: 0
|
||||
dashedName: step-101
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Players should not be able to sell their only weapon. Inside the `sellWeapon` function, add an `if` statement with a condition that checks if the length of the `inventory` array is greater than `1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `sellWeapon` function should have an `if` statement.
|
||||
|
||||
```js
|
||||
assert.match(sellWeapon.toString(), /if/);
|
||||
```
|
||||
|
||||
Your `if` statement should check if `inventory.length` is greater than `1`.
|
||||
|
||||
```js
|
||||
assert.match(sellWeapon.toString(), /if\s*\(inventory\.length\s*>\s*1\)/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function sellWeapon() {
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,234 @@
|
||||
---
|
||||
id: 62a8d35660db4040ba292193
|
||||
title: Step 102
|
||||
challengeType: 0
|
||||
dashedName: step-102
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the `if` statement, set `gold` equal to `15` more than its current value. Also update `goldText.innerText` to the new value.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use compound assignment to increase `gold` by `15`.
|
||||
|
||||
```js
|
||||
assert.match(sellWeapon.toString(), /gold\s*\+=\s*15/);
|
||||
```
|
||||
|
||||
You should set `goldText.innerText` to gold.
|
||||
|
||||
```js
|
||||
assert.match(sellWeapon.toString(), /goldText\.innerText\s*=\s*gold/);
|
||||
```
|
||||
|
||||
Your code should be in your `if` statement.
|
||||
|
||||
```js
|
||||
inventory = ["Naomi"];
|
||||
gold = 0
|
||||
sellWeapon();
|
||||
assert.equal(gold, 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,223 @@
|
||||
---
|
||||
id: 62a8d382cd075f4169223e14
|
||||
title: Step 103
|
||||
challengeType: 0
|
||||
dashedName: step-103
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Use the `let` keyword to create a variable named `currentWeapon`. Don't assign it a value yet.
|
||||
|
||||
Notice that you already have a `currentWeapon` variable elsewhere in your code. Since you are using the `let` keyword instead of `var`, the new `currentWeapon` is scoped only to this `if` statement. At the close of the `if` statement, the old `currentWeapon` will be used again.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use `let` to declare a `currentWeapon` variable.
|
||||
|
||||
```js
|
||||
assert.match(sellWeapon.toString(), /currentWeapon/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<title>RPG - Dragon Repeller</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="game">
|
||||
<div id="stats">
|
||||
<span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
|
||||
<span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<button id="button1">Go to store</button>
|
||||
<button id="button2">Go to cave</button>
|
||||
<button id="button3">Fight dragon</button>
|
||||
</div>
|
||||
<div id="monsterStats">
|
||||
<span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
|
||||
<span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
|
||||
</div>
|
||||
<div id="text">
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```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 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."
|
||||
}
|
||||
];
|
||||
|
||||
// initialize buttons
|
||||
button1.onclick = goStore;
|
||||
button2.onclick = goCave;
|
||||
button3.onclick = fightDragon;
|
||||
|
||||
function update(location) {
|
||||
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 fightDragon() {
|
||||
console.log("Fighting dragon.");
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
function sellWeapon() {
|
||||
if (inventory.length > 1) {
|
||||
gold += 15;
|
||||
goldText.innerText = gold;
|
||||
|
||||
}
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
function fightSlime() {
|
||||
|
||||
}
|
||||
|
||||
function fightBeast() {
|
||||
|
||||
}
|
||||
```
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user