From b36cdbafd1976adec35e78ec53e4d2b10fb2679f Mon Sep 17 00:00:00 2001 From: "Nicholas Carrigan (he/him)" Date: Thu, 21 Oct 2021 10:07:52 -0700 Subject: [PATCH] chore: rename "part" to "step" (#43934) * chore: rename part to step * chore: update metas * chore: more renaming * chore: update tooling * chore: update frontmatter * chore(tools): title testing --- .../_meta/accessibility-quiz/meta.json | 134 +-- .../_meta/basic-css-cafe-menu/meta.json | 184 ++-- .../_meta/basic-html-cat-photo-app/meta.json | 134 +-- .../_meta/basic-javascript-rpg-game/meta.json | 306 +++---- .../challenges/_meta/css-box-model/meta.json | 92 +- .../challenges/_meta/css-piano/meta.json | 66 +- .../_meta/css-picasso-painting/meta.json | 178 ++-- .../_meta/css-variables-skyline/meta.json | 236 ++--- .../challenges/_meta/d3-dashboard/meta.json | 292 +++--- .../meta.json | 282 +++--- .../meta.json | 152 ++-- .../_meta/registration-form/meta.json | 116 +-- .../accessibility-quiz/part-001.md | 50 - .../accessibility-quiz/part-002.md | 57 -- .../accessibility-quiz/part-003.md | 62 -- .../accessibility-quiz/part-004.md | 68 -- .../accessibility-quiz/part-005.md | 64 -- .../accessibility-quiz/part-006.md | 68 -- .../accessibility-quiz/part-007.md | 93 -- .../accessibility-quiz/part-008.md | 66 -- .../accessibility-quiz/part-009.md | 93 -- .../accessibility-quiz/part-010.md | 89 -- .../accessibility-quiz/part-011.md | 83 -- .../accessibility-quiz/part-012.md | 112 --- .../accessibility-quiz/part-013.md | 102 --- .../accessibility-quiz/part-014.md | 125 --- .../accessibility-quiz/part-015.md | 111 --- .../accessibility-quiz/part-016.md | 171 ---- .../accessibility-quiz/part-017.md | 140 --- .../accessibility-quiz/part-018.md | 125 --- .../accessibility-quiz/part-019.md | 173 ---- .../accessibility-quiz/part-020.md | 195 ---- .../accessibility-quiz/part-021.md | 161 ---- .../accessibility-quiz/part-022.md | 127 --- .../accessibility-quiz/part-023.md | 139 --- .../accessibility-quiz/part-024.md | 125 --- .../accessibility-quiz/part-025.md | 197 ---- .../accessibility-quiz/part-026.md | 200 ---- .../accessibility-quiz/part-027.md | 177 ---- .../accessibility-quiz/part-028.md | 195 ---- .../accessibility-quiz/part-029.md | 231 ----- .../accessibility-quiz/part-030.md | 207 ----- .../accessibility-quiz/part-031.md | 287 ------ .../accessibility-quiz/part-032.md | 224 ----- .../accessibility-quiz/part-033.md | 191 ---- .../accessibility-quiz/part-034.md | 232 ----- .../accessibility-quiz/part-035.md | 215 ----- .../accessibility-quiz/part-036.md | 250 ----- .../accessibility-quiz/part-037.md | 222 ----- .../accessibility-quiz/part-038.md | 229 ----- .../accessibility-quiz/part-039.md | 219 ----- .../accessibility-quiz/part-040.md | 232 ----- .../accessibility-quiz/part-041.md | 217 ----- .../accessibility-quiz/part-042.md | 222 ----- .../accessibility-quiz/part-043.md | 231 ----- .../accessibility-quiz/part-044.md | 258 ------ .../accessibility-quiz/part-045.md | 262 ------ .../accessibility-quiz/part-046.md | 262 ------ .../accessibility-quiz/part-047.md | 255 ------ .../accessibility-quiz/part-048.md | 263 ------ .../accessibility-quiz/part-049.md | 277 ------ .../accessibility-quiz/part-050.md | 289 ------ .../accessibility-quiz/part-051.md | 261 ------ .../accessibility-quiz/part-052.md | 282 ------ .../accessibility-quiz/part-053.md | 366 -------- .../accessibility-quiz/part-054.md | 288 ------ .../accessibility-quiz/part-055.md | 293 ------ .../accessibility-quiz/part-056.md | 308 ------- .../accessibility-quiz/part-057.md | 325 ------- .../accessibility-quiz/part-058.md | 318 ------- .../accessibility-quiz/part-059.md | 314 ------- .../accessibility-quiz/part-060.md | 317 ------- .../accessibility-quiz/part-061.md | 362 -------- .../accessibility-quiz/part-062.md | 338 ------- .../accessibility-quiz/part-063.md | 358 -------- .../accessibility-quiz/part-064.md | 361 -------- .../accessibility-quiz/part-065.md | 344 ------- .../accessibility-quiz/part-066.md | 352 ------- .../accessibility-quiz/part-067.md | 689 -------------- .../accessibility-quiz/step-001.md | 50 + .../accessibility-quiz/step-002.md | 57 ++ .../accessibility-quiz/step-003.md | 62 ++ .../accessibility-quiz/step-004.md | 68 ++ .../accessibility-quiz/step-005.md | 64 ++ .../accessibility-quiz/step-006.md | 68 ++ .../accessibility-quiz/step-007.md | 93 ++ .../accessibility-quiz/step-008.md | 66 ++ .../accessibility-quiz/step-009.md | 93 ++ .../accessibility-quiz/step-010.md | 89 ++ .../accessibility-quiz/step-011.md | 83 ++ .../accessibility-quiz/step-012.md | 112 +++ .../accessibility-quiz/step-013.md | 102 +++ .../accessibility-quiz/step-014.md | 125 +++ .../accessibility-quiz/step-015.md | 111 +++ .../accessibility-quiz/step-016.md | 171 ++++ .../accessibility-quiz/step-017.md | 140 +++ .../accessibility-quiz/step-018.md | 125 +++ .../accessibility-quiz/step-019.md | 173 ++++ .../accessibility-quiz/step-020.md | 195 ++++ .../accessibility-quiz/step-021.md | 161 ++++ .../accessibility-quiz/step-022.md | 127 +++ .../accessibility-quiz/step-023.md | 139 +++ .../accessibility-quiz/step-024.md | 125 +++ .../accessibility-quiz/step-025.md | 197 ++++ .../accessibility-quiz/step-026.md | 200 ++++ .../accessibility-quiz/step-027.md | 177 ++++ .../accessibility-quiz/step-028.md | 195 ++++ .../accessibility-quiz/step-029.md | 231 +++++ .../accessibility-quiz/step-030.md | 207 +++++ .../accessibility-quiz/step-031.md | 287 ++++++ .../accessibility-quiz/step-032.md | 224 +++++ .../accessibility-quiz/step-033.md | 191 ++++ .../accessibility-quiz/step-034.md | 232 +++++ .../accessibility-quiz/step-035.md | 215 +++++ .../accessibility-quiz/step-036.md | 250 +++++ .../accessibility-quiz/step-037.md | 222 +++++ .../accessibility-quiz/step-038.md | 229 +++++ .../accessibility-quiz/step-039.md | 219 +++++ .../accessibility-quiz/step-040.md | 232 +++++ .../accessibility-quiz/step-041.md | 217 +++++ .../accessibility-quiz/step-042.md | 222 +++++ .../accessibility-quiz/step-043.md | 231 +++++ .../accessibility-quiz/step-044.md | 258 ++++++ .../accessibility-quiz/step-045.md | 262 ++++++ .../accessibility-quiz/step-046.md | 262 ++++++ .../accessibility-quiz/step-047.md | 255 ++++++ .../accessibility-quiz/step-048.md | 263 ++++++ .../accessibility-quiz/step-049.md | 277 ++++++ .../accessibility-quiz/step-050.md | 289 ++++++ .../accessibility-quiz/step-051.md | 261 ++++++ .../accessibility-quiz/step-052.md | 282 ++++++ .../accessibility-quiz/step-053.md | 366 ++++++++ .../accessibility-quiz/step-054.md | 288 ++++++ .../accessibility-quiz/step-055.md | 293 ++++++ .../accessibility-quiz/step-056.md | 308 +++++++ .../accessibility-quiz/step-057.md | 325 +++++++ .../accessibility-quiz/step-058.md | 318 +++++++ .../accessibility-quiz/step-059.md | 314 +++++++ .../accessibility-quiz/step-060.md | 317 +++++++ .../accessibility-quiz/step-061.md | 362 ++++++++ .../accessibility-quiz/step-062.md | 338 +++++++ .../accessibility-quiz/step-063.md | 358 ++++++++ .../accessibility-quiz/step-064.md | 361 ++++++++ .../accessibility-quiz/step-065.md | 344 +++++++ .../accessibility-quiz/step-066.md | 352 +++++++ .../accessibility-quiz/step-067.md | 689 ++++++++++++++ .../basic-css-cafe-menu/part-001.md | 43 - .../basic-css-cafe-menu/part-002.md | 61 -- .../basic-css-cafe-menu/part-003.md | 47 - .../basic-css-cafe-menu/part-004.md | 54 -- .../basic-css-cafe-menu/part-005.md | 60 -- .../basic-css-cafe-menu/part-006.md | 62 -- .../basic-css-cafe-menu/part-007.md | 59 -- .../basic-css-cafe-menu/part-008.md | 59 -- .../basic-css-cafe-menu/part-009.md | 61 -- .../basic-css-cafe-menu/part-010.md | 70 -- .../basic-css-cafe-menu/part-011.md | 57 -- .../basic-css-cafe-menu/part-012.md | 71 -- .../basic-css-cafe-menu/part-013.md | 87 -- .../basic-css-cafe-menu/part-014.md | 73 -- .../basic-css-cafe-menu/part-015.md | 74 -- .../basic-css-cafe-menu/part-016.md | 65 -- .../basic-css-cafe-menu/part-017.md | 89 -- .../basic-css-cafe-menu/part-018.md | 72 -- .../basic-css-cafe-menu/part-019.md | 70 -- .../basic-css-cafe-menu/part-020.md | 64 -- .../basic-css-cafe-menu/part-021.md | 77 -- .../basic-css-cafe-menu/part-022.md | 76 -- .../basic-css-cafe-menu/part-023.md | 79 -- .../basic-css-cafe-menu/part-024.md | 74 -- .../basic-css-cafe-menu/part-025.md | 74 -- .../basic-css-cafe-menu/part-026.md | 83 -- .../basic-css-cafe-menu/part-027.md | 85 -- .../basic-css-cafe-menu/part-028.md | 75 -- .../basic-css-cafe-menu/part-029.md | 92 -- .../basic-css-cafe-menu/part-030.md | 86 -- .../basic-css-cafe-menu/part-031.md | 88 -- .../basic-css-cafe-menu/part-032.md | 128 --- .../basic-css-cafe-menu/part-033.md | 100 -- .../basic-css-cafe-menu/part-034.md | 105 --- .../basic-css-cafe-menu/part-035.md | 102 --- .../basic-css-cafe-menu/part-036.md | 106 --- .../basic-css-cafe-menu/part-037.md | 108 --- .../basic-css-cafe-menu/part-038.md | 117 --- .../basic-css-cafe-menu/part-039.md | 107 --- .../basic-css-cafe-menu/part-040.md | 111 --- .../basic-css-cafe-menu/part-041.md | 103 --- .../basic-css-cafe-menu/part-042.md | 108 --- .../basic-css-cafe-menu/part-043.md | 119 --- .../basic-css-cafe-menu/part-044.md | 100 -- .../basic-css-cafe-menu/part-045.md | 126 --- .../basic-css-cafe-menu/part-046.md | 106 --- .../basic-css-cafe-menu/part-047.md | 114 --- .../basic-css-cafe-menu/part-048.md | 110 --- .../basic-css-cafe-menu/part-049.md | 111 --- .../basic-css-cafe-menu/part-050.md | 119 --- .../basic-css-cafe-menu/part-051.md | 120 --- .../basic-css-cafe-menu/part-052.md | 104 --- .../basic-css-cafe-menu/part-053.md | 145 --- .../basic-css-cafe-menu/part-054.md | 135 --- .../basic-css-cafe-menu/part-055.md | 144 --- .../basic-css-cafe-menu/part-056.md | 147 --- .../basic-css-cafe-menu/part-057.md | 122 --- .../basic-css-cafe-menu/part-058.md | 121 --- .../basic-css-cafe-menu/part-059.md | 138 --- .../basic-css-cafe-menu/part-060.md | 121 --- .../basic-css-cafe-menu/part-061.md | 135 --- .../basic-css-cafe-menu/part-062.md | 134 --- .../basic-css-cafe-menu/part-063.md | 147 --- .../basic-css-cafe-menu/part-064.md | 149 --- .../basic-css-cafe-menu/part-065.md | 156 ---- .../basic-css-cafe-menu/part-066.md | 141 --- .../basic-css-cafe-menu/part-067.md | 158 ---- .../basic-css-cafe-menu/part-068.md | 156 ---- .../basic-css-cafe-menu/part-069.md | 148 --- .../basic-css-cafe-menu/part-070.md | 152 ---- .../basic-css-cafe-menu/part-071.md | 153 ---- .../basic-css-cafe-menu/part-072.md | 150 --- .../basic-css-cafe-menu/part-073.md | 150 --- .../basic-css-cafe-menu/part-074.md | 176 ---- .../basic-css-cafe-menu/part-075.md | 162 ---- .../basic-css-cafe-menu/part-076.md | 167 ---- .../basic-css-cafe-menu/part-077.md | 157 ---- .../basic-css-cafe-menu/part-078.md | 154 ---- .../basic-css-cafe-menu/part-079.md | 178 ---- .../basic-css-cafe-menu/part-080.md | 175 ---- .../basic-css-cafe-menu/part-081.md | 182 ---- .../basic-css-cafe-menu/part-082.md | 186 ---- .../basic-css-cafe-menu/part-083.md | 189 ---- .../basic-css-cafe-menu/part-084.md | 182 ---- .../basic-css-cafe-menu/part-085.md | 184 ---- .../basic-css-cafe-menu/part-086.md | 183 ---- .../basic-css-cafe-menu/part-087.md | 195 ---- .../basic-css-cafe-menu/part-088.md | 191 ---- .../basic-css-cafe-menu/part-089.md | 194 ---- .../basic-css-cafe-menu/part-090.md | 223 ----- .../basic-css-cafe-menu/part-091.md | 199 ---- .../basic-css-cafe-menu/part-092.md | 363 -------- .../basic-css-cafe-menu/step-001.md | 43 + .../basic-css-cafe-menu/step-002.md | 61 ++ .../basic-css-cafe-menu/step-003.md | 47 + .../basic-css-cafe-menu/step-004.md | 54 ++ .../basic-css-cafe-menu/step-005.md | 60 ++ .../basic-css-cafe-menu/step-006.md | 62 ++ .../basic-css-cafe-menu/step-007.md | 59 ++ .../basic-css-cafe-menu/step-008.md | 59 ++ .../basic-css-cafe-menu/step-009.md | 61 ++ .../basic-css-cafe-menu/step-010.md | 70 ++ .../basic-css-cafe-menu/step-011.md | 57 ++ .../basic-css-cafe-menu/step-012.md | 71 ++ .../basic-css-cafe-menu/step-013.md | 87 ++ .../basic-css-cafe-menu/step-014.md | 73 ++ .../basic-css-cafe-menu/step-015.md | 74 ++ .../basic-css-cafe-menu/step-016.md | 65 ++ .../basic-css-cafe-menu/step-017.md | 89 ++ .../basic-css-cafe-menu/step-018.md | 72 ++ .../basic-css-cafe-menu/step-019.md | 70 ++ .../basic-css-cafe-menu/step-020.md | 64 ++ .../basic-css-cafe-menu/step-021.md | 77 ++ .../basic-css-cafe-menu/step-022.md | 76 ++ .../basic-css-cafe-menu/step-023.md | 79 ++ .../basic-css-cafe-menu/step-024.md | 74 ++ .../basic-css-cafe-menu/step-025.md | 74 ++ .../basic-css-cafe-menu/step-026.md | 83 ++ .../basic-css-cafe-menu/step-027.md | 85 ++ .../basic-css-cafe-menu/step-028.md | 75 ++ .../basic-css-cafe-menu/step-029.md | 92 ++ .../basic-css-cafe-menu/step-030.md | 86 ++ .../basic-css-cafe-menu/step-031.md | 88 ++ .../basic-css-cafe-menu/step-032.md | 128 +++ .../basic-css-cafe-menu/step-033.md | 100 ++ .../basic-css-cafe-menu/step-034.md | 105 +++ .../basic-css-cafe-menu/step-035.md | 102 +++ .../basic-css-cafe-menu/step-036.md | 106 +++ .../basic-css-cafe-menu/step-037.md | 108 +++ .../basic-css-cafe-menu/step-038.md | 117 +++ .../basic-css-cafe-menu/step-039.md | 107 +++ .../basic-css-cafe-menu/step-040.md | 111 +++ .../basic-css-cafe-menu/step-041.md | 103 +++ .../basic-css-cafe-menu/step-042.md | 108 +++ .../basic-css-cafe-menu/step-043.md | 119 +++ .../basic-css-cafe-menu/step-044.md | 100 ++ .../basic-css-cafe-menu/step-045.md | 126 +++ .../basic-css-cafe-menu/step-046.md | 106 +++ .../basic-css-cafe-menu/step-047.md | 114 +++ .../basic-css-cafe-menu/step-048.md | 110 +++ .../basic-css-cafe-menu/step-049.md | 111 +++ .../basic-css-cafe-menu/step-050.md | 119 +++ .../basic-css-cafe-menu/step-051.md | 120 +++ .../basic-css-cafe-menu/step-052.md | 104 +++ .../basic-css-cafe-menu/step-053.md | 145 +++ .../basic-css-cafe-menu/step-054.md | 135 +++ .../basic-css-cafe-menu/step-055.md | 144 +++ .../basic-css-cafe-menu/step-056.md | 147 +++ .../basic-css-cafe-menu/step-057.md | 122 +++ .../basic-css-cafe-menu/step-058.md | 121 +++ .../basic-css-cafe-menu/step-059.md | 138 +++ .../basic-css-cafe-menu/step-060.md | 121 +++ .../basic-css-cafe-menu/step-061.md | 135 +++ .../basic-css-cafe-menu/step-062.md | 134 +++ .../basic-css-cafe-menu/step-063.md | 147 +++ .../basic-css-cafe-menu/step-064.md | 149 +++ .../basic-css-cafe-menu/step-065.md | 156 ++++ .../basic-css-cafe-menu/step-066.md | 141 +++ .../basic-css-cafe-menu/step-067.md | 158 ++++ .../basic-css-cafe-menu/step-068.md | 156 ++++ .../basic-css-cafe-menu/step-069.md | 148 +++ .../basic-css-cafe-menu/step-070.md | 152 ++++ .../basic-css-cafe-menu/step-071.md | 153 ++++ .../basic-css-cafe-menu/step-072.md | 150 +++ .../basic-css-cafe-menu/step-073.md | 150 +++ .../basic-css-cafe-menu/step-074.md | 176 ++++ .../basic-css-cafe-menu/step-075.md | 162 ++++ .../basic-css-cafe-menu/step-076.md | 167 ++++ .../basic-css-cafe-menu/step-077.md | 157 ++++ .../basic-css-cafe-menu/step-078.md | 154 ++++ .../basic-css-cafe-menu/step-079.md | 178 ++++ .../basic-css-cafe-menu/step-080.md | 175 ++++ .../basic-css-cafe-menu/step-081.md | 182 ++++ .../basic-css-cafe-menu/step-082.md | 186 ++++ .../basic-css-cafe-menu/step-083.md | 189 ++++ .../basic-css-cafe-menu/step-084.md | 182 ++++ .../basic-css-cafe-menu/step-085.md | 184 ++++ .../basic-css-cafe-menu/step-086.md | 183 ++++ .../basic-css-cafe-menu/step-087.md | 195 ++++ .../basic-css-cafe-menu/step-088.md | 191 ++++ .../basic-css-cafe-menu/step-089.md | 194 ++++ .../basic-css-cafe-menu/step-090.md | 223 +++++ .../basic-css-cafe-menu/step-091.md | 199 ++++ .../basic-css-cafe-menu/step-092.md | 363 ++++++++ .../basic-html-cat-photo-app/part-001.md | 59 -- .../basic-html-cat-photo-app/part-002.md | 82 -- .../basic-html-cat-photo-app/part-003.md | 60 -- .../basic-html-cat-photo-app/part-004.md | 68 -- .../basic-html-cat-photo-app/part-005.md | 73 -- .../basic-html-cat-photo-app/part-006.md | 95 -- .../basic-html-cat-photo-app/part-007.md | 61 -- .../basic-html-cat-photo-app/part-008.md | 59 -- .../basic-html-cat-photo-app/part-009.md | 57 -- .../basic-html-cat-photo-app/part-010.md | 79 -- .../basic-html-cat-photo-app/part-011.md | 57 -- .../basic-html-cat-photo-app/part-012.md | 66 -- .../basic-html-cat-photo-app/part-013.md | 55 -- .../basic-html-cat-photo-app/part-014.md | 88 -- .../basic-html-cat-photo-app/part-015.md | 63 -- .../basic-html-cat-photo-app/part-016.md | 81 -- .../basic-html-cat-photo-app/part-017.md | 75 -- .../basic-html-cat-photo-app/part-018.md | 82 -- .../basic-html-cat-photo-app/part-019.md | 58 -- .../basic-html-cat-photo-app/part-020.md | 77 -- .../basic-html-cat-photo-app/part-021.md | 88 -- .../basic-html-cat-photo-app/part-022.md | 76 -- .../basic-html-cat-photo-app/part-023.md | 106 --- .../basic-html-cat-photo-app/part-024.md | 85 -- .../basic-html-cat-photo-app/part-025.md | 79 -- .../basic-html-cat-photo-app/part-026.md | 92 -- .../basic-html-cat-photo-app/part-027.md | 72 -- .../basic-html-cat-photo-app/part-028.md | 100 -- .../basic-html-cat-photo-app/part-029.md | 97 -- .../basic-html-cat-photo-app/part-030.md | 123 --- .../basic-html-cat-photo-app/part-031.md | 96 -- .../basic-html-cat-photo-app/part-032.md | 98 -- .../basic-html-cat-photo-app/part-033.md | 103 --- .../basic-html-cat-photo-app/part-034.md | 88 -- .../basic-html-cat-photo-app/part-035.md | 116 --- .../basic-html-cat-photo-app/part-036.md | 109 --- .../basic-html-cat-photo-app/part-037.md | 104 --- .../basic-html-cat-photo-app/part-038.md | 103 --- .../basic-html-cat-photo-app/part-039.md | 104 --- .../basic-html-cat-photo-app/part-040.md | 91 -- .../basic-html-cat-photo-app/part-041.md | 93 -- .../basic-html-cat-photo-app/part-042.md | 101 -- .../basic-html-cat-photo-app/part-043.md | 135 --- .../basic-html-cat-photo-app/part-044.md | 104 --- .../basic-html-cat-photo-app/part-045.md | 89 -- .../basic-html-cat-photo-app/part-046.md | 107 --- .../basic-html-cat-photo-app/part-047.md | 98 -- .../basic-html-cat-photo-app/part-048.md | 101 -- .../basic-html-cat-photo-app/part-049.md | 100 -- .../basic-html-cat-photo-app/part-050.md | 105 --- .../basic-html-cat-photo-app/part-051.md | 128 --- .../basic-html-cat-photo-app/part-052.md | 114 --- .../basic-html-cat-photo-app/part-053.md | 128 --- .../basic-html-cat-photo-app/part-054.md | 86 -- .../basic-html-cat-photo-app/part-055.md | 136 --- .../basic-html-cat-photo-app/part-056.md | 98 -- .../basic-html-cat-photo-app/part-057.md | 122 --- .../basic-html-cat-photo-app/part-058.md | 124 --- .../basic-html-cat-photo-app/part-059.md | 106 --- .../basic-html-cat-photo-app/part-060.md | 117 --- .../basic-html-cat-photo-app/part-061.md | 102 --- .../basic-html-cat-photo-app/part-062.md | 104 --- .../basic-html-cat-photo-app/part-063.md | 118 --- .../basic-html-cat-photo-app/part-064.md | 108 --- .../basic-html-cat-photo-app/part-065.md | 110 --- .../basic-html-cat-photo-app/part-066.md | 105 --- .../basic-html-cat-photo-app/part-067.md | 166 ---- .../basic-html-cat-photo-app/step-001.md | 59 ++ .../basic-html-cat-photo-app/step-002.md | 82 ++ .../basic-html-cat-photo-app/step-003.md | 60 ++ .../basic-html-cat-photo-app/step-004.md | 68 ++ .../basic-html-cat-photo-app/step-005.md | 73 ++ .../basic-html-cat-photo-app/step-006.md | 95 ++ .../basic-html-cat-photo-app/step-007.md | 61 ++ .../basic-html-cat-photo-app/step-008.md | 59 ++ .../basic-html-cat-photo-app/step-009.md | 57 ++ .../basic-html-cat-photo-app/step-010.md | 79 ++ .../basic-html-cat-photo-app/step-011.md | 57 ++ .../basic-html-cat-photo-app/step-012.md | 66 ++ .../basic-html-cat-photo-app/step-013.md | 55 ++ .../basic-html-cat-photo-app/step-014.md | 88 ++ .../basic-html-cat-photo-app/step-015.md | 63 ++ .../basic-html-cat-photo-app/step-016.md | 81 ++ .../basic-html-cat-photo-app/step-017.md | 75 ++ .../basic-html-cat-photo-app/step-018.md | 82 ++ .../basic-html-cat-photo-app/step-019.md | 58 ++ .../basic-html-cat-photo-app/step-020.md | 77 ++ .../basic-html-cat-photo-app/step-021.md | 88 ++ .../basic-html-cat-photo-app/step-022.md | 76 ++ .../basic-html-cat-photo-app/step-023.md | 106 +++ .../basic-html-cat-photo-app/step-024.md | 85 ++ .../basic-html-cat-photo-app/step-025.md | 79 ++ .../basic-html-cat-photo-app/step-026.md | 92 ++ .../basic-html-cat-photo-app/step-027.md | 72 ++ .../basic-html-cat-photo-app/step-028.md | 100 ++ .../basic-html-cat-photo-app/step-029.md | 97 ++ .../basic-html-cat-photo-app/step-030.md | 123 +++ .../basic-html-cat-photo-app/step-031.md | 96 ++ .../basic-html-cat-photo-app/step-032.md | 98 ++ .../basic-html-cat-photo-app/step-033.md | 103 +++ .../basic-html-cat-photo-app/step-034.md | 88 ++ .../basic-html-cat-photo-app/step-035.md | 116 +++ .../basic-html-cat-photo-app/step-036.md | 109 +++ .../basic-html-cat-photo-app/step-037.md | 104 +++ .../basic-html-cat-photo-app/step-038.md | 103 +++ .../basic-html-cat-photo-app/step-039.md | 104 +++ .../basic-html-cat-photo-app/step-040.md | 91 ++ .../basic-html-cat-photo-app/step-041.md | 93 ++ .../basic-html-cat-photo-app/step-042.md | 101 ++ .../basic-html-cat-photo-app/step-043.md | 135 +++ .../basic-html-cat-photo-app/step-044.md | 104 +++ .../basic-html-cat-photo-app/step-045.md | 89 ++ .../basic-html-cat-photo-app/step-046.md | 107 +++ .../basic-html-cat-photo-app/step-047.md | 98 ++ .../basic-html-cat-photo-app/step-048.md | 101 ++ .../basic-html-cat-photo-app/step-049.md | 100 ++ .../basic-html-cat-photo-app/step-050.md | 105 +++ .../basic-html-cat-photo-app/step-051.md | 128 +++ .../basic-html-cat-photo-app/step-052.md | 114 +++ .../basic-html-cat-photo-app/step-053.md | 128 +++ .../basic-html-cat-photo-app/step-054.md | 86 ++ .../basic-html-cat-photo-app/step-055.md | 136 +++ .../basic-html-cat-photo-app/step-056.md | 98 ++ .../basic-html-cat-photo-app/step-057.md | 122 +++ .../basic-html-cat-photo-app/step-058.md | 124 +++ .../basic-html-cat-photo-app/step-059.md | 106 +++ .../basic-html-cat-photo-app/step-060.md | 117 +++ .../basic-html-cat-photo-app/step-061.md | 102 +++ .../basic-html-cat-photo-app/step-062.md | 104 +++ .../basic-html-cat-photo-app/step-063.md | 118 +++ .../basic-html-cat-photo-app/step-064.md | 108 +++ .../basic-html-cat-photo-app/step-065.md | 110 +++ .../basic-html-cat-photo-app/step-066.md | 105 +++ .../basic-html-cat-photo-app/step-067.md | 166 ++++ .../css-box-model/part-001.md | 55 -- .../css-box-model/part-002.md | 65 -- .../css-box-model/part-003.md | 42 - .../css-box-model/part-004.md | 41 - .../css-box-model/part-005.md | 43 - .../css-box-model/part-006.md | 47 - .../css-box-model/part-007.md | 59 -- .../css-box-model/part-008.md | 69 -- .../css-box-model/part-009.md | 54 -- .../css-box-model/part-010.md | 56 -- .../css-box-model/part-011.md | 67 -- .../css-box-model/part-012.md | 67 -- .../css-box-model/part-013.md | 64 -- .../css-box-model/part-014.md | 65 -- .../css-box-model/part-015.md | 66 -- .../css-box-model/part-016.md | 71 -- .../css-box-model/part-017.md | 74 -- .../css-box-model/part-018.md | 70 -- .../css-box-model/part-019.md | 71 -- .../css-box-model/part-020.md | 74 -- .../css-box-model/part-021.md | 75 -- .../css-box-model/part-022.md | 82 -- .../css-box-model/part-023.md | 84 -- .../css-box-model/part-024.md | 84 -- .../css-box-model/part-025.md | 79 -- .../css-box-model/part-026.md | 80 -- .../css-box-model/part-027.md | 81 -- .../css-box-model/part-028.md | 84 -- .../css-box-model/part-029.md | 93 -- .../css-box-model/part-030.md | 94 -- .../css-box-model/part-031.md | 87 -- .../css-box-model/part-032.md | 88 -- .../css-box-model/part-033.md | 89 -- .../css-box-model/part-034.md | 93 -- .../css-box-model/part-035.md | 92 -- .../css-box-model/part-036.md | 116 --- .../css-box-model/part-037.md | 95 -- .../css-box-model/part-038.md | 98 -- .../css-box-model/part-039.md | 97 -- .../css-box-model/part-040.md | 98 -- .../css-box-model/part-041.md | 101 -- .../css-box-model/part-042.md | 100 -- .../css-box-model/part-043.md | 103 --- .../css-box-model/part-044.md | 104 --- .../css-box-model/part-045.md | 103 --- .../css-box-model/part-046.md | 180 ---- .../css-box-model/step-001.md | 55 ++ .../css-box-model/step-002.md | 65 ++ .../css-box-model/step-003.md | 42 + .../css-box-model/step-004.md | 41 + .../css-box-model/step-005.md | 43 + .../css-box-model/step-006.md | 47 + .../css-box-model/step-007.md | 59 ++ .../css-box-model/step-008.md | 69 ++ .../css-box-model/step-009.md | 54 ++ .../css-box-model/step-010.md | 56 ++ .../css-box-model/step-011.md | 67 ++ .../css-box-model/step-012.md | 67 ++ .../css-box-model/step-013.md | 64 ++ .../css-box-model/step-014.md | 65 ++ .../css-box-model/step-015.md | 66 ++ .../css-box-model/step-016.md | 71 ++ .../css-box-model/step-017.md | 74 ++ .../css-box-model/step-018.md | 70 ++ .../css-box-model/step-019.md | 71 ++ .../css-box-model/step-020.md | 74 ++ .../css-box-model/step-021.md | 75 ++ .../css-box-model/step-022.md | 82 ++ .../css-box-model/step-023.md | 84 ++ .../css-box-model/step-024.md | 84 ++ .../css-box-model/step-025.md | 79 ++ .../css-box-model/step-026.md | 80 ++ .../css-box-model/step-027.md | 81 ++ .../css-box-model/step-028.md | 84 ++ .../css-box-model/step-029.md | 93 ++ .../css-box-model/step-030.md | 94 ++ .../css-box-model/step-031.md | 87 ++ .../css-box-model/step-032.md | 88 ++ .../css-box-model/step-033.md | 89 ++ .../css-box-model/step-034.md | 93 ++ .../css-box-model/step-035.md | 92 ++ .../css-box-model/step-036.md | 116 +++ .../css-box-model/step-037.md | 95 ++ .../css-box-model/step-038.md | 98 ++ .../css-box-model/step-039.md | 97 ++ .../css-box-model/step-040.md | 98 ++ .../css-box-model/step-041.md | 101 ++ .../css-box-model/step-042.md | 100 ++ .../css-box-model/step-043.md | 103 +++ .../css-box-model/step-044.md | 104 +++ .../css-box-model/step-045.md | 103 +++ .../css-box-model/step-046.md | 180 ++++ .../css-piano/part-001.md | 131 --- .../css-piano/part-002.md | 64 -- .../css-piano/part-003.md | 57 -- .../css-piano/part-004.md | 60 -- .../css-piano/part-005.md | 60 -- .../css-piano/part-006.md | 95 -- .../css-piano/part-007.md | 74 -- .../css-piano/part-008.md | 99 -- .../css-piano/part-009.md | 77 -- .../css-piano/part-010.md | 83 -- .../css-piano/part-011.md | 95 -- .../css-piano/part-012.md | 81 -- .../css-piano/part-013.md | 102 --- .../css-piano/part-014.md | 88 -- .../css-piano/part-015.md | 89 -- .../css-piano/part-016.md | 117 --- .../css-piano/part-017.md | 103 --- .../css-piano/part-018.md | 119 --- .../css-piano/part-019.md | 110 --- .../css-piano/part-020.md | 112 --- .../css-piano/part-021.md | 144 --- .../css-piano/part-022.md | 129 --- .../css-piano/part-023.md | 115 --- .../css-piano/part-024.md | 116 --- .../css-piano/part-025.md | 117 --- .../css-piano/part-026.md | 118 --- .../css-piano/part-027.md | 127 --- .../css-piano/part-028.md | 133 --- .../css-piano/part-029.md | 136 --- .../css-piano/part-030.md | 139 --- .../css-piano/part-031.md | 133 --- .../css-piano/part-032.md | 144 --- .../css-piano/part-033.md | 166 ---- .../css-piano/step-001.md | 131 +++ .../css-piano/step-002.md | 64 ++ .../css-piano/step-003.md | 57 ++ .../css-piano/step-004.md | 60 ++ .../css-piano/step-005.md | 60 ++ .../css-piano/step-006.md | 95 ++ .../css-piano/step-007.md | 74 ++ .../css-piano/step-008.md | 99 ++ .../css-piano/step-009.md | 77 ++ .../css-piano/step-010.md | 83 ++ .../css-piano/step-011.md | 95 ++ .../css-piano/step-012.md | 81 ++ .../css-piano/step-013.md | 102 +++ .../css-piano/step-014.md | 88 ++ .../css-piano/step-015.md | 89 ++ .../css-piano/step-016.md | 117 +++ .../css-piano/step-017.md | 103 +++ .../css-piano/step-018.md | 119 +++ .../css-piano/step-019.md | 110 +++ .../css-piano/step-020.md | 112 +++ .../css-piano/step-021.md | 144 +++ .../css-piano/step-022.md | 129 +++ .../css-piano/step-023.md | 115 +++ .../css-piano/step-024.md | 116 +++ .../css-piano/step-025.md | 117 +++ .../css-piano/step-026.md | 118 +++ .../css-piano/step-027.md | 127 +++ .../css-piano/step-028.md | 133 +++ .../css-piano/step-029.md | 136 +++ .../css-piano/step-030.md | 139 +++ .../css-piano/step-031.md | 133 +++ .../css-piano/step-032.md | 144 +++ .../css-piano/step-033.md | 166 ++++ .../css-picasso-painting/part-001.md | 112 --- .../css-picasso-painting/part-002.md | 63 -- .../css-picasso-painting/part-003.md | 74 -- .../css-picasso-painting/part-004.md | 58 -- .../css-picasso-painting/part-005.md | 50 - .../css-picasso-painting/part-006.md | 51 -- .../css-picasso-painting/part-007.md | 54 -- .../css-picasso-painting/part-008.md | 56 -- .../css-picasso-painting/part-009.md | 69 -- .../css-picasso-painting/part-010.md | 59 -- .../css-picasso-painting/part-011.md | 68 -- .../css-picasso-painting/part-012.md | 70 -- .../css-picasso-painting/part-013.md | 84 -- .../css-picasso-painting/part-014.md | 79 -- .../css-picasso-painting/part-015.md | 74 -- .../css-picasso-painting/part-016.md | 93 -- .../css-picasso-painting/part-017.md | 91 -- .../css-picasso-painting/part-018.md | 102 --- .../css-picasso-painting/part-019.md | 88 -- .../css-picasso-painting/part-020.md | 107 --- .../css-picasso-painting/part-021.md | 105 --- .../css-picasso-painting/part-022.md | 116 --- .../css-picasso-painting/part-023.md | 114 --- .../css-picasso-painting/part-024.md | 105 --- .../css-picasso-painting/part-025.md | 126 --- .../css-picasso-painting/part-026.md | 124 --- .../css-picasso-painting/part-027.md | 115 --- .../css-picasso-painting/part-028.md | 136 --- .../css-picasso-painting/part-029.md | 122 --- .../css-picasso-painting/part-030.md | 134 --- .../css-picasso-painting/part-031.md | 145 --- .../css-picasso-painting/part-032.md | 143 --- .../css-picasso-painting/part-033.md | 134 --- .../css-picasso-painting/part-034.md | 141 --- .../css-picasso-painting/part-035.md | 155 ---- .../css-picasso-painting/part-036.md | 157 ---- .../css-picasso-painting/part-037.md | 160 ---- .../css-picasso-painting/part-038.md | 168 ---- .../css-picasso-painting/part-039.md | 166 ---- .../css-picasso-painting/part-040.md | 177 ---- .../css-picasso-painting/part-041.md | 163 ---- .../css-picasso-painting/part-042.md | 182 ---- .../css-picasso-painting/part-043.md | 180 ---- .../css-picasso-painting/part-044.md | 191 ---- .../css-picasso-painting/part-045.md | 189 ---- .../css-picasso-painting/part-046.md | 200 ---- .../css-picasso-painting/part-047.md | 198 ---- .../css-picasso-painting/part-048.md | 189 ---- .../css-picasso-painting/part-049.md | 210 ----- .../css-picasso-painting/part-050.md | 216 ----- .../css-picasso-painting/part-051.md | 206 ----- .../css-picasso-painting/part-052.md | 216 ----- .../css-picasso-painting/part-053.md | 219 ----- .../css-picasso-painting/part-054.md | 224 ----- .../css-picasso-painting/part-055.md | 227 ----- .../css-picasso-painting/part-056.md | 224 ----- .../css-picasso-painting/part-057.md | 244 ----- .../css-picasso-painting/part-058.md | 239 ----- .../css-picasso-painting/part-059.md | 237 ----- .../css-picasso-painting/part-060.md | 297 ------ .../css-picasso-painting/part-061.md | 280 ------ .../css-picasso-painting/part-062.md | 286 ------ .../css-picasso-painting/part-063.md | 284 ------ .../css-picasso-painting/part-064.md | 295 ------ .../css-picasso-painting/part-065.md | 281 ------ .../css-picasso-painting/part-066.md | 294 ------ .../css-picasso-painting/part-067.md | 285 ------ .../css-picasso-painting/part-068.md | 300 ------ .../css-picasso-painting/part-069.md | 303 ------ .../css-picasso-painting/part-070.md | 294 ------ .../css-picasso-painting/part-071.md | 308 ------- .../css-picasso-painting/part-072.md | 313 ------- .../css-picasso-painting/part-073.md | 310 ------- .../css-picasso-painting/part-074.md | 324 ------- .../css-picasso-painting/part-075.md | 310 ------- .../css-picasso-painting/part-076.md | 325 ------- .../css-picasso-painting/part-077.md | 328 ------- .../css-picasso-painting/part-078.md | 319 ------- .../css-picasso-painting/part-079.md | 347 ------- .../css-picasso-painting/part-080.md | 336 ------- .../css-picasso-painting/part-081.md | 347 ------- .../css-picasso-painting/part-082.md | 358 -------- .../css-picasso-painting/part-083.md | 364 -------- .../css-picasso-painting/part-084.md | 362 -------- .../css-picasso-painting/part-085.md | 353 ------- .../css-picasso-painting/part-086.md | 380 -------- .../css-picasso-painting/part-087.md | 381 -------- .../css-picasso-painting/part-088.md | 387 -------- .../css-picasso-painting/part-089.md | 383 -------- .../css-picasso-painting/step-001.md | 112 +++ .../css-picasso-painting/step-002.md | 63 ++ .../css-picasso-painting/step-003.md | 74 ++ .../css-picasso-painting/step-004.md | 58 ++ .../css-picasso-painting/step-005.md | 50 + .../css-picasso-painting/step-006.md | 51 ++ .../css-picasso-painting/step-007.md | 54 ++ .../css-picasso-painting/step-008.md | 56 ++ .../css-picasso-painting/step-009.md | 69 ++ .../css-picasso-painting/step-010.md | 59 ++ .../css-picasso-painting/step-011.md | 68 ++ .../css-picasso-painting/step-012.md | 70 ++ .../css-picasso-painting/step-013.md | 84 ++ .../css-picasso-painting/step-014.md | 79 ++ .../css-picasso-painting/step-015.md | 74 ++ .../css-picasso-painting/step-016.md | 93 ++ .../css-picasso-painting/step-017.md | 91 ++ .../css-picasso-painting/step-018.md | 102 +++ .../css-picasso-painting/step-019.md | 88 ++ .../css-picasso-painting/step-020.md | 107 +++ .../css-picasso-painting/step-021.md | 105 +++ .../css-picasso-painting/step-022.md | 116 +++ .../css-picasso-painting/step-023.md | 114 +++ .../css-picasso-painting/step-024.md | 105 +++ .../css-picasso-painting/step-025.md | 126 +++ .../css-picasso-painting/step-026.md | 124 +++ .../css-picasso-painting/step-027.md | 115 +++ .../css-picasso-painting/step-028.md | 136 +++ .../css-picasso-painting/step-029.md | 122 +++ .../css-picasso-painting/step-030.md | 134 +++ .../css-picasso-painting/step-031.md | 145 +++ .../css-picasso-painting/step-032.md | 143 +++ .../css-picasso-painting/step-033.md | 134 +++ .../css-picasso-painting/step-034.md | 141 +++ .../css-picasso-painting/step-035.md | 155 ++++ .../css-picasso-painting/step-036.md | 157 ++++ .../css-picasso-painting/step-037.md | 160 ++++ .../css-picasso-painting/step-038.md | 168 ++++ .../css-picasso-painting/step-039.md | 166 ++++ .../css-picasso-painting/step-040.md | 177 ++++ .../css-picasso-painting/step-041.md | 163 ++++ .../css-picasso-painting/step-042.md | 182 ++++ .../css-picasso-painting/step-043.md | 180 ++++ .../css-picasso-painting/step-044.md | 191 ++++ .../css-picasso-painting/step-045.md | 189 ++++ .../css-picasso-painting/step-046.md | 200 ++++ .../css-picasso-painting/step-047.md | 198 ++++ .../css-picasso-painting/step-048.md | 189 ++++ .../css-picasso-painting/step-049.md | 210 +++++ .../css-picasso-painting/step-050.md | 216 +++++ .../css-picasso-painting/step-051.md | 206 +++++ .../css-picasso-painting/step-052.md | 216 +++++ .../css-picasso-painting/step-053.md | 219 +++++ .../css-picasso-painting/step-054.md | 224 +++++ .../css-picasso-painting/step-055.md | 227 +++++ .../css-picasso-painting/step-056.md | 224 +++++ .../css-picasso-painting/step-057.md | 244 +++++ .../css-picasso-painting/step-058.md | 239 +++++ .../css-picasso-painting/step-059.md | 237 +++++ .../css-picasso-painting/step-060.md | 297 ++++++ .../css-picasso-painting/step-061.md | 280 ++++++ .../css-picasso-painting/step-062.md | 286 ++++++ .../css-picasso-painting/step-063.md | 284 ++++++ .../css-picasso-painting/step-064.md | 295 ++++++ .../css-picasso-painting/step-065.md | 281 ++++++ .../css-picasso-painting/step-066.md | 294 ++++++ .../css-picasso-painting/step-067.md | 285 ++++++ .../css-picasso-painting/step-068.md | 300 ++++++ .../css-picasso-painting/step-069.md | 303 ++++++ .../css-picasso-painting/step-070.md | 294 ++++++ .../css-picasso-painting/step-071.md | 308 +++++++ .../css-picasso-painting/step-072.md | 313 +++++++ .../css-picasso-painting/step-073.md | 310 +++++++ .../css-picasso-painting/step-074.md | 324 +++++++ .../css-picasso-painting/step-075.md | 310 +++++++ .../css-picasso-painting/step-076.md | 325 +++++++ .../css-picasso-painting/step-077.md | 328 +++++++ .../css-picasso-painting/step-078.md | 319 +++++++ .../css-picasso-painting/step-079.md | 347 +++++++ .../css-picasso-painting/step-080.md | 336 +++++++ .../css-picasso-painting/step-081.md | 347 +++++++ .../css-picasso-painting/step-082.md | 358 ++++++++ .../css-picasso-painting/step-083.md | 364 ++++++++ .../css-picasso-painting/step-084.md | 362 ++++++++ .../css-picasso-painting/step-085.md | 353 +++++++ .../css-picasso-painting/step-086.md | 380 ++++++++ .../css-picasso-painting/step-087.md | 381 ++++++++ .../css-picasso-painting/step-088.md | 387 ++++++++ .../css-picasso-painting/step-089.md | 383 ++++++++ .../css-variables-skyline/part-001.md | 47 - .../css-variables-skyline/part-002.md | 54 -- .../css-variables-skyline/part-003.md | 69 -- .../css-variables-skyline/part-004.md | 101 -- .../css-variables-skyline/part-005.md | 55 -- .../css-variables-skyline/part-006.md | 60 -- .../css-variables-skyline/part-007.md | 69 -- .../css-variables-skyline/part-008.md | 64 -- .../css-variables-skyline/part-009.md | 67 -- .../css-variables-skyline/part-010.md | 82 -- .../css-variables-skyline/part-011.md | 104 --- .../css-variables-skyline/part-012.md | 137 --- .../css-variables-skyline/part-013.md | 111 --- .../css-variables-skyline/part-014.md | 102 --- .../css-variables-skyline/part-015.md | 97 -- .../css-variables-skyline/part-016.md | 123 --- .../css-variables-skyline/part-017.md | 98 -- .../css-variables-skyline/part-018.md | 132 --- .../css-variables-skyline/part-019.md | 132 --- .../css-variables-skyline/part-020.md | 126 --- .../css-variables-skyline/part-021.md | 141 --- .../css-variables-skyline/part-022.md | 139 --- .../css-variables-skyline/part-023.md | 123 --- .../css-variables-skyline/part-024.md | 141 --- .../css-variables-skyline/part-025.md | 154 ---- .../css-variables-skyline/part-026.md | 134 --- .../css-variables-skyline/part-027.md | 137 --- .../css-variables-skyline/part-028.md | 146 --- .../css-variables-skyline/part-029.md | 160 ---- .../css-variables-skyline/part-030.md | 191 ---- .../css-variables-skyline/part-031.md | 252 ----- .../css-variables-skyline/part-032.md | 189 ---- .../css-variables-skyline/part-033.md | 222 ----- .../css-variables-skyline/part-034.md | 180 ---- .../css-variables-skyline/part-035.md | 202 ---- .../css-variables-skyline/part-036.md | 202 ---- .../css-variables-skyline/part-037.md | 201 ---- .../css-variables-skyline/part-038.md | 195 ---- .../css-variables-skyline/part-039.md | 196 ---- .../css-variables-skyline/part-040.md | 217 ----- .../css-variables-skyline/part-041.md | 222 ----- .../css-variables-skyline/part-042.md | 236 ----- .../css-variables-skyline/part-043.md | 221 ----- .../css-variables-skyline/part-044.md | 226 ----- .../css-variables-skyline/part-045.md | 197 ---- .../css-variables-skyline/part-046.md | 206 ----- .../css-variables-skyline/part-047.md | 202 ---- .../css-variables-skyline/part-048.md | 209 ----- .../css-variables-skyline/part-049.md | 206 ----- .../css-variables-skyline/part-050.md | 210 ----- .../css-variables-skyline/part-051.md | 239 ----- .../css-variables-skyline/part-052.md | 210 ----- .../css-variables-skyline/part-053.md | 208 ----- .../css-variables-skyline/part-054.md | 259 ------ .../css-variables-skyline/part-055.md | 237 ----- .../css-variables-skyline/part-056.md | 223 ----- .../css-variables-skyline/part-057.md | 223 ----- .../css-variables-skyline/part-058.md | 226 ----- .../css-variables-skyline/part-059.md | 222 ----- .../css-variables-skyline/part-060.md | 244 ----- .../css-variables-skyline/part-061.md | 222 ----- .../css-variables-skyline/part-062.md | 248 ----- .../css-variables-skyline/part-063.md | 257 ------ .../css-variables-skyline/part-064.md | 257 ------ .../css-variables-skyline/part-065.md | 244 ----- .../css-variables-skyline/part-066.md | 276 ------ .../css-variables-skyline/part-067.md | 253 ------ .../css-variables-skyline/part-068.md | 252 ----- .../css-variables-skyline/part-069.md | 254 ------ .../css-variables-skyline/part-070.md | 264 ------ .../css-variables-skyline/part-071.md | 285 ------ .../css-variables-skyline/part-072.md | 265 ------ .../css-variables-skyline/part-073.md | 290 ------ .../css-variables-skyline/part-074.md | 286 ------ .../css-variables-skyline/part-075.md | 279 ------ .../css-variables-skyline/part-076.md | 283 ------ .../css-variables-skyline/part-077.md | 296 ------ .../css-variables-skyline/part-078.md | 306 ------- .../css-variables-skyline/part-079.md | 297 ------ .../css-variables-skyline/part-080.md | 300 ------ .../css-variables-skyline/part-081.md | 311 ------- .../css-variables-skyline/part-082.md | 313 ------- .../css-variables-skyline/part-083.md | 316 ------- .../css-variables-skyline/part-084.md | 314 ------- .../css-variables-skyline/part-085.md | 325 ------- .../css-variables-skyline/part-086.md | 323 ------- .../css-variables-skyline/part-087.md | 329 ------- .../css-variables-skyline/part-088.md | 347 ------- .../css-variables-skyline/part-089.md | 346 ------- .../css-variables-skyline/part-090.md | 347 ------- .../css-variables-skyline/part-091.md | 339 ------- .../css-variables-skyline/part-092.md | 345 ------- .../css-variables-skyline/part-093.md | 354 ------- .../css-variables-skyline/part-094.md | 349 ------- .../css-variables-skyline/part-095.md | 348 ------- .../css-variables-skyline/part-096.md | 361 -------- .../css-variables-skyline/part-097.md | 358 -------- .../css-variables-skyline/part-098.md | 360 -------- .../css-variables-skyline/part-099.md | 363 -------- .../css-variables-skyline/part-100.md | 376 -------- .../css-variables-skyline/part-101.md | 373 -------- .../css-variables-skyline/part-102.md | 376 -------- .../css-variables-skyline/part-103.md | 380 -------- .../css-variables-skyline/part-104.md | 395 -------- .../css-variables-skyline/part-105.md | 401 -------- .../css-variables-skyline/part-106.md | 390 -------- .../css-variables-skyline/part-107.md | 408 --------- .../css-variables-skyline/part-108.md | 408 --------- .../css-variables-skyline/part-109.md | 403 -------- .../css-variables-skyline/part-110.md | 401 -------- .../css-variables-skyline/part-111.md | 402 -------- .../css-variables-skyline/part-112.md | 420 --------- .../css-variables-skyline/part-113.md | 409 --------- .../css-variables-skyline/part-114.md | 421 --------- .../css-variables-skyline/part-115.md | 423 --------- .../css-variables-skyline/part-116.md | 436 --------- .../css-variables-skyline/part-117.md | 448 --------- .../css-variables-skyline/part-118.md | 860 ------------------ .../css-variables-skyline/step-001.md | 47 + .../css-variables-skyline/step-002.md | 54 ++ .../css-variables-skyline/step-003.md | 69 ++ .../css-variables-skyline/step-004.md | 101 ++ .../css-variables-skyline/step-005.md | 55 ++ .../css-variables-skyline/step-006.md | 60 ++ .../css-variables-skyline/step-007.md | 69 ++ .../css-variables-skyline/step-008.md | 64 ++ .../css-variables-skyline/step-009.md | 67 ++ .../css-variables-skyline/step-010.md | 82 ++ .../css-variables-skyline/step-011.md | 104 +++ .../css-variables-skyline/step-012.md | 137 +++ .../css-variables-skyline/step-013.md | 111 +++ .../css-variables-skyline/step-014.md | 102 +++ .../css-variables-skyline/step-015.md | 97 ++ .../css-variables-skyline/step-016.md | 123 +++ .../css-variables-skyline/step-017.md | 98 ++ .../css-variables-skyline/step-018.md | 132 +++ .../css-variables-skyline/step-019.md | 132 +++ .../css-variables-skyline/step-020.md | 126 +++ .../css-variables-skyline/step-021.md | 141 +++ .../css-variables-skyline/step-022.md | 139 +++ .../css-variables-skyline/step-023.md | 123 +++ .../css-variables-skyline/step-024.md | 141 +++ .../css-variables-skyline/step-025.md | 154 ++++ .../css-variables-skyline/step-026.md | 134 +++ .../css-variables-skyline/step-027.md | 137 +++ .../css-variables-skyline/step-028.md | 146 +++ .../css-variables-skyline/step-029.md | 160 ++++ .../css-variables-skyline/step-030.md | 191 ++++ .../css-variables-skyline/step-031.md | 252 +++++ .../css-variables-skyline/step-032.md | 189 ++++ .../css-variables-skyline/step-033.md | 222 +++++ .../css-variables-skyline/step-034.md | 180 ++++ .../css-variables-skyline/step-035.md | 202 ++++ .../css-variables-skyline/step-036.md | 202 ++++ .../css-variables-skyline/step-037.md | 201 ++++ .../css-variables-skyline/step-038.md | 195 ++++ .../css-variables-skyline/step-039.md | 196 ++++ .../css-variables-skyline/step-040.md | 217 +++++ .../css-variables-skyline/step-041.md | 222 +++++ .../css-variables-skyline/step-042.md | 236 +++++ .../css-variables-skyline/step-043.md | 221 +++++ .../css-variables-skyline/step-044.md | 226 +++++ .../css-variables-skyline/step-045.md | 197 ++++ .../css-variables-skyline/step-046.md | 206 +++++ .../css-variables-skyline/step-047.md | 202 ++++ .../css-variables-skyline/step-048.md | 209 +++++ .../css-variables-skyline/step-049.md | 206 +++++ .../css-variables-skyline/step-050.md | 210 +++++ .../css-variables-skyline/step-051.md | 239 +++++ .../css-variables-skyline/step-052.md | 210 +++++ .../css-variables-skyline/step-053.md | 208 +++++ .../css-variables-skyline/step-054.md | 259 ++++++ .../css-variables-skyline/step-055.md | 237 +++++ .../css-variables-skyline/step-056.md | 223 +++++ .../css-variables-skyline/step-057.md | 223 +++++ .../css-variables-skyline/step-058.md | 226 +++++ .../css-variables-skyline/step-059.md | 222 +++++ .../css-variables-skyline/step-060.md | 244 +++++ .../css-variables-skyline/step-061.md | 222 +++++ .../css-variables-skyline/step-062.md | 248 +++++ .../css-variables-skyline/step-063.md | 257 ++++++ .../css-variables-skyline/step-064.md | 257 ++++++ .../css-variables-skyline/step-065.md | 244 +++++ .../css-variables-skyline/step-066.md | 276 ++++++ .../css-variables-skyline/step-067.md | 253 ++++++ .../css-variables-skyline/step-068.md | 252 +++++ .../css-variables-skyline/step-069.md | 254 ++++++ .../css-variables-skyline/step-070.md | 264 ++++++ .../css-variables-skyline/step-071.md | 285 ++++++ .../css-variables-skyline/step-072.md | 265 ++++++ .../css-variables-skyline/step-073.md | 290 ++++++ .../css-variables-skyline/step-074.md | 286 ++++++ .../css-variables-skyline/step-075.md | 279 ++++++ .../css-variables-skyline/step-076.md | 283 ++++++ .../css-variables-skyline/step-077.md | 296 ++++++ .../css-variables-skyline/step-078.md | 306 +++++++ .../css-variables-skyline/step-079.md | 297 ++++++ .../css-variables-skyline/step-080.md | 300 ++++++ .../css-variables-skyline/step-081.md | 311 +++++++ .../css-variables-skyline/step-082.md | 313 +++++++ .../css-variables-skyline/step-083.md | 316 +++++++ .../css-variables-skyline/step-084.md | 314 +++++++ .../css-variables-skyline/step-085.md | 325 +++++++ .../css-variables-skyline/step-086.md | 323 +++++++ .../css-variables-skyline/step-087.md | 329 +++++++ .../css-variables-skyline/step-088.md | 347 +++++++ .../css-variables-skyline/step-089.md | 346 +++++++ .../css-variables-skyline/step-090.md | 347 +++++++ .../css-variables-skyline/step-091.md | 339 +++++++ .../css-variables-skyline/step-092.md | 345 +++++++ .../css-variables-skyline/step-093.md | 354 +++++++ .../css-variables-skyline/step-094.md | 349 +++++++ .../css-variables-skyline/step-095.md | 348 +++++++ .../css-variables-skyline/step-096.md | 361 ++++++++ .../css-variables-skyline/step-097.md | 358 ++++++++ .../css-variables-skyline/step-098.md | 360 ++++++++ .../css-variables-skyline/step-099.md | 363 ++++++++ .../css-variables-skyline/step-100.md | 376 ++++++++ .../css-variables-skyline/step-101.md | 373 ++++++++ .../css-variables-skyline/step-102.md | 376 ++++++++ .../css-variables-skyline/step-103.md | 380 ++++++++ .../css-variables-skyline/step-104.md | 395 ++++++++ .../css-variables-skyline/step-105.md | 401 ++++++++ .../css-variables-skyline/step-106.md | 390 ++++++++ .../css-variables-skyline/step-107.md | 408 +++++++++ .../css-variables-skyline/step-108.md | 408 +++++++++ .../css-variables-skyline/step-109.md | 403 ++++++++ .../css-variables-skyline/step-110.md | 401 ++++++++ .../css-variables-skyline/step-111.md | 402 ++++++++ .../css-variables-skyline/step-112.md | 420 +++++++++ .../css-variables-skyline/step-113.md | 409 +++++++++ .../css-variables-skyline/step-114.md | 421 +++++++++ .../css-variables-skyline/step-115.md | 423 +++++++++ .../css-variables-skyline/step-116.md | 436 +++++++++ .../css-variables-skyline/step-117.md | 448 +++++++++ .../css-variables-skyline/step-118.md | 860 ++++++++++++++++++ .../registration-form/part-001.md | 46 - .../registration-form/part-002.md | 54 -- .../registration-form/part-003.md | 67 -- .../registration-form/part-004.md | 101 -- .../registration-form/part-005.md | 43 - .../registration-form/part-006.md | 54 -- .../registration-form/part-007.md | 54 -- .../registration-form/part-008.md | 51 -- .../registration-form/part-009.md | 64 -- .../registration-form/part-010.md | 63 -- .../registration-form/part-011.md | 63 -- .../registration-form/part-012.md | 61 -- .../registration-form/part-013.md | 81 -- .../registration-form/part-014.md | 72 -- .../registration-form/part-015.md | 94 -- .../registration-form/part-016.md | 87 -- .../registration-form/part-017.md | 79 -- .../registration-form/part-018.md | 93 -- .../registration-form/part-019.md | 73 -- .../registration-form/part-020.md | 81 -- .../registration-form/part-021.md | 75 -- .../registration-form/part-022.md | 84 -- .../registration-form/part-023.md | 81 -- .../registration-form/part-024.md | 105 --- .../registration-form/part-025.md | 83 -- .../registration-form/part-026.md | 85 -- .../registration-form/part-027.md | 88 -- .../registration-form/part-028.md | 102 --- .../registration-form/part-029.md | 84 -- .../registration-form/part-030.md | 94 -- .../registration-form/part-031.md | 116 --- .../registration-form/part-032.md | 110 --- .../registration-form/part-033.md | 105 --- .../registration-form/part-034.md | 95 -- .../registration-form/part-035.md | 95 -- .../registration-form/part-036.md | 155 ---- .../registration-form/part-037.md | 102 --- .../registration-form/part-038.md | 103 --- .../registration-form/part-039.md | 120 --- .../registration-form/part-040.md | 121 --- .../registration-form/part-041.md | 114 --- .../registration-form/part-042.md | 151 --- .../registration-form/part-043.md | 131 --- .../registration-form/part-044.md | 125 --- .../registration-form/part-045.md | 140 --- .../registration-form/part-046.md | 125 --- .../registration-form/part-047.md | 142 --- .../registration-form/part-048.md | 139 --- .../registration-form/part-049.md | 144 --- .../registration-form/part-050.md | 152 ---- .../registration-form/part-051.md | 145 --- .../registration-form/part-052.md | 143 --- .../registration-form/part-053.md | 145 --- .../registration-form/part-054.md | 150 --- .../registration-form/part-055.md | 151 --- .../registration-form/part-056.md | 152 ---- .../registration-form/part-057.md | 156 ---- .../registration-form/step-001.md | 46 + .../registration-form/step-002.md | 54 ++ .../registration-form/step-003.md | 67 ++ .../registration-form/step-004.md | 101 ++ .../registration-form/step-005.md | 43 + .../registration-form/step-006.md | 54 ++ .../registration-form/step-007.md | 54 ++ .../registration-form/step-008.md | 51 ++ .../registration-form/step-009.md | 64 ++ .../registration-form/step-010.md | 63 ++ .../registration-form/step-011.md | 63 ++ .../registration-form/step-012.md | 61 ++ .../registration-form/step-013.md | 81 ++ .../registration-form/step-014.md | 72 ++ .../registration-form/step-015.md | 94 ++ .../registration-form/step-016.md | 87 ++ .../registration-form/step-017.md | 79 ++ .../registration-form/step-018.md | 93 ++ .../registration-form/step-019.md | 73 ++ .../registration-form/step-020.md | 81 ++ .../registration-form/step-021.md | 75 ++ .../registration-form/step-022.md | 84 ++ .../registration-form/step-023.md | 81 ++ .../registration-form/step-024.md | 105 +++ .../registration-form/step-025.md | 83 ++ .../registration-form/step-026.md | 85 ++ .../registration-form/step-027.md | 88 ++ .../registration-form/step-028.md | 102 +++ .../registration-form/step-029.md | 84 ++ .../registration-form/step-030.md | 94 ++ .../registration-form/step-031.md | 116 +++ .../registration-form/step-032.md | 110 +++ .../registration-form/step-033.md | 105 +++ .../registration-form/step-034.md | 95 ++ .../registration-form/step-035.md | 95 ++ .../registration-form/step-036.md | 155 ++++ .../registration-form/step-037.md | 102 +++ .../registration-form/step-038.md | 103 +++ .../registration-form/step-039.md | 120 +++ .../registration-form/step-040.md | 121 +++ .../registration-form/step-041.md | 114 +++ .../registration-form/step-042.md | 151 +++ .../registration-form/step-043.md | 131 +++ .../registration-form/step-044.md | 125 +++ .../registration-form/step-045.md | 140 +++ .../registration-form/step-046.md | 125 +++ .../registration-form/step-047.md | 142 +++ .../registration-form/step-048.md | 139 +++ .../registration-form/step-049.md | 144 +++ .../registration-form/step-050.md | 152 ++++ .../registration-form/step-051.md | 145 +++ .../registration-form/step-052.md | 143 +++ .../registration-form/step-053.md | 145 +++ .../registration-form/step-054.md | 150 +++ .../registration-form/step-055.md | 151 +++ .../registration-form/step-056.md | 152 ++++ .../registration-form/step-057.md | 156 ++++ .../basic-javascript-rpg-game/part-001.md | 113 --- .../basic-javascript-rpg-game/part-002.md | 113 --- .../basic-javascript-rpg-game/part-003.md | 117 --- .../basic-javascript-rpg-game/part-004.md | 123 --- .../basic-javascript-rpg-game/part-005.md | 119 --- .../basic-javascript-rpg-game/part-006.md | 120 --- .../basic-javascript-rpg-game/part-007.md | 124 --- .../basic-javascript-rpg-game/part-008.md | 132 --- .../basic-javascript-rpg-game/part-009.md | 122 --- .../basic-javascript-rpg-game/part-010.md | 131 --- .../basic-javascript-rpg-game/part-011.md | 126 --- .../basic-javascript-rpg-game/part-012.md | 165 ---- .../basic-javascript-rpg-game/part-013.md | 148 --- .../basic-javascript-rpg-game/part-014.md | 150 --- .../basic-javascript-rpg-game/part-015.md | 155 ---- .../basic-javascript-rpg-game/part-016.md | 162 ---- .../basic-javascript-rpg-game/part-017.md | 171 ---- .../basic-javascript-rpg-game/part-018.md | 170 ---- .../basic-javascript-rpg-game/part-019.md | 180 ---- .../basic-javascript-rpg-game/part-020.md | 185 ---- .../basic-javascript-rpg-game/part-021.md | 189 ---- .../basic-javascript-rpg-game/part-022.md | 189 ---- .../basic-javascript-rpg-game/part-023.md | 193 ---- .../basic-javascript-rpg-game/part-024.md | 203 ----- .../basic-javascript-rpg-game/part-025.md | 228 ----- .../basic-javascript-rpg-game/part-026.md | 230 ----- .../basic-javascript-rpg-game/part-027.md | 235 ----- .../basic-javascript-rpg-game/part-028.md | 230 ----- .../basic-javascript-rpg-game/part-029.md | 236 ----- .../basic-javascript-rpg-game/part-030.md | 246 ----- .../basic-javascript-rpg-game/part-031.md | 252 ----- .../basic-javascript-rpg-game/part-032.md | 248 ----- .../basic-javascript-rpg-game/part-033.md | 247 ----- .../basic-javascript-rpg-game/part-034.md | 248 ----- .../basic-javascript-rpg-game/part-035.md | 261 ------ .../basic-javascript-rpg-game/part-036.md | 267 ------ .../basic-javascript-rpg-game/part-037.md | 247 ----- .../basic-javascript-rpg-game/part-038.md | 248 ----- .../basic-javascript-rpg-game/part-039.md | 246 ----- .../basic-javascript-rpg-game/part-040.md | 252 ----- .../basic-javascript-rpg-game/part-041.md | 252 ----- .../basic-javascript-rpg-game/part-042.md | 257 ------ .../basic-javascript-rpg-game/part-043.md | 262 ------ .../basic-javascript-rpg-game/part-044.md | 248 ----- .../basic-javascript-rpg-game/part-045.md | 247 ----- .../basic-javascript-rpg-game/part-046.md | 266 ------ .../basic-javascript-rpg-game/part-047.md | 265 ------ .../basic-javascript-rpg-game/part-048.md | 266 ------ .../basic-javascript-rpg-game/part-049.md | 275 ------ .../basic-javascript-rpg-game/part-050.md | 275 ------ .../basic-javascript-rpg-game/part-051.md | 281 ------ .../basic-javascript-rpg-game/part-052.md | 281 ------ .../basic-javascript-rpg-game/part-053.md | 302 ------ .../basic-javascript-rpg-game/part-054.md | 292 ------ .../basic-javascript-rpg-game/part-055.md | 295 ------ .../basic-javascript-rpg-game/part-056.md | 290 ------ .../basic-javascript-rpg-game/part-057.md | 290 ------ .../basic-javascript-rpg-game/part-058.md | 314 ------- .../basic-javascript-rpg-game/part-059.md | 329 ------- .../basic-javascript-rpg-game/part-060.md | 332 ------- .../basic-javascript-rpg-game/part-061.md | 333 ------- .../basic-javascript-rpg-game/part-062.md | 342 ------- .../basic-javascript-rpg-game/part-063.md | 340 ------- .../basic-javascript-rpg-game/part-064.md | 339 ------- .../basic-javascript-rpg-game/part-065.md | 340 ------- .../basic-javascript-rpg-game/part-066.md | 342 ------- .../basic-javascript-rpg-game/part-067.md | 351 ------- .../basic-javascript-rpg-game/part-068.md | 348 ------- .../basic-javascript-rpg-game/part-069.md | 349 ------- .../basic-javascript-rpg-game/part-070.md | 350 ------- .../basic-javascript-rpg-game/part-071.md | 352 ------- .../basic-javascript-rpg-game/part-072.md | 361 -------- .../basic-javascript-rpg-game/part-073.md | 358 -------- .../basic-javascript-rpg-game/part-074.md | 358 -------- .../basic-javascript-rpg-game/part-075.md | 360 -------- .../basic-javascript-rpg-game/part-076.md | 364 -------- .../basic-javascript-rpg-game/part-077.md | 363 -------- .../basic-javascript-rpg-game/part-078.md | 373 -------- .../basic-javascript-rpg-game/part-079.md | 386 -------- .../basic-javascript-rpg-game/part-080.md | 379 -------- .../basic-javascript-rpg-game/part-081.md | 388 -------- .../basic-javascript-rpg-game/part-082.md | 380 -------- .../basic-javascript-rpg-game/part-083.md | 384 -------- .../basic-javascript-rpg-game/part-084.md | 387 -------- .../basic-javascript-rpg-game/part-085.md | 408 --------- .../basic-javascript-rpg-game/part-086.md | 423 --------- .../basic-javascript-rpg-game/part-087.md | 430 --------- .../basic-javascript-rpg-game/part-088.md | 436 --------- .../basic-javascript-rpg-game/part-089.md | 452 --------- .../basic-javascript-rpg-game/part-090.md | 454 --------- .../basic-javascript-rpg-game/part-091.md | 461 ---------- .../basic-javascript-rpg-game/part-092.md | 476 ---------- .../basic-javascript-rpg-game/part-093.md | 471 ---------- .../basic-javascript-rpg-game/part-094.md | 483 ---------- .../basic-javascript-rpg-game/part-095.md | 471 ---------- .../basic-javascript-rpg-game/part-096.md | 478 ---------- .../basic-javascript-rpg-game/part-097.md | 475 ---------- .../basic-javascript-rpg-game/part-098.md | 477 ---------- .../basic-javascript-rpg-game/part-099.md | 484 ---------- .../basic-javascript-rpg-game/part-100.md | 485 ---------- .../basic-javascript-rpg-game/part-101.md | 489 ---------- .../basic-javascript-rpg-game/part-102.md | 508 ----------- .../basic-javascript-rpg-game/part-103.md | 498 ---------- .../basic-javascript-rpg-game/part-104.md | 507 ----------- .../basic-javascript-rpg-game/part-105.md | 509 ----------- .../basic-javascript-rpg-game/part-106.md | 509 ----------- .../basic-javascript-rpg-game/part-107.md | 516 ----------- .../basic-javascript-rpg-game/part-108.md | 518 ----------- .../basic-javascript-rpg-game/part-109.md | 532 ----------- .../basic-javascript-rpg-game/part-110.md | 538 ----------- .../basic-javascript-rpg-game/part-111.md | 542 ----------- .../basic-javascript-rpg-game/part-112.md | 544 ----------- .../basic-javascript-rpg-game/part-113.md | 546 ----------- .../basic-javascript-rpg-game/part-114.md | 575 ------------ .../basic-javascript-rpg-game/part-115.md | 578 ------------ .../basic-javascript-rpg-game/part-116.md | 592 ------------ .../basic-javascript-rpg-game/part-117.md | 572 ------------ .../basic-javascript-rpg-game/part-118.md | 587 ------------ .../basic-javascript-rpg-game/part-119.md | 595 ------------ .../basic-javascript-rpg-game/part-120.md | 594 ------------ .../basic-javascript-rpg-game/part-121.md | 601 ------------ .../basic-javascript-rpg-game/part-122.md | 604 ------------ .../basic-javascript-rpg-game/part-123.md | 611 ------------- .../basic-javascript-rpg-game/part-124.md | 614 ------------- .../basic-javascript-rpg-game/part-125.md | 609 ------------- .../basic-javascript-rpg-game/part-126.md | 620 ------------- .../basic-javascript-rpg-game/part-127.md | 614 ------------- .../basic-javascript-rpg-game/part-128.md | 630 ------------- .../basic-javascript-rpg-game/part-129.md | 628 ------------- .../basic-javascript-rpg-game/part-130.md | 625 ------------- .../basic-javascript-rpg-game/part-131.md | 646 ------------- .../basic-javascript-rpg-game/part-132.md | 632 ------------- .../basic-javascript-rpg-game/part-133.md | 643 ------------- .../basic-javascript-rpg-game/part-134.md | 637 ------------- .../basic-javascript-rpg-game/part-135.md | 651 ------------- .../basic-javascript-rpg-game/part-136.md | 662 -------------- .../basic-javascript-rpg-game/part-137.md | 664 -------------- .../basic-javascript-rpg-game/part-138.md | 675 -------------- .../basic-javascript-rpg-game/part-139.md | 692 -------------- .../basic-javascript-rpg-game/part-140.md | 681 -------------- .../basic-javascript-rpg-game/part-141.md | 679 -------------- .../basic-javascript-rpg-game/part-142.md | 693 -------------- .../basic-javascript-rpg-game/part-143.md | 692 -------------- .../basic-javascript-rpg-game/part-144.md | 692 -------------- .../basic-javascript-rpg-game/part-145.md | 690 -------------- .../basic-javascript-rpg-game/part-146.md | 690 -------------- .../basic-javascript-rpg-game/part-147.md | 693 -------------- .../basic-javascript-rpg-game/part-148.md | 699 -------------- .../basic-javascript-rpg-game/part-149.md | 705 -------------- .../basic-javascript-rpg-game/part-150.md | 712 --------------- .../basic-javascript-rpg-game/part-151.md | 718 --------------- .../basic-javascript-rpg-game/part-152.md | 724 --------------- .../basic-javascript-rpg-game/part-153.md | 714 --------------- .../basic-javascript-rpg-game/step-001.md | 113 +++ .../basic-javascript-rpg-game/step-002.md | 113 +++ .../basic-javascript-rpg-game/step-003.md | 117 +++ .../basic-javascript-rpg-game/step-004.md | 123 +++ .../basic-javascript-rpg-game/step-005.md | 119 +++ .../basic-javascript-rpg-game/step-006.md | 120 +++ .../basic-javascript-rpg-game/step-007.md | 124 +++ .../basic-javascript-rpg-game/step-008.md | 132 +++ .../basic-javascript-rpg-game/step-009.md | 122 +++ .../basic-javascript-rpg-game/step-010.md | 131 +++ .../basic-javascript-rpg-game/step-011.md | 126 +++ .../basic-javascript-rpg-game/step-012.md | 165 ++++ .../basic-javascript-rpg-game/step-013.md | 148 +++ .../basic-javascript-rpg-game/step-014.md | 150 +++ .../basic-javascript-rpg-game/step-015.md | 155 ++++ .../basic-javascript-rpg-game/step-016.md | 162 ++++ .../basic-javascript-rpg-game/step-017.md | 171 ++++ .../basic-javascript-rpg-game/step-018.md | 170 ++++ .../basic-javascript-rpg-game/step-019.md | 180 ++++ .../basic-javascript-rpg-game/step-020.md | 185 ++++ .../basic-javascript-rpg-game/step-021.md | 189 ++++ .../basic-javascript-rpg-game/step-022.md | 189 ++++ .../basic-javascript-rpg-game/step-023.md | 193 ++++ .../basic-javascript-rpg-game/step-024.md | 203 +++++ .../basic-javascript-rpg-game/step-025.md | 228 +++++ .../basic-javascript-rpg-game/step-026.md | 230 +++++ .../basic-javascript-rpg-game/step-027.md | 235 +++++ .../basic-javascript-rpg-game/step-028.md | 230 +++++ .../basic-javascript-rpg-game/step-029.md | 236 +++++ .../basic-javascript-rpg-game/step-030.md | 246 +++++ .../basic-javascript-rpg-game/step-031.md | 252 +++++ .../basic-javascript-rpg-game/step-032.md | 248 +++++ .../basic-javascript-rpg-game/step-033.md | 247 +++++ .../basic-javascript-rpg-game/step-034.md | 248 +++++ .../basic-javascript-rpg-game/step-035.md | 261 ++++++ .../basic-javascript-rpg-game/step-036.md | 267 ++++++ .../basic-javascript-rpg-game/step-037.md | 247 +++++ .../basic-javascript-rpg-game/step-038.md | 248 +++++ .../basic-javascript-rpg-game/step-039.md | 246 +++++ .../basic-javascript-rpg-game/step-040.md | 252 +++++ .../basic-javascript-rpg-game/step-041.md | 252 +++++ .../basic-javascript-rpg-game/step-042.md | 257 ++++++ .../basic-javascript-rpg-game/step-043.md | 262 ++++++ .../basic-javascript-rpg-game/step-044.md | 248 +++++ .../basic-javascript-rpg-game/step-045.md | 247 +++++ .../basic-javascript-rpg-game/step-046.md | 266 ++++++ .../basic-javascript-rpg-game/step-047.md | 265 ++++++ .../basic-javascript-rpg-game/step-048.md | 266 ++++++ .../basic-javascript-rpg-game/step-049.md | 275 ++++++ .../basic-javascript-rpg-game/step-050.md | 275 ++++++ .../basic-javascript-rpg-game/step-051.md | 281 ++++++ .../basic-javascript-rpg-game/step-052.md | 281 ++++++ .../basic-javascript-rpg-game/step-053.md | 302 ++++++ .../basic-javascript-rpg-game/step-054.md | 292 ++++++ .../basic-javascript-rpg-game/step-055.md | 295 ++++++ .../basic-javascript-rpg-game/step-056.md | 290 ++++++ .../basic-javascript-rpg-game/step-057.md | 290 ++++++ .../basic-javascript-rpg-game/step-058.md | 314 +++++++ .../basic-javascript-rpg-game/step-059.md | 329 +++++++ .../basic-javascript-rpg-game/step-060.md | 332 +++++++ .../basic-javascript-rpg-game/step-061.md | 333 +++++++ .../basic-javascript-rpg-game/step-062.md | 342 +++++++ .../basic-javascript-rpg-game/step-063.md | 340 +++++++ .../basic-javascript-rpg-game/step-064.md | 339 +++++++ .../basic-javascript-rpg-game/step-065.md | 340 +++++++ .../basic-javascript-rpg-game/step-066.md | 342 +++++++ .../basic-javascript-rpg-game/step-067.md | 351 +++++++ .../basic-javascript-rpg-game/step-068.md | 348 +++++++ .../basic-javascript-rpg-game/step-069.md | 349 +++++++ .../basic-javascript-rpg-game/step-070.md | 350 +++++++ .../basic-javascript-rpg-game/step-071.md | 352 +++++++ .../basic-javascript-rpg-game/step-072.md | 361 ++++++++ .../basic-javascript-rpg-game/step-073.md | 358 ++++++++ .../basic-javascript-rpg-game/step-074.md | 358 ++++++++ .../basic-javascript-rpg-game/step-075.md | 360 ++++++++ .../basic-javascript-rpg-game/step-076.md | 364 ++++++++ .../basic-javascript-rpg-game/step-077.md | 363 ++++++++ .../basic-javascript-rpg-game/step-078.md | 373 ++++++++ .../basic-javascript-rpg-game/step-079.md | 386 ++++++++ .../basic-javascript-rpg-game/step-080.md | 379 ++++++++ .../basic-javascript-rpg-game/step-081.md | 388 ++++++++ .../basic-javascript-rpg-game/step-082.md | 380 ++++++++ .../basic-javascript-rpg-game/step-083.md | 384 ++++++++ .../basic-javascript-rpg-game/step-084.md | 387 ++++++++ .../basic-javascript-rpg-game/step-085.md | 408 +++++++++ .../basic-javascript-rpg-game/step-086.md | 423 +++++++++ .../basic-javascript-rpg-game/step-087.md | 430 +++++++++ .../basic-javascript-rpg-game/step-088.md | 436 +++++++++ .../basic-javascript-rpg-game/step-089.md | 452 +++++++++ .../basic-javascript-rpg-game/step-090.md | 454 +++++++++ .../basic-javascript-rpg-game/step-091.md | 461 ++++++++++ .../basic-javascript-rpg-game/step-092.md | 476 ++++++++++ .../basic-javascript-rpg-game/step-093.md | 471 ++++++++++ .../basic-javascript-rpg-game/step-094.md | 483 ++++++++++ .../basic-javascript-rpg-game/step-095.md | 471 ++++++++++ .../basic-javascript-rpg-game/step-096.md | 478 ++++++++++ .../basic-javascript-rpg-game/step-097.md | 475 ++++++++++ .../basic-javascript-rpg-game/step-098.md | 477 ++++++++++ .../basic-javascript-rpg-game/step-099.md | 484 ++++++++++ .../basic-javascript-rpg-game/step-100.md | 485 ++++++++++ .../basic-javascript-rpg-game/step-101.md | 489 ++++++++++ .../basic-javascript-rpg-game/step-102.md | 508 +++++++++++ .../basic-javascript-rpg-game/step-103.md | 498 ++++++++++ .../basic-javascript-rpg-game/step-104.md | 507 +++++++++++ .../basic-javascript-rpg-game/step-105.md | 509 +++++++++++ .../basic-javascript-rpg-game/step-106.md | 509 +++++++++++ .../basic-javascript-rpg-game/step-107.md | 516 +++++++++++ .../basic-javascript-rpg-game/step-108.md | 518 +++++++++++ .../basic-javascript-rpg-game/step-109.md | 532 +++++++++++ .../basic-javascript-rpg-game/step-110.md | 538 +++++++++++ .../basic-javascript-rpg-game/step-111.md | 542 +++++++++++ .../basic-javascript-rpg-game/step-112.md | 544 +++++++++++ .../basic-javascript-rpg-game/step-113.md | 546 +++++++++++ .../basic-javascript-rpg-game/step-114.md | 575 ++++++++++++ .../basic-javascript-rpg-game/step-115.md | 578 ++++++++++++ .../basic-javascript-rpg-game/step-116.md | 592 ++++++++++++ .../basic-javascript-rpg-game/step-117.md | 572 ++++++++++++ .../basic-javascript-rpg-game/step-118.md | 587 ++++++++++++ .../basic-javascript-rpg-game/step-119.md | 595 ++++++++++++ .../basic-javascript-rpg-game/step-120.md | 594 ++++++++++++ .../basic-javascript-rpg-game/step-121.md | 601 ++++++++++++ .../basic-javascript-rpg-game/step-122.md | 604 ++++++++++++ .../basic-javascript-rpg-game/step-123.md | 611 +++++++++++++ .../basic-javascript-rpg-game/step-124.md | 614 +++++++++++++ .../basic-javascript-rpg-game/step-125.md | 609 +++++++++++++ .../basic-javascript-rpg-game/step-126.md | 620 +++++++++++++ .../basic-javascript-rpg-game/step-127.md | 614 +++++++++++++ .../basic-javascript-rpg-game/step-128.md | 630 +++++++++++++ .../basic-javascript-rpg-game/step-129.md | 628 +++++++++++++ .../basic-javascript-rpg-game/step-130.md | 625 +++++++++++++ .../basic-javascript-rpg-game/step-131.md | 646 +++++++++++++ .../basic-javascript-rpg-game/step-132.md | 632 +++++++++++++ .../basic-javascript-rpg-game/step-133.md | 643 +++++++++++++ .../basic-javascript-rpg-game/step-134.md | 637 +++++++++++++ .../basic-javascript-rpg-game/step-135.md | 651 +++++++++++++ .../basic-javascript-rpg-game/step-136.md | 662 ++++++++++++++ .../basic-javascript-rpg-game/step-137.md | 664 ++++++++++++++ .../basic-javascript-rpg-game/step-138.md | 675 ++++++++++++++ .../basic-javascript-rpg-game/step-139.md | 692 ++++++++++++++ .../basic-javascript-rpg-game/step-140.md | 681 ++++++++++++++ .../basic-javascript-rpg-game/step-141.md | 679 ++++++++++++++ .../basic-javascript-rpg-game/step-142.md | 693 ++++++++++++++ .../basic-javascript-rpg-game/step-143.md | 692 ++++++++++++++ .../basic-javascript-rpg-game/step-144.md | 692 ++++++++++++++ .../basic-javascript-rpg-game/step-145.md | 690 ++++++++++++++ .../basic-javascript-rpg-game/step-146.md | 690 ++++++++++++++ .../basic-javascript-rpg-game/step-147.md | 693 ++++++++++++++ .../basic-javascript-rpg-game/step-148.md | 699 ++++++++++++++ .../basic-javascript-rpg-game/step-149.md | 705 ++++++++++++++ .../basic-javascript-rpg-game/step-150.md | 712 +++++++++++++++ .../basic-javascript-rpg-game/step-151.md | 718 +++++++++++++++ .../basic-javascript-rpg-game/step-152.md | 724 +++++++++++++++ .../basic-javascript-rpg-game/step-153.md | 714 +++++++++++++++ .../part-001.md | 76 -- .../part-002.md | 78 -- .../part-003.md | 82 -- .../part-004.md | 86 -- .../part-005.md | 92 -- .../part-006.md | 92 -- .../part-007.md | 88 -- .../part-008.md | 80 -- .../part-009.md | 82 -- .../part-010.md | 80 -- .../part-011.md | 85 -- .../part-012.md | 90 -- .../part-013.md | 96 -- .../part-014.md | 95 -- .../part-015.md | 100 -- .../part-016.md | 102 --- .../part-017.md | 98 -- .../part-018.md | 101 -- .../part-019.md | 108 --- .../part-020.md | 103 --- .../part-021.md | 105 --- .../part-022.md | 118 --- .../part-023.md | 112 --- .../part-024.md | 110 --- .../part-025.md | 118 --- .../part-026.md | 126 --- .../part-027.md | 129 --- .../part-028.md | 131 --- .../part-029.md | 132 --- .../part-030.md | 136 --- .../part-031.md | 140 --- .../part-032.md | 137 --- .../part-033.md | 138 --- .../part-034.md | 139 --- .../part-035.md | 137 --- .../part-036.md | 140 --- .../part-037.md | 148 --- .../part-038.md | 144 --- .../part-039.md | 148 --- .../part-040.md | 156 ---- .../part-041.md | 155 ---- .../part-042.md | 168 ---- .../part-043.md | 161 ---- .../part-044.md | 156 ---- .../part-045.md | 155 ---- .../part-046.md | 152 ---- .../part-047.md | 157 ---- .../part-048.md | 152 ---- .../part-049.md | 154 ---- .../part-050.md | 154 ---- .../part-051.md | 158 ---- .../part-052.md | 157 ---- .../part-053.md | 171 ---- .../part-054.md | 174 ---- .../part-055.md | 174 ---- .../part-056.md | 174 ---- .../part-057.md | 175 ---- .../part-058.md | 181 ---- .../part-059.md | 181 ---- .../part-060.md | 185 ---- .../part-061.md | 187 ---- .../part-062.md | 182 ---- .../part-063.md | 181 ---- .../part-064.md | 180 ---- .../part-065.md | 184 ---- .../part-066.md | 180 ---- .../part-067.md | 190 ---- .../part-068.md | 184 ---- .../part-069.md | 182 ---- .../part-070.md | 186 ---- .../part-071.md | 188 ---- .../part-072.md | 190 ---- .../part-073.md | 186 ---- .../part-074.md | 188 ---- .../part-075.md | 195 ---- .../part-076.md | 193 ---- .../part-077.md | 198 ---- .../part-078.md | 206 ----- .../part-079.md | 209 ----- .../part-080.md | 215 ----- .../part-081.md | 218 ----- .../part-082.md | 227 ----- .../part-083.md | 223 ----- .../part-084.md | 223 ----- .../part-085.md | 228 ----- .../part-086.md | 230 ----- .../part-087.md | 235 ----- .../part-088.md | 238 ----- .../part-089.md | 249 ----- .../part-090.md | 250 ----- .../part-091.md | 255 ------ .../part-092.md | 259 ------ .../part-093.md | 258 ------ .../part-094.md | 258 ------ .../part-095.md | 260 ------ .../part-096.md | 264 ------ .../part-097.md | 271 ------ .../part-098.md | 265 ------ .../part-099.md | 274 ------ .../part-100.md | 269 ------ .../part-101.md | 266 ------ .../part-102.md | 268 ------ .../part-103.md | 263 ------ .../part-104.md | 265 ------ .../part-105.md | 262 ------ .../part-106.md | 270 ------ .../part-107.md | 266 ------ .../part-108.md | 267 ------ .../part-109.md | 273 ------ .../part-110.md | 270 ------ .../part-111.md | 270 ------ .../part-112.md | 267 ------ .../part-113.md | 269 ------ .../part-114.md | 271 ------ .../part-115.md | 277 ------ .../part-116.md | 283 ------ .../part-117.md | 286 ------ .../part-118.md | 290 ------ .../part-119.md | 295 ------ .../part-120.md | 289 ------ .../part-121.md | 299 ------ .../part-122.md | 291 ------ .../part-123.md | 296 ------ .../part-124.md | 291 ------ .../part-125.md | 296 ------ .../part-126.md | 306 ------- .../part-127.md | 298 ------ .../part-128.md | 310 ------- .../part-129.md | 316 ------- .../part-130.md | 310 ------- .../part-131.md | 310 ------- .../part-132.md | 309 ------- .../part-133.md | 314 ------- .../part-134.md | 318 ------- .../part-135.md | 323 ------- .../part-136.md | 325 ------- .../part-137.md | 326 ------- .../part-138.md | 322 ------- .../part-139.md | 325 ------- .../part-140.md | 328 ------- .../part-141.md | 316 ------- .../step-001.md | 76 ++ .../step-002.md | 78 ++ .../step-003.md | 82 ++ .../step-004.md | 86 ++ .../step-005.md | 92 ++ .../step-006.md | 92 ++ .../step-007.md | 88 ++ .../step-008.md | 80 ++ .../step-009.md | 82 ++ .../step-010.md | 80 ++ .../step-011.md | 85 ++ .../step-012.md | 90 ++ .../step-013.md | 96 ++ .../step-014.md | 95 ++ .../step-015.md | 100 ++ .../step-016.md | 102 +++ .../step-017.md | 98 ++ .../step-018.md | 101 ++ .../step-019.md | 108 +++ .../step-020.md | 103 +++ .../step-021.md | 105 +++ .../step-022.md | 118 +++ .../step-023.md | 112 +++ .../step-024.md | 110 +++ .../step-025.md | 118 +++ .../step-026.md | 126 +++ .../step-027.md | 129 +++ .../step-028.md | 131 +++ .../step-029.md | 132 +++ .../step-030.md | 136 +++ .../step-031.md | 140 +++ .../step-032.md | 137 +++ .../step-033.md | 138 +++ .../step-034.md | 139 +++ .../step-035.md | 137 +++ .../step-036.md | 140 +++ .../step-037.md | 148 +++ .../step-038.md | 144 +++ .../step-039.md | 148 +++ .../step-040.md | 156 ++++ .../step-041.md | 155 ++++ .../step-042.md | 168 ++++ .../step-043.md | 161 ++++ .../step-044.md | 156 ++++ .../step-045.md | 155 ++++ .../step-046.md | 152 ++++ .../step-047.md | 157 ++++ .../step-048.md | 152 ++++ .../step-049.md | 154 ++++ .../step-050.md | 154 ++++ .../step-051.md | 158 ++++ .../step-052.md | 157 ++++ .../step-053.md | 171 ++++ .../step-054.md | 174 ++++ .../step-055.md | 174 ++++ .../step-056.md | 174 ++++ .../step-057.md | 175 ++++ .../step-058.md | 181 ++++ .../step-059.md | 181 ++++ .../step-060.md | 185 ++++ .../step-061.md | 187 ++++ .../step-062.md | 182 ++++ .../step-063.md | 181 ++++ .../step-064.md | 180 ++++ .../step-065.md | 184 ++++ .../step-066.md | 180 ++++ .../step-067.md | 190 ++++ .../step-068.md | 184 ++++ .../step-069.md | 182 ++++ .../step-070.md | 186 ++++ .../step-071.md | 188 ++++ .../step-072.md | 190 ++++ .../step-073.md | 186 ++++ .../step-074.md | 188 ++++ .../step-075.md | 195 ++++ .../step-076.md | 193 ++++ .../step-077.md | 198 ++++ .../step-078.md | 206 +++++ .../step-079.md | 209 +++++ .../step-080.md | 215 +++++ .../step-081.md | 218 +++++ .../step-082.md | 227 +++++ .../step-083.md | 223 +++++ .../step-084.md | 223 +++++ .../step-085.md | 228 +++++ .../step-086.md | 230 +++++ .../step-087.md | 235 +++++ .../step-088.md | 238 +++++ .../step-089.md | 249 +++++ .../step-090.md | 250 +++++ .../step-091.md | 255 ++++++ .../step-092.md | 259 ++++++ .../step-093.md | 258 ++++++ .../step-094.md | 258 ++++++ .../step-095.md | 260 ++++++ .../step-096.md | 264 ++++++ .../step-097.md | 271 ++++++ .../step-098.md | 265 ++++++ .../step-099.md | 274 ++++++ .../step-100.md | 269 ++++++ .../step-101.md | 266 ++++++ .../step-102.md | 268 ++++++ .../step-103.md | 263 ++++++ .../step-104.md | 265 ++++++ .../step-105.md | 262 ++++++ .../step-106.md | 270 ++++++ .../step-107.md | 266 ++++++ .../step-108.md | 267 ++++++ .../step-109.md | 273 ++++++ .../step-110.md | 270 ++++++ .../step-111.md | 270 ++++++ .../step-112.md | 267 ++++++ .../step-113.md | 269 ++++++ .../step-114.md | 271 ++++++ .../step-115.md | 277 ++++++ .../step-116.md | 283 ++++++ .../step-117.md | 286 ++++++ .../step-118.md | 290 ++++++ .../step-119.md | 295 ++++++ .../step-120.md | 289 ++++++ .../step-121.md | 299 ++++++ .../step-122.md | 291 ++++++ .../step-123.md | 296 ++++++ .../step-124.md | 291 ++++++ .../step-125.md | 296 ++++++ .../step-126.md | 306 +++++++ .../step-127.md | 298 ++++++ .../step-128.md | 310 +++++++ .../step-129.md | 316 +++++++ .../step-130.md | 310 +++++++ .../step-131.md | 310 +++++++ .../step-132.md | 309 +++++++ .../step-133.md | 314 +++++++ .../step-134.md | 318 +++++++ .../step-135.md | 323 +++++++ .../step-136.md | 325 +++++++ .../step-137.md | 326 +++++++ .../step-138.md | 322 +++++++ .../step-139.md | 325 +++++++ .../step-140.md | 328 +++++++ .../step-141.md | 316 +++++++ .../part-001.md | 98 -- .../part-002.md | 112 --- .../part-003.md | 117 --- .../part-004.md | 109 --- .../part-005.md | 113 --- .../part-006.md | 111 --- .../part-007.md | 120 --- .../part-008.md | 117 --- .../part-009.md | 119 --- .../part-010.md | 114 --- .../part-011.md | 115 --- .../part-012.md | 127 --- .../part-013.md | 125 --- .../part-014.md | 123 --- .../part-015.md | 121 --- .../part-016.md | 120 --- .../part-017.md | 121 --- .../part-018.md | 137 --- .../part-019.md | 137 --- .../part-020.md | 145 --- .../part-021.md | 134 --- .../part-022.md | 137 --- .../part-023.md | 131 --- .../part-024.md | 129 --- .../part-025.md | 139 --- .../part-026.md | 127 --- .../part-027.md | 139 --- .../part-028.md | 141 --- .../part-029.md | 149 --- .../part-030.md | 152 ---- .../part-031.md | 149 --- .../part-032.md | 149 --- .../part-033.md | 147 --- .../part-034.md | 151 --- .../part-035.md | 159 ---- .../part-036.md | 151 --- .../part-037.md | 152 ---- .../part-038.md | 157 ---- .../part-039.md | 156 ---- .../part-040.md | 165 ---- .../part-041.md | 168 ---- .../part-042.md | 173 ---- .../part-043.md | 173 ---- .../part-044.md | 172 ---- .../part-045.md | 181 ---- .../part-046.md | 190 ---- .../part-047.md | 180 ---- .../part-048.md | 191 ---- .../part-049.md | 197 ---- .../part-050.md | 196 ---- .../part-051.md | 203 ----- .../part-052.md | 205 ----- .../part-053.md | 201 ---- .../part-054.md | 202 ---- .../part-055.md | 208 ----- .../part-056.md | 212 ----- .../part-057.md | 209 ----- .../part-058.md | 216 ----- .../part-059.md | 218 ----- .../part-060.md | 218 ----- .../part-061.md | 220 ----- .../part-062.md | 224 ----- .../part-063.md | 227 ----- .../part-064.md | 224 ----- .../part-065.md | 235 ----- .../part-066.md | 241 ----- .../part-067.md | 248 ----- .../part-068.md | 241 ----- .../part-069.md | 241 ----- .../part-070.md | 257 ------ .../part-071.md | 255 ------ .../part-072.md | 261 ------ .../part-073.md | 269 ------ .../part-074.md | 267 ------ .../part-075.md | 275 ------ .../part-076.md | 185 ---- .../step-001.md | 98 ++ .../step-002.md | 112 +++ .../step-003.md | 117 +++ .../step-004.md | 109 +++ .../step-005.md | 113 +++ .../step-006.md | 111 +++ .../step-007.md | 120 +++ .../step-008.md | 117 +++ .../step-009.md | 119 +++ .../step-010.md | 114 +++ .../step-011.md | 115 +++ .../step-012.md | 127 +++ .../step-013.md | 125 +++ .../step-014.md | 123 +++ .../step-015.md | 121 +++ .../step-016.md | 120 +++ .../step-017.md | 121 +++ .../step-018.md | 137 +++ .../step-019.md | 137 +++ .../step-020.md | 145 +++ .../step-021.md | 134 +++ .../step-022.md | 137 +++ .../step-023.md | 131 +++ .../step-024.md | 129 +++ .../step-025.md | 139 +++ .../step-026.md | 127 +++ .../step-027.md | 139 +++ .../step-028.md | 141 +++ .../step-029.md | 149 +++ .../step-030.md | 152 ++++ .../step-031.md | 149 +++ .../step-032.md | 149 +++ .../step-033.md | 147 +++ .../step-034.md | 151 +++ .../step-035.md | 159 ++++ .../step-036.md | 151 +++ .../step-037.md | 152 ++++ .../step-038.md | 157 ++++ .../step-039.md | 156 ++++ .../step-040.md | 165 ++++ .../step-041.md | 168 ++++ .../step-042.md | 173 ++++ .../step-043.md | 173 ++++ .../step-044.md | 172 ++++ .../step-045.md | 181 ++++ .../step-046.md | 190 ++++ .../step-047.md | 180 ++++ .../step-048.md | 191 ++++ .../step-049.md | 197 ++++ .../step-050.md | 196 ++++ .../step-051.md | 203 +++++ .../step-052.md | 205 +++++ .../step-053.md | 201 ++++ .../step-054.md | 202 ++++ .../step-055.md | 208 +++++ .../step-056.md | 212 +++++ .../step-057.md | 209 +++++ .../step-058.md | 216 +++++ .../step-059.md | 218 +++++ .../step-060.md | 218 +++++ .../step-061.md | 220 +++++ .../step-062.md | 224 +++++ .../step-063.md | 227 +++++ .../step-064.md | 224 +++++ .../step-065.md | 235 +++++ .../step-066.md | 241 +++++ .../step-067.md | 248 +++++ .../step-068.md | 241 +++++ .../step-069.md | 241 +++++ .../step-070.md | 257 ++++++ .../step-071.md | 255 ++++++ .../step-072.md | 261 ++++++ .../step-073.md | 269 ++++++ .../step-074.md | 267 ++++++ .../step-075.md | 275 ++++++ .../step-076.md | 185 ++++ .../d3-dashboard/part-001.md | 33 - .../d3-dashboard/part-002.md | 43 - .../d3-dashboard/part-003.md | 51 -- .../d3-dashboard/part-004.md | 55 -- .../d3-dashboard/part-005.md | 55 -- .../d3-dashboard/part-006.md | 55 -- .../d3-dashboard/part-007.md | 66 -- .../d3-dashboard/part-008.md | 73 -- .../d3-dashboard/part-009.md | 73 -- .../d3-dashboard/part-010.md | 75 -- .../d3-dashboard/part-011.md | 81 -- .../d3-dashboard/part-012.md | 79 -- .../d3-dashboard/part-013.md | 96 -- .../d3-dashboard/part-014.md | 95 -- .../d3-dashboard/part-015.md | 103 --- .../d3-dashboard/part-016.md | 108 --- .../d3-dashboard/part-017.md | 113 --- .../d3-dashboard/part-018.md | 117 --- .../d3-dashboard/part-019.md | 124 --- .../d3-dashboard/part-020.md | 116 --- .../d3-dashboard/part-021.md | 123 --- .../d3-dashboard/part-022.md | 123 --- .../d3-dashboard/part-023.md | 129 --- .../d3-dashboard/part-024.md | 129 --- .../d3-dashboard/part-025.md | 131 --- .../d3-dashboard/part-026.md | 133 --- .../d3-dashboard/part-027.md | 138 --- .../d3-dashboard/part-028.md | 142 --- .../d3-dashboard/part-029.md | 143 --- .../d3-dashboard/part-030.md | 147 --- .../d3-dashboard/part-031.md | 151 --- .../d3-dashboard/part-032.md | 150 --- .../d3-dashboard/part-033.md | 153 ---- .../d3-dashboard/part-034.md | 156 ---- .../d3-dashboard/part-035.md | 158 ---- .../d3-dashboard/part-036.md | 168 ---- .../d3-dashboard/part-037.md | 168 ---- .../d3-dashboard/part-038.md | 168 ---- .../d3-dashboard/part-039.md | 173 ---- .../d3-dashboard/part-040.md | 178 ---- .../d3-dashboard/part-041.md | 171 ---- .../d3-dashboard/part-042.md | 178 ---- .../d3-dashboard/part-043.md | 178 ---- .../d3-dashboard/part-044.md | 192 ---- .../d3-dashboard/part-045.md | 183 ---- .../d3-dashboard/part-046.md | 189 ---- .../d3-dashboard/part-047.md | 189 ---- .../d3-dashboard/part-048.md | 193 ---- .../d3-dashboard/part-049.md | 199 ---- .../d3-dashboard/part-050.md | 198 ---- .../d3-dashboard/part-051.md | 204 ----- .../d3-dashboard/part-052.md | 207 ----- .../d3-dashboard/part-053.md | 209 ----- .../d3-dashboard/part-054.md | 209 ----- .../d3-dashboard/part-055.md | 218 ----- .../d3-dashboard/part-056.md | 218 ----- .../d3-dashboard/part-057.md | 226 ----- .../d3-dashboard/part-058.md | 229 ----- .../d3-dashboard/part-059.md | 231 ----- .../d3-dashboard/part-060.md | 230 ----- .../d3-dashboard/part-061.md | 239 ----- .../d3-dashboard/part-062.md | 247 ----- .../d3-dashboard/part-063.md | 246 ----- .../d3-dashboard/part-064.md | 248 ----- .../d3-dashboard/part-065.md | 246 ----- .../d3-dashboard/part-066.md | 250 ----- .../d3-dashboard/part-067.md | 252 ----- .../d3-dashboard/part-068.md | 252 ----- .../d3-dashboard/part-069.md | 258 ------ .../d3-dashboard/part-070.md | 258 ------ .../d3-dashboard/part-071.md | 263 ------ .../d3-dashboard/part-072.md | 268 ------ .../d3-dashboard/part-073.md | 274 ------ .../d3-dashboard/part-074.md | 280 ------ .../d3-dashboard/part-075.md | 280 ------ .../d3-dashboard/part-076.md | 287 ------ .../d3-dashboard/part-077.md | 288 ------ .../d3-dashboard/part-078.md | 296 ------ .../d3-dashboard/part-079.md | 302 ------ .../d3-dashboard/part-080.md | 302 ------ .../d3-dashboard/part-081.md | 309 ------- .../d3-dashboard/part-082.md | 312 ------- .../d3-dashboard/part-083.md | 315 ------- .../d3-dashboard/part-084.md | 318 ------- .../d3-dashboard/part-085.md | 319 ------- .../d3-dashboard/part-086.md | 324 ------- .../d3-dashboard/part-087.md | 328 ------- .../d3-dashboard/part-088.md | 329 ------- .../d3-dashboard/part-089.md | 334 ------- .../d3-dashboard/part-090.md | 336 ------- .../d3-dashboard/part-091.md | 335 ------- .../d3-dashboard/part-092.md | 344 ------- .../d3-dashboard/part-093.md | 345 ------- .../d3-dashboard/part-094.md | 348 ------- .../d3-dashboard/part-095.md | 367 -------- .../d3-dashboard/part-096.md | 350 ------- .../d3-dashboard/part-097.md | 348 ------- .../d3-dashboard/part-098.md | 351 ------- .../d3-dashboard/part-099.md | 352 ------- .../d3-dashboard/part-100.md | 372 -------- .../d3-dashboard/part-101.md | 377 -------- .../d3-dashboard/part-102.md | 364 -------- .../d3-dashboard/part-103.md | 365 -------- .../d3-dashboard/part-104.md | 381 -------- .../d3-dashboard/part-105.md | 383 -------- .../d3-dashboard/part-106.md | 372 -------- .../d3-dashboard/part-107.md | 376 -------- .../d3-dashboard/part-108.md | 388 -------- .../d3-dashboard/part-109.md | 388 -------- .../d3-dashboard/part-110.md | 389 -------- .../d3-dashboard/part-111.md | 391 -------- .../d3-dashboard/part-112.md | 394 -------- .../d3-dashboard/part-113.md | 396 -------- .../d3-dashboard/part-114.md | 401 -------- .../d3-dashboard/part-115.md | 401 -------- .../d3-dashboard/part-116.md | 404 -------- .../d3-dashboard/part-117.md | 406 --------- .../d3-dashboard/part-118.md | 412 --------- .../d3-dashboard/part-119.md | 417 --------- .../d3-dashboard/part-120.md | 417 --------- .../d3-dashboard/part-121.md | 418 --------- .../d3-dashboard/part-122.md | 422 --------- .../d3-dashboard/part-123.md | 426 --------- .../d3-dashboard/part-124.md | 431 --------- .../d3-dashboard/part-125.md | 430 --------- .../d3-dashboard/part-126.md | 437 --------- .../d3-dashboard/part-127.md | 435 --------- .../d3-dashboard/part-128.md | 438 --------- .../d3-dashboard/part-129.md | 443 --------- .../d3-dashboard/part-130.md | 443 --------- .../d3-dashboard/part-131.md | 446 --------- .../d3-dashboard/part-132.md | 450 --------- .../d3-dashboard/part-133.md | 448 --------- .../d3-dashboard/part-134.md | 453 --------- .../d3-dashboard/part-135.md | 464 ---------- .../d3-dashboard/part-136.md | 476 ---------- .../d3-dashboard/part-137.md | 484 ---------- .../d3-dashboard/part-138.md | 479 ---------- .../d3-dashboard/part-139.md | 485 ---------- .../d3-dashboard/part-140.md | 478 ---------- .../d3-dashboard/part-141.md | 489 ---------- .../d3-dashboard/part-142.md | 481 ---------- .../d3-dashboard/part-143.md | 483 ---------- .../d3-dashboard/part-144.md | 490 ---------- .../d3-dashboard/part-145.md | 494 ---------- .../d3-dashboard/part-146.md | 483 ---------- .../d3-dashboard/step-001.md | 33 + .../d3-dashboard/step-002.md | 43 + .../d3-dashboard/step-003.md | 51 ++ .../d3-dashboard/step-004.md | 55 ++ .../d3-dashboard/step-005.md | 55 ++ .../d3-dashboard/step-006.md | 55 ++ .../d3-dashboard/step-007.md | 66 ++ .../d3-dashboard/step-008.md | 73 ++ .../d3-dashboard/step-009.md | 73 ++ .../d3-dashboard/step-010.md | 75 ++ .../d3-dashboard/step-011.md | 81 ++ .../d3-dashboard/step-012.md | 79 ++ .../d3-dashboard/step-013.md | 96 ++ .../d3-dashboard/step-014.md | 95 ++ .../d3-dashboard/step-015.md | 103 +++ .../d3-dashboard/step-016.md | 108 +++ .../d3-dashboard/step-017.md | 113 +++ .../d3-dashboard/step-018.md | 117 +++ .../d3-dashboard/step-019.md | 124 +++ .../d3-dashboard/step-020.md | 116 +++ .../d3-dashboard/step-021.md | 123 +++ .../d3-dashboard/step-022.md | 123 +++ .../d3-dashboard/step-023.md | 129 +++ .../d3-dashboard/step-024.md | 129 +++ .../d3-dashboard/step-025.md | 131 +++ .../d3-dashboard/step-026.md | 133 +++ .../d3-dashboard/step-027.md | 138 +++ .../d3-dashboard/step-028.md | 142 +++ .../d3-dashboard/step-029.md | 143 +++ .../d3-dashboard/step-030.md | 147 +++ .../d3-dashboard/step-031.md | 151 +++ .../d3-dashboard/step-032.md | 150 +++ .../d3-dashboard/step-033.md | 153 ++++ .../d3-dashboard/step-034.md | 156 ++++ .../d3-dashboard/step-035.md | 158 ++++ .../d3-dashboard/step-036.md | 168 ++++ .../d3-dashboard/step-037.md | 168 ++++ .../d3-dashboard/step-038.md | 168 ++++ .../d3-dashboard/step-039.md | 173 ++++ .../d3-dashboard/step-040.md | 178 ++++ .../d3-dashboard/step-041.md | 171 ++++ .../d3-dashboard/step-042.md | 178 ++++ .../d3-dashboard/step-043.md | 178 ++++ .../d3-dashboard/step-044.md | 192 ++++ .../d3-dashboard/step-045.md | 183 ++++ .../d3-dashboard/step-046.md | 189 ++++ .../d3-dashboard/step-047.md | 189 ++++ .../d3-dashboard/step-048.md | 193 ++++ .../d3-dashboard/step-049.md | 199 ++++ .../d3-dashboard/step-050.md | 198 ++++ .../d3-dashboard/step-051.md | 204 +++++ .../d3-dashboard/step-052.md | 207 +++++ .../d3-dashboard/step-053.md | 209 +++++ .../d3-dashboard/step-054.md | 209 +++++ .../d3-dashboard/step-055.md | 218 +++++ .../d3-dashboard/step-056.md | 218 +++++ .../d3-dashboard/step-057.md | 226 +++++ .../d3-dashboard/step-058.md | 229 +++++ .../d3-dashboard/step-059.md | 231 +++++ .../d3-dashboard/step-060.md | 230 +++++ .../d3-dashboard/step-061.md | 239 +++++ .../d3-dashboard/step-062.md | 247 +++++ .../d3-dashboard/step-063.md | 246 +++++ .../d3-dashboard/step-064.md | 248 +++++ .../d3-dashboard/step-065.md | 246 +++++ .../d3-dashboard/step-066.md | 250 +++++ .../d3-dashboard/step-067.md | 252 +++++ .../d3-dashboard/step-068.md | 252 +++++ .../d3-dashboard/step-069.md | 258 ++++++ .../d3-dashboard/step-070.md | 258 ++++++ .../d3-dashboard/step-071.md | 263 ++++++ .../d3-dashboard/step-072.md | 268 ++++++ .../d3-dashboard/step-073.md | 274 ++++++ .../d3-dashboard/step-074.md | 280 ++++++ .../d3-dashboard/step-075.md | 280 ++++++ .../d3-dashboard/step-076.md | 287 ++++++ .../d3-dashboard/step-077.md | 288 ++++++ .../d3-dashboard/step-078.md | 296 ++++++ .../d3-dashboard/step-079.md | 302 ++++++ .../d3-dashboard/step-080.md | 302 ++++++ .../d3-dashboard/step-081.md | 309 +++++++ .../d3-dashboard/step-082.md | 312 +++++++ .../d3-dashboard/step-083.md | 315 +++++++ .../d3-dashboard/step-084.md | 318 +++++++ .../d3-dashboard/step-085.md | 319 +++++++ .../d3-dashboard/step-086.md | 324 +++++++ .../d3-dashboard/step-087.md | 328 +++++++ .../d3-dashboard/step-088.md | 329 +++++++ .../d3-dashboard/step-089.md | 334 +++++++ .../d3-dashboard/step-090.md | 336 +++++++ .../d3-dashboard/step-091.md | 335 +++++++ .../d3-dashboard/step-092.md | 344 +++++++ .../d3-dashboard/step-093.md | 345 +++++++ .../d3-dashboard/step-094.md | 348 +++++++ .../d3-dashboard/step-095.md | 367 ++++++++ .../d3-dashboard/step-096.md | 350 +++++++ .../d3-dashboard/step-097.md | 348 +++++++ .../d3-dashboard/step-098.md | 351 +++++++ .../d3-dashboard/step-099.md | 352 +++++++ .../d3-dashboard/step-100.md | 372 ++++++++ .../d3-dashboard/step-101.md | 377 ++++++++ .../d3-dashboard/step-102.md | 364 ++++++++ .../d3-dashboard/step-103.md | 365 ++++++++ .../d3-dashboard/step-104.md | 381 ++++++++ .../d3-dashboard/step-105.md | 383 ++++++++ .../d3-dashboard/step-106.md | 372 ++++++++ .../d3-dashboard/step-107.md | 376 ++++++++ .../d3-dashboard/step-108.md | 388 ++++++++ .../d3-dashboard/step-109.md | 388 ++++++++ .../d3-dashboard/step-110.md | 389 ++++++++ .../d3-dashboard/step-111.md | 391 ++++++++ .../d3-dashboard/step-112.md | 394 ++++++++ .../d3-dashboard/step-113.md | 396 ++++++++ .../d3-dashboard/step-114.md | 401 ++++++++ .../d3-dashboard/step-115.md | 401 ++++++++ .../d3-dashboard/step-116.md | 404 ++++++++ .../d3-dashboard/step-117.md | 406 +++++++++ .../d3-dashboard/step-118.md | 412 +++++++++ .../d3-dashboard/step-119.md | 417 +++++++++ .../d3-dashboard/step-120.md | 417 +++++++++ .../d3-dashboard/step-121.md | 418 +++++++++ .../d3-dashboard/step-122.md | 422 +++++++++ .../d3-dashboard/step-123.md | 426 +++++++++ .../d3-dashboard/step-124.md | 431 +++++++++ .../d3-dashboard/step-125.md | 430 +++++++++ .../d3-dashboard/step-126.md | 437 +++++++++ .../d3-dashboard/step-127.md | 435 +++++++++ .../d3-dashboard/step-128.md | 438 +++++++++ .../d3-dashboard/step-129.md | 443 +++++++++ .../d3-dashboard/step-130.md | 443 +++++++++ .../d3-dashboard/step-131.md | 446 +++++++++ .../d3-dashboard/step-132.md | 450 +++++++++ .../d3-dashboard/step-133.md | 448 +++++++++ .../d3-dashboard/step-134.md | 453 +++++++++ .../d3-dashboard/step-135.md | 464 ++++++++++ .../d3-dashboard/step-136.md | 476 ++++++++++ .../d3-dashboard/step-137.md | 484 ++++++++++ .../d3-dashboard/step-138.md | 479 ++++++++++ .../d3-dashboard/step-139.md | 485 ++++++++++ .../d3-dashboard/step-140.md | 478 ++++++++++ .../d3-dashboard/step-141.md | 489 ++++++++++ .../d3-dashboard/step-142.md | 481 ++++++++++ .../d3-dashboard/step-143.md | 483 ++++++++++ .../d3-dashboard/step-144.md | 490 ++++++++++ .../d3-dashboard/step-145.md | 494 ++++++++++ .../d3-dashboard/step-146.md | 483 ++++++++++ curriculum/test/utils/challengeTitles.js | 2 +- .../create-project.ts | 2 +- .../create-step-between.js | 2 +- tools/challenge-helper-scripts/delete-step.js | 2 +- .../helpers/get-existing-step-nums.js | 4 +- .../helpers/get-existing-step-nums.test.js | 16 +- .../helpers/get-last-step-file-content.js | 2 +- .../get-last-step-file-content.test.js | 8 +- .../helpers/get-step-template.js | 4 +- .../helpers/get-step-template.test.js | 4 +- tools/challenge-helper-scripts/utils.js | 8 +- tools/challenge-helper-scripts/utils.test.js | 28 +- 2194 files changed, 237701 insertions(+), 237701 deletions(-) delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-001.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-002.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-003.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-004.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-005.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-006.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-007.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-008.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-009.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-010.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-011.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-012.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-013.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-014.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-015.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-016.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-017.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-018.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-019.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-020.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-021.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-022.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-023.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-024.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-025.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-026.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-027.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-028.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-029.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-030.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-031.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-032.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-033.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-034.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-035.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-036.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-037.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-038.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-039.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-040.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-041.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-042.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-043.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-044.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-045.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-046.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-047.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-048.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-049.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-050.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-051.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-052.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-053.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-054.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-055.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-056.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-057.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-058.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-059.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-060.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-061.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-062.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-063.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-064.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-065.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-066.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-067.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-001.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-002.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-003.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-004.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-005.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-006.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-007.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-008.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-009.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-010.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-011.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-012.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-013.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-014.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-015.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-016.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-017.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-018.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-019.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-020.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-021.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-022.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-023.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-024.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-025.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-026.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-027.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-028.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-029.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-030.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-031.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-032.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-033.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-034.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-035.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-036.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-037.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-038.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-039.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-040.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-041.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-042.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-043.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-044.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-045.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-046.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-047.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-048.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-049.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-050.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-051.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-052.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-053.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-054.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-055.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-056.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-057.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-058.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-059.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-060.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-061.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-062.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-063.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-064.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-065.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-066.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-067.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-001.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-002.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-003.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-004.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-005.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-006.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-007.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-008.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-009.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-010.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-011.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-012.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-013.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-014.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-015.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-016.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-017.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-018.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-019.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-020.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-021.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-022.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-023.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-024.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-025.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-026.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-027.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-028.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-029.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-030.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-031.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-032.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-033.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-034.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-035.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-036.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-037.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-038.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-039.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-040.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-041.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-042.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-043.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-044.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-045.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-046.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-047.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-048.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-049.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-050.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-051.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-052.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-053.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-054.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-055.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-056.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-057.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-058.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-059.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-060.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-061.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-062.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-063.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-064.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-065.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-066.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-067.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-068.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-069.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-070.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-071.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-072.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-073.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-074.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-075.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-076.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-077.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-078.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-079.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-080.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-081.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-082.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-083.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-084.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-085.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-086.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-087.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-088.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-089.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-090.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-091.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-092.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-001.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-002.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-003.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-004.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-005.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-006.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-007.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-008.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-009.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-010.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-011.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-012.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-013.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-014.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-015.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-016.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-017.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-018.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-019.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-020.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-021.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-022.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-023.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-024.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-025.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-026.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-027.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-028.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-029.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-030.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-031.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-032.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-033.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-034.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-035.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-036.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-037.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-038.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-039.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-040.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-041.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-042.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-043.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-044.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-045.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-046.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-047.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-048.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-049.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-050.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-051.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-052.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-053.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-054.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-055.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-056.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-057.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-058.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-059.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-060.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-061.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-062.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-063.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-064.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-065.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-066.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-067.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-068.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-069.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-070.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-071.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-072.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-073.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-074.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-075.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-076.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-077.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-078.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-079.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-080.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-081.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-082.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-083.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-084.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-085.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-086.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-087.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-088.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-089.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-090.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-091.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-092.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-001.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-002.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-003.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-004.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-005.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-006.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-007.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-008.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-009.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-010.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-011.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-012.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-013.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-014.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-015.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-016.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-017.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-018.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-019.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-020.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-021.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-022.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-023.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-024.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-025.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-026.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-027.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-028.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-029.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-030.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-031.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-032.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-033.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-034.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-035.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-036.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-037.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-038.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-039.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-040.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-041.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-042.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-043.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-044.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-045.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-046.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-047.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-048.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-049.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-050.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-051.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-052.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-053.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-054.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-055.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-056.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-057.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-058.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-059.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-060.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-061.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-062.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-063.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-064.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-065.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-066.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-067.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-001.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-002.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-003.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-004.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-005.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-006.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-007.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-008.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-009.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-010.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-011.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-012.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-013.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-014.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-015.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-016.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-017.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-018.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-019.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-020.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-021.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-022.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-023.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-024.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-025.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-026.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-027.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-028.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-029.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-030.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-031.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-032.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-033.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-034.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-035.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-036.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-037.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-038.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-039.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-040.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-041.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-042.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-043.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-044.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-045.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-046.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-047.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-048.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-049.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-050.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-051.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-052.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-053.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-054.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-055.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-056.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-057.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-058.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-059.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-060.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-061.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-062.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-063.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-064.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-065.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-066.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-067.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-001.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-002.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-003.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-004.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-005.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-006.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-007.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-008.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-009.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-010.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-011.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-012.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-013.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-014.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-015.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-016.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-017.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-018.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-019.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-020.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-021.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-022.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-023.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-024.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-025.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-026.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-027.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-028.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-029.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-030.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-031.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-032.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-033.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-034.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-035.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-036.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-037.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-038.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-039.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-040.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-041.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-042.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-043.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-044.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-045.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/part-046.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-001.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-002.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-003.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-004.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-005.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-006.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-007.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-008.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-009.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-010.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-011.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-012.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-013.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-014.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-015.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-016.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-017.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-018.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-019.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-020.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-021.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-022.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-023.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-024.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-025.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-026.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-027.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-028.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-029.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-030.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-031.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-032.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-033.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-034.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-035.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-036.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-037.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-038.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-039.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-040.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-041.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-042.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-043.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-044.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-045.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-box-model/step-046.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-001.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-002.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-003.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-004.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-005.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-006.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-007.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-008.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-009.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-010.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-011.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-012.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-013.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-014.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-015.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-016.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-017.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-018.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-019.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-020.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-021.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-022.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-023.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-024.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-025.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-026.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-027.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-028.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-029.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-030.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-031.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-032.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/part-033.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-001.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-002.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-003.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-004.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-005.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-006.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-007.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-008.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-009.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-010.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-011.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-012.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-013.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-014.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-015.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-016.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-017.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-018.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-019.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-020.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-021.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-022.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-023.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-024.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-025.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-026.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-027.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-028.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-029.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-030.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-031.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-032.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-piano/step-033.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-001.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-002.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-003.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-004.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-005.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-006.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-007.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-008.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-009.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-010.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-011.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-012.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-013.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-014.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-015.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-016.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-017.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-018.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-019.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-020.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-021.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-022.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-023.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-024.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-025.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-026.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-027.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-028.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-029.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-030.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-031.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-032.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-033.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-034.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-035.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-036.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-037.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-038.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-039.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-040.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-041.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-042.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-043.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-044.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-045.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-046.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-047.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-048.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-049.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-050.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-051.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-052.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-053.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-054.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-055.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-056.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-057.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-058.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-059.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-060.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-061.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-062.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-063.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-064.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-065.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-066.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-067.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-068.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-069.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-070.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-071.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-072.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-073.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-074.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-075.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-076.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-077.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-078.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-079.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-080.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-081.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-082.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-083.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-084.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-085.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-086.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-087.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-088.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-089.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-001.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-002.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-003.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-004.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-005.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-006.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-007.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-008.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-009.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-010.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-011.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-012.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-013.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-014.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-015.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-016.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-017.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-018.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-019.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-020.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-021.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-022.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-023.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-024.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-025.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-026.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-027.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-028.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-029.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-030.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-031.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-032.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-033.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-034.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-035.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-036.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-037.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-038.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-039.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-040.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-041.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-042.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-043.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-044.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-045.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-046.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-047.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-048.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-049.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-050.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-051.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-052.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-053.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-054.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-055.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-056.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-057.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-058.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-059.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-060.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-061.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-062.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-063.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-064.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-065.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-066.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-067.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-068.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-069.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-070.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-071.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-072.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-073.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-074.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-075.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-076.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-077.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-078.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-079.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-080.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-081.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-082.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-083.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-084.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-085.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-086.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-087.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-088.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-089.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-001.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-002.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-003.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-004.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-005.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-006.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-007.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-008.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-009.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-010.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-011.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-012.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-013.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-014.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-015.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-016.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-017.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-018.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-019.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-020.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-021.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-022.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-023.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-024.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-025.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-026.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-027.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-028.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-029.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-030.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-031.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-032.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-033.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-034.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-035.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-036.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-037.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-038.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-039.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-040.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-041.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-042.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-043.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-044.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-045.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-046.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-047.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-048.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-049.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-050.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-051.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-052.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-053.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-054.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-055.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-056.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-057.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-058.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-059.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-060.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-061.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-062.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-063.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-064.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-065.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-066.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-067.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-068.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-069.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-070.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-071.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-072.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-073.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-074.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-075.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-076.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-077.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-078.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-079.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-080.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-081.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-082.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-083.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-084.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-085.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-086.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-087.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-088.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-089.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-090.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-091.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-092.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-093.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-094.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-095.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-096.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-097.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-098.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-099.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-100.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-101.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-102.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-103.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-104.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-105.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-106.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-107.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-108.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-109.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-110.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-111.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-112.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-113.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-114.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-115.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-116.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-117.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-118.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-001.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-002.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-003.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-004.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-005.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-006.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-007.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-008.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-009.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-010.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-011.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-012.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-013.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-014.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-015.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-016.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-017.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-018.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-019.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-020.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-021.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-022.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-023.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-024.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-025.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-026.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-027.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-028.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-029.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-030.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-031.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-032.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-033.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-034.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-035.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-036.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-037.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-038.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-039.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-040.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-041.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-042.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-043.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-044.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-045.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-046.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-047.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-048.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-049.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-050.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-051.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-052.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-053.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-054.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-055.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-056.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-057.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-058.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-059.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-060.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-061.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-062.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-063.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-064.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-065.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-066.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-067.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-068.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-069.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-070.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-071.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-072.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-073.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-074.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-075.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-076.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-077.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-078.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-079.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-080.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-081.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-082.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-083.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-084.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-085.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-086.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-087.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-088.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-089.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-090.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-091.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-092.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-093.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-094.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-095.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-096.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-097.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-098.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-099.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-100.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-101.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-102.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-103.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-104.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-105.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-106.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-107.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-108.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-109.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-110.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-111.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-112.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-113.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-114.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-115.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-116.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-117.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-118.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-001.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-002.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-003.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-004.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-005.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-006.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-007.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-008.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-009.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-010.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-011.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-012.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-013.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-014.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-015.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-016.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-017.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-018.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-019.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-020.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-021.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-022.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-023.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-024.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-025.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-026.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-027.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-028.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-029.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-030.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-031.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-032.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-033.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-034.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-035.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-036.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-037.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-038.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-039.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-040.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-041.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-042.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-043.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-044.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-045.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-046.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-047.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-048.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-049.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-050.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-051.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-052.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-053.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-054.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-055.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-056.md delete mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/part-057.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-001.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-002.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-003.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-004.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-005.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-006.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-007.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-008.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-009.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-010.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-011.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-012.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-013.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-014.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-015.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-016.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-017.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-018.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-019.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-020.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-021.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-022.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-023.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-024.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-025.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-026.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-027.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-028.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-029.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-030.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-031.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-032.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-033.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-034.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-035.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-036.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-037.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-038.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-039.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-040.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-041.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-042.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-043.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-044.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-045.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-046.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-047.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-048.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-049.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-050.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-051.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-052.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-053.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-054.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-055.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-056.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/registration-form/step-057.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-001.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-002.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-003.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-004.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-005.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-006.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-007.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-008.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-009.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-010.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-011.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-012.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-013.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-014.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-015.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-016.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-017.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-018.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-019.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-020.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-021.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-022.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-023.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-024.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-025.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-026.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-027.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-028.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-029.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-030.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-031.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-032.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-033.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-034.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-035.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-036.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-037.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-038.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-039.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-040.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-041.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-042.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-043.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-044.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-045.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-046.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-047.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-048.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-049.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-050.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-051.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-052.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-053.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-054.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-055.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-056.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-057.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-058.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-059.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-060.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-061.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-062.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-063.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-064.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-065.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-066.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-067.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-068.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-069.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-070.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-071.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-072.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-073.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-074.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-075.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-076.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-077.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-078.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-079.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-080.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-081.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-082.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-083.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-084.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-085.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-086.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-087.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-088.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-089.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-090.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-091.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-092.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-093.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-094.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-095.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-096.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-097.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-098.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-099.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-100.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-101.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-102.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-103.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-104.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-105.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-106.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-107.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-108.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-109.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-110.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-111.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-112.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-113.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-114.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-115.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-116.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-117.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-118.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-119.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-120.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-121.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-122.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-123.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-124.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-125.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-126.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-127.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-128.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-129.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-130.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-131.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-132.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-133.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-134.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-135.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-136.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-137.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-138.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-139.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-140.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-141.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-142.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-143.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-144.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-145.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-146.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-147.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-148.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-149.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-150.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-151.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-152.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-153.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-001.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-002.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-003.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-004.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-005.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-006.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-007.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-008.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-009.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-010.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-011.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-012.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-013.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-014.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-015.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-016.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-017.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-018.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-019.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-020.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-021.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-022.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-023.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-024.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-025.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-026.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-027.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-028.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-029.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-030.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-031.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-032.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-033.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-034.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-035.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-036.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-037.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-038.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-039.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-040.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-041.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-042.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-043.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-044.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-045.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-046.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-047.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-048.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-049.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-050.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-051.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-052.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-053.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-054.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-055.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-056.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-057.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-058.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-059.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-060.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-061.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-062.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-063.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-064.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-065.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-066.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-067.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-068.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-069.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-070.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-071.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-072.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-073.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-074.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-075.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-076.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-077.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-078.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-079.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-080.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-081.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-082.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-083.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-084.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-085.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-086.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-087.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-088.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-089.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-090.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-091.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-092.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-093.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-094.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-095.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-096.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-097.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-098.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-099.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-100.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-101.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-102.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-103.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-104.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-105.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-106.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-107.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-108.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-109.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-110.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-111.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-112.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-113.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-114.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-115.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-116.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-117.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-118.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-119.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-120.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-121.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-122.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-123.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-124.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-125.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-126.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-127.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-128.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-129.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-130.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-131.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-132.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-133.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-134.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-135.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-136.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-137.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-138.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-139.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-140.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-141.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-142.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-143.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-144.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-145.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-146.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-147.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-148.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-149.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-150.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-151.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-152.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-153.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-001.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-002.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-003.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-004.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-005.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-006.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-007.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-008.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-009.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-010.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-011.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-012.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-013.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-014.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-015.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-016.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-017.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-018.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-019.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-020.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-021.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-022.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-023.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-024.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-025.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-026.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-027.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-028.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-029.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-030.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-031.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-032.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-033.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-034.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-035.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-036.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-037.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-038.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-039.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-040.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-041.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-042.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-043.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-044.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-045.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-046.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-047.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-048.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-049.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-050.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-051.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-052.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-053.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-054.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-055.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-056.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-057.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-058.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-059.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-060.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-061.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-062.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-063.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-064.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-065.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-066.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-067.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-068.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-069.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-070.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-071.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-072.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-073.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-074.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-075.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-076.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-077.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-078.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-079.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-080.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-081.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-082.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-083.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-084.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-085.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-086.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-087.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-088.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-089.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-090.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-091.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-092.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-093.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-094.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-095.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-096.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-097.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-098.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-099.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-100.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-101.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-102.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-103.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-104.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-105.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-106.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-107.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-108.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-109.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-110.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-111.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-112.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-113.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-114.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-115.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-116.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-117.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-118.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-119.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-120.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-121.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-122.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-123.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-124.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-125.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-126.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-127.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-128.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-129.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-130.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-131.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-132.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-133.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-134.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-135.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-136.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-137.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-138.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-139.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-140.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-141.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-001.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-002.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-003.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-004.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-005.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-006.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-007.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-008.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-009.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-010.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-011.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-012.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-013.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-014.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-015.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-016.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-017.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-018.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-019.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-020.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-021.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-022.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-023.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-024.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-025.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-026.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-027.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-028.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-029.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-030.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-031.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-032.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-033.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-034.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-035.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-036.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-037.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-038.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-039.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-040.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-041.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-042.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-043.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-044.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-045.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-046.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-047.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-048.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-049.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-050.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-051.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-052.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-053.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-054.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-055.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-056.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-057.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-058.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-059.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-060.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-061.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-062.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-063.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-064.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-065.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-066.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-067.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-068.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-069.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-070.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-071.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-072.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-073.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-074.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-075.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-076.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-077.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-078.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-079.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-080.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-081.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-082.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-083.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-084.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-085.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-086.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-087.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-088.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-089.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-090.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-091.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-092.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-093.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-094.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-095.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-096.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-097.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-098.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-099.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-100.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-101.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-102.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-103.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-104.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-105.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-106.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-107.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-108.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-109.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-110.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-111.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-112.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-113.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-114.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-115.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-116.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-117.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-118.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-119.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-120.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-121.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-122.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-123.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-124.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-125.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-126.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-127.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-128.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-129.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-130.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-131.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-132.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-133.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-134.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-135.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-136.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-137.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-138.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-139.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-140.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-141.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-001.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-002.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-003.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-004.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-005.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-006.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-007.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-008.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-009.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-010.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-011.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-012.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-013.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-014.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-015.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-016.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-017.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-018.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-019.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-020.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-021.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-022.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-023.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-024.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-025.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-026.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-027.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-028.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-029.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-030.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-031.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-032.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-033.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-034.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-035.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-036.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-037.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-038.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-039.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-040.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-041.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-042.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-043.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-044.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-045.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-046.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-047.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-048.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-049.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-050.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-051.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-052.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-053.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-054.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-055.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-056.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-057.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-058.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-059.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-060.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-061.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-062.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-063.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-064.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-065.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-066.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-067.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-068.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-069.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-070.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-071.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-072.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-073.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-074.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-075.md delete mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-076.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-001.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-002.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-003.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-004.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-005.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-006.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-007.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-008.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-009.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-010.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-011.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-012.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-013.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-014.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-015.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-016.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-017.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-018.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-019.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-020.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-021.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-022.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-023.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-024.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-025.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-026.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-027.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-028.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-029.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-030.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-031.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-032.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-033.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-034.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-035.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-036.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-037.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-038.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-039.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-040.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-041.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-042.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-043.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-044.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-045.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-046.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-047.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-048.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-049.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-050.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-051.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-052.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-053.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-054.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-055.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-056.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-057.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-058.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-059.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-060.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-061.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-062.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-063.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-064.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-065.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-066.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-067.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-068.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-069.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-070.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-071.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-072.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-073.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-074.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-075.md create mode 100644 curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-076.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-001.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-002.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-003.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-004.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-005.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-006.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-007.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-008.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-009.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-010.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-011.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-012.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-013.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-014.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-015.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-016.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-017.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-018.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-019.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-020.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-021.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-022.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-023.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-024.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-025.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-026.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-027.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-028.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-029.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-030.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-031.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-032.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-033.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-034.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-035.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-036.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-037.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-038.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-039.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-040.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-041.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-042.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-043.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-044.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-045.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-046.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-047.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-048.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-049.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-050.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-051.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-052.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-053.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-054.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-055.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-056.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-057.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-058.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-059.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-060.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-061.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-062.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-063.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-064.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-065.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-066.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-067.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-068.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-069.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-070.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-071.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-072.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-073.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-074.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-075.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-076.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-077.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-078.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-079.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-080.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-081.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-082.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-083.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-084.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-085.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-086.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-087.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-088.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-089.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-090.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-091.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-092.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-093.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-094.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-095.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-096.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-097.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-098.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-099.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-100.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-101.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-102.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-103.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-104.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-105.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-106.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-107.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-108.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-109.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-110.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-111.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-112.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-113.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-114.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-115.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-116.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-117.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-118.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-119.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-120.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-121.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-122.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-123.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-124.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-125.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-126.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-127.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-128.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-129.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-130.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-131.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-132.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-133.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-134.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-135.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-136.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-137.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-138.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-139.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-140.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-141.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-142.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-143.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-144.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-145.md delete mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/part-146.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-001.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-002.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-003.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-004.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-005.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-006.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-007.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-008.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-009.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-010.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-011.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-012.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-013.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-014.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-015.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-016.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-017.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-018.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-019.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-020.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-021.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-022.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-023.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-024.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-025.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-026.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-027.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-028.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-029.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-030.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-031.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-032.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-033.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-034.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-035.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-036.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-037.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-038.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-039.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-040.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-041.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-042.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-043.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-044.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-045.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-046.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-047.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-048.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-049.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-050.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-051.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-052.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-053.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-054.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-055.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-056.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-057.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-058.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-059.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-060.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-061.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-062.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-063.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-064.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-065.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-066.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-067.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-068.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-069.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-070.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-071.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-072.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-073.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-074.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-075.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-076.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-077.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-078.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-079.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-080.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-081.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-082.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-083.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-084.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-085.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-086.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-087.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-088.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-089.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-090.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-091.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-092.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-093.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-094.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-095.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-096.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-097.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-098.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-099.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-100.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-101.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-102.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-103.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-104.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-105.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-106.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-107.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-108.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-109.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-110.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-111.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-112.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-113.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-114.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-115.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-116.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-117.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-118.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-119.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-120.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-121.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-122.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-123.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-124.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-125.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-126.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-127.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-128.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-129.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-130.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-131.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-132.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-133.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-134.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-135.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-136.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-137.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-138.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-139.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-140.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-141.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-142.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-143.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-144.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-145.md create mode 100644 curriculum/challenges/english/04-data-visualization/d3-dashboard/step-146.md diff --git a/curriculum/challenges/_meta/accessibility-quiz/meta.json b/curriculum/challenges/_meta/accessibility-quiz/meta.json index f429ca6ddc..e98003fbc7 100644 --- a/curriculum/challenges/_meta/accessibility-quiz/meta.json +++ b/curriculum/challenges/_meta/accessibility-quiz/meta.json @@ -13,271 +13,271 @@ "challengeOrder": [ [ "614ccc21ea91ef1736b9b578", - "Part 1" + "Step 1" ], [ "613297a923965e0703b64796", - "Part 2" + "Step 2" ], [ "61329b210dac0b08047fd6ab", - "Part 3" + "Step 3" ], [ "61329d52e5010e08d9b9d66b", - "Part 4" + "Step 4" ], [ "6133acc353338c0bba9cb553", - "Part 5" + "Step 5" ], [ "6133d11ef548f51f876149e3", - "Part 6" + "Step 6" ], [ "613e2546d0594208229ada50", - "Part 7" + "Step 7" ], [ "613e275749ebd008e74bb62e", - "Part 8" + "Step 8" ], [ "6140827cff96e906bd38fc2b", - "Part 9" + "Step 9" ], [ "6140883f74224508174794c0", - "Part 10" + "Step 10" ], [ "61408e4ae3e35d08feb260eb", - "Part 11" + "Step 11" ], [ "61408f155e798909b6908712", - "Part 12" + "Step 12" ], [ "614090d5a22b6f0a5a6b464c", - "Part 13" + "Step 13" ], [ "6141fabd6f75610664e908fd", - "Part 14" + "Step 14" ], [ "6141fed65b61320743da5894", - "Part 15" + "Step 15" ], [ "614202874ca576084fca625f", - "Part 16" + "Step 16" ], [ "614206033d366c090ca7dd42", - "Part 17" + "Step 17" ], [ "61435e3c0679a306c20f1acc", - "Part 18" + "Step 18" ], [ "6143610161323a081b249c19", - "Part 19" + "Step 19" ], [ "6143639d5eddc7094161648c", - "Part 20" + "Step 20" ], [ "6143908b6aafb00a659ca189", - "Part 21" + "Step 21" ], [ "6143920c8eafb00b735746ce", - "Part 22" + "Step 22" ], [ "6143931a113bb80c45546287", - "Part 23" + "Step 23" ], [ "614394fb41985e0d2012a93e", - "Part 24" + "Step 24" ], [ "6143956ed76ed60e012faa51", - "Part 25" + "Step 25" ], [ "614396f7ae83f20ea6f9f4b3", - "Part 26" + "Step 26" ], [ "6143cb26f7edff2dc28f7da5", - "Part 27" + "Step 27" ], [ "6144e818fd5ea704fe56081d", - "Part 28" + "Step 28" ], [ "6144f8dc6849e405dd8bb829", - "Part 29" + "Step 29" ], [ "6145e6eeaa66c605eb087fe9", - "Part 30" + "Step 30" ], [ "6145e8b5080a5f06bb0223d0", - "Part 31" + "Step 31" ], [ "6145eb5f08a38a0786c7a80c", - "Part 32" + "Step 32" ], [ "6145ed1f22caab087630aaad", - "Part 33" + "Step 33" ], [ "6145ee65e2e1530938cb594d", - "Part 34" + "Step 34" ], [ "6145f02240ff8f09f7ec913c", - "Part 35" + "Step 35" ], [ "6145f14f019a4b0adb94b051", - "Part 36" + "Step 36" ], [ "6145f3a5cd9be60b9459cdd6", - "Part 37" + "Step 37" ], [ "6145f47393fbe70c4d885f9c", - "Part 38" + "Step 38" ], [ "6145f59029474c0d3dc1c8b8", - "Part 39" + "Step 39" ], [ "6145f685797bd30df9784e8c", - "Part 40" + "Step 40" ], [ "6145f829ac6a920ebf5797d7", - "Part 41" + "Step 41" ], [ "6145f8f8bcd4370f6509078e", - "Part 42" + "Step 42" ], [ "6145fb5018cb5b100cb2a88c", - "Part 43" + "Step 43" ], [ "6145fc3707fc3310c277f5c8", - "Part 44" + "Step 44" ], [ "614796cb8086be482d60e0ac", - "Part 45" + "Step 45" ], [ "6147a14ef5668b5881ef2297", - "Part 46" + "Step 46" ], [ "614878f7a412310647873015", - "Part 47" + "Step 47" ], [ "61487b77d4a37707073a64e5", - "Part 48" + "Step 48" ], [ "61487da611a65307e78d2c20", - "Part 49" + "Step 49" ], [ "61487f703571b60899055cf9", - "Part 50" + "Step 50" ], [ "614880dc16070e093e29bc56", - "Part 51" + "Step 51" ], [ "614883b6fa720e09fb167de9", - "Part 52" + "Step 52" ], [ "614884c1f5d6f30ab3d78cde", - "Part 53" + "Step 53" ], [ "61488ecfd05e290b5712e6da", - "Part 54" + "Step 54" ], [ "6148d99cdc7acd0c519862cb", - "Part 55" + "Step 55" ], [ "6148da157cc0bd0d06df5c0a", - "Part 56" + "Step 56" ], [ "6148dc095264000dce348bf5", - "Part 57" + "Step 57" ], [ "6148dcaaf2e8750e6cb4501a", - "Part 58" + "Step 58" ], [ "6148dd31d210990f0fb140f8", - "Part 59" + "Step 59" ], [ "6148defa9c01520fb9d178a0", - "Part 60" + "Step 60" ], [ "6148dfab9b54c110577de165", - "Part 61" + "Step 61" ], [ "6148e0bcc13efd10f7d7a6a9", - "Part 62" + "Step 62" ], [ "6148e161ecec9511941f8833", - "Part 63" + "Step 63" ], [ "6148e28706b34912340fd042", - "Part 64" + "Step 64" ], [ "6148e335c1edd512d00e4691", - "Part 65" + "Step 65" ], [ "6148e41c728f65138addf9cc", - "Part 66" + "Step 66" ], [ "6148e5aeb102e3142de026a2", - "Part 67" + "Step 67" ] ] } diff --git a/curriculum/challenges/_meta/basic-css-cafe-menu/meta.json b/curriculum/challenges/_meta/basic-css-cafe-menu/meta.json index fefbd2d7ef..17db5fa151 100644 --- a/curriculum/challenges/_meta/basic-css-cafe-menu/meta.json +++ b/curriculum/challenges/_meta/basic-css-cafe-menu/meta.json @@ -13,370 +13,370 @@ "challengeOrder": [ [ "5f33071498eb2472b87ddee4", - "Part 1" + "Step 1" ], [ "5f3313e74582ad9d063e3a38", - "Part 2" + "Step 2" ], [ "5f331e55dfab7a896e53c3a1", - "Part 3" + "Step 3" ], [ "5f3326b143638ee1a09ff1e3", - "Part 4" + "Step 4" ], [ "5f33294a6af5e9188dbdb8f3", - "Part 5" + "Step 5" ], [ "5f332a88dc25a0fd25c7687a", - "Part 6" + "Step 6" ], [ "5f332b23c2045fb843337579", - "Part 7" + "Step 7" ], [ "5f33310c1851c6c4da013250", - "Part 8" + "Step 8" ], [ "5f344fc1520b6719f2e35605", - "Part 9" + "Step 9" ], [ "5f344fbc22624a2976425065", - "Part 10" + "Step 10" ], [ "5f344fad8bf01691e71a30eb", - "Part 11" + "Step 11" ], [ "5f344f9c805cd193c33d829c", - "Part 12" + "Step 12" ], [ "5f3477ae9675db8bb7655b30", - "Part 13" + "Step 13" ], [ "5f3477ae34c1239cafe128be", - "Part 14" + "Step 14" ], [ "5f3477aefa51bfc29327200b", - "Part 15" + "Step 15" ], [ "5f3477ae8466a9a3d2cc953c", - "Part 16" + "Step 16" ], [ "5f3477cb2e27333b1ab2b955", - "Part 17" + "Step 17" ], [ "5f3477cbcb6ba47918c1da92", - "Part 18" + "Step 18" ], [ "5f3477cb303c5cb61b43aa9b", - "Part 19" + "Step 19" ], [ "5f34a1fd611d003edeafd681", - "Part 20" + "Step 20" ], [ "5f356ed6cf6eab5f15f5cfe6", - "Part 21" + "Step 21" ], [ "5f356ed63c7807a4f1e6d054", - "Part 22" + "Step 22" ], [ "5f356ed60a5decd94ab66986", - "Part 23" + "Step 23" ], [ "5f356ed63e0fa262326eef05", - "Part 24" + "Step 24" ], [ "5f356ed60785e1f3e9850b6e", - "Part 25" + "Step 25" ], [ "5f356ed656a336993abd9f7c", - "Part 26" + "Step 26" ], [ "5f356ed6199b0cdef1d2be8f", - "Part 27" + "Step 27" ], [ "5f356ed69db0a491745e2bb6", - "Part 28" + "Step 28" ], [ "5f35e5c44359872a137bd98f", - "Part 29" + "Step 29" ], [ "5f35e5c4321f818cdc4bed30", - "Part 30" + "Step 30" ], [ "5f3c866daec9a49519871816", - "Part 31" + "Step 31" ], [ "5f3c866d5414453fc2d7b480", - "Part 32" + "Step 32" ], [ "5f3c866d28d7ad0de6470505", - "Part 33" + "Step 33" ], [ "5f769541be494f25449b292f", - "Part 34" + "Step 34" ], [ "5f76967fad478126d6552b0d", - "Part 35" + "Step 35" ], [ "5f769702e6e33127d14aa120", - "Part 36" + "Step 36" ], [ "5f3c866de7a5b784048f94b1", - "Part 37" + "Step 37" ], [ "5f3c866dbf362f99b9a0c6d0", - "Part 38" + "Step 38" ], [ "5f3c866d0fc037f7311b4ac8", - "Part 39" + "Step 39" ], [ "5f3c866dd0d0275f01d4d847", - "Part 40" + "Step 40" ], [ "5f3cade9fa77275d9f4efe62", - "Part 41" + "Step 41" ], [ "5f3cade94c6576e7f7b7953f", - "Part 42" + "Step 42" ], [ "5f3cade9993019e26313fa8e", - "Part 43" + "Step 43" ], [ "5f7691dafd882520797cd2f0", - "Part 44" + "Step 44" ], [ "5f7692f7c5b3ce22a57788b6", - "Part 45" + "Step 45" ], [ "5f47633757ae3469f2d33d2e", - "Part 46" + "Step 46" ], [ "5f3cade99dda4e6071a85dfd", - "Part 47" + "Step 47" ], [ "5f3ef6e0e0c3feaebcf647ad", - "Part 48" + "Step 48" ], [ "5f3ef6e0819d4f23ca7285e6", - "Part 49" + "Step 49" ], [ "5f716ad029ee4053c7027a7a", - "Part 50" + "Step 50" ], [ "5f7b87422a560036fd03ccff", - "Part 51" + "Step 51" ], [ "5f7b88d37b1f98386f04edc0", - "Part 52" + "Step 52" ], [ "5f716bee5838c354c728a7c5", - "Part 53" + "Step 53" ], [ "5f3ef6e0eaa7da26e3d34d78", - "Part 54" + "Step 54" ], [ "5f3ef6e050279c7a4a7101d3", - "Part 55" + "Step 55" ], [ "5f3ef6e04559b939080db057", - "Part 56" + "Step 56" ], [ "5f3ef6e03d719d5ac4738993", - "Part 57" + "Step 57" ], [ "5f3ef6e05473f91f948724ab", - "Part 58" + "Step 58" ], [ "5f3ef6e056bdde6ae6892ba2", - "Part 59" + "Step 59" ], [ "5f3ef6e0e9629bad967cd71e", - "Part 60" + "Step 60" ], [ "5f3ef6e06d34faac0447fc44", - "Part 61" + "Step 61" ], [ "5f3ef6e087d56ed3ffdc36be", - "Part 62" + "Step 62" ], [ "5f3ef6e0f8c230bdd2349716", - "Part 63" + "Step 63" ], [ "5f3ef6e07276f782bb46b93d", - "Part 64" + "Step 64" ], [ "5f3ef6e0a81099d9a697b550", - "Part 65" + "Step 65" ], [ "5f3ef6e0b431cc215bb16f55", - "Part 66" + "Step 66" ], [ "5f3ef6e01f288a026d709587", - "Part 67" + "Step 67" ], [ "5f3f26fa39591db45e5cd7a0", - "Part 68" + "Step 68" ], [ "5f459225127805351a6ad057", - "Part 69" + "Step 69" ], [ "5f459a7ceb8b5c446656d88b", - "Part 70" + "Step 70" ], [ "5f459cf202c2a3472fae6a9f", - "Part 71" + "Step 71" ], [ "5f459fd48bdc98491ca6d1a3", - "Part 72" + "Step 72" ], [ "5f45a05977e2fa49d9119437", - "Part 73" + "Step 73" ], [ "5f45a276c093334f0f6e9df4", - "Part 74" + "Step 74" ], [ "5f45a5a7c49a8251f0bdb527", - "Part 75" + "Step 75" ], [ "5f46fc57528aa1c4b5ea7c2e", - "Part 76" + "Step 76" ], [ "5f4701b942c824109626c3d8", - "Part 77" + "Step 77" ], [ "5f46ede1ff8fec5ba656b44c", - "Part 78" + "Step 78" ], [ "5f45a66d4a2b0453301e5a26", - "Part 79" + "Step 79" ], [ "5f45b0731d39e15d54df4dfc", - "Part 80" + "Step 80" ], [ "5f45b25e7ec2405f166b9de1", - "Part 81" + "Step 81" ], [ "5f45b3c93c027860d9298dbd", - "Part 82" + "Step 82" ], [ "5f45b45d099f3e621fbbb256", - "Part 83" + "Step 83" ], [ "5f45b4c81cea7763550e40df", - "Part 84" + "Step 84" ], [ "5f45b715301bbf667badc04a", - "Part 85" + "Step 85" ], [ "5f46e270702a8456a664f0df", - "Part 86" + "Step 86" ], [ "5f46e36e745ead58487aabf2", - "Part 87" + "Step 87" ], [ "5f46e7a4750dd05b5a673920", - "Part 88" + "Step 88" ], [ "5f46e8284aae155c83015dee", - "Part 89" + "Step 89" ], [ "5f475bb508746c16c9431d42", - "Part 90" + "Step 90" ], [ "5f475e1c7f71a61d913836c6", - "Part 91" + "Step 91" ], [ "5f47fe7e31980053a8d4403b", - "Part 92" + "Step 92" ] ]} diff --git a/curriculum/challenges/_meta/basic-html-cat-photo-app/meta.json b/curriculum/challenges/_meta/basic-html-cat-photo-app/meta.json index c6d611f2a5..d83dc967ea 100644 --- a/curriculum/challenges/_meta/basic-html-cat-photo-app/meta.json +++ b/curriculum/challenges/_meta/basic-html-cat-photo-app/meta.json @@ -13,270 +13,270 @@ "challengeOrder": [ [ "5dc174fcf86c76b9248c6eb2", - "Part 1" + "Step 1" ], [ "5dc1798ff86c76b9248c6eb3", - "Part 2" + "Step 2" ], [ "5dc17d3bf86c76b9248c6eb4", - "Part 3" + "Step 3" ], [ "5dc17dc8f86c76b9248c6eb5", - "Part 4" + "Step 4" ], [ "5dc2385ff86c76b9248c6eb7", - "Part 5" + "Step 5" ], [ "5dc23991f86c76b9248c6eb8", - "Part 6" + "Step 6" ], [ "5dc23f9bf86c76b9248c6eba", - "Part 7" + "Step 7" ], [ "5dc24073f86c76b9248c6ebb", - "Part 8" + "Step 8" ], [ "5dc24165f86c76b9248c6ebc", - "Part 9" + "Step 9" ], [ "5dc24614f86c76b9248c6ebd", - "Part 10" + "Step 10" ], [ "5ddbd81294d8ddc1510a8e56", - "Part 11" + "Step 11" ], [ "5dfa22d1b521be39a3de7be0", - "Part 12" + "Step 12" ], [ "5dfa2407b521be39a3de7be1", - "Part 13" + "Step 13" ], [ "5dfa30b9eacea3f48c6300ad", - "Part 14" + "Step 14" ], [ "5f07be6ef7412fbad0c5626b", - "Part 15" + "Step 15" ], [ "5f07c98cdb9413cbd4b16750", - "Part 16" + "Step 16" ], [ "5dfa3589eacea3f48c6300ae", - "Part 17" + "Step 17" ], [ "5dfa371beacea3f48c6300af", - "Part 18" + "Step 18" ], [ "5dfa37b9eacea3f48c6300b0", - "Part 19" + "Step 19" ], [ "5dfb5ecbeacea3f48c6300b1", - "Part 20" + "Step 20" ], [ "5dfb6250eacea3f48c6300b2", - "Part 21" + "Step 21" ], [ "5dfb655eeacea3f48c6300b3", - "Part 22" + "Step 22" ], [ "5dfb6a35eacea3f48c6300b4", - "Part 23" + "Step 23" ], [ "5ef9b03c81a63668521804d0", - "Part 24" + "Step 24" ], [ "5ef9b03c81a63668521804d1", - "Part 25" + "Step 25" ], [ "5ef9b03c81a63668521804d2", - "Part 26" + "Step 26" ], [ "5ef9b03c81a63668521804d3", - "Part 27" + "Step 27" ], [ "5efada803cbd2bbdab94e332", - "Part 28" + "Step 28" ], [ "5efae0543cbd2bbdab94e333", - "Part 29" + "Step 29" ], [ "5efae16e3cbd2bbdab94e334", - "Part 30" + "Step 30" ], [ "5ef9b03c81a63668521804d4", - "Part 31" + "Step 31" ], [ "5f07fb1579dc934717801375", - "Part 32" + "Step 32" ], [ "5ef9b03c81a63668521804d5", - "Part 33" + "Step 33" ], [ "5ef9b03c81a63668521804d6", - "Part 34" + "Step 34" ], [ "5ef9b03c81a63668521804d7", - "Part 35" + "Step 35" ], [ "5ef9b03c81a63668521804d8", - "Part 36" + "Step 36" ], [ "5efb23e70dc218d6c85f89b1", - "Part 37" + "Step 37" ], [ "7cf9b03d81a65668421804c3", - "Part 38" + "Step 38" ], [ "5ef9b03c81a63668521804d9", - "Part 39" + "Step 39" ], [ "5ef9b03c81a63668521804db", - "Part 40" + "Step 40" ], [ "5ef9b03c81a63668521804da", - "Part 41" + "Step 41" ], [ "5efb2c990dc218d6c85f89b2", - "Part 42" + "Step 42" ], [ "5ef9b03c81a63668521804dc", - "Part 43" + "Step 43" ], [ "5ef9b03c81a63668521804dd", - "Part 44" + "Step 44" ], [ "5ef9b03c81a63668521804df", - "Part 45" + "Step 45" ], [ "5f05a1d8e233dff4a68508d8", - "Part 46" + "Step 46" ], [ "5ef9b03c81a63668521804de", - "Part 47" + "Step 47" ], [ "5f1a80975fc4bcae0edb3497", - "Part 48" + "Step 48" ], [ "5ef9b03c81a63668521804e1", - "Part 49" + "Step 49" ], [ "5f0d48e7b435f13ab6550051", - "Part 50" + "Step 50" ], [ "5f0d4ab1b435f13ab6550052", - "Part 51" + "Step 51" ], [ "5f0d4d04b435f13ab6550053", - "Part 52" + "Step 52" ], [ "5ef9b03c81a63668521804e2", - "Part 53" + "Step 53" ], [ "5efc54138d6a74d05e68af76", - "Part 54" + "Step 54" ], [ "5efc4f528d6a74d05e68af74", - "Part 55" + "Step 55" ], [ "5efc518e8d6a74d05e68af75", - "Part 56" + "Step 56" ], [ "5ef9b03c81a63668521804e3", - "Part 57" + "Step 57" ], [ "5efc575c8d6a74d05e68af77", - "Part 58" + "Step 58" ], [ "5f1a89f1190aff21ae42105a", - "Part 59" + "Step 59" ], [ "5ef9b03c81a63668521804e5", - "Part 60" + "Step 60" ], [ "5ef9b03c81a63668521804e7", - "Part 61" + "Step 61" ], [ "5ef9b03c81a63668521804e8", - "Part 62" + "Step 62" ], [ "5ef9b03c81a63668521804e9", - "Part 63" + "Step 63" ], [ "5ef9b03c81a63668521804ea", - "Part 64" + "Step 64" ], [ "5ef9b03c81a63668521804eb", - "Part 65" + "Step 65" ], [ "5ef9b03c81a63668521804ec", - "Part 66" + "Step 66" ], [ "5ef9b03c81a63668521804ee", - "Part 67" + "Step 67" ] ]} diff --git a/curriculum/challenges/_meta/basic-javascript-rpg-game/meta.json b/curriculum/challenges/_meta/basic-javascript-rpg-game/meta.json index 066b4e342c..0a9903c43f 100644 --- a/curriculum/challenges/_meta/basic-javascript-rpg-game/meta.json +++ b/curriculum/challenges/_meta/basic-javascript-rpg-game/meta.json @@ -13,614 +13,614 @@ "challengeOrder": [ [ "5d5a813321b9e3db6c106a46", - "Part 1" + "Step 1" ], [ "5d5a8dd907f328a948d398ce", - "Part 2" + "Step 2" ], [ "5d5a8f1c07f328a948d398cf", - "Part 3" + "Step 3" ], [ "5d5a903507f328a948d398d0", - "Part 4" + "Step 4" ], [ "5d5aaa5807f328a948d398d1", - "Part 5" + "Step 5" ], [ "5d5aab5d07f328a948d398d2", - "Part 6" + "Step 6" ], [ "5d5aac9c07f328a948d398d3", - "Part 7" + "Step 7" ], [ "5d5aad2307f328a948d398d4", - "Part 8" + "Step 8" ], [ "5d5aae1207f328a948d398d5", - "Part 9" + "Step 9" ], [ "5d5ab57f07f328a948d398d6", - "Part 10" + "Step 10" ], [ "5d5b66ce07f328a948d398d7", - "Part 11" + "Step 11" ], [ "5d64cf8f853b56a21cd16319", - "Part 12" + "Step 12" ], [ "5d651ee1ee291f75bbd738ee", - "Part 13" + "Step 13" ], [ "5d652e5a6e6bf7a6a27aa80a", - "Part 14" + "Step 14" ], [ "5d653b2d6e6bf7a6a27aa80b", - "Part 15" + "Step 15" ], [ "5d653c4d6e6bf7a6a27aa80c", - "Part 16" + "Step 16" ], [ "5d6542826e6bf7a6a27aa80d", - "Part 17" + "Step 17" ], [ "5d65f2c62012114c7d7c57eb", - "Part 18" + "Step 18" ], [ "5d65f4cd2012114c7d7c57ec", - "Part 19" + "Step 19" ], [ "5d65f6392012114c7d7c57ed", - "Part 20" + "Step 20" ], [ "5d6606634bab337fbb433884", - "Part 21" + "Step 21" ], [ "5d66093c4bab337fbb433885", - "Part 22" + "Step 22" ], [ "5d660a32e0696bdec46938d5", - "Part 23" + "Step 23" ], [ "5d6616d8e0696bdec46938d6", - "Part 24" + "Step 24" ], [ "5d661814e0696bdec46938d7", - "Part 25" + "Step 25" ], [ "5d66198de0696bdec46938d8", - "Part 26" + "Step 26" ], [ "5d661bc6e0696bdec46938d9", - "Part 27" + "Step 27" ], [ "5d6653d5e0696bdec46938da", - "Part 28" + "Step 28" ], [ "5d665983e0696bdec46938dc", - "Part 29" + "Step 29" ], [ "5d674fd9e0696bdec46938dd", - "Part 30" + "Step 30" ], [ "5d6752e3e0696bdec46938de", - "Part 31" + "Step 31" ], [ "5d6755fce0696bdec46938df", - "Part 32" + "Step 32" ], [ "5d675726e0696bdec46938e0", - "Part 33" + "Step 33" ], [ "5d678366e0696bdec46938e1", - "Part 34" + "Step 34" ], [ "5d67845ee0696bdec46938e2", - "Part 35" + "Step 35" ], [ "5d67880ee0696bdec46938e3", - "Part 36" + "Step 36" ], [ "5d67ad3de0696bdec46938e4", - "Part 37" + "Step 37" ], [ "5d67ae95e0696bdec46938e5", - "Part 38" + "Step 38" ], [ "5d67b284e0696bdec46938e6", - "Part 39" + "Step 39" ], [ "5d67b945e0696bdec46938e7", - "Part 40" + "Step 40" ], [ "5d68c3b1e0696bdec46938e8", - "Part 41" + "Step 41" ], [ "5d68c51ee0696bdec46938e9", - "Part 42" + "Step 42" ], [ "5d68c5efe0696bdec46938ea", - "Part 43" + "Step 43" ], [ "5d68c758e0696bdec46938eb", - "Part 44" + "Step 44" ], [ "5d68c947e0696bdec46938ec", - "Part 45" + "Step 45" ], [ "5d68ca40e0696bdec46938ed", - "Part 46" + "Step 46" ], [ "5d68d3f7e0696bdec46938ee", - "Part 47" + "Step 47" ], [ "5d68d4fde0696bdec46938ef", - "Part 48" + "Step 48" ], [ "5d68d631e0696bdec46938f0", - "Part 49" + "Step 49" ], [ "5d68dbf7e0696bdec46938f1", - "Part 50" + "Step 50" ], [ "5d6904b6e0696bdec46938f2", - "Part 51" + "Step 51" ], [ "5d6905ace0696bdec46938f3", - "Part 52" + "Step 52" ], [ "5d6f6bfc7c812010bf3327cc", - "Part 53" + "Step 53" ], [ "5d6f6e3c7c812010bf3327cd", - "Part 54" + "Step 54" ], [ "5d6f6f747c812010bf3327ce", - "Part 55" + "Step 55" ], [ "5d6f70937c812010bf3327cf", - "Part 56" + "Step 56" ], [ "5d6f72657c812010bf3327d0", - "Part 57" + "Step 57" ], [ "5d6f736b7c812010bf3327d2", - "Part 58" + "Step 58" ], [ "5d6f776c7c812010bf3327d3", - "Part 59" + "Step 59" ], [ "5d6f785f7c812010bf3327d4", - "Part 60" + "Step 60" ], [ "5d6f79667c812010bf3327d6", - "Part 61" + "Step 61" ], [ "5d6f7b917c812010bf3327d7", - "Part 62" + "Step 62" ], [ "5d6f82da7c812010bf3327d8", - "Part 63" + "Step 63" ], [ "5d6f919f7c812010bf3327d9", - "Part 64" + "Step 64" ], [ "5d6f94347c812010bf3327da", - "Part 65" + "Step 65" ], [ "5d6f96747c812010bf3327db", - "Part 66" + "Step 66" ], [ "5d6f98247c812010bf3327dc", - "Part 67" + "Step 67" ], [ "5d6f9a4c7c812010bf3327dd", - "Part 68" + "Step 68" ], [ "5d70850e066dac7142a6d797", - "Part 69" + "Step 69" ], [ "5d70862e066dac7142a6d798", - "Part 70" + "Step 70" ], [ "5d7086d4066dac7142a6d799", - "Part 71" + "Step 71" ], [ "5d7088d2066dac7142a6d79a", - "Part 72" + "Step 72" ], [ "5d708ab5066dac7142a6d79b", - "Part 73" + "Step 73" ], [ "5d708be9066dac7142a6d79c", - "Part 74" + "Step 74" ], [ "5d708c9a066dac7142a6d79d", - "Part 75" + "Step 75" ], [ "5d708dd7066dac7142a6d79e", - "Part 76" + "Step 76" ], [ "5d708fae066dac7142a6d79f", - "Part 77" + "Step 77" ], [ "5d709664066dac7142a6d7a0", - "Part 78" + "Step 78" ], [ "5d709bbc066dac7142a6d7a2", - "Part 79" + "Step 79" ], [ "5d71b58b848f6914ab89897d", - "Part 80" + "Step 80" ], [ "5d71bdca848f6914ab89897e", - "Part 81" + "Step 81" ], [ "5d71bfdf848f6914ab89897f", - "Part 82" + "Step 82" ], [ "5d71c20f848f6914ab898980", - "Part 83" + "Step 83" ], [ "5d71c80e848f6914ab898981", - "Part 84" + "Step 84" ], [ "5d71cab4f27e5122af9f1178", - "Part 85" + "Step 85" ], [ "5d71ea30f27e5122af9f1179", - "Part 86" + "Step 86" ], [ "5d71eb0bf27e5122af9f117a", - "Part 87" + "Step 87" ], [ "5d71f787e39bedcf8f0998ff", - "Part 88" + "Step 88" ], [ "5d71ed88f27e5122af9f117b", - "Part 89" + "Step 89" ], [ "5d71f217e39bedcf8f0998fd", - "Part 90" + "Step 90" ], [ "5d71f669e39bedcf8f0998fe", - "Part 91" + "Step 91" ], [ "5d72027ce39bedcf8f099900", - "Part 92" + "Step 92" ], [ "5d721925e39bedcf8f099901", - "Part 93" + "Step 93" ], [ "5d7dea508360d21c6826a9af", - "Part 94" + "Step 94" ], [ "5d7deecc8360d21c6826a9b0", - "Part 95" + "Step 95" ], [ "5d7df0458360d21c6826a9b1", - "Part 96" + "Step 96" ], [ "5d7df2a68360d21c6826a9b2", - "Part 97" + "Step 97" ], [ "5d7df41a8360d21c6826a9b3", - "Part 98" + "Step 98" ], [ "5d7df75a8360d21c6826a9b4", - "Part 99" + "Step 99" ], [ "5d7dfb908360d21c6826a9b5", - "Part 100" + "Step 100" ], [ "5d7e02c88360d21c6826a9b7", - "Part 101" + "Step 101" ], [ "5d7e06728360d21c6826a9b8", - "Part 102" + "Step 102" ], [ "5d7e077e8360d21c6826a9b9", - "Part 103" + "Step 103" ], [ "5d7e13798360d21c6826a9bb", - "Part 104" + "Step 104" ], [ "5d7f3b6c7c4263f469c36b17", - "Part 105" + "Step 105" ], [ "5d7f405c7c4263f469c36b18", - "Part 106" + "Step 106" ], [ "5d7f410b7c4263f469c36b19", - "Part 107" + "Step 107" ], [ "5d7f41fa7c4263f469c36b1a", - "Part 108" + "Step 108" ], [ "5d7f43947c4263f469c36b1b", - "Part 109" + "Step 109" ], [ "5d7f44ac7c4263f469c36b1c", - "Part 110" + "Step 110" ], [ "5d7f459421b11cdaa3f6b15f", - "Part 111" + "Step 111" ], [ "5d7f4d9421b11cdaa3f6b160", - "Part 112" + "Step 112" ], [ "5d80c1d821b11cdaa3f6b164", - "Part 113" + "Step 113" ], [ "5d80c3c021b11cdaa3f6b165", - "Part 114" + "Step 114" ], [ "5d80d20d21b11cdaa3f6b166", - "Part 115" + "Step 115" ], [ "5d80d67021b11cdaa3f6b167", - "Part 116" + "Step 116" ], [ "5d80da7521b11cdaa3f6b168", - "Part 117" + "Step 117" ], [ "5dbab6d36ef5fe3a704f848c", - "Part 118" + "Step 118" ], [ "5dbabb746ef5fe3a704f848d", - "Part 119" + "Step 119" ], [ "5dbac08e6ef5fe3a704f848f", - "Part 120" + "Step 120" ], [ "5dbac0c86ef5fe3a704f8490", - "Part 121" + "Step 121" ], [ "5dbac1f16ef5fe3a704f8491", - "Part 122" + "Step 122" ], [ "5dbac2b06ef5fe3a704f8492", - "Part 123" + "Step 123" ], [ "5dbbb5076ef5fe3a704f849d", - "Part 124" + "Step 124" ], [ "5dbac6176ef5fe3a704f8493", - "Part 125" + "Step 125" ], [ "5dbaca566ef5fe3a704f8494", - "Part 126" + "Step 126" ], [ "5dbae0446ef5fe3a704f8495", - "Part 127" + "Step 127" ], [ "5dbae1f66ef5fe3a704f8496", - "Part 128" + "Step 128" ], [ "5dbba5716ef5fe3a704f8497", - "Part 129" + "Step 129" ], [ "5dbba70e6ef5fe3a704f8498", - "Part 130" + "Step 130" ], [ "5dbba89e6ef5fe3a704f8499", - "Part 131" + "Step 131" ], [ "5dbbaeb56ef5fe3a704f849a", - "Part 132" + "Step 132" ], [ "5dbbb00e6ef5fe3a704f849b", - "Part 133" + "Step 133" ], [ "5dbbb1466ef5fe3a704f849c", - "Part 134" + "Step 134" ], [ "5dbbf3796ef5fe3a704f849e", - "Part 135" + "Step 135" ], [ "5dbbf8d86ef5fe3a704f849f", - "Part 136" + "Step 136" ], [ "5dbc23a66ef5fe3a704f84a0", - "Part 137" + "Step 137" ], [ "5dbc2c506ef5fe3a704f84a1", - "Part 138" + "Step 138" ], [ "5dbc2d056ef5fe3a704f84a2", - "Part 139" + "Step 139" ], [ "5dbc2f2d6ef5fe3a704f84a3", - "Part 140" + "Step 140" ], [ "5dbc33956ef5fe3a704f84a4", - "Part 141" + "Step 141" ], [ "5dbc35326ef5fe3a704f84a5", - "Part 142" + "Step 142" ], [ "5dbfced07736e5ee7d235544", - "Part 143" + "Step 143" ], [ "5dbfd4837736e5ee7d235545", - "Part 144" + "Step 144" ], [ "5dbfdb737736e5ee7d235546", - "Part 145" + "Step 145" ], [ "5dbfdc377736e5ee7d235547", - "Part 146" + "Step 146" ], [ "5dbfe2f37736e5ee7d235548", - "Part 147" + "Step 147" ], [ "5dbfeffe7736e5ee7d235549", - "Part 148" + "Step 148" ], [ "5dbff18d7736e5ee7d23554a", - "Part 149" + "Step 149" ], [ "5dbff2d07736e5ee7d23554b", - "Part 150" + "Step 150" ], [ "5dbffd907736e5ee7d23554c", - "Part 151" + "Step 151" ], [ "5dbffe887736e5ee7d23554d", - "Part 152" + "Step 152" ], [ "5dc01a727736e5ee7d23554f", - "Part 153" + "Step 153" ] ]} diff --git a/curriculum/challenges/_meta/css-box-model/meta.json b/curriculum/challenges/_meta/css-box-model/meta.json index e9b2389f25..1c7c644138 100644 --- a/curriculum/challenges/_meta/css-box-model/meta.json +++ b/curriculum/challenges/_meta/css-box-model/meta.json @@ -13,187 +13,187 @@ "challengeOrder": [ [ "60a3e3396c7b40068ad6996a", - "Part 1" + "Step 1" ], [ "60a3e3396c7b40068ad6996b", - "Part 2" + "Step 2" ], [ "60a3e3396c7b40068ad6996c", - "Part 3" + "Step 3" ], [ "60a3e3396c7b40068ad6996d", - "Part 4" + "Step 4" ], [ "60a3e3396c7b40068ad6996e", - "Part 5" + "Step 5" ], [ "60a3e3396c7b40068ad6996f", - "Part 6" + "Step 6" ], [ "60a3e3396c7b40068ad69970", - "Part 7" + "Step 7" ], [ "60a3e3396c7b40068ad69971", - "Part 8" + "Step 8" ], [ "60a3e3396c7b40068ad69972", - "Part 9" + "Step 9" ], [ "60a3e3396c7b40068ad69973", - "Part 10" + "Step 10" ], [ "60a3e3396c7b40068ad69974", - "Part 11" + "Step 11" ], [ "60a3e3396c7b40068ad69975", - "Part 12" + "Step 12" ], [ "60a3e3396c7b40068ad69976", - "Part 13" + "Step 13" ], [ "60a3e3396c7b40068ad69977", - "Part 14" + "Step 14" ], [ "60a3e3396c7b40068ad69978", - "Part 15" + "Step 15" ], [ "60a3e3396c7b40068ad69979", - "Part 16" + "Step 16" ], [ "60a3e3396c7b40068ad6997a", - "Part 17" + "Step 17" ], [ "60a3e3396c7b40068ad6997b", - "Part 18" + "Step 18" ], [ "60a3e3396c7b40068ad6997c", - "Part 19" + "Step 19" ], [ "60a3e3396c7b40068ad6997d", - "Part 20" + "Step 20" ], [ "60a3e3396c7b40068ad6997e", - "Part 21" + "Step 21" ], [ "60a3e3396c7b40068ad6997f", - "Part 22" + "Step 22" ], [ "60a3e3396c7b40068ad69980", - "Part 23" + "Step 23" ], [ "60a3e3396c7b40068ad69981", - "Part 24" + "Step 24" ], [ "60a3e3396c7b40068ad69982", - "Part 25" + "Step 25" ], [ "60a3e3396c7b40068ad69983", - "Part 26" + "Step 26" ], [ "60a3e3396c7b40068ad69984", - "Part 27" + "Step 27" ], [ "60a3e3396c7b40068ad69985", - "Part 28" + "Step 28" ], [ "60a3e3396c7b40068ad69986", - "Part 29" + "Step 29" ], [ "60a3e3396c7b40068ad69987", - "Part 30" + "Step 30" ], [ "60a3e3396c7b40068ad69988", - "Part 31" + "Step 31" ], [ "60a3e3396c7b40068ad69989", - "Part 32" + "Step 32" ], [ "60a3e3396c7b40068ad6998a", - "Part 33" + "Step 33" ], [ "60a3e3396c7b40068ad6998b", - "Part 34" + "Step 34" ], [ "60a3e3396c7b40068ad6998c", - "Part 35" + "Step 35" ], [ "60a3e3396c7b40068ad6998d", - "Part 36" + "Step 36" ], [ "60a3e3396c7b40068ad6998e", - "Part 37" + "Step 37" ], [ "60a3e3396c7b40068ad6998f", - "Part 38" + "Step 38" ], [ "60a3e3396c7b40068ad69990", - "Part 39" + "Step 39" ], [ "60a3e3396c7b40068ad69991", - "Part 40" + "Step 40" ], [ "60a3e3396c7b40068ad69992", - "Part 41" + "Step 41" ], [ "60a3e3396c7b40068ad69993", - "Part 42" + "Step 42" ], [ "60a3e3396c7b40068ad69994", - "Part 43" + "Step 43" ], [ "60a3e3396c7b40068ad69995", - "Part 44" + "Step 44" ], [ "60a3e3396c7b40068ad69996", - "Part 45" + "Step 45" ], [ "60a3e3396c7b40068ad69997", - "Part 46" + "Step 46" ] ] } diff --git a/curriculum/challenges/_meta/css-piano/meta.json b/curriculum/challenges/_meta/css-piano/meta.json index 15736e4517..73cb57517c 100644 --- a/curriculum/challenges/_meta/css-piano/meta.json +++ b/curriculum/challenges/_meta/css-piano/meta.json @@ -13,135 +13,135 @@ "challengeOrder": [ [ "612e6afc009b450a437940a1", - "Part 1" + "Step 1" ], [ "612e77aba7ca691f598feb02", - "Part 2" + "Step 2" ], [ "612e78af05201622d4bab8aa", - "Part 3" + "Step 3" ], [ "612e7d1c29fb872d6384379c", - "Part 4" + "Step 4" ], [ "612e804c54d5e7308d7ebe56", - "Part 5" + "Step 5" ], [ "612e813b3ba67633222cbe54", - "Part 6" + "Step 6" ], [ "612e8279827a28352ce83a72", - "Part 7" + "Step 7" ], [ "612e83ec2eca1e370f830511", - "Part 8" + "Step 8" ], [ "612e89562043183c86df287c", - "Part 9" + "Step 9" ], [ "612e89d254fe5d3df7d6693d", - "Part 10" + "Step 10" ], [ "612e8eebe3a6dc3fcc33a66f", - "Part 11" + "Step 11" ], [ "612e95ef2e4bdf41f69067f9", - "Part 12" + "Step 12" ], [ "612e96fc87fe8e44f69f7ec5", - "Part 13" + "Step 13" ], [ "612e98f3245c98475e49cfc6", - "Part 14" + "Step 14" ], [ "612e9a21381a1949327512e6", - "Part 15" + "Step 15" ], [ "612e9d142affc44a453655db", - "Part 16" + "Step 16" ], [ "612e9f1e7e5ccd4fa9ada0be", - "Part 17" + "Step 17" ], [ "612ea4c4993aba52ab4aa32e", - "Part 18" + "Step 18" ], [ "612ea97df5742154772f312e", - "Part 19" + "Step 19" ], [ "612ead8788d28655ef8db056", - "Part 20" + "Step 20" ], [ "612eaf56b7ba3257fdbfb0db", - "Part 21" + "Step 21" ], [ "612eb4893b63c75bb9251ddf", - "Part 22" + "Step 22" ], [ "612eb75153591b5e3b1ab65e", - "Part 23" + "Step 23" ], [ "612eb7ca8c275d5f89c73333", - "Part 24" + "Step 24" ], [ "612eb8e984cd73677a92b7e9", - "Part 25" + "Step 25" ], [ "612eb934f64a4d6890a45518", - "Part 26" + "Step 26" ], [ "612ebcba99bfa46a15370b11", - "Part 27" + "Step 27" ], [ "612ebe7fe6d07e6b76d1cae2", - "Part 28" + "Step 28" ], [ "612ebedec97e096c8bf64999", - "Part 29" + "Step 29" ], [ "612ebf9a210f2b6d77001e68", - "Part 30" + "Step 30" ], [ "612ec0490ae8626e9adf82e4", - "Part 31" + "Step 31" ], [ "612ec19d5268da7074941f84", - "Part 32" + "Step 32" ], [ "612ec29c84b9a6718b1f5cec", - "Part 33" + "Step 33" ] ] } diff --git a/curriculum/challenges/_meta/css-picasso-painting/meta.json b/curriculum/challenges/_meta/css-picasso-painting/meta.json index 521edf4526..248b22602b 100644 --- a/curriculum/challenges/_meta/css-picasso-painting/meta.json +++ b/curriculum/challenges/_meta/css-picasso-painting/meta.json @@ -13,359 +13,359 @@ "challengeOrder": [ [ "60b69a66b6ddb80858c51578", - "Part 1" + "Step 1" ], [ "60b69a66b6ddb80858c51579", - "Part 2" + "Step 2" ], [ "60b80da8676fb3227967a731", - "Part 3" + "Step 3" ], [ "60b69a66b6ddb80858c5157a", - "Part 4" + "Step 4" ], [ "60b69a66b6ddb80858c5157b", - "Part 5" + "Step 5" ], [ "60b69a66b6ddb80858c5157c", - "Part 6" + "Step 6" ], [ "60b69a66b6ddb80858c5157d", - "Part 7" + "Step 7" ], [ "60b69a66b6ddb80858c5157e", - "Part 8" + "Step 8" ], [ "60b69a66b6ddb80858c5157f", - "Part 9" + "Step 9" ], [ "60b69a66b6ddb80858c51580", - "Part 10" + "Step 10" ], [ "60b69a66b6ddb80858c51581", - "Part 11" + "Step 11" ], [ "60b69a66b6ddb80858c51582", - "Part 12" + "Step 12" ], [ "60b69a66b6ddb80858c51583", - "Part 13" + "Step 13" ], [ "60b69a66b6ddb80858c51584", - "Part 14" + "Step 14" ], [ "60b69a66b6ddb80858c51585", - "Part 15" + "Step 15" ], [ "60b69a66b6ddb80858c51586", - "Part 16" + "Step 16" ], [ "60b69a66b6ddb80858c51587", - "Part 17" + "Step 17" ], [ "60b69a66b6ddb80858c51588", - "Part 18" + "Step 18" ], [ "60b69a66b6ddb80858c51589", - "Part 19" + "Step 19" ], [ "60b69a66b6ddb80858c5158a", - "Part 20" + "Step 20" ], [ "60b69a66b6ddb80858c5158b", - "Part 21" + "Step 21" ], [ "60b69a66b6ddb80858c5158c", - "Part 22" + "Step 22" ], [ "60b69a66b6ddb80858c5158d", - "Part 23" + "Step 23" ], [ "60b69a66b6ddb80858c5158e", - "Part 24" + "Step 24" ], [ "60b69a66b6ddb80858c5158f", - "Part 25" + "Step 25" ], [ "60b69a66b6ddb80858c51590", - "Part 26" + "Step 26" ], [ "60b69a66b6ddb80858c51591", - "Part 27" + "Step 27" ], [ "60b69a66b6ddb80858c51592", - "Part 28" + "Step 28" ], [ "60b69a66b6ddb80858c51593", - "Part 29" + "Step 29" ], [ "60b69a66b6ddb80858c51594", - "Part 30" + "Step 30" ], [ "60b69a66b6ddb80858c51595", - "Part 31" + "Step 31" ], [ "60b69a66b6ddb80858c51596", - "Part 32" + "Step 32" ], [ "60b69a66b6ddb80858c51597", - "Part 33" + "Step 33" ], [ "60b69a66b6ddb80858c51598", - "Part 34" + "Step 34" ], [ "60b69a66b6ddb80858c51599", - "Part 35" + "Step 35" ], [ "60b69a66b6ddb80858c5159a", - "Part 36" + "Step 36" ], [ "60b69a66b6ddb80858c5159b", - "Part 37" + "Step 37" ], [ "60b69a66b6ddb80858c5159c", - "Part 38" + "Step 38" ], [ "60b69a66b6ddb80858c5159d", - "Part 39" + "Step 39" ], [ "60b69a66b6ddb80858c5159e", - "Part 40" + "Step 40" ], [ "60bad32219ebcb4a8810ac6a", - "Part 41" + "Step 41" ], [ "60b69a66b6ddb80858c5159f", - "Part 42" + "Step 42" ], [ "60b69a66b6ddb80858c515a0", - "Part 43" + "Step 43" ], [ "60b69a66b6ddb80858c515a1", - "Part 44" + "Step 44" ], [ "60b69a66b6ddb80858c515a2", - "Part 45" + "Step 45" ], [ "60b69a66b6ddb80858c515a3", - "Part 46" + "Step 46" ], [ "60b69a66b6ddb80858c515a4", - "Part 47" + "Step 47" ], [ "60b69a66b6ddb80858c515a5", - "Part 48" + "Step 48" ], [ "60b69a66b6ddb80858c515a6", - "Part 49" + "Step 49" ], [ "60b69a66b6ddb80858c515a7", - "Part 50" + "Step 50" ], [ "60b69a66b6ddb80858c515a8", - "Part 51" + "Step 51" ], [ "60b69a66b6ddb80858c515a9", - "Part 52" + "Step 52" ], [ "60b69a66b6ddb80858c515aa", - "Part 53" + "Step 53" ], [ "60b69a66b6ddb80858c515ab", - "Part 54" + "Step 54" ], [ "60b69a66b6ddb80858c515ac", - "Part 55" + "Step 55" ], [ "60b69a66b6ddb80858c515ad", - "Part 56" + "Step 56" ], [ "60b69a66b6ddb80858c515ae", - "Part 57" + "Step 57" ], [ "60b69a66b6ddb80858c515af", - "Part 58" + "Step 58" ], [ "60b69a66b6ddb80858c515b0", - "Part 59" + "Step 59" ], [ "60b69a66b6ddb80858c515b1", - "Part 60" + "Step 60" ], [ "60b69a66b6ddb80858c515b2", - "Part 61" + "Step 61" ], [ "60b69a66b6ddb80858c515b3", - "Part 62" + "Step 62" ], [ "60b69a66b6ddb80858c515b4", - "Part 63" + "Step 63" ], [ "60b69a66b6ddb80858c515b5", - "Part 64" + "Step 64" ], [ "60b69a66b6ddb80858c515b6", - "Part 65" + "Step 65" ], [ "60b69a66b6ddb80858c515b7", - "Part 66" + "Step 66" ], [ "60b69a66b6ddb80858c515b8", - "Part 67" + "Step 67" ], [ "60b69a66b6ddb80858c515b9", - "Part 68" + "Step 68" ], [ "60b69a66b6ddb80858c515ba", - "Part 69" + "Step 69" ], [ "60b69a66b6ddb80858c515bc", - "Part 70" + "Step 70" ], [ "60ba8914bab51f0fb8228e9c", - "Part 71" + "Step 71" ], [ "60ba89146b25080f99ab54ad", - "Part 72" + "Step 72" ], [ "60ba8913f1704c0f7a8906b8", - "Part 73" + "Step 73" ], [ "60ba89123a445e0f5c9e4022", - "Part 74" + "Step 74" ], [ "60ba890832b4940f24d1936b", - "Part 75" + "Step 75" ], [ "60ba929345ab0714a3743655", - "Part 76" + "Step 76" ], [ "60ba9296d4d6b414c1b10995", - "Part 77" + "Step 77" ], [ "60ba92987c1e4914dfa7a0b9", - "Part 78" + "Step 78" ], [ "60b69a66b6ddb80858c515bd", - "Part 79" + "Step 79" ], [ "60b69a66b6ddb80858c515be", - "Part 80" + "Step 80" ], [ "60b69a66b6ddb80858c515bf", - "Part 81" + "Step 81" ], [ "60b69a66b6ddb80858c515c0", - "Part 82" + "Step 82" ], [ "60b69a66b6ddb80858c515c1", - "Part 83" + "Step 83" ], [ "60b69a66b6ddb80858c515c2", - "Part 84" + "Step 84" ], [ "60b69a66b6ddb80858c515c3", - "Part 85" + "Step 85" ], [ "60b69a66b6ddb80858c515c4", - "Part 86" + "Step 86" ], [ "60b69a66b6ddb80858c515c5", - "Part 87" + "Step 87" ], [ "60b69a66b6ddb80858c515c6", - "Part 88" + "Step 88" ], [ "60b69a66b6ddb80858c515c7", - "Part 89" + "Step 89" ] ] } diff --git a/curriculum/challenges/_meta/css-variables-skyline/meta.json b/curriculum/challenges/_meta/css-variables-skyline/meta.json index cbf026ff2d..8f032624ac 100644 --- a/curriculum/challenges/_meta/css-variables-skyline/meta.json +++ b/curriculum/challenges/_meta/css-variables-skyline/meta.json @@ -12,474 +12,474 @@ "challengeOrder": [ [ "5d822fd413a79914d39e98c9", - "Part 1" + "Step 1" ], [ "5d822fd413a79914d39e98ca", - "Part 2" + "Step 2" ], [ "5d822fd413a79914d39e98cb", - "Part 3" + "Step 3" ], [ "5d822fd413a79914d39e98cc", - "Part 4" + "Step 4" ], [ "5d822fd413a79914d39e98cd", - "Part 5" + "Step 5" ], [ "5d822fd413a79914d39e98ce", - "Part 6" + "Step 6" ], [ "5d822fd413a79914d39e98cf", - "Part 7" + "Step 7" ], [ "5d822fd413a79914d39e98d0", - "Part 8" + "Step 8" ], [ "5d822fd413a79914d39e98d1", - "Part 9" + "Step 9" ], [ "5d822fd413a79914d39e98d2", - "Part 10" + "Step 10" ], [ "5d822fd413a79914d39e98d3", - "Part 11" + "Step 11" ], [ "5d822fd413a79914d39e98d4", - "Part 12" + "Step 12" ], [ "5d822fd413a79914d39e98d5", - "Part 13" + "Step 13" ], [ "5d822fd413a79914d39e98d6", - "Part 14" + "Step 14" ], [ "5d822fd413a79914d39e98d7", - "Part 15" + "Step 15" ], [ "5d822fd413a79914d39e98d8", - "Part 16" + "Step 16" ], [ "5d822fd413a79914d39e98d9", - "Part 17" + "Step 17" ], [ "5d822fd413a79914d39e98da", - "Part 18" + "Step 18" ], [ "5d822fd413a79914d39e98db", - "Part 19" + "Step 19" ], [ "5d822fd413a79914d39e98dc", - "Part 20" + "Step 20" ], [ "5d822fd413a79914d39e98dd", - "Part 21" + "Step 21" ], [ "5d822fd413a79914d39e98de", - "Part 22" + "Step 22" ], [ "5d822fd413a79914d39e98df", - "Part 23" + "Step 23" ], [ "5d822fd413a79914d39e98e0", - "Part 24" + "Step 24" ], [ "5d822fd413a79914d39e98e1", - "Part 25" + "Step 25" ], [ "5d822fd413a79914d39e98e2", - "Part 26" + "Step 26" ], [ "5d822fd413a79914d39e98e3", - "Part 27" + "Step 27" ], [ "5d822fd413a79914d39e98e4", - "Part 28" + "Step 28" ], [ "5d822fd413a79914d39e98e5", - "Part 29" + "Step 29" ], [ "5d822fd413a79914d39e98e6", - "Part 30" + "Step 30" ], [ "5d822fd413a79914d39e98e7", - "Part 31" + "Step 31" ], [ "5d822fd413a79914d39e98e8", - "Part 32" + "Step 32" ], [ "5d822fd413a79914d39e98e9", - "Part 33" + "Step 33" ], [ "5d822fd413a79914d39e98ea", - "Part 34" + "Step 34" ], [ "5d822fd413a79914d39e98eb", - "Part 35" + "Step 35" ], [ "5d822fd413a79914d39e98ec", - "Part 36" + "Step 36" ], [ "5d822fd413a79914d39e98ed", - "Part 37" + "Step 37" ], [ "5d822fd413a79914d39e98ee", - "Part 38" + "Step 38" ], [ "5d822fd413a79914d39e98ef", - "Part 39" + "Step 39" ], [ "5d822fd413a79914d39e98f0", - "Part 40" + "Step 40" ], [ "5d822fd413a79914d39e98f1", - "Part 41" + "Step 41" ], [ "5d822fd413a79914d39e98f2", - "Part 42" + "Step 42" ], [ "5d822fd413a79914d39e98f3", - "Part 43" + "Step 43" ], [ "5d822fd413a79914d39e98f4", - "Part 44" + "Step 44" ], [ "5d822fd413a79914d39e98f5", - "Part 45" + "Step 45" ], [ "5d822fd413a79914d39e98f6", - "Part 46" + "Step 46" ], [ "5d822fd413a79914d39e98f7", - "Part 47" + "Step 47" ], [ "5d822fd413a79914d39e98f8", - "Part 48" + "Step 48" ], [ "5d822fd413a79914d39e98f9", - "Part 49" + "Step 49" ], [ "5d822fd413a79914d39e98fa", - "Part 50" + "Step 50" ], [ "5d822fd413a79914d39e98fb", - "Part 51" + "Step 51" ], [ "5d822fd413a79914d39e98fc", - "Part 52" + "Step 52" ], [ "5d822fd413a79914d39e98fd", - "Part 53" + "Step 53" ], [ "5d822fd413a79914d39e98fe", - "Part 54" + "Step 54" ], [ "5d822fd413a79914d39e98ff", - "Part 55" + "Step 55" ], [ "5d822fd413a79914d39e9900", - "Part 56" + "Step 56" ], [ "5d822fd413a79914d39e9901", - "Part 57" + "Step 57" ], [ "5d822fd413a79914d39e9902", - "Part 58" + "Step 58" ], [ "5d822fd413a79914d39e9903", - "Part 59" + "Step 59" ], [ "5d822fd413a79914d39e9904", - "Part 60" + "Step 60" ], [ "5d822fd413a79914d39e9905", - "Part 61" + "Step 61" ], [ "5d822fd413a79914d39e9906", - "Part 62" + "Step 62" ], [ "5d822fd413a79914d39e9907", - "Part 63" + "Step 63" ], [ "5d822fd413a79914d39e9908", - "Part 64" + "Step 64" ], [ "5d822fd413a79914d39e9909", - "Part 65" + "Step 65" ], [ "5d822fd413a79914d39e990a", - "Part 66" + "Step 66" ], [ "5d822fd413a79914d39e990b", - "Part 67" + "Step 67" ], [ "5d822fd413a79914d39e990c", - "Part 68" + "Step 68" ], [ "5d822fd413a79914d39e990d", - "Part 69" + "Step 69" ], [ "5d822fd413a79914d39e990e", - "Part 70" + "Step 70" ], [ "5d822fd413a79914d39e990f", - "Part 71" + "Step 71" ], [ "5d822fd413a79914d39e9910", - "Part 72" + "Step 72" ], [ "5d822fd413a79914d39e9911", - "Part 73" + "Step 73" ], [ "5d822fd413a79914d39e9912", - "Part 74" + "Step 74" ], [ "5d822fd413a79914d39e9913", - "Part 75" + "Step 75" ], [ "5d822fd413a79914d39e9914", - "Part 76" + "Step 76" ], [ "5d822fd413a79914d39e9916", - "Part 77" + "Step 77" ], [ "5d822fd413a79914d39e9917", - "Part 78" + "Step 78" ], [ "5d822fd413a79914d39e9918", - "Part 79" + "Step 79" ], [ "5d822fd413a79914d39e9919", - "Part 80" + "Step 80" ], [ "5d822fd413a79914d39e991a", - "Part 81" + "Step 81" ], [ "5d822fd413a79914d39e991b", - "Part 82" + "Step 82" ], [ "5d822fd413a79914d39e991c", - "Part 83" + "Step 83" ], [ "5d822fd413a79914d39e991d", - "Part 84" + "Step 84" ], [ "5d822fd413a79914d39e991e", - "Part 85" + "Step 85" ], [ "5d822fd413a79914d39e991f", - "Part 86" + "Step 86" ], [ "5d822fd413a79914d39e9920", - "Part 87" + "Step 87" ], [ "5d822fd413a79914d39e9921", - "Part 88" + "Step 88" ], [ "5d822fd413a79914d39e9922", - "Part 89" + "Step 89" ], [ "5d822fd413a79914d39e9923", - "Part 90" + "Step 90" ], [ "5d822fd413a79914d39e9924", - "Part 91" + "Step 91" ], [ "5d822fd413a79914d39e9925", - "Part 92" + "Step 92" ], [ "5d822fd413a79914d39e9926", - "Part 93" + "Step 93" ], [ "5d822fd413a79914d39e9927", - "Part 94" + "Step 94" ], [ "5d822fd413a79914d39e9928", - "Part 95" + "Step 95" ], [ "5d822fd413a79914d39e9929", - "Part 96" + "Step 96" ], [ "5d822fd413a79914d39e992a", - "Part 97" + "Step 97" ], [ "5d822fd413a79914d39e992b", - "Part 98" + "Step 98" ], [ "5d822fd413a79914d39e992c", - "Part 99" + "Step 99" ], [ "5d822fd413a79914d39e992d", - "Part 100" + "Step 100" ], [ "5d822fd413a79914d39e992e", - "Part 101" + "Step 101" ], [ "5d822fd413a79914d39e992f", - "Part 102" + "Step 102" ], [ "5d822fd413a79914d39e9930", - "Part 103" + "Step 103" ], [ "5d822fd413a79914d39e9932", - "Part 104" + "Step 104" ], [ "5d822fd413a79914d39e9933", - "Part 105" + "Step 105" ], [ "5d822fd413a79914d39e9915", - "Part 106" + "Step 106" ], [ "5d822fd413a79914d39e9934", - "Part 107" + "Step 107" ], [ "5d822fd413a79914d39e9935", - "Part 108" + "Step 108" ], [ "5d822fd413a79914d39e9931", - "Part 109" + "Step 109" ], [ "5d822fd413a79914d39e9936", - "Part 110" + "Step 110" ], [ "5d822fd413a79914d39e9937", - "Part 111" + "Step 111" ], [ "5d822fd413a79914d39e9938", - "Part 112" + "Step 112" ], [ "5d822fd413a79914d39e9939", - "Part 113" + "Step 113" ], [ "5d822fd413a79914d39e993a", - "Part 114" + "Step 114" ], [ "5d822fd413a79914d39e993b", - "Part 115" + "Step 115" ], [ "5d822fd413a79914d39e993c", - "Part 116" + "Step 116" ], [ "5d822fd413a79914d39e993d", - "Part 117" + "Step 117" ], [ "5d822fd413a79914d39e993e", - "Part 118" + "Step 118" ] ]} diff --git a/curriculum/challenges/_meta/d3-dashboard/meta.json b/curriculum/challenges/_meta/d3-dashboard/meta.json index 9e5985d86c..c68b55ac4a 100644 --- a/curriculum/challenges/_meta/d3-dashboard/meta.json +++ b/curriculum/challenges/_meta/d3-dashboard/meta.json @@ -16,586 +16,586 @@ "challengeOrder": [ [ "5d8a4cfbe6b6180ed9a1c9de", - "Part 1" + "Step 1" ], [ "5d8a4cfbe6b6180ed9a1c9df", - "Part 2" + "Step 2" ], [ "5d8a4cfbe6b6180ed9a1c9e0", - "Part 3" + "Step 3" ], [ "5d8a4cfbe6b6180ed9a1c9e1", - "Part 4" + "Step 4" ], [ "5d8a4cfbe6b6180ed9a1c9e2", - "Part 5" + "Step 5" ], [ "5d8a4cfbe6b6180ed9a1c9e3", - "Part 6" + "Step 6" ], [ "5d8a4cfbe6b6180ed9a1c9e4", - "Part 7" + "Step 7" ], [ "5d8a4cfbe6b6180ed9a1c9e5", - "Part 8" + "Step 8" ], [ "5d8a4cfbe6b6180ed9a1c9e6", - "Part 9" + "Step 9" ], [ "5d8a4cfbe6b6180ed9a1c9e7", - "Part 10" + "Step 10" ], [ "5d8a4cfbe6b6180ed9a1c9e8", - "Part 11" + "Step 11" ], [ "5d8a4cfbe6b6180ed9a1c9e9", - "Part 12" + "Step 12" ], [ "5d8a4cfbe6b6180ed9a1c9ea", - "Part 13" + "Step 13" ], [ "5d8a4cfbe6b6180ed9a1c9eb", - "Part 14" + "Step 14" ], [ "5d8a4cfbe6b6180ed9a1c9ec", - "Part 15" + "Step 15" ], [ "5d8a4cfbe6b6180ed9a1c9ed", - "Part 16" + "Step 16" ], [ "5d8a4cfbe6b6180ed9a1c9ee", - "Part 17" + "Step 17" ], [ "5d8a4cfbe6b6180ed9a1c9ef", - "Part 18" + "Step 18" ], [ "5d8a4cfbe6b6180ed9a1c9f0", - "Part 19" + "Step 19" ], [ "5d8a4cfbe6b6180ed9a1c9f1", - "Part 20" + "Step 20" ], [ "5d8a4cfbe6b6180ed9a1c9f2", - "Part 21" + "Step 21" ], [ "5d8a4cfbe6b6180ed9a1c9f3", - "Part 22" + "Step 22" ], [ "5d8a4cfbe6b6180ed9a1c9f4", - "Part 23" + "Step 23" ], [ "5d8a4cfbe6b6180ed9a1c9f5", - "Part 24" + "Step 24" ], [ "5d8a4cfbe6b6180ed9a1c9f6", - "Part 25" + "Step 25" ], [ "5d8a4cfbe6b6180ed9a1c9f7", - "Part 26" + "Step 26" ], [ "5d8a4cfbe6b6180ed9a1c9f8", - "Part 27" + "Step 27" ], [ "5d8a4cfbe6b6180ed9a1c9f9", - "Part 28" + "Step 28" ], [ "5d8a4cfbe6b6180ed9a1c9fa", - "Part 29" + "Step 29" ], [ "5d8a4cfbe6b6180ed9a1c9fb", - "Part 30" + "Step 30" ], [ "5d8a4cfbe6b6180ed9a1c9fc", - "Part 31" + "Step 31" ], [ "5d8a4cfbe6b6180ed9a1c9fd", - "Part 32" + "Step 32" ], [ "5d8a4cfbe6b6180ed9a1c9fe", - "Part 33" + "Step 33" ], [ "5d8a4cfbe6b6180ed9a1c9ff", - "Part 34" + "Step 34" ], [ "5d8a4cfbe6b6180ed9a1ca00", - "Part 35" + "Step 35" ], [ "5d8a4cfbe6b6180ed9a1ca01", - "Part 36" + "Step 36" ], [ "5d8a4cfbe6b6180ed9a1ca02", - "Part 37" + "Step 37" ], [ "5d8a4cfbe6b6180ed9a1ca03", - "Part 38" + "Step 38" ], [ "5d8a4cfbe6b6180ed9a1ca04", - "Part 39" + "Step 39" ], [ "5d8a4cfbe6b6180ed9a1ca05", - "Part 40" + "Step 40" ], [ "5d8a4cfbe6b6180ed9a1ca06", - "Part 41" + "Step 41" ], [ "5d8a4cfbe6b6180ed9a1ca07", - "Part 42" + "Step 42" ], [ "5d8a4cfbe6b6180ed9a1ca08", - "Part 43" + "Step 43" ], [ "5d8a4cfbe6b6180ed9a1ca09", - "Part 44" + "Step 44" ], [ "5d8a4cfbe6b6180ed9a1ca0a", - "Part 45" + "Step 45" ], [ "5d8a4cfbe6b6180ed9a1ca0b", - "Part 46" + "Step 46" ], [ "5d8a4cfbe6b6180ed9a1ca0c", - "Part 47" + "Step 47" ], [ "5d8a4cfbe6b6180ed9a1ca0d", - "Part 48" + "Step 48" ], [ "5d8a4cfbe6b6180ed9a1ca0e", - "Part 49" + "Step 49" ], [ "5d8a4cfbe6b6180ed9a1ca0f", - "Part 50" + "Step 50" ], [ "5d8a4cfbe6b6180ed9a1ca10", - "Part 51" + "Step 51" ], [ "5d8a4cfbe6b6180ed9a1ca11", - "Part 52" + "Step 52" ], [ "5d8a4cfbe6b6180ed9a1ca12", - "Part 53" + "Step 53" ], [ "5d8a4cfbe6b6180ed9a1ca13", - "Part 54" + "Step 54" ], [ "5d8a4cfbe6b6180ed9a1ca14", - "Part 55" + "Step 55" ], [ "5d8a4cfbe6b6180ed9a1ca15", - "Part 56" + "Step 56" ], [ "5d8a4cfbe6b6180ed9a1ca16", - "Part 57" + "Step 57" ], [ "5d8a4cfbe6b6180ed9a1ca17", - "Part 58" + "Step 58" ], [ "5d8a4cfbe6b6180ed9a1ca18", - "Part 59" + "Step 59" ], [ "5d8a4cfbe6b6180ed9a1ca19", - "Part 60" + "Step 60" ], [ "5d8a4cfbe6b6180ed9a1ca1a", - "Part 61" + "Step 61" ], [ "5d8a4cfbe6b6180ed9a1ca1b", - "Part 62" + "Step 62" ], [ "5d8a4cfbe6b6180ed9a1ca1c", - "Part 63" + "Step 63" ], [ "5d8a4cfbe6b6180ed9a1ca1d", - "Part 64" + "Step 64" ], [ "5d8a4cfbe6b6180ed9a1ca1e", - "Part 65" + "Step 65" ], [ "5d8a4cfbe6b6180ed9a1ca1f", - "Part 66" + "Step 66" ], [ "5d8a4cfbe6b6180ed9a1ca20", - "Part 67" + "Step 67" ], [ "5d8a4cfbe6b6180ed9a1ca21", - "Part 68" + "Step 68" ], [ "5d8a4cfbe6b6180ed9a1ca22", - "Part 69" + "Step 69" ], [ "5d8a4cfbe6b6180ed9a1ca23", - "Part 70" + "Step 70" ], [ "5d8a4cfbe6b6180ed9a1ca24", - "Part 71" + "Step 71" ], [ "5d8a4cfbe6b6180ed9a1ca25", - "Part 72" + "Step 72" ], [ "5d8a4cfbe6b6180ed9a1ca26", - "Part 73" + "Step 73" ], [ "5d8a4cfbe6b6180ed9a1ca27", - "Part 74" + "Step 74" ], [ "5d8a4cfbe6b6180ed9a1ca28", - "Part 75" + "Step 75" ], [ "5d8a4cfbe6b6180ed9a1ca29", - "Part 76" + "Step 76" ], [ "5d8a4cfbe6b6180ed9a1ca2a", - "Part 77" + "Step 77" ], [ "5d8a4cfbe6b6180ed9a1ca2b", - "Part 78" + "Step 78" ], [ "5d8a4cfbe6b6180ed9a1ca2c", - "Part 79" + "Step 79" ], [ "5d8a4cfbe6b6180ed9a1ca2d", - "Part 80" + "Step 80" ], [ "5d8a4cfbe6b6180ed9a1ca2e", - "Part 81" + "Step 81" ], [ "5d8a4cfbe6b6180ed9a1ca2f", - "Part 82" + "Step 82" ], [ "5d8a4cfbe6b6180ed9a1ca30", - "Part 83" + "Step 83" ], [ "5d8a4cfbe6b6180ed9a1ca31", - "Part 84" + "Step 84" ], [ "5d8a4cfbe6b6180ed9a1ca32", - "Part 85" + "Step 85" ], [ "5d8a4cfbe6b6180ed9a1ca33", - "Part 86" + "Step 86" ], [ "5d8a4cfbe6b6180ed9a1ca34", - "Part 87" + "Step 87" ], [ "5d8a4cfbe6b6180ed9a1ca35", - "Part 88" + "Step 88" ], [ "5d8a4cfbe6b6180ed9a1ca36", - "Part 89" + "Step 89" ], [ "5d8a4cfbe6b6180ed9a1ca37", - "Part 90" + "Step 90" ], [ "5d8a4cfbe6b6180ed9a1ca38", - "Part 91" + "Step 91" ], [ "5d8a4cfbe6b6180ed9a1ca39", - "Part 92" + "Step 92" ], [ "5d8a4cfbe6b6180ed9a1ca3a", - "Part 93" + "Step 93" ], [ "5d8a4cfbe6b6180ed9a1ca3b", - "Part 94" + "Step 94" ], [ "5d8a4cfbe6b6180ed9a1ca3c", - "Part 95" + "Step 95" ], [ "5d8a4cfbe6b6180ed9a1ca3d", - "Part 96" + "Step 96" ], [ "5d8a4cfbe6b6180ed9a1ca3e", - "Part 97" + "Step 97" ], [ "5d8a4cfbe6b6180ed9a1ca3f", - "Part 98" + "Step 98" ], [ "5d8a4cfbe6b6180ed9a1ca40", - "Part 99" + "Step 99" ], [ "5d8a4cfbe6b6180ed9a1ca41", - "Part 100" + "Step 100" ], [ "5d8a4cfbe6b6180ed9a1ca42", - "Part 101" + "Step 101" ], [ "5d8a4cfbe6b6180ed9a1ca43", - "Part 102" + "Step 102" ], [ "5d8a4cfbe6b6180ed9a1ca44", - "Part 103" + "Step 103" ], [ "5d8a4cfbe6b6180ed9a1ca47", - "Part 104" + "Step 104" ], [ "5d8a4cfbe6b6180ed9a1ca48", - "Part 105" + "Step 105" ], [ "5d8a4cfbe6b6180ed9a1ca49", - "Part 106" + "Step 106" ], [ "5d8a4cfbe6b6180ed9a1ca4a", - "Part 107" + "Step 107" ], [ "5d8a4cfbe6b6180ed9a1ca4b", - "Part 108" + "Step 108" ], [ "5d8a4cfbe6b6180ed9a1ca4c", - "Part 109" + "Step 109" ], [ "5d8a4cfbe6b6180ed9a1ca4d", - "Part 110" + "Step 110" ], [ "5d8a4cfbe6b6180ed9a1ca4e", - "Part 111" + "Step 111" ], [ "5d8a4cfbe6b6180ed9a1ca4f", - "Part 112" + "Step 112" ], [ "5d8a4cfbe6b6180ed9a1ca50", - "Part 113" + "Step 113" ], [ "5d8a4cfbe6b6180ed9a1ca51", - "Part 114" + "Step 114" ], [ "5d8a4cfbe6b6180ed9a1ca52", - "Part 115" + "Step 115" ], [ "5d8a4cfbe6b6180ed9a1ca53", - "Part 116" + "Step 116" ], [ "5d8a4cfbe6b6180ed9a1ca54", - "Part 117" + "Step 117" ], [ "5d8a4cfbe6b6180ed9a1ca55", - "Part 118" + "Step 118" ], [ "5d8a4cfbe6b6180ed9a1ca56", - "Part 119" + "Step 119" ], [ "5d8a4cfbe6b6180ed9a1ca57", - "Part 120" + "Step 120" ], [ "5d8a4cfbe6b6180ed9a1ca58", - "Part 121" + "Step 121" ], [ "5d8a4cfbe6b6180ed9a1ca59", - "Part 122" + "Step 122" ], [ "5d8a4cfbe6b6180ed9a1ca5a", - "Part 123" + "Step 123" ], [ "5d8a4cfbe6b6180ed9a1ca5b", - "Part 124" + "Step 124" ], [ "5d8a4cfbe6b6180ed9a1ca5c", - "Part 125" + "Step 125" ], [ "5d8a4cfbe6b6180ed9a1ca5d", - "Part 126" + "Step 126" ], [ "5d8a4cfbe6b6180ed9a1ca5e", - "Part 127" + "Step 127" ], [ "5d8a4cfbe6b6180ed9a1ca5f", - "Part 128" + "Step 128" ], [ "5d8a4cfbe6b6180ed9a1ca60", - "Part 129" + "Step 129" ], [ "5d8a4cfbe6b6180ed9a1ca61", - "Part 130" + "Step 130" ], [ "5d8a4cfbe6b6180ed9a1ca62", - "Part 131" + "Step 131" ], [ "5d8a4cfbe6b6180ed9a1ca63", - "Part 132" + "Step 132" ], [ "5d8a4cfbe6b6180ed9a1ca64", - "Part 133" + "Step 133" ], [ "5d8a4cfbe6b6180ed9a1ca65", - "Part 134" + "Step 134" ], [ "5d8a4cfbe6b6180ed9a1ca66", - "Part 135" + "Step 135" ], [ "5d8a4cfbe6b6180ed9a1ca67", - "Part 136" + "Step 136" ], [ "5d8a4cfbe6b6180ed9a1ca68", - "Part 137" + "Step 137" ], [ "5d8a4cfbe6b6180ed9a1ca6a", - "Part 138" + "Step 138" ], [ "5d8a4cfbe6b6180ed9a1ca6b", - "Part 139" + "Step 139" ], [ "5d8a4cfbe6b6180ed9a1ca6c", - "Part 140" + "Step 140" ], [ "5d8a4cfbe6b6180ed9a1ca6d", - "Part 141" + "Step 141" ], [ "5d8a4cfbe6b6180ed9a1ca6e", - "Part 142" + "Step 142" ], [ "5d8a4cfbe6b6180ed9a1ca6f", - "Part 143" + "Step 143" ], [ "5d8a4cfbe6b6180ed9a1ca70", - "Part 144" + "Step 144" ], [ "5d8a4cfbe6b6180ed9a1ca71", - "Part 145" + "Step 145" ], [ "5d8a4cfbe6b6180ed9a1ca72", - "Part 146" + "Step 146" ] ]} diff --git a/curriculum/challenges/_meta/functional-programming-spreadsheet/meta.json b/curriculum/challenges/_meta/functional-programming-spreadsheet/meta.json index e2447a7754..51895b9704 100644 --- a/curriculum/challenges/_meta/functional-programming-spreadsheet/meta.json +++ b/curriculum/challenges/_meta/functional-programming-spreadsheet/meta.json @@ -13,566 +13,566 @@ "challengeOrder": [ [ "5d79253297c0ebb149ea9fed", - "Part 1" + "Step 1" ], [ "5d7925323be8848dbc58a07a", - "Part 2" + "Step 2" ], [ "5d792532f631702ae6d23e11", - "Part 3" + "Step 3" ], [ "5d7925329445167ecc2ac9c9", - "Part 4" + "Step 4" ], [ "5d792532b07918c3a5904913", - "Part 5" + "Step 5" ], [ "5d792533cc8b18b6c133edc7", - "Part 6" + "Step 6" ], [ "5d7925337954ed57a565a135", - "Part 7" + "Step 7" ], [ "5d79253352e33dd59ec2f6de", - "Part 8" + "Step 8" ], [ "5d792533d31e4f7fad33011d", - "Part 9" + "Step 9" ], [ "5d792533e7707b9645d7b540", - "Part 10" + "Step 10" ], [ "5d79253378595ec568f70ab6", - "Part 11" + "Step 11" ], [ "5d7925330918ae4a2f282e7e", - "Part 12" + "Step 12" ], [ "5d792533ed00e75d129e1b18", - "Part 13" + "Step 13" ], [ "5d792533a5c42fb4d1a4b70d", - "Part 14" + "Step 14" ], [ "5d79253358e8f646cbeb2bb0", - "Part 15" + "Step 15" ], [ "5d792533bb38fab70b27f527", - "Part 16" + "Step 16" ], [ "5d79253386060ed9eb04a070", - "Part 17" + "Step 17" ], [ "5d792533717672657b81aa69", - "Part 18" + "Step 18" ], [ "5d7925335ab63018dcec11fe", - "Part 19" + "Step 19" ], [ "5d7925330f300c342315066d", - "Part 20" + "Step 20" ], [ "5d792533aa6443215c9b16bf", - "Part 21" + "Step 21" ], [ "5d7925334c5e22586dd72962", - "Part 22" + "Step 22" ], [ "5d79253307ecd49e030bdcd1", - "Part 23" + "Step 23" ], [ "5d792534257122211d3043af", - "Part 24" + "Step 24" ], [ "5d7925346f4f2da6df4354a6", - "Part 25" + "Step 25" ], [ "5d792534cac2dbe0a719ea7a", - "Part 26" + "Step 26" ], [ "5d792534857332d07ccba3ad", - "Part 27" + "Step 27" ], [ "5d792534d586ef495ea9df90", - "Part 28" + "Step 28" ], [ "5d79253410532e13d13fe574", - "Part 29" + "Step 29" ], [ "5d7925342415527083bd6667", - "Part 30" + "Step 30" ], [ "5d792534c3d26890ac1484d4", - "Part 31" + "Step 31" ], [ "5d792534b92f3d1cd4410ce3", - "Part 32" + "Step 32" ], [ "5d7925341193948dfe6d76b4", - "Part 33" + "Step 33" ], [ "5d792534cf81365cfca58794", - "Part 34" + "Step 34" ], [ "5d7925348ee084278ff15556", - "Part 35" + "Step 35" ], [ "5d7925348a6a41c32f7a4e3e", - "Part 36" + "Step 36" ], [ "5d792534408c5be896b0a46e", - "Part 37" + "Step 37" ], [ "5d792534f0eda837510e9192", - "Part 38" + "Step 38" ], [ "5d7925346b911fce161febaf", - "Part 39" + "Step 39" ], [ "5d79253483eada4dd69258eb", - "Part 40" + "Step 40" ], [ "5d7925342b2b993ef18cd45f", - "Part 41" + "Step 41" ], [ "5d7925341747ad42b12f8e68", - "Part 42" + "Step 42" ], [ "5d792535b0b3c198ee3ed6f9", - "Part 43" + "Step 43" ], [ "5d7925357a0533eb221b005d", - "Part 44" + "Step 44" ], [ "5d792535591db67ee15b4106", - "Part 45" + "Step 45" ], [ "5d792535f1f7adf77de5831d", - "Part 46" + "Step 46" ], [ "5d7925353d2c505eafd50cd9", - "Part 47" + "Step 47" ], [ "5d79253539b5e944ba3e314c", - "Part 48" + "Step 48" ], [ "5d792535a4f1cbff7a8b9a0b", - "Part 49" + "Step 49" ], [ "5d792535e3304f15a8890162", - "Part 50" + "Step 50" ], [ "5d792535a40ea5ac549d6804", - "Part 51" + "Step 51" ], [ "5d7925358c220e5b2998909e", - "Part 52" + "Step 52" ], [ "5d7925357729e183a49498aa", - "Part 53" + "Step 53" ], [ "5d79253555aa652afbb68086", - "Part 54" + "Step 54" ], [ "5d79253582be306d339564f6", - "Part 55" + "Step 55" ], [ "5d7925352047e5c54882c436", - "Part 56" + "Step 56" ], [ "5d79253568e441c0adf9db9f", - "Part 57" + "Step 57" ], [ "5d7925356ab117923b80c9cd", - "Part 58" + "Step 58" ], [ "5d792535e54a8cd729a0d708", - "Part 59" + "Step 59" ], [ "5d7925353b307724a462b06b", - "Part 60" + "Step 60" ], [ "5d792536735f71d746ee5d99", - "Part 61" + "Step 61" ], [ "5d792536ad340d9dff2e4a96", - "Part 62" + "Step 62" ], [ "5d7925369614afd92d01fed5", - "Part 63" + "Step 63" ], [ "5d792536504e68254fe02236", - "Part 64" + "Step 64" ], [ "5d792536c8d2f0fdfad768fe", - "Part 65" + "Step 65" ], [ "5d79253639028b8ec56afcda", - "Part 66" + "Step 66" ], [ "5d792536834f2fd93e84944f", - "Part 67" + "Step 67" ], [ "5d792536ddff9ea73c90a994", - "Part 68" + "Step 68" ], [ "5d7925361596f84067904f7f", - "Part 69" + "Step 69" ], [ "5d792536dd8a4daf255488ac", - "Part 70" + "Step 70" ], [ "5d792536449c73004f265fb1", - "Part 71" + "Step 71" ], [ "5d79253685fc69b8fe60a0d2", - "Part 72" + "Step 72" ], [ "5d792536dc6e3ab29525de9e", - "Part 73" + "Step 73" ], [ "5d792536cfd0fd893c630abb", - "Part 74" + "Step 74" ], [ "5d7925366a5ff428fb483b40", - "Part 75" + "Step 75" ], [ "5d7925365d4035eeb2e395fd", - "Part 76" + "Step 76" ], [ "5d7925364c106e9aaf05a16f", - "Part 77" + "Step 77" ], [ "5d792536970cd8e819cc8a96", - "Part 78" + "Step 78" ], [ "5d792536e33baeaa60129e0a", - "Part 79" + "Step 79" ], [ "5d7925379e2a488f333e2d43", - "Part 80" + "Step 80" ], [ "5d7925379000785f6d8d9af3", - "Part 81" + "Step 81" ], [ "5d79253791391b0acddd0ac5", - "Part 82" + "Step 82" ], [ "5d7925373104ae5ae83f20a5", - "Part 83" + "Step 83" ], [ "5d7925373b7127cfaeb50c26", - "Part 84" + "Step 84" ], [ "5d792537cb3a5cd6baca5e1a", - "Part 85" + "Step 85" ], [ "5d79253742f3313d55db981f", - "Part 86" + "Step 86" ], [ "5d7925379e0180a438ce7f95", - "Part 87" + "Step 87" ], [ "5d792537c80984dfa5501b96", - "Part 88" + "Step 88" ], [ "5d7925377b54d8a76efb5657", - "Part 89" + "Step 89" ], [ "5d7925371398513549bb6395", - "Part 90" + "Step 90" ], [ "5d792537ea3eaf302bf2d359", - "Part 91" + "Step 91" ], [ "5d792537533b1c7843bfd029", - "Part 92" + "Step 92" ], [ "5d792537dc0fe84345d4f19e", - "Part 93" + "Step 93" ], [ "5d792537b6cadae0f4b0cda1", - "Part 94" + "Step 94" ], [ "5d79253770083fb730c93a93", - "Part 95" + "Step 95" ], [ "5d792537fef76b226b63b93b", - "Part 96" + "Step 96" ], [ "5d79253760fca25ccbbd8990", - "Part 97" + "Step 97" ], [ "5d7925374321824cba309875", - "Part 98" + "Step 98" ], [ "5d7925381e8565a5c50ba7f1", - "Part 99" + "Step 99" ], [ "5d7925383f1b77db7f1ff59e", - "Part 100" + "Step 100" ], [ "5d792538de9fa3f298bcd5f6", - "Part 101" + "Step 101" ], [ "5d7925385b74f69642e1fea5", - "Part 102" + "Step 102" ], [ "5d7925380ea76d55b2c97d7b", - "Part 103" + "Step 103" ], [ "5d792538be4fe331f1a6c008", - "Part 104" + "Step 104" ], [ "5d792538d169f33142175b95", - "Part 105" + "Step 105" ], [ "5d792538e48b5a2c6e5bbe12", - "Part 106" + "Step 106" ], [ "5d7925387f3e9da5ec856dbe", - "Part 107" + "Step 107" ], [ "5d79253824ae9b4a6e6f3108", - "Part 108" + "Step 108" ], [ "5d7925383f122a279f4c54ad", - "Part 109" + "Step 109" ], [ "5d7925387b682e962f209269", - "Part 110" + "Step 110" ], [ "5d792538de774217b173288e", - "Part 111" + "Step 111" ], [ "5d79253891d93585323d1f3c", - "Part 112" + "Step 112" ], [ "5d7925384e34e944ecb4612d", - "Part 113" + "Step 113" ], [ "5d792538631844ad0bdfb4c3", - "Part 114" + "Step 114" ], [ "5d792538e2a8d20cc580d481", - "Part 115" + "Step 115" ], [ "5d792538f5004390d6678554", - "Part 116" + "Step 116" ], [ "5d792539dd4fd4c96fd85f7e", - "Part 117" + "Step 117" ], [ "5d79253949802f8587c8bbd3", - "Part 118" + "Step 118" ], [ "5d7925395888767e9304c082", - "Part 119" + "Step 119" ], [ "5d7925393b30099e37a34668", - "Part 120" + "Step 120" ], [ "5d7925398157757b23730fdd", - "Part 121" + "Step 121" ], [ "5d792539de4b9ac14dd40409", - "Part 122" + "Step 122" ], [ "5d792539534f1bf991bb987f", - "Part 123" + "Step 123" ], [ "5d7925394089b762f93ffa52", - "Part 124" + "Step 124" ], [ "5d792539ec758d45a6900173", - "Part 125" + "Step 125" ], [ "5d7925398d525f61a9ff3a79", - "Part 126" + "Step 126" ], [ "5d792539a222f385c5c17d2b", - "Part 127" + "Step 127" ], [ "5d7925398a7184b41b12a0e0", - "Part 128" + "Step 128" ], [ "5d7925399afb905c34730a75", - "Part 129" + "Step 129" ], [ "5d792539728d1aa7788e2c9b", - "Part 130" + "Step 130" ], [ "5d79253939434a2724c0ec41", - "Part 131" + "Step 131" ], [ "5d792539b9e1d3c54d8fe94a", - "Part 132" + "Step 132" ], [ "5d792539b2e0bd8f9e8213e4", - "Part 133" + "Step 133" ], [ "5d792539239148965a1a59a5", - "Part 134" + "Step 134" ], [ "5d792539e1446045d0df6d28", - "Part 135" + "Step 135" ], [ "5d79253a2febbb77098730b9", - "Part 136" + "Step 136" ], [ "5d79253a98bd9fdf7ce68d0a", - "Part 137" + "Step 137" ], [ "5d79253a1e9abf29de64c177", - "Part 138" + "Step 138" ], [ "5d79253a8b29d78984369e4b", - "Part 139" + "Step 139" ], [ "5d79253ad297a31cbe073718", - "Part 140" + "Step 140" ], [ "5dc10b8b93704f41d279eb5b", - "Part 141" + "Step 141" ] ]} diff --git a/curriculum/challenges/_meta/intermediate-javascript-calorie-counter/meta.json b/curriculum/challenges/_meta/intermediate-javascript-calorie-counter/meta.json index 60827f1a8c..79ca13dfa5 100644 --- a/curriculum/challenges/_meta/intermediate-javascript-calorie-counter/meta.json +++ b/curriculum/challenges/_meta/intermediate-javascript-calorie-counter/meta.json @@ -12,306 +12,306 @@ "challengeOrder": [ [ "5ddb965c65d27e1512d44d9a", - "Part 1" + "Step 1" ], [ "5ddb965c65d27e1512d44d9b", - "Part 2" + "Step 2" ], [ "5ddb965c65d27e1512d44d9c", - "Part 3" + "Step 3" ], [ "5ddb965c65d27e1512d44d9d", - "Part 4" + "Step 4" ], [ "5ddb965c65d27e1512d44d9e", - "Part 5" + "Step 5" ], [ "5ddb965c65d27e1512d44d9f", - "Part 6" + "Step 6" ], [ "5ddb965c65d27e1512d44da0", - "Part 7" + "Step 7" ], [ "5ddb965c65d27e1512d44da1", - "Part 8" + "Step 8" ], [ "5ddb965c65d27e1512d44da2", - "Part 9" + "Step 9" ], [ "5ddb965c65d27e1512d44da3", - "Part 10" + "Step 10" ], [ "5ddb965c65d27e1512d44da4", - "Part 11" + "Step 11" ], [ "5ddb965c65d27e1512d44da5", - "Part 12" + "Step 12" ], [ "5ddb965c65d27e1512d44da6", - "Part 13" + "Step 13" ], [ "5ddb965c65d27e1512d44da7", - "Part 14" + "Step 14" ], [ "5ddb965c65d27e1512d44da8", - "Part 15" + "Step 15" ], [ "5ddb965c65d27e1512d44da9", - "Part 16" + "Step 16" ], [ "5ddb965c65d27e1512d44daa", - "Part 17" + "Step 17" ], [ "5ddb965c65d27e1512d44dab", - "Part 18" + "Step 18" ], [ "5ddb965c65d27e1512d44dac", - "Part 19" + "Step 19" ], [ "5ddb965c65d27e1512d44dad", - "Part 20" + "Step 20" ], [ "5e302e80e003129199103c78", - "Part 21" + "Step 21" ], [ "5e302e8ce003129199103c79", - "Part 22" + "Step 22" ], [ "5ddb965c65d27e1512d44dae", - "Part 23" + "Step 23" ], [ "5ddb965c65d27e1512d44daf", - "Part 24" + "Step 24" ], [ "5ddb965c65d27e1512d44db0", - "Part 25" + "Step 25" ], [ "5ddb965c65d27e1512d44db1", - "Part 26" + "Step 26" ], [ "5ddb965c65d27e1512d44db2", - "Part 27" + "Step 27" ], [ "5ddb965c65d27e1512d44db3", - "Part 28" + "Step 28" ], [ "5ddb965c65d27e1512d44db4", - "Part 29" + "Step 29" ], [ "5ddb965c65d27e1512d44db5", - "Part 30" + "Step 30" ], [ "5ddb965c65d27e1512d44db6", - "Part 31" + "Step 31" ], [ "5ddb965c65d27e1512d44db7", - "Part 32" + "Step 32" ], [ "5ddb965c65d27e1512d44db8", - "Part 33" + "Step 33" ], [ "5ddb965c65d27e1512d44db9", - "Part 34" + "Step 34" ], [ "5ddb965c65d27e1512d44dba", - "Part 35" + "Step 35" ], [ "5ddb965c65d27e1512d44dbb", - "Part 36" + "Step 36" ], [ "5ddb965c65d27e1512d44dbc", - "Part 37" + "Step 37" ], [ "5ddb965c65d27e1512d44dbd", - "Part 38" + "Step 38" ], [ "5ddb965c65d27e1512d44dbe", - "Part 39" + "Step 39" ], [ "5ddb965c65d27e1512d44dbf", - "Part 40" + "Step 40" ], [ "5ddb965c65d27e1512d44dc0", - "Part 41" + "Step 41" ], [ "5ddb965c65d27e1512d44dc1", - "Part 42" + "Step 42" ], [ "5ddb965c65d27e1512d44dc2", - "Part 43" + "Step 43" ], [ "5ddb965c65d27e1512d44dc3", - "Part 44" + "Step 44" ], [ "5ddb965c65d27e1512d44dc4", - "Part 45" + "Step 45" ], [ "5ddb965c65d27e1512d44dc5", - "Part 46" + "Step 46" ], [ "5ddb965c65d27e1512d44dc6", - "Part 47" + "Step 47" ], [ "5ddb965c65d27e1512d44dc7", - "Part 48" + "Step 48" ], [ "5ddb965c65d27e1512d44dc8", - "Part 49" + "Step 49" ], [ "5ddb965c65d27e1512d44dc9", - "Part 50" + "Step 50" ], [ "5ddb965c65d27e1512d44dca", - "Part 51" + "Step 51" ], [ "5ddb965c65d27e1512d44dcb", - "Part 52" + "Step 52" ], [ "5ddb965c65d27e1512d44dcc", - "Part 53" + "Step 53" ], [ "5ddb965c65d27e1512d44dcd", - "Part 54" + "Step 54" ], [ "5ddb965c65d27e1512d44dce", - "Part 55" + "Step 55" ], [ "5ddb965c65d27e1512d44dcf", - "Part 56" + "Step 56" ], [ "5ddb965c65d27e1512d44dd0", - "Part 57" + "Step 57" ], [ "5ddb965c65d27e1512d44dd1", - "Part 58" + "Step 58" ], [ "5ddb965c65d27e1512d44dd2", - "Part 59" + "Step 59" ], [ "5ddb965c65d27e1512d44dd3", - "Part 60" + "Step 60" ], [ "5ddb965c65d27e1512d44dd4", - "Part 61" + "Step 61" ], [ "5ddb965c65d27e1512d44dd5", - "Part 62" + "Step 62" ], [ "5ddb965c65d27e1512d44dd6", - "Part 63" + "Step 63" ], [ "5ddb965c65d27e1512d44dd7", - "Part 64" + "Step 64" ], [ "5ddb965c65d27e1512d44dd8", - "Part 65" + "Step 65" ], [ "5ddb965c65d27e1512d44dd9", - "Part 66" + "Step 66" ], [ "5ddb965c65d27e1512d44dda", - "Part 67" + "Step 67" ], [ "5ddb965c65d27e1512d44ddb", - "Part 68" + "Step 68" ], [ "5ddb965c65d27e1512d44ddc", - "Part 69" + "Step 69" ], [ "5ddb965c65d27e1512d44ddd", - "Part 70" + "Step 70" ], [ "5ddb965c65d27e1512d44dde", - "Part 71" + "Step 71" ], [ "5ddb965c65d27e1512d44ddf", - "Part 72" + "Step 72" ], [ "5ddb965c65d27e1512d44de0", - "Part 73" + "Step 73" ], [ "5ddb965c65d27e1512d44de1", - "Part 74" + "Step 74" ], [ "5ddb965c65d27e1512d44de2", - "Part 75" + "Step 75" ], [ "5ddb965c65d27e1512d44de3", - "Part 76" + "Step 76" ] ]} diff --git a/curriculum/challenges/_meta/registration-form/meta.json b/curriculum/challenges/_meta/registration-form/meta.json index 808bb0b8cf..19f5ca73aa 100644 --- a/curriculum/challenges/_meta/registration-form/meta.json +++ b/curriculum/challenges/_meta/registration-form/meta.json @@ -12,231 +12,231 @@ "challengeOrder": [ [ "60eebd07ea685b0e777b5583", - "Part 1" + "Step 1" ], [ "60f027099a15b00485563dd2", - "Part 2" + "Step 2" ], [ "60f027c87bc98f050395c139", - "Part 3" + "Step 3" ], [ "60f0286404aefb0562a4fdf9", - "Part 4" + "Step 4" ], [ "60f02e7361b68405e27b62a5", - "Part 5" + "Step 5" ], [ "60f030d388cb74067cf291c3", - "Part 6" + "Step 6" ], [ "60f1922fcbd2410527b3bd89", - "Part 7" + "Step 7" ], [ "60f1a5e2d2c23707a4f9a660", - "Part 8" + "Step 8" ], [ "60f1a9cbd23023082e149fee", - "Part 9" + "Step 9" ], [ "60f5c3e399ff1a05629964e4", - "Part 10" + "Step 10" ], [ "60f5cb8875ab6a0610f05071", - "Part 11" + "Step 11" ], [ "60f5d2776c854e069560fbe6", - "Part 12" + "Step 12" ], [ "60f5dc35c07ac1078f140916", - "Part 13" + "Step 13" ], [ "60f803d5241e6a0433a523a1", - "Part 14" + "Step 14" ], [ "60f805f813eaf2049bc2ceea", - "Part 15" + "Step 15" ], [ "60f80e0081e0f2052ae5b505", - "Part 16" + "Step 16" ], [ "60f81167d0d4910809f88945", - "Part 17" + "Step 17" ], [ "60f81616cff80508badf9ad5", - "Part 18" + "Step 18" ], [ "60f83e7bfc09900959f41e20", - "Part 19" + "Step 19" ], [ "60f84ec41116b209c280ba91", - "Part 20" + "Step 20" ], [ "60f852f645b5310a8264f555", - "Part 21" + "Step 21" ], [ "60f85a62fb30c80bcea0cedb", - "Part 22" + "Step 22" ], [ "60f8604682407e0d017bbf7f", - "Part 23" + "Step 23" ], [ "60f8618d191b940d62038513", - "Part 24" + "Step 24" ], [ "60fab4a123ce4b04526b082b", - "Part 25" + "Step 25" ], [ "60fab8367d35de04e5cb7929", - "Part 26" + "Step 26" ], [ "60fab9f17fa294054b74228c", - "Part 27" + "Step 27" ], [ "60fabf0dd4959805dbae09e6", - "Part 28" + "Step 28" ], [ "60fac4095512d3066053d73c", - "Part 29" + "Step 29" ], [ "60fac56271087806def55b33", - "Part 30" + "Step 30" ], [ "60fac8d7fdfaee0796934f20", - "Part 31" + "Step 31" ], [ "60faca286cb48b07f6482970", - "Part 32" + "Step 32" ], [ "60facde2d0dc61085b41063f", - "Part 33" + "Step 33" ], [ "60facf914c7b9b08d7510c2c", - "Part 34" + "Step 34" ], [ "60fad0a812d9890938524f50", - "Part 35" + "Step 35" ], [ "60fad1cafcde010995e15306", - "Part 36" + "Step 36" ], [ "60fad6dfcc0d930a59becf12", - "Part 37" + "Step 37" ], [ "60fad8e6148f310bba7890b1", - "Part 38" + "Step 38" ], [ "60fad99e09f9d30c1657e790", - "Part 39" + "Step 39" ], [ "60fadb18058e950c73925279", - "Part 40" + "Step 40" ], [ "60fadce90f85c50d0bb0dd4f", - "Part 41" + "Step 41" ], [ "60fadd972e6ffe0d6858fa2d", - "Part 42" + "Step 42" ], [ "60fadfa2b540b70dcfa8b771", - "Part 43" + "Step 43" ], [ "60fc219d333e37046f474a6e", - "Part 44" + "Step 44" ], [ "60fc22d1e64d1b04cdd4e602", - "Part 45" + "Step 45" ], [ "60fc236dc04532052926fdac", - "Part 46" + "Step 46" ], [ "60ffe1bc30415f042faea936", - "Part 47" + "Step 47" ], [ "60ffe3936796ac04959285a9", - "Part 48" + "Step 48" ], [ "60ffe4f4ec18cd04dc470c56", - "Part 49" + "Step 49" ], [ "60ffe69ee377c6055e192a46", - "Part 50" + "Step 50" ], [ "60ffe7d8aae62c05bcc9e7eb", - "Part 51" + "Step 51" ], [ "60ffe8a5ceb0e90618db06d9", - "Part 52" + "Step 52" ], [ "60ffe947a868ec068f7850f6", - "Part 53" + "Step 53" ], [ "60ffe9cb47809106eda2f2c9", - "Part 54" + "Step 54" ], [ "60ffec2825da1007509ddd06", - "Part 55" + "Step 55" ], [ "60ffecefac971607ae73c60f", - "Part 56" + "Step 56" ], [ "60ffefd6479a3d084fb77cbc", - "Part 57" + "Step 57" ] ] -} \ No newline at end of file +} diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-001.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-001.md deleted file mode 100644 index 5176ed4a6a..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-001.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: 614ccc21ea91ef1736b9b578 -title: Part 1 -challengeType: 0 -dashedName: part-1 ---- - -# --description-- - -Welcome to the first part in the Accessibility Quiz. As you are becoming a seasoned HTML and CSS developer, we have started you off with the basic boilerplate. - -Start this accessibility journey, by providing a `lang` attribute to your `html` element. This will assist screen readers in identifying the language of the page. - -# --hints-- - -You should give the `html` element a `lang` attribute. _Hint: You can use the value `en` for English._ - -```js -assert.match(code, //i); -// TODO: This should/could be fixed in the builder.js -// assert.notThrow(Intl.getCanonicalLocales(document.querySelector('html').lang)); -``` - -# --seed-- - -## --seed-contents-- - -```html - ---fcc-editable-region-- - - - - - - - - ---fcc-editable-region-- - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-002.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-002.md deleted file mode 100644 index 635da6c348..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-002.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -id: 613297a923965e0703b64796 -title: Part 2 -challengeType: 0 -dashedName: part-2 ---- - -# --description-- - -You may be familiar with the `meta` tag already; it is used to specify information about the page, such as the title, description, keywords, and author. - -Give your page a `meta` tag with an appropriate `charset` value. - -The `charset` attribute specifies the character encoding of the page, and, nowadays, `UTF-8` is the only encoding supported by most browsers. - -# --hints-- - -You should create a `meta` element within the `head` element. - -```js -// TODO: Once builder is fixed so head info is not in body -assert.exists(document.querySelector('body > meta')); -``` - -You should give the `meta` tag a `charset` of `UTF-8`. - -```js -assert.equal(document.querySelector('body > meta')?.getAttribute('charset'), 'UTF-8'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- - - - ---fcc-editable-region-- - - - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-003.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-003.md deleted file mode 100644 index 06597be9d8..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-003.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -id: 61329b210dac0b08047fd6ab -title: Part 3 -challengeType: 0 -dashedName: part-3 ---- - -# --description-- - -Continuing with the `meta` tags, a `viewport` definition tells the browser how to render the page. Including one betters visual accessibility on mobile, and improves _SEO_ (search engine optimisation). - -Add a `viewport` definition with a `content` attribute detailing the `width` and `initial-scale` of the page. - -# --hints-- - -You should create another `meta` element in the `head`. - -```js -assert.equal(document.querySelectorAll('body > meta')?.length, 2); -``` - -You should give the `meta` a `name` attribute of `viewport`. - -```js -assert.equal(document.querySelectorAll('body > meta[name="viewport"]')?.length, 1); -``` - -You should give the `meta` a `content` attribute of `width=device-width, initial-scale=1`. - -```js -// TODO: Double-check this is the only correct answer -assert.equal(document.querySelectorAll('body > meta[content="width=device-width, initial-scale=1"]')?.length, 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- - - - - ---fcc-editable-region-- - - - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-004.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-004.md deleted file mode 100644 index 1aab92070d..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-004.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -id: 61329d52e5010e08d9b9d66b -title: Part 4 -challengeType: 0 -dashedName: part-4 ---- - -# --description-- - -Another important `meta` tag for accessibility and SEO is the `description` definition. The value of the `content` attribute is used by search engines to provide a description of your page. - -Add a `meta` tag with the `name` attribute set to `description`, and give it a useful `content` attribute. - -# --hints-- - -You should add a new `meta` tag to the `head`. - -```js -assert.equal(document.querySelectorAll('meta').length, 3); -``` - -You should give the `meta` a `name` attribute of `description`. - -```js -assert.exists(document.querySelector('meta[name="description"]')); -``` - -You should give the `meta` a `content` attribute. - -```js -assert.notEmpty(document.querySelector('meta[name="description"]')?.content); -``` - -The `content` attribute value should not be more than 165 characters. _This is Google's maximum description length._ - -```js -assert.isAtMost(document.querySelector('meta[name="description"]')?.content?.length, 165); -``` - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- - - - - - ---fcc-editable-region-- - - - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-005.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-005.md deleted file mode 100644 index 146ace83c0..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-005.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -id: 6133acc353338c0bba9cb553 -title: Part 5 -challengeType: 0 -dashedName: part-5 ---- - -# --description-- - -Lastly in the `head`, the `title` element is useful for screen readers to understand the content of a page. Furthermore, it is an important part of _SEO_. - -Give your page a `title` that is descriptive and concise. - -# --hints-- - -You should add a `title` element to the `head`. - -```js -// TODO: Fix once builder puts head in the right place -assert.exists(document.querySelector('body > title')); -``` - -You should not make the `title` longer than 60 characters. - -```js -assert.isAtMost(document.querySelector('body > title')?.textContent?.length, 60); -``` - -Try being more descriptive with your `title` element. _Hint: At least 20 characters_ - -```js -assert.isAtLeast(document.querySelector('body > title')?.textContent?.length, 20); -``` - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- - - - - - - ---fcc-editable-region-- - - - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-006.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-006.md deleted file mode 100644 index d16ba4605a..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-006.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -id: 6133d11ef548f51f876149e3 -title: Part 6 -challengeType: 0 -dashedName: part-6 ---- - -# --description-- - -Navigation is a core part of accessibility, and screen readers rely on you to provide the structure of your page. This is accomplished with semantic HTML elements. - -Add a `header` and a `main` element to your page. - -The `header` element will be used to introduce the page, as well as provide a navigation menu. - -The `main` element will contain the core content of your page. - -# --hints-- - -You should add a `header` element to the `body`. - -```js -assert.exists(document.querySelector('body > header')); -``` - -You should add a `main` element to the `body`. - -```js -assert.exists(document.querySelector('body > main')); -``` - -The `header` element should come before the `main` element. - -```js -assert.exists(document.querySelector('header + main')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - ---fcc-editable-region-- - - - ---fcc-editable-region-- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-007.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-007.md deleted file mode 100644 index 8f36e70275..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-007.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 613e2546d0594208229ada50 -title: Part 7 -challengeType: 0 -dashedName: part-7 ---- - -# --description-- - -Within the `header`, provide context about the page by nesting one `img`, `h1`, and `nav` element. - -The `img` should point to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`, and have an `id` of `logo`. - -The `h1` should contain the text `HTML/CSS Quiz`. - -# --hints-- - -You should add an `img` element to the `header` element. - -```js -assert.exists(document.querySelector('header > img')); -``` - -You should add an `h1` element to the `header` element. - -```js -assert.exists(document.querySelector('header > h1')); -``` - -You should add a `nav` element to the `header` element. - -```js -assert.exists(document.querySelector('header > nav')); -``` - -You should place the `img`, `h1`, and `nav` elements in that order. - -```js -assert.exists(document.querySelector('img + h1 + nav')); -``` - -You should give the `img` element a `src` attribute of `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`. - -```js -assert.equal(document.querySelector('img')?.src, 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg'); -``` - -You should give the `img` element an `id` attribute of `logo`. - -```js -assert.equal(document.querySelector('img')?.id, 'logo'); -``` - -You should give the `h1` element the text `HTML/CSS Quiz`. - -```js -assert.include(document.querySelector('h1')?.innerText?.toLowerCase(), 'html/css quiz'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - ---fcc-editable-region-- -
- -
---fcc-editable-region-- -
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-008.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-008.md deleted file mode 100644 index 00a8d0936b..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-008.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 613e275749ebd008e74bb62e -title: Part 8 -challengeType: 0 -dashedName: part-8 ---- - -# --description-- - -A useful property of an _SVG_ (scalable vector graphics) is that is contains a `path` attribute which allows the image to be scaled without affecting the resolution of the resultant image. - -Currently, the `img` is assuming it's default size, which is too large. Correctly, scale the image using it's `id` as a selector, and setting the `width` to `max(100px, 18vw)`. - -# --hints-- - -You should use the `#logo` selector to target the `img` element. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('#logo')); -``` - -You should give the `img` a `width` of `max(100px, 18vw)`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-009.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-009.md deleted file mode 100644 index e738cbc983..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-009.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 6140827cff96e906bd38fc2b -title: Part 9 -challengeType: 0 -dashedName: part-9 ---- - -# --description-- - -As described in the [freeCodeCamp Style Guide](https://design-style-guide.freecodecamp.org/), the logo should retain an aspect ratio of `35:4`, and have padding around the text. - -First, change the `background-color` to `#0a0a23` so you can see the logo. Then, use the `aspect-ratio` property to set the desired aspect ratio. Finally, add a `padding` of `0.4rem` all around. - -# --hints-- - -You should give `#logo` a `background-color` of `#0a0a23`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.backgroundColor, 'rgb(10, 10, 35)'); -``` - -You should use the `aspect-ratio` property. - -```js -assert.notEmpty(new __helpers.CSSHelp(document).getStyle('#logo')?.aspectRatio); -``` - -You should not use the `height` property. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('#logo')?.height); -``` - -You should not change the `width` property. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)'); -``` - -You should give the `img` an `aspect-ratio` of `35 / 4`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.aspectRatio, '35 / 4'); -``` - -You should give the `img` a `padding` of `0.4rem`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.padding, '0.4rem'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - ---fcc-editable-region-- -#logo { - width: max(100px, 18vw); - -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-010.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-010.md deleted file mode 100644 index b2a926fae2..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-010.md +++ /dev/null @@ -1,89 +0,0 @@ ---- -id: 6140883f74224508174794c0 -title: Part 10 -challengeType: 0 -dashedName: part-10 ---- - -# --description-- - -Make the `header` take up the full width of its parent container, set it's `height` to `50px`, and set the `background-color` to `#1b1b32`. Then, set the `display` to use _Flexbox_. - -# --hints-- - -You should use the `header` element selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('header')); -``` - -You should give the `header` a `width` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.width, '100%'); -``` - -You should give the `header` a `height` of `50px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.height, '50px'); -``` - -You should give the `header` a `background-color` of `#1b1b32`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.backgroundColor, 'rgb(27, 27, 50)'); -``` - -You should give the `header` a `display` of `flex`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.display, 'flex'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-011.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-011.md deleted file mode 100644 index e813eab6f4..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-011.md +++ /dev/null @@ -1,83 +0,0 @@ ---- -id: 61408e4ae3e35d08feb260eb -title: Part 11 -challengeType: 0 -dashedName: part-11 ---- - -# --description-- - -Change the `h1` font color to `#f1be32`, and set the font size to `min(5vw, 1.2em)`. - -# --hints-- - -You should use the `h1` element selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('h1')); -``` - -You should give the `h1` a `color` of `#f1be32`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.color, 'rgb(241, 190, 50)'); -``` - -You should give the `h1` a `font-size` of `min(5vw, 1.2em)`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.fontSize, 'min(5vw, 1.2em)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-012.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-012.md deleted file mode 100644 index 6c3d80c755..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-012.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 61408f155e798909b6908712 -title: Part 12 -challengeType: 0 -dashedName: part-12 ---- - -# --description-- - -To enable navigation on the page, add an unordered list with the following three list items: - -- `INFO` -- `HTML` -- `CSS` - -The list items text should be wrapped in anchor tags. - -# --hints-- - -You should nest one `ul` element inside the `nav`. - -```js -assert.equal(document.querySelectorAll('nav > ul')?.length, 1); -``` - -You should nest three `li` elements inside the `ul` element. - -```js -assert.equal(document.querySelectorAll('nav > ul > li')?.length, 3); -``` - -You should nest one `a` element inside each `li` element. - -```js -assert.equal(document.querySelectorAll('nav > ul > li > a')?.length, 3); -``` - -You should give the first `a` element the text `INFO`. - -```js -assert.equal(document.querySelectorAll('nav > ul > li > a')?.[0]?.textContent, 'INFO'); -``` - -You should give the second `a` element the text `HTML`. - -```js -assert.equal(document.querySelectorAll('nav > ul > li > a')?.[1]?.textContent, 'HTML'); -``` - -You should give the third `a` element the text `CSS`. - -```js -assert.equal(document.querySelectorAll('nav > ul > li > a')?.[2]?.textContent, 'CSS'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

---fcc-editable-region-- - ---fcc-editable-region-- -
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-013.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-013.md deleted file mode 100644 index 6d502a23c7..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-013.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 614090d5a22b6f0a5a6b464c -title: Part 13 -challengeType: 0 -dashedName: part-13 ---- - - - -# --description-- - -Target unordered list elements within `nav` elements, and use _Flexbox_ to evenly space the children. - -# --hints-- - -You should use the `nav > ul` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('nav > ul')); -``` - -You should give the `nav > ul` elements a `display` of `flex`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.display, 'flex'); -``` - -You should give the `nav > ul` elements a `justify-content` of `space-evenly`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.justifyContent, 'space-evenly'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-014.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-014.md deleted file mode 100644 index ced84934e6..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-014.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 6141fabd6f75610664e908fd -title: Part 14 -challengeType: 0 -dashedName: part-14 ---- - -# --description-- - -As this is a quiz, you will need a form for users to submit answers. You can semantically separate the content within the form using `section` elements. - -Within the `main` element, create a form with three nested `section` elements. Then, make the form submit to `https://freecodecamp.org/practice-project/accessibility-quiz`, using the correct method. - -# --hints-- - -You should nest a `form` element within your `main` element. - -```js -assert.exists(document.querySelector('main > form')); -``` - -You should nest three `section` elements within your `form` element. - -```js -assert.equal(document.querySelectorAll('main > form > section')?.length, 3); -``` - -You should give the `form` element an `action` attribute. - -```js -assert.notEmpty(document.querySelector('main > form')?.action); -``` - -You should give the `action` attribute a value of `https://freecodecamp.org/practice-project/accessibility-quiz`. - -```js -assert.equal(document.querySelector('main > form')?.action, 'https://freecodecamp.org/practice-project/accessibility-quiz'); -``` - -You should give the `form` element a `method` attribute. - -```js -assert.notEmpty(document.querySelector('main > form')?.method); -``` - -You should give the `form` element a `method` attribute with a value of `post`. - -```js -assert.equal(document.querySelector('main > form')?.method?.toLowerCase(), 'post'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
---fcc-editable-region-- -
- -
---fcc-editable-region-- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-015.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-015.md deleted file mode 100644 index f2623e5490..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-015.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -id: 6141fed65b61320743da5894 -title: Part 15 -challengeType: 0 -dashedName: part-15 ---- - -# --description-- - -To increase the page accessibility, the `role` attribute can be used to indicate the purpose behind an element on the page to assistive technologies. The `role` attribute is a part of the _Web Accessibility Initiative_ (WAI), and accepts preset values. - -Give each of the `section` elements the `region` role. - -# --hints-- - -You should give the first `section` element the `region` role. - -```js -assert.equal(document.querySelectorAll('section')?.[0]?.getAttribute('role'), 'region'); -``` - -You should give the second `section` element the `region` role. - -```js -assert.equal(document.querySelectorAll('section')?.[1]?.getAttribute('role'), 'region'); -``` - -You should give the third `section` element the `region` role. - -```js -assert.equal(document.querySelectorAll('section')?.[2]?.getAttribute('role'), 'region'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
---fcc-editable-region-- -
-
-
-
-
---fcc-editable-region-- -
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-016.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-016.md deleted file mode 100644 index ff5d82a201..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-016.md +++ /dev/null @@ -1,171 +0,0 @@ ---- -id: 614202874ca576084fca625f -title: Part 16 -challengeType: 0 -dashedName: part-16 ---- - -# --description-- - -Every `region` role requires a visible label, which should be referenced by the `aria-labelledby` attribute. - -To the `section` elements, give the following `aria-labelledby` attributes: - -- `student-info` -- `html-questions` -- `css-questions` - -Then, within each `section` element, nest one `h2` element with an `id` matching the corresponding `aria-labelledby` attribute. Give each `h2` suitable text content. - -# --hints-- - -You should give the first `section` element an `aria-labelledby` attribute of `student-info`. - -```js -assert.equal(document.querySelectorAll('section')?.[0]?.getAttribute('aria-labelledby'), 'student-info'); -``` - -You should give the second `section` element an `aria-labelledby` attribute of `html-questions`. - -```js -assert.equal(document.querySelectorAll('section')?.[1]?.getAttribute('aria-labelledby'), 'html-questions'); -``` - -You should give the third `section` element an `aria-labelledby` attribute of `css-questions`. - -```js -assert.equal(document.querySelectorAll('section')?.[2]?.getAttribute('aria-labelledby'), 'css-questions'); -``` - -You should nest one `h2` element within the first `section` element. - -```js -assert.equal(document.querySelectorAll('section')?.[0]?.querySelectorAll('h2')?.length, 1); -``` - -You should nest one `h2` element within the second `section` element. - -```js -assert.equal(document.querySelectorAll('section')?.[1]?.querySelectorAll('h2')?.length, 1); -``` - -You should nest one `h2` element within the third `section` element. - -```js -assert.equal(document.querySelectorAll('section')?.[2]?.querySelectorAll('h2')?.length, 1); -``` - -You should give the first `h2` element an `id` attribute of `student-info`. - -```js -assert.equal(document.querySelectorAll('h2')?.[0]?.id, 'student-info'); -``` - -You should give the second `h2` element an `id` attribute of `html-questions`. - -```js -assert.equal(document.querySelectorAll('h2')?.[1]?.id, 'html-questions'); -``` - -You should give the third `h2` element an `id` attribute of `css-questions`. - -```js -assert.equal(document.querySelectorAll('h2')?.[2]?.id, 'css-questions'); -``` - -You should give the first `h2` element suitable text content. _Hint: I would have chosen `Student Info`_ - -```js -assert.isAtLeast(document.querySelectorAll('h2')?.[0]?.textContent?.length, 1); -``` - -You should give the second `h2` element suitable text content. _Hint: I would have chosen `HTML`_ - -```js -assert.isAtLeast(document.querySelectorAll('h2')?.[1]?.textContent?.length, 1); -``` - -You should give the third `h2` element suitable text content. _Hint: I would have chosen `CSS`_ - -```js -assert.isAtLeast(document.querySelectorAll('h2')?.[2]?.textContent?.length, 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
---fcc-editable-region-- -
-
-
-
-
---fcc-editable-region-- -
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-017.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-017.md deleted file mode 100644 index 0d445c0a1b..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-017.md +++ /dev/null @@ -1,140 +0,0 @@ ---- -id: 614206033d366c090ca7dd42 -title: Part 17 -challengeType: 0 -dashedName: part-17 ---- - -# --description-- - -Typeface plays an important role in the accessibility of a page. Some fonts are easier to read than others, and this is especially true on low-resolution screens. - -Change the font for both the `h1` and `h2` elements to `Verdana`, and use another sans-serif _web safe_ font as a fallback. - -Also, add a `border-bottom` of `4px solid #dfdfe2` to `h2` elements, to make the sections distinct. - -# --hints-- - -You should use a multiple element selector to target the `h1` and `h2` elements. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -assert.exists(gs('h1, h2') || gs('h2, h1')); -``` - -You should set the first value of the `font-family` property to `Verdana`. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -const style = gs('h1, h2') || gs('h2, h1'); -assert.include(style?.fontFamily, 'Verdana'); -``` - -You should set the second value of the `font-family` property to another sans-serif, web safe font. _Hint: I would choose Tahoma_. - -```js -// Acceptable fonts: Arial, sans-serif, Helvetica, Tahoma, Trebuchet MS. -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -const style = gs('h1, h2') || gs('h2, h1'); -assert.match(style?.fontFamily, /(Tahoma)|(Arial)|(sans-serif)|(Helvetica)|(Trebuchet MS)/); -``` - -You should use an `h2` element selector to target the `h2` elements. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('h2')); -``` - -You should give `h2` a `border-bottom` property of `4px solid #dfdfe2`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.borderBottom, '4px solid rgb(223, 223, 226)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
-
-

HTML

-
-
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-018.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-018.md deleted file mode 100644 index eca9868f7b..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-018.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 61435e3c0679a306c20f1acc -title: Part 18 -challengeType: 0 -dashedName: part-18 ---- - -# --description-- - -To be able to navigate within the page, give each anchor element an `href` corresponding to the `id` of the `h2` elements. - -# --hints-- - -You should give the first `a` element an `href` of `#student-info`. - -```js -assert.equal(document.querySelectorAll('a')?.[0]?.getAttribute('href'), '#student-info'); -``` - -You should give the second `a` element an `href` of `#html-questions`. - -```js -assert.equal(document.querySelectorAll('a')?.[1]?.getAttribute('href'), '#html-questions'); -``` - -You should give the third `a` element an `href` of `#css-questions`. - -```js -assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('href'), '#css-questions'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
-
-

HTML

-
-
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-019.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-019.md deleted file mode 100644 index c97729643a..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-019.md +++ /dev/null @@ -1,173 +0,0 @@ ---- -id: 6143610161323a081b249c19 -title: Part 19 -challengeType: 0 -dashedName: part-19 ---- - -# --description-- - -Filling out the content of the quiz, below the `#student-info`, add three `div` elements with a `class` of `info`. - -Then, within each `div` nest one `label` element, and one `input` element. - -# --hints-- - -You should nest three `div` elements below the `h2#student-info` element. - -```js -assert.equal(document.querySelectorAll('h2#student-info ~ div')?.length, 3); -``` - -You should give the first `div` a `class` of `info`. - -```js -assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.className, 'info'); -``` - -You should give the second `div` a `class` of `info`. - -```js -assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.className, 'info'); -``` - -You should give the third `div` a `class` of `info`. - -```js -assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.className, 'info'); -``` - -You should nest one `label` element within the first `div`. - -```js -assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelectorAll('label')?.length, 1); -``` - -You should nest one `input` element within the first `div`, after the `label`. - -```js -assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelectorAll('input')?.length, 1); -assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelector('label + input')); -``` - -You should nest one `label` element within the second `div`. - -```js -assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelectorAll('label')?.length, 1); -``` - -You should nest one `input` element within the second `div`, after the `label`. - -```js -assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelectorAll('input')?.length, 1); -assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelector('label + input')); -``` - -You should nest one `label` element within the third `div`. - -```js -assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelectorAll('label')?.length, 1); -``` - -You should nest one `input` element within the third `div`, after the `label`. - -```js -assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelectorAll('input')?.length, 1); -assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelector('label + input')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
---fcc-editable-region-- -
-

Student Info

- -
---fcc-editable-region-- -
-

HTML

-
-
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-020.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-020.md deleted file mode 100644 index d71e753976..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-020.md +++ /dev/null @@ -1,195 +0,0 @@ ---- -id: 6143639d5eddc7094161648c -title: Part 20 -challengeType: 0 -dashedName: part-20 ---- - -# --description-- - -It is important to link each `input` to the corresponding `label` element. This provides assistive technology users with a visual reference to the input. - -This is done, by giving the `label` a `for` attribute, which contains the `id` of the `input`. - -This section will take a student's name, email address, and date of birth. Give the `label` elements appropriate `for` attributes, as well as text content. Then, link the `input` elements to the corresponding `label` elements. - -# --hints-- - -You should give the first `label` element an appropriate `for` attribute. - -```js -assert.isAtLeast(document.querySelectorAll('label')?.[0]?.htmlFor?.length, 1); -``` - -You should give the second `label` element an appropriate `for` attribute. - -```js -assert.isAtLeast(document.querySelectorAll('label')?.[1]?.htmlFor?.length, 1); -``` - -You should give the third `label` element an appropriate `for` attribute. - -```js -assert.isAtLeast(document.querySelectorAll('label')?.[2]?.htmlFor?.length, 1); -``` - -You should give the first `label` element an appropriate text content. - -```js -assert.isAtLeast(document.querySelectorAll('label')?.[0]?.textContent?.length, 1); -``` - -You should give the second `label` element an appropriate text content. - -```js -assert.isAtLeast(document.querySelectorAll('label')?.[1]?.textContent?.length, 1); -``` - -You should give the third `label` element an appropriate text content. - -```js -assert.isAtLeast(document.querySelectorAll('label')?.[2]?.textContent?.length, 1); -``` - -You should give the first `input` element an `id` attribute matching the `for` attribute of the first `label`. - -```js -assert.equal(document.querySelectorAll('input')?.[0]?.id, document.querySelectorAll('label')?.[0]?.htmlFor); -``` - -You should give the second `input` element an `id` attribute matching the `for` attribute of the second `label`. - -```js -assert.equal(document.querySelectorAll('input')?.[1]?.id, document.querySelectorAll('label')?.[1]?.htmlFor); -``` - -You should give the third `input` element an `id` attribute matching the `for` attribute of the third `label`. - -```js -assert.equal(document.querySelectorAll('input')?.[2]?.id, document.querySelectorAll('label')?.[2]?.htmlFor); -``` - -You should not use the same `id` attribute for more than one `input` element. - -```js -const id = (n) => document.querySelectorAll('input')?.[n]?.id; -assert.notEqual(id(0), id(1)); -assert.notEqual(id(0), id(2)); -assert.notEqual(id(1), id(2)); -``` - -You should not use the same `for` attribute for more than one `label` element. - -```js -const htmlFor = (n) => document.querySelectorAll('label')?.[n]?.htmlFor; -assert.notEqual(htmlFor(0), htmlFor(1)); -assert.notEqual(htmlFor(0), htmlFor(2)); -assert.notEqual(htmlFor(1), htmlFor(2)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
---fcc-editable-region-- -
-

Student Info

-
- - -
-
- - -
-
- - -
-
---fcc-editable-region-- -
-

HTML

-
-
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-021.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-021.md deleted file mode 100644 index 4deb91b4ce..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-021.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -id: 6143908b6aafb00a659ca189 -title: Part 21 -challengeType: 0 -dashedName: part-21 ---- - -# --description-- - -Keeping in mind best-practices for form inputs, give each `input` an appropriate `type` and `name` attribute. Then, give the first `input` a `placeholder` attribute. - -# --hints-- - -You should give the first `input` a `type` of `text`. - -```js -assert.equal(document.querySelectorAll('input')?.[0]?.type, 'text'); -``` - -You should give the second `input` a `type` of `email`. - -```js -assert.equal(document.querySelectorAll('input')?.[1]?.type, 'email'); -``` - -You should give the third `input` a `type` of `date`. - -```js -assert.equal(document.querySelectorAll('input')?.[2]?.type, 'date'); -``` - -You should give the first `input` an appropriate `name` attribute. - -```js -assert.isAtLeast(document.querySelectorAll('input')?.[0]?.name?.length, 1); -``` - -You should give the second `input` an appropriate `name` attribute. - -```js -assert.isAtLeast(document.querySelectorAll('input')?.[1]?.name?.length, 1); -``` - -You should give the third `input` an appropriate `name` attribute. - -```js -assert.isAtLeast(document.querySelectorAll('input')?.[2]?.name?.length, 1); -``` - -You should give the first `input` a `placeholder` attribute. - -```js -assert.notEmpty(document.querySelectorAll('input')?.[0]?.placeholder); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
---fcc-editable-region-- -
-

Student Info

-
- - -
-
- - -
-
- - -
-
---fcc-editable-region-- -
-

HTML

-
-
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-022.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-022.md deleted file mode 100644 index ec0a973bac..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-022.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -id: 6143920c8eafb00b735746ce -title: Part 22 -challengeType: 0 -dashedName: part-22 ---- - -# --description-- - -Even though you added a `placeholder` to the first `input` element in the previous lesson, this is actually not a best-practice for accessibility; too often, users confuse the placeholder text with an actual input value - they think there is already a value in the input. - -Remove the placeholder text from the first `input` element, relying on the `label` being the best-practice. - -# --hints-- - -You should remove the `placeholder` attribute from the first `input` element. - -```js -assert.isEmpty(document.querySelectorAll('input')?.[0]?.placeholder); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

---fcc-editable-region-- -
- - -
---fcc-editable-region-- -
- - -
-
- - -
-
-
-

HTML

-
-
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-023.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-023.md deleted file mode 100644 index c6da6b6ab2..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-023.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 6143931a113bb80c45546287 -title: Part 23 -challengeType: 0 -dashedName: part-23 ---- - -# --description-- - -Arguably, `D.O.B.` is not descriptive enough. This is especially true for visually impaired users. One way to get around such an issue, without having to add visible text to the label, is to add text only a screen reader can read. - -Append a `span` element with a class of `sr-only` to the current text content of the third `label` element. - -# --hints-- - -You should add a `span` element within the third `label` element. - -```js -assert.exists(document.querySelector('.info:nth-of-type(3) > label > span')); -``` - -You should give the `span` element a class of `sr-only`. - -```js -assert.equal(document.querySelector('.info:nth-of-type(3) > label > span')?.className, 'sr-only'); -``` - -You should place the `span` after the text content `D.O.B.`. - -```js -assert.match(document.querySelector('.info:nth-of-type(3) > label')?.innerHTML, /D\.O\.B\. - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
---fcc-editable-region-- -
- - -
---fcc-editable-region-- -
-
-

HTML

-
-
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-024.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-024.md deleted file mode 100644 index 046126c3b9..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-024.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 614394fb41985e0d2012a93e -title: Part 24 -challengeType: 0 -dashedName: part-24 ---- - -# --description-- - -Within the `span` element, add the text `(Date of Birth)`. - -# --hints-- - -You should give the `span` element the text `(Date of Birth)`. - -```js -assert.equal(document.querySelector('.info:nth-of-type(3) > label > span')?.textContent, '(Date of Birth)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
---fcc-editable-region-- -
- - -
---fcc-editable-region-- -
-
-

HTML

-
-
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-025.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-025.md deleted file mode 100644 index 9a6a127424..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-025.md +++ /dev/null @@ -1,197 +0,0 @@ ---- -id: 6143956ed76ed60e012faa51 -title: Part 25 -challengeType: 0 -dashedName: part-25 ---- - -# --description-- - -The `.sr-only` text is still visible. There is a common pattern to visually hide text for only screen readers to read. - -This pattern is to set the following CSS properties: - -```css -position: absolute; -width: 1px; -height: 1px; -padding: 0; -margin: -1px; -overflow: hidden; -clip: rect(0, 0, 0, 0); -white-space: nowrap; -border: 0; -``` - -Use the above to define the `sr-only` class. - -# --hints-- - -You should use the `.sr-only` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.sr-only')); -``` - -You should give the `.sr-only` a `position` of `absolute`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.position, 'absolute'); -``` - -You should give the `.sr-only` a `width` of `1px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.width, '1px'); -``` - -You should give the `.sr-only` a `height` of `1px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.height, '1px'); -``` - -You should give the `.sr-only` a `padding` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.padding, '0px'); -``` - -You should give the `.sr-only` a `margin` of `-1px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.margin, '-1px'); -``` - -You should give the `.sr-only` an `overflow` of `hidden`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.overflow, 'hidden'); -``` - -You should give the `.sr-only` a `clip` of `rect(0, 0, 0, 0)`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.clip, 'rect(0px, 0px, 0px, 0px)'); -``` - -You should give the `.sr-only` a `white-space` of `nowrap`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.whiteSpace, 'nowrap'); -``` - -You should give the `.sr-only` a `border` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.border, '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-026.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-026.md deleted file mode 100644 index ad340b59ff..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-026.md +++ /dev/null @@ -1,200 +0,0 @@ ---- -id: 614396f7ae83f20ea6f9f4b3 -title: Part 26 -challengeType: 0 -dashedName: part-26 ---- - -# --description-- - -Within the second `section` element, add two `div` elements with a class of `question-block`. - -Then, within each `div.question-block` element, add one `p` element with text of incrementing numbers, starting at `1`, and one `fieldset` element with a class of `question`. - -# --hints-- - -You should nest two `div` elements within the second `section` element. - -```js -assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.length, 2); -``` - -You should give the first new `div` element a class of `question-block`. - -```js -assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[0]?.className, 'question-block'); -``` - -You should give the second new `div` element a class of `question-block`. - -```js -assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[1]?.className, 'question-block'); -``` - -You should nest one `p` element within each `div.question-block` element. - -```js -assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.length, 2); -``` - -You should give the first `p` element text of `1`. - -```js -assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[0]?.textContent, '1'); -``` - -You should give the second `p` element text of `2`. - -```js -assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[1]?.textContent, '2'); -``` - -You should nest one `fieldset` element within each `div.question-block` element. - -```js -assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.length, 2); -``` - -You should place the first `fieldset` element after the first `p` element. - -```js -assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > p + fieldset')); -``` - -You should place the second `fieldset` element after the second `p` element. - -```js -assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > p + fieldset')); -``` - -You should give the first `fieldset` element a class of `question`. - -```js -assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.[0]?.className, 'question'); -``` - -You should give the second `fieldset` element a class of `question`. - -```js -assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.[1]?.className, 'question'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
---fcc-editable-region-- -
-

HTML

- -
---fcc-editable-region-- -
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-027.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-027.md deleted file mode 100644 index 542d1735fb..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-027.md +++ /dev/null @@ -1,177 +0,0 @@ ---- -id: 6143cb26f7edff2dc28f7da5 -title: Part 27 -challengeType: 0 -dashedName: part-27 ---- - -# --description-- - -Each `fieldset` will contain a true/false question. - -Within each `fieldset`, nest one `legend` element, and one `ul` element with two options. - -# --hints-- - -You should nest one `legend` element within the first `fieldset` element. - -```js -assert.equal(document.querySelectorAll('.question-block:nth-of-type(1) > fieldset > legend')?.length, 1); -``` - -You should nest one `ul` element within the first `fieldset` element. - -```js -assert.equal(document.querySelectorAll('.question-block:nth-of-type(1) > fieldset > ul')?.length, 1); -``` - -You should nest two `li` elements within the first `ul` element. - -```js -assert.equal(document.querySelectorAll('fieldset > ul')?.[0]?.querySelectorAll('li')?.length, 2); -``` - -You should nest one `legend` element within the second `fieldset` element. - -```js -assert.equal(document.querySelectorAll('.question-block:nth-of-type(2) > fieldset > legend')?.length, 1); -``` - -You should nest one `ul` element within the second `fieldset` element. - -```js -assert.equal(document.querySelectorAll('.question-block:nth-of-type(2) > fieldset > ul')?.length, 1); -``` - -You should nest two `li` elements within the second `ul` element. - -```js -assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.querySelectorAll('li')?.length, 2); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
---fcc-editable-region-- -
-

HTML

-
-

1

-
-
-
-

2

-
-
-
---fcc-editable-region-- -
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-028.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-028.md deleted file mode 100644 index 52bd074667..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-028.md +++ /dev/null @@ -1,195 +0,0 @@ ---- -id: 6144e818fd5ea704fe56081d -title: Part 28 -challengeType: 0 -dashedName: part-28 ---- - -# --description-- - -Give each `fieldset` an adaquate `name` attribute. Then, give both unordered lists a `class` of `answers-list`. - -Finally, add use the `legend` to caption the content of the `fieldset`, by placing a true/false question as the text content. - -# --hints-- - -You should give the first `fieldset` an adaquate `name` attribute. _Hint: I would use `html-question-one`_ - -```js -assert.notEmpty(document.querySelectorAll('fieldset')?.[0]?.name); -``` - -You should give the second `fieldset` an adaquate `name` attribute. _Hint: I would use `html-question-two`_ - -```js -assert.notEmpty(document.querySelectorAll('fieldset')?.[1]?.name); -``` - -You should give the first `ul` element a `class` of `answers-list`. - -```js -assert.equal(document.querySelectorAll('fieldset > ul')?.[0]?.className, 'answers-list'); -``` - -You should give the second `ul` element a `class` of `answers-list`. - -```js -assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.className, 'answers-list'); -``` - -You should give the first `legend` element text content. - -```js -assert.notEmpty(document.querySelectorAll('legend')?.[0]?.textContent); -``` - -You should give the second `legend` element text content. - -```js -assert.notEmpty(document.querySelectorAll('legend')?.[1]?.textContent); -``` - -You should not use the same text content for both `legend` elements. - -```js -assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.querySelectorAll('legend')?.[1]?.textContent); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
---fcc-editable-region-- -
-

HTML

-
-

1

-
- -
    -
  • -
  • -
-
-
-
-

2

-
- -
    -
  • -
  • -
-
-
-
---fcc-editable-region-- -
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-029.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-029.md deleted file mode 100644 index d3bec53716..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-029.md +++ /dev/null @@ -1,231 +0,0 @@ ---- -id: 6144f8dc6849e405dd8bb829 -title: Part 29 -challengeType: 0 -dashedName: part-29 ---- - -# --description-- - -To provide the functionality of the true/false questions, we need a set of inputs which do not allow both to be selected at the same time. - -Within each list element, nest one `label` element, and within each `label` element, nest one `input` element with the appropriate `type`. - -# --hints-- - -You should nest one `label` element within the first `li` element. - -```js -assert.exists(document.querySelectorAll('ul.answers-list > li')?.[0]?.querySelector('label')); -``` - -You should nest one `label` element within the second `li` element. - -```js -assert.exists(document.querySelectorAll('ul.answers-list > li')?.[1]?.querySelector('label')); -``` - -You should nest one `label` element within the third `li` element. - -```js -assert.exists(document.querySelectorAll('ul.answers-list > li')?.[2]?.querySelector('label')); -``` - -You should nest one `label` element within the fourth `li` element. - -```js -assert.exists(document.querySelectorAll('ul.answers-list > li')?.[3]?.querySelector('label')); -``` - -You should nest one `input` element within the first `label` element. - -```js -assert.exists(document.querySelectorAll('ul.answers-list > li')?.[0]?.querySelector('label')?.querySelector('input')); -``` - -You should nest one `input` element within the second `label` element. - -```js -assert.exists(document.querySelectorAll('ul.answers-list > li')?.[1]?.querySelector('label')?.querySelector('input')); -``` - -You should nest one `input` element within the third `label` element. - -```js -assert.exists(document.querySelectorAll('ul.answers-list > li')?.[2]?.querySelector('label')?.querySelector('input')); -``` - -You should nest one `input` element within the fourth `label` element. - -```js -assert.exists(document.querySelectorAll('ul.answers-list > li')?.[3]?.querySelector('label')?.querySelector('input')); -``` - -You should give the first `input` a `type` of `radio`. - -```js -assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.type, 'radio'); -``` - -You should give the second `input` a `type` of `radio`. - -```js -assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.type, 'radio'); -``` - -You should give the third `input` a `type` of `radio`. - -```js -assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.type, 'radio'); -``` - -You should give the fourth `input` a `type` of `radio`. - -```js -assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.type, 'radio'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - ---fcc-editable-region-- -
    -
  • -
  • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • -
  • -
---fcc-editable-region-- -
-
-
-
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-030.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-030.md deleted file mode 100644 index 3ea3aaa804..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-030.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -id: 6145e6eeaa66c605eb087fe9 -title: Part 30 -challengeType: 0 -dashedName: part-30 ---- - -# --description-- - -Although not required for `label` elements with a nested `input`, it is still best-practice to explicitly link a `label` with its corresponding `input` element. - -Link the `label` elements with their corresponding `input` elements. - -# --hints-- - -You should give the first `label` a `for` attribute matching the `id` of its `input` element. - -```js -const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[0]?.htmlFor; -assert.notEmpty(htmlFor); -assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.id); -``` - -You should give the second `label` a `for` attribute matching the `id` of its `input` element. - -```js -const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[1]?.htmlFor; -assert.notEmpty(htmlFor); -assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.id); -``` - -You should give the third `label` a `for` attribute matching the `id` of its `input` element. - -```js -const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[2]?.htmlFor; -assert.notEmpty(htmlFor); -assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.id); -``` - -You should give the fourth `label` a `for` attribute matching the `id` of its `input` element. - -```js -const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[3]?.htmlFor; -assert.notEmpty(htmlFor); -assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.id); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - ---fcc-editable-region-- -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
---fcc-editable-region-- -
-
-
-
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-031.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-031.md deleted file mode 100644 index 87880512a2..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-031.md +++ /dev/null @@ -1,287 +0,0 @@ ---- -id: 6145e8b5080a5f06bb0223d0 -title: Part 31 -challengeType: 0 -dashedName: part-31 ---- - -# --description-- - -Give the `label` elements text such that the `input` comes before the text. Then, give the `input` elements a `value` matching the text. - -The text should either be `True` or `False`. - -# --hints-- - -You should give the first `label` element text content. - -```js -assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim()); -``` - -You should give the second `label` element text content. - -```js -assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.textContent?.trim()); -``` - -You should give the third `label` element text content. - -```js -assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim()); -``` - -You should give the fourth `label` element text content. - -```js -assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.textContent?.trim()); -``` - -You should place the first `label` text content after the `input` element. - -```js -assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.innerHTML, />[\s\S]+[a-zA-Z]/); -``` - -You should place the second `label` text content after the `input` element. - -```js -assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.innerHTML, />[\s\S]+[a-zA-Z]/); -``` - -You should place the third `label` text content after the `input` element. - -```js -assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.innerHTML, />[\s\S]+[a-zA-Z]/); -``` - -You should place the fourth `label` text content after the `input` element. - -```js -assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.innerHTML, />[\s\S]+[a-zA-Z]/); -``` - -You should give the first `label` the text `True` or `False`. - -```js -assert.include(['True', 'False'], document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim()); -``` - -You should give the second `label` the text `True`. - -```js -const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim(); -assert(l(0) === 'False' ? l(1) === 'True' : true); -``` - -You should give the second `label` the text `False`. - -```js -const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim(); -assert(l(0) === 'True' ? l(1) === 'False' : true); -``` - -You should give the third `label` the text `True` or `False`. - -```js -assert.include(['True', 'False'], document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim()); -``` - -You should give the fourth `label` the text `True`. - -```js -const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim(); -assert(l(2) === 'False' ? l(3) === 'True' : true); -``` - -You should give the fourth `label` the text `False`. - -```js -const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim(); -assert(l(2) === 'True' ? l(3) === 'False' : true); -``` - -You should give the first `input` a `value` matching the `label` text content. - -```js -assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.value?.toLowerCase()); -``` - -You should give the second `input` a `value` matching the `label` text content. - -```js -assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.value?.toLowerCase()); -``` - -You should give the third `input` a `value` matching the `label` text content. - -```js -assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.value?.toLowerCase()); -``` - -You should give the fourth `input` a `value` matching the `label` text content. - -```js -assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.value?.toLowerCase()); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - ---fcc-editable-region-- -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
---fcc-editable-region-- -
-
-
-
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-032.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-032.md deleted file mode 100644 index 732fb9ff02..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-032.md +++ /dev/null @@ -1,224 +0,0 @@ ---- -id: 6145eb5f08a38a0786c7a80c -title: Part 32 -challengeType: 0 -dashedName: part-32 ---- - -# --description-- - -If you click on the radio inputs, you might notice both inputs within the same true/false fieldset can be selected at the same time. - -Group the relevant inputs together such that only one input from a pair can be selected at a time. - -# --hints-- - -You should give the first `input` a `name` attribute. - -```js -assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.name); -``` - -You should give the second `input` a `name` attribute. - -```js -assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.name); -``` - -You should give the third `input` a `name` attribute. - -```js -assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.name); -``` - -You should give the fourth `input` a `name` attribute. - -```js -assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.name); -``` - -You should give the second `input` a `name` attribute matching the `name` attribute of the first `input`. - -```js -const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name; -assert.equal(i(1), i(0)); -``` - -You should give the fourth `input` a `name` attribute matching the `name` attribute of the third `input`. - -```js -const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name; -assert.equal(i(3), i(2)); -``` - -You should give different `name` attributes to the first `input` and the third `input`. - -```js -const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name; -assert.notEqual(i(0), i(2)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - ---fcc-editable-region-- -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
---fcc-editable-region-- -
-
-
-
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-033.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-033.md deleted file mode 100644 index ebbaaaf085..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-033.md +++ /dev/null @@ -1,191 +0,0 @@ ---- -id: 6145ed1f22caab087630aaad -title: Part 33 -challengeType: 0 -dashedName: part-33 ---- - -# --description-- - -To prevent unnecessary repetition, target the `before` pseudo-element of the `p` element, and give it a `content` property of `Question #`. - -# --hints-- - -You should use the `p::before` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('p::before')); -``` - -You should give the `p::before` pseudo-element a `content` property of `Question #`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, 'Question #'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-034.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-034.md deleted file mode 100644 index 7636bc2ba1..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-034.md +++ /dev/null @@ -1,232 +0,0 @@ ---- -id: 6145ee65e2e1530938cb594d -title: Part 34 -challengeType: 0 -dashedName: part-34 ---- - -# --description-- - -The final section of this quiz will contain a dropdown, and a text box. - -Begin by nesting a `div` with a `class` of `formrow`, and nest four `div` elements inside of it, alternating their `class` attributes with `question-block` and `answer`. - -# --hints-- - -You should add one `div` element within the final `section`. - -```js -assert.exists(document.querySelector('section:nth-of-type(3) > div')); -``` - -You should give the first `div` a `class` of `formrow`. - -```js -assert.equal(document.querySelector('section:nth-of-type(3) > div')?.className, 'formrow'); -``` - -You should place `div.formrow` after the `h2` element. - -```js -assert.exists(document.querySelector('section:nth-of-type(3) > h2 + div.formrow')); -``` - -You should nest four `div` elements inside `div.formrow`. - -```js -assert.equal(document.querySelectorAll('section:nth-of-type(3) > div.formrow > div')?.length, 4); -``` - -You should give the first nested `div` a `class` of `question-block`. - -```js -assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(1)')?.className, 'question-block'); -``` - -You should give the second nested `div` a `class` of `answer`. - -```js -assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(2)')?.className, 'answer'); -``` - -You should give the third nested `div` a `class` of `question-block`. - -```js -assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(3)')?.className, 'question-block'); -``` - -You should give the fourth nested `div` a `class` of `answer`. - -```js -assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(4)')?.className, 'answer'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
---fcc-editable-region-- -
-

CSS

- -
---fcc-editable-region-- -
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-035.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-035.md deleted file mode 100644 index fcfdfed5b8..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-035.md +++ /dev/null @@ -1,215 +0,0 @@ ---- -id: 6145f02240ff8f09f7ec913c -title: Part 35 -challengeType: 0 -dashedName: part-35 ---- - -# --description-- - -Within the `div.question-block` elements, nest one `label` element, and give the `label` elements text content - -# --hints-- - -You should nest one `label` element within the first `div.question-block` element. - -```js -assert.exists(document.querySelectorAll('.formrow > .question-block')?.[0]?.querySelector('label')); -``` - -You should nest one `label` element within the second `div.question-block` element. - -```js -assert.exists(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')); -``` - -You should give the first `label` element text content. - -```js -assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[0]?.querySelector('label')?.textContent?.length, 1); -``` - -You should give the second `label` element text content. - -```js -assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.textContent?.length, 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
---fcc-editable-region-- -
-

CSS

-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-036.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-036.md deleted file mode 100644 index 452f1845c7..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-036.md +++ /dev/null @@ -1,250 +0,0 @@ ---- -id: 6145f14f019a4b0adb94b051 -title: Part 36 -challengeType: 0 -dashedName: part-36 ---- - -# --description-- - -Within the first `div.answer` element, nest one required `select` element with three `option` elements. - -Give the first `option` element a `value` of `""`, and the text `Select an option`. Give the second `option` element a `value` of `yes`, and the text `Yes`. Give the third `option` element a `value` of `no`, and the text `No`. - -# --hints-- - -You should nest one `select` element within the first `div.answer` element. - -```js -assert.exists(document.querySelector('div.answer > select')); -``` - -You should nest three `option` elements within the `select` element. - -```js -assert.equal(document.querySelectorAll('div.answer > select > option')?.length, 3); -``` - -You should give the first `option` element a `value` of `""`. - -```js -assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')?.value, ''); -``` - -You should give the first `option` element a text content of `Select an option`. - -```js -assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')?.textContent, 'Select an option'); -``` - -You should give the second `option` element a `value` of `yes`. - -```js -assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')?.value, 'yes'); -``` - -You should give the second `option` element a text content of `Yes`. - -```js -assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')?.textContent, 'Yes'); -``` - -You should give the third `option` element a `value` of `no`. - -```js -assert.equal(document.querySelector('div.answer > select > option:nth-child(3)')?.value, 'no'); -``` - -You should give the third `option` element a text content of `No`. - -```js -assert.equal(document.querySelector('div.answer > select > option:nth-child(3)')?.textContent, 'No'); -``` - -You should give the `select` an attribute of `required`. - -```js -assert.isTrue(document.querySelector('div.answer > select')?.required); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
---fcc-editable-region-- -
- -
---fcc-editable-region-- -
- -
-
-
-
-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-037.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-037.md deleted file mode 100644 index ebbe661457..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-037.md +++ /dev/null @@ -1,222 +0,0 @@ ---- -id: 6145f3a5cd9be60b9459cdd6 -title: Part 37 -challengeType: 0 -dashedName: part-37 ---- - -# --description-- - -Link the first `label` element to the `select` element, and give the `select` element a `name` attribute. - -# --hints-- - -You should give the `label` element a `for` attribute. - -```js -assert.notEmpty(document.querySelector('.question-block > label')?.htmlFor); -``` - -You should give the `select` element an `id` attribute. - -```js -assert.notEmpty(document.querySelector('.answer > select')?.id); -``` - -You should give the `select` element an `id` matching the `for` attribute of the `label` element. - -```js -assert.equal(document.querySelector('.answer > select')?.id, document.querySelector('.question-block > label')?.htmlFor); -``` - -You should give the `select` element a `name` attribute. - -```js -assert.notEmpty(document.querySelector('.answer > select')?.name); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
---fcc-editable-region-- -
- -
-
- -
---fcc-editable-region-- -
- -
-
-
-
-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-038.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-038.md deleted file mode 100644 index f837230bec..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-038.md +++ /dev/null @@ -1,229 +0,0 @@ ---- -id: 6145f47393fbe70c4d885f9c -title: Part 38 -challengeType: 0 -dashedName: part-38 ---- - -# --description-- - -Nest one `textarea` element within the second `div.answer` element, and set the number of rows and columns it has. - -Then, give the `textarea` placeholder text describing an example answer. - -# --hints-- - -You should nest one `textarea` element within the second `div.answer` element. - -```js -assert.exists(document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')); -``` - -You should give the `textarea` a `rows` attribute with a number. - -```js -const rows = document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.getAttribute('rows'); -assert.notEmpty(rows); -assert.isNotNaN(Number(rows)); -``` - -You should give the `textarea` a `cols` attribute with a number. - -```js -const cols = document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.getAttribute('cols'); -assert.notEmpty(cols); -assert.isNotNaN(Number(cols)); -``` - -You should give the `textarea` placeholder text describing an example answer. - -```js -assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.textContent); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
---fcc-editable-region-- -
- -
---fcc-editable-region-- -
-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-039.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-039.md deleted file mode 100644 index 0c979b0263..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-039.md +++ /dev/null @@ -1,219 +0,0 @@ ---- -id: 6145f59029474c0d3dc1c8b8 -title: Part 39 -challengeType: 0 -dashedName: part-39 ---- - -# --description-- - -As with the other input elements and `labels`, link the `textarea` to its corresponding `label` element, and give it a `name` attribute. - -# --hints-- - -You should give the `label` element a `for` attribute. - -```js -assert.notEmpty(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.htmlFor); -``` - -You should give the `textarea` element an `id` attribute matching the `for` attribute of the `label` element. - -```js -assert.equal(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.htmlFor, document.querySelectorAll('.answer')?.[1]?.querySelector('textarea')?.id); -``` - -You should give the `textarea` element a `name` attribute. - -```js -assert.notEmpty(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea')?.name); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
---fcc-editable-region-- -
- -
-
- -
---fcc-editable-region-- -
-
-
-
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-040.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-040.md deleted file mode 100644 index bf88727e7c..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-040.md +++ /dev/null @@ -1,232 +0,0 @@ ---- -id: 6145f685797bd30df9784e8c -title: Part 40 -challengeType: 0 -dashedName: part-40 ---- - -# --description-- - -Do not forget to give your `form` a submit button. - -# --hints-- - -You should add either a `button` or `input` element. - -```js -assert.exists(document.querySelector('button') || document.querySelector('main > input') || document.querySelector('form > input')); -``` - -You should place the submit within the `form` element. - -```js -assert.exists(document.querySelector('form > button') || document.querySelector('form > input')); -``` - -You should place the submit after the last `section` element. - -```js -assert.exists(document.querySelector('section:last-of-type + button') || document.querySelector('section:last-of-type + input')); -``` - -You should give the submit a `type` of `submit`. - -```js -assert.exists(document.querySelector('button[type="submit"]') || document.querySelector('form > input[type="submit"]')); -``` - -The submit should display the text `Submit`. - -```js -assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? document.querySelector('input[type="submit"]')?.value, 'Submit'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
---fcc-editable-region-- -
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
---fcc-editable-region-- -
- - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-041.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-041.md deleted file mode 100644 index 4dc442eceb..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-041.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 6145f829ac6a920ebf5797d7 -title: Part 41 -challengeType: 0 -dashedName: part-41 ---- - -# --description-- - -Two final semantic HTML elements for this project are the `footer` and `address` elements. The `footer` element is a container for a collection of content that is related to the page, and the `address` element is a container for contact information for the author of the page. - -After the `main` element, add one `footer` element, and nest one `address` element within it. - -# --hints-- - -You should add one `footer` element after the `main` element. - -```js -assert.exists(document.querySelector('main + footer')); -``` - -You should nest one `address` element within the `footer` element. - -```js -assert.exists(document.querySelector('footer > address')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
---fcc-editable-region-- - ---fcc-editable-region-- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-042.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-042.md deleted file mode 100644 index d0854a8a61..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-042.md +++ /dev/null @@ -1,222 +0,0 @@ ---- -id: 6145f8f8bcd4370f6509078e -title: Part 42 -challengeType: 0 -dashedName: part-42 ---- - -# --description-- - -Within the `address` element, add the following: - -```html -freeCodeCamp
-San Francisco
-California
-USA -``` - -You can visit, but you might not find anything... - -# --hints-- - -You should add the above text including the `
` tags to the `address` element. - -```js -assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Francisco\nCalifornia\nUSA'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
---fcc-editable-region-- -
-
- -
-
---fcc-editable-region-- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-043.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-043.md deleted file mode 100644 index fdce07e174..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-043.md +++ /dev/null @@ -1,231 +0,0 @@ ---- -id: 6145fb5018cb5b100cb2a88c -title: Part 43 -challengeType: 0 -dashedName: part-43 ---- - -# --description-- - -The `address` element does not have to contain a physical geographical location. It can be used to provide a link to the subject. - -Wrap a link around the text `freeCodeCamp`, and set its location to `https://freecodecamp.org`. - -# --hints-- - -You should add an `a` element. - -```js -assert.exists(document.querySelector('address > a')); -``` - -You should give the `a` element a `href` attribute of `https://freecodecamp.org`. - -```js -assert.equal(document.querySelector('address > a')?.getAttribute('href'), 'https://freecodecamp.org'); -``` - -You should wrap the `a` element around the existing text `freeCodeCamp`. - -```js -assert.equal(document.querySelector('address > a')?.innerHTML, 'freeCodeCamp'); -assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g)?.length, 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
---fcc-editable-region-- -
-
- freeCodeCamp
- San Francisco
- California
- USA -
-
---fcc-editable-region-- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-044.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-044.md deleted file mode 100644 index 78b4c7dd90..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-044.md +++ /dev/null @@ -1,258 +0,0 @@ ---- -id: 6145fc3707fc3310c277f5c8 -title: Part 44 -challengeType: 0 -dashedName: part-44 ---- - -# --description-- - -Back to styling the page. Select the list elements within the navigation bar, and give them the following styles: - -```css -color: #dfdfe2; -margin: 0 0.2rem; -padding: 0.2rem; -display: block; -``` - -# --hints-- - -You should use either the `nav li` or `nav > ul > li` selector. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -assert.exists(gs('nav li') || gs('nav > ul > li')); -``` - -You should give the `li` elements a `color` of `#dfdfe2`. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -const color = gs('nav li')?.color ?? gs('nav > ul > li')?.color; -assert.equal(color, 'rgb(223, 223, 226)'); -``` - -You should give the `li` elements a `margin` of `0 0.2rem`. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -const margin = gs('nav li')?.margin ?? gs('nav > ul > li')?.margin; -assert.equal(margin, '0px 0.2rem'); -``` - -You should give the `li` elements a `padding` of `0.2rem`. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -const padding = gs('nav li')?.padding ?? gs('nav > ul > li')?.padding; -assert.equal(padding, '0.2rem'); -``` - -You should give the `li` elements a `display` of `block`. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -const display = gs('nav li')?.display ?? gs('nav > ul > li')?.display; -assert.equal(display, 'block'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-045.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-045.md deleted file mode 100644 index 56b73b63f1..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-045.md +++ /dev/null @@ -1,262 +0,0 @@ ---- -id: 614796cb8086be482d60e0ac -title: Part 45 -challengeType: 0 -dashedName: part-45 ---- - -# --description-- - -On the topic of visual accessibility, contrast between elements is a key factor. For example, the contrast between the text and the background of a heading should be at least 4.5:1. - -Change the font color of all the anchor elements within list elements to something with a contrast ratio of at least 7:1. - -# --hints-- - -You should use the `li > a` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('li > a')); -``` - -You should give the `a` element a `color` property. - -```js -assert.notEmpty(new __helpers.CSSHelp(document).getStyle('li > a')?.color); -``` - -You should give the `color` property a contrast with the background of at least 7:1. _Hint: I would use `#dfdfe2`_ - -```js -function luminance(r, g, b) { - const a = [r, g, b].map((v) => { - v /= 255; - return v <= 0.03928 ? v / 12.92 : Math.pow( (v + 0.055) / 1.055, 2.4 ); - }); - return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722; -} -function contrast(rgb1, rgb2) { - const lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]); - const lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]); - const brightest = Math.max(lum1, lum2); - const darkest = Math.min(lum1, lum2); - return (brightest + 0.05) - / (darkest + 0.05); -} -const backgroundColour = [27, 27, 50]; - -for (let elem of document.querySelectorAll('li > a')) { - const a = getComputedStyle(elem)?.color; - const rgbA = a?.match(/(\d+),\s(\d+),\s(\d+)/); - const aColour = [rgbA[1], rgbA[2], rgbA[3]]; - assert.isAtLeast(contrast(backgroundColour, aColour), 7); -} -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-046.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-046.md deleted file mode 100644 index 2ea7901d9e..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-046.md +++ /dev/null @@ -1,262 +0,0 @@ ---- -id: 6147a14ef5668b5881ef2297 -title: Part 46 -challengeType: 0 -dashedName: part-46 ---- - -# --description-- - -To make the navigation buttons look more like typical buttons, remove the underline from the anchor tags. - -Then, create a new selector targetting the navigation list elements so that when the cursor hovers over them, the background color and text color are switched, and the cursor becomes a pointer. - -# --hints-- - -You should use the existing `li > a` selector to set the `text-decoration` to `none`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('li > a')?.textDecoration, 'none'); -``` - -You should use either the `nav > ul > li:hover` or `nav li:hover` selector to style the elements on hover. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -assert.exists(gs('nav > ul > li:hover') || gs('nav li:hover')); -``` - -You should give hovered `li` elements a `background-color` of `#dfdfe2`. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -const bgColor = gs('nav > ul > li:hover')?.backgroundColor ?? gs('nav li:hover')?.backgroundColor; -assert.equal(bgColor, 'rgb(223, 223, 226)'); -``` - -You should give hovered `li` elements a `color` of `#1b1b32`. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -const color = gs('nav > ul > li:hover')?.color ?? gs('nav li:hover')?.color; -assert.equal(color, 'rgb(27, 27, 50)'); -``` - -You should give hovered `li` elements a `cursor` of `pointer`. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -const cursor = gs('nav > ul > li:hover')?.cursor ?? gs('nav li:hover')?.cursor; -assert.equal(cursor, 'pointer'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - ---fcc-editable-region-- - - -li > a { - color: inherit; -} ---fcc-editable-region-- - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-047.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-047.md deleted file mode 100644 index 79ffd7b6e9..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-047.md +++ /dev/null @@ -1,255 +0,0 @@ ---- -id: 614878f7a412310647873015 -title: Part 47 -challengeType: 0 -dashedName: part-47 ---- - -# --description-- - -Tidy up the `header`, by using _Flexbox_ to put space between the children, and vertically center them. - -Then, fix the `header` to the top of the viewport. - -# --hints-- - -You should give the `header` a `justify-content` of `space-between`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.justifyContent, 'space-between'); -``` - -You should give the `header` an `align-items` of `center`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.alignItems, 'center'); -``` - -You should give the `header` a `position` of `fixed`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.position, 'fixed'); -``` - -You should give the `header` a `top` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - ---fcc-editable-region-- -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - -} ---fcc-editable-region-- - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-048.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-048.md deleted file mode 100644 index a71298ca20..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-048.md +++ /dev/null @@ -1,263 +0,0 @@ ---- -id: 61487b77d4a37707073a64e5 -title: Part 48 -challengeType: 0 -dashedName: part-48 ---- - -# --description-- - -When the screen width is small, the `h1` does not wrap its text content how it should. Center align the text for the `h1`. - -Then, give the `main` padding such that the `Student Info` section header can be fully seen. - -# --hints-- - -You should give the `h1` a `text-align` of `center`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign, 'center'); -``` - -You should add a `main` selector to target the `main` element. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('main')); -``` - -You should give the `main` a `padding-top` of at least `25px`. - -```js -assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('main')?.paddingTop?.replace(/\D+/, '')), 25); -``` - -You should only change the `padding-top` value. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingBottom); -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingLeft); -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - ---fcc-editable-region-- -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - -} - - ---fcc-editable-region-- - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-049.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-049.md deleted file mode 100644 index fea95a0c91..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-049.md +++ /dev/null @@ -1,277 +0,0 @@ ---- -id: 61487da611a65307e78d2c20 -title: Part 49 -challengeType: 0 -dashedName: part-49 ---- - -# --description-- - -On small screens, the unordered list in the navigation bar overflows the right side of the screen. - -Fix this by using _Flexbox_ to wrap the `ul` content. Then, set the following CSS properties to correctly align the text: - -```css -align-items: center; -padding-inline-start: 0; -margin-block: 0; -height: 100%; -``` - -# --hints-- - -You should give the `ul` a `flex-wrap` of `wrap`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.flexWrap, 'wrap'); -``` - -You should give the `ul` an `align-items` of `center`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.alignItems, 'center'); -``` - -You should give the `ul` a `padding-inline-start` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.paddingInlineStart, '0px'); -``` - -You should give the `ul` a `margin-block` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.marginBlock, '0px'); -``` - -You should give the `ul` a `height` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - ---fcc-editable-region-- -nav > ul { - display: flex; - justify-content: space-evenly; - -} ---fcc-editable-region-- - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-050.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-050.md deleted file mode 100644 index 2454f15d08..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-050.md +++ /dev/null @@ -1,289 +0,0 @@ ---- -id: 61487f703571b60899055cf9 -title: Part 50 -challengeType: 0 -dashedName: part-50 ---- - -# --description-- - -Set the width of the `section` elements to `80%` of their parent container. Then, use margins to center the `section` elements, adding `10px` to the bottom margin. - -Also, ensure the `section` elements cannot be larger than `600px` in width. - -# --hints-- - -You should use a `section` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('section')); -``` - -You should give the `section` a `width` of `80%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.width, '80%'); -``` - -You should give the `section` a `margin-top` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginTop, '0px'); -``` - -You should give the `section` a `margin-right` of `auto`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginRight, 'auto'); -``` - -You should give the `section` a `margin-bottom` of `10px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginBottom, '10px'); -``` - -You should give the `section` a `margin-left` of `auto`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginLeft, 'auto'); -``` - -You should give the `section` a `max-width` of `600px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - ---fcc-editable-region-- - - ---fcc-editable-region-- - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; -} - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-051.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-051.md deleted file mode 100644 index ee72cd58b4..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-051.md +++ /dev/null @@ -1,261 +0,0 @@ ---- -id: 614880dc16070e093e29bc56 -title: Part 51 -challengeType: 0 -dashedName: part-51 ---- - -# --description-- - -Replace the top margin of the `h2` elements with `60px` of top padding. - -# --hints-- - -You should give the `h2` a `margin-top` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.marginTop, '0px'); -``` - -You should give the `h2` a `padding-top` of `60px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - ---fcc-editable-region-- -h2 { - border-bottom: 4px solid #dfdfe2; - -} ---fcc-editable-region-- - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-052.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-052.md deleted file mode 100644 index c32cc06883..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-052.md +++ /dev/null @@ -1,282 +0,0 @@ ---- -id: 614883b6fa720e09fb167de9 -title: Part 52 -challengeType: 0 -dashedName: part-52 ---- - -# --description-- - -Add padding to the top and left of the `.info` elements, and set the other values to `0`. - -# --hints-- - -You should use the `.info` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.info')); -``` - -You should give `.info` a `padding-top` of at least `1px`. - -```js -assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddingTop?.replace(/\D+/, '')), 1); -``` - -You should give `.info` a `padding-right` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.info')?.paddingRight, '0px'); -``` - -You should give `.info` a `padding-bottom` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.info')?.paddingBottom, '0px'); -``` - -You should give `.info` a `padding-left` of at least `1px`. - -```js -assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddingLeft?.replace(/\D+/, '')), 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-053.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-053.md deleted file mode 100644 index 3a03408515..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-053.md +++ /dev/null @@ -1,366 +0,0 @@ ---- -id: 614884c1f5d6f30ab3d78cde -title: Part 53 -challengeType: 0 -dashedName: part-53 ---- - -# --description-- - -Give the `.formrow` elements top margin, and left and right padding. The other padding values should be `0`. - -Then, increase the font size for all `input` elements. - -# --hints-- - -You should use a `.formrow` selector to target the `.formrow` elements. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.formrow')); -``` - -You should give the `.formrow` a `margin-top` of at least `1px`. - -```js -const val = new __helpers.CSSHelp(document).getStyle('.formrow')?.marginTop; -let valInPx = 0; -if (/^\d+rem$/.test(val)) { - valInPx = remToPx(Number(val.replace('rem', ''))); -} else if (/^\d+em$/.test(val)) { - valInPx = emToPx(Number(val.replace('em', ''))); -} else { - valInPx = Number(val?.replace('px', '')); -} -function emToPx(em) { - return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize); -} -function remToPx(rem) { - return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize); -} -assert.isAtLeast(valInPx, 1); -``` - -You should give the `.formrow` a `padding-top` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingTop, '0px'); -``` - -You should give the `.formrow` a `padding-right` of at least `1px`. - -```js -const val = new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingRight; -let valInPx = 0; -if (/^\d+rem$/.test(val)) { - valInPx = remToPx(Number(val.replace('rem', ''))); -} else if (/^\d+em$/.test(val)) { - valInPx = emToPx(Number(val.replace('em', ''))); -} else { - valInPx = Number(val?.replace('px', '')); -} -function emToPx(em) { - return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize); -} -function remToPx(rem) { - return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize); -} -assert.isAtLeast(valInPx, 1); -``` - -You should give the `.formrow` a `padding-bottom` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingBottom, '0px'); -``` - -You should give the `.formrow` a `padding-left` of at least `1px`. - -```js -const val = new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingLeft; -let valInPx = 0; -if (/^\d+rem$/.test(val)) { - valInPx = remToPx(Number(val.replace('rem', ''))); -} else if (/^\d+em$/.test(val)) { - valInPx = emToPx(Number(val.replace('em', ''))); -} else { - valInPx = Number(val?.replace('px', '')); -} -function emToPx(em) { - return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize); -} -function remToPx(rem) { - return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize); -} -assert.isAtLeast(valInPx, 1); -``` - -You should use an `input` selector to target the `input` elements. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('input')); -``` - -You should give the `input` a `font-size` greater than `13px`. - -```js -const val = new __helpers.CSSHelp(document).getStyle('input')?.fontSize; -let valInPx = 0; -if (/^\d+rem$/.test(val)) { - valInPx = remToPx(Number(val.replace('rem', ''))); -} else if (/^\d+em$/.test(val)) { - valInPx = emToPx(Number(val.replace('em', ''))); -} else { - valInPx = Number(val?.replace('px', '')); -} -function emToPx(em) { - return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize); -} -function remToPx(rem) { - return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize); -} -assert.isAtLeast(valInPx, 13); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-054.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-054.md deleted file mode 100644 index 67f42d055b..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-054.md +++ /dev/null @@ -1,288 +0,0 @@ ---- -id: 61488ecfd05e290b5712e6da -title: Part 54 -challengeType: 0 -dashedName: part-54 ---- - -# --description-- - -To make the first section look more inline, target only the `input` elements within `.info` elements, and set their `width` to `50%`, and left-align their text. - -# --hints-- - -You should use either the `.info input` or `.info > input` selector. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -assert.exists(gs('.info input') || gs('.info > input')); -``` - -You should give the `input` elements a `width` of `50%`. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.width; -const width = gs('.info input') ?? gs('.info > input'); -assert.equal(width, '50%'); -``` - -You should give the `input` elements a `text-align` of `left`. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.textAlign; -const textAlign = gs('.info input') ?? gs('.info > input'); -assert.equal(textAlign, 'left'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 16px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-055.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-055.md deleted file mode 100644 index ef74fcd05b..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-055.md +++ /dev/null @@ -1,293 +0,0 @@ ---- -id: 6148d99cdc7acd0c519862cb -title: Part 55 -challengeType: 0 -dashedName: part-55 ---- - -# --description-- - -Target all `label` elements within `.info` elements, and set their `width` to `10%`, and make it so they do not take up less than `55px`. - -# --hints-- - -You should use either the `.info label` or `.info > label` selector. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -assert.exists(gs('.info label') || gs('.info > label')); -``` - -You should give the `label` elements a `width` of `10%`. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.width; -const width = gs('.info label') || gs('.info > label'); -assert.equal(width, '10%'); -``` - -You should give the `label` elements a `min-width` of `55px`. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.minWidth; -const minWidth = gs('.info label') || gs('.info > label'); -assert.equal(minWidth, '55px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 16px; -} - ---fcc-editable-region-- -.info input { - width: 50%; - text-align: left; -} - - ---fcc-editable-region-- - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-056.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-056.md deleted file mode 100644 index 8fa44c6644..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-056.md +++ /dev/null @@ -1,308 +0,0 @@ ---- -id: 6148da157cc0bd0d06df5c0a -title: Part 56 -challengeType: 0 -dashedName: part-56 ---- - -# --description-- - -To align the `input` boxes with each other, set the `display` property to `inline-block` for all `input` and `label` elements within `.info` elements. - -Also, align the text to the right. - -# --hints-- - -You should use either a `.info > label, .info > input` or `.info label, .info input` selector. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -assert.exists(gs('.info > label, .info > input') || gs('.info label, .info input') || gs('.info > input, .info > label') || gs('.info input, .info label')); -``` - -You should give the `input` and `label` elements a `display` of `inline-block`. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.display; -const display = gs('.info > label, .info > input') ?? gs('.info label, .info input') ?? gs('.info > input, .info > label') ?? gs('.info input, .info label'); -assert.equal(display, 'inline-block'); -``` - -You should give the `input` and `label` elements a `text-align` of `right`. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.textAlign; -const textAlign = gs('.info > label, .info > input') ?? gs('.info label, .info input') ?? gs('.info > input, .info > label') ?? gs('.info input, .info label'); -assert.equal(textAlign, 'right'); -``` - -You should set the `text-align: right` property before the `.info input` rule. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyleRule(s); -assert(gs('.info input').isDeclaredAfter('.info label, .info input') || gs('.info input').isDeclaredAfter('.info > label, .info > input') || gs('.info input').isDeclaredAfter('.info > input, .info > label') || gs('.info input').isDeclaredAfter('.info input, .info label')); - -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 16px; -} - ---fcc-editable-region-- - - -.info input { - width: 50%; - text-align: left; -} - -.info label { - width: 10%; - min-width: 55px; -} ---fcc-editable-region-- - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-057.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-057.md deleted file mode 100644 index 1aa7536038..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-057.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: 6148dc095264000dce348bf5 -title: Part 57 -challengeType: 0 -dashedName: part-57 ---- - -# --description-- - -To neaten the `.question-block` elements, set the following CSS properties: - -```css -text-align: left; -display: block; -width: 100%; -margin-top: 20px; -padding-top: 5px; -``` - -# --hints-- - -You should use the `.question-block` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.question-block')); -``` - -You should give the `.question-block` element a `display` of `block`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.display, 'block'); -``` - -You should give the `.question-block` element a `width` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.width, '100%'); -``` - -You should give the `.question-block` element a `margin-top` of `20px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.marginTop, '20px'); -``` - -You should give the `.question-block` element a `padding-top` of `5px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.paddingTop, '5px'); -``` - -You should give the `.question-block` element a `text-align` of `left`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAlign, 'left'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 16px; -} - -.info label, .info input { - display: inline-block; - text-align: right; -} - -.info input { - width: 50%; - text-align: left; -} - -.info label { - width: 10%; - min-width: 55px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-058.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-058.md deleted file mode 100644 index b636cd2ce0..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-058.md +++ /dev/null @@ -1,318 +0,0 @@ ---- -id: 6148dcaaf2e8750e6cb4501a -title: Part 58 -challengeType: 0 -dashedName: part-58 ---- - -# --description-- - -Make the paragraph elements appear as a higher priority, with the following CSS properties: - -```css -margin-top: 5px; -padding-left: 15px; -font-size: 20px; -``` - -# --hints-- - -You should use the `p` element selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('p')); -``` - -You should give the `p` element a `margin-top` of `5px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.marginTop, '5px'); -``` - -You should give the `p` element a `padding-left` of `15px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.paddingLeft, '15px'); -``` - -You should give the `p` element a `font-size` of `20px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 16px; -} - -.info label, .info input { - display: inline-block; - text-align: right; -} - -.info input { - width: 50%; - text-align: left; -} - -.info label { - width: 10%; - min-width: 55px; -} - -.question-block { - text-align: left; - display: block; - width: 100%; - margin-top: 20px; - padding-top: 5px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -p::before { - content: "Question #"; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-059.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-059.md deleted file mode 100644 index 83ace40170..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-059.md +++ /dev/null @@ -1,314 +0,0 @@ ---- -id: 6148dd31d210990f0fb140f8 -title: Part 59 -challengeType: 0 -dashedName: part-59 ---- - -# --description-- - -It is useful to see the default border around the `fieldset` elements, during development. However, it might not be the style you want. - -Remove the border and bottom padding on the `.question` elements. - -# --hints-- - -You should use the `.question` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.question')); -``` - -You should give the `.question` a `border` of `none`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.border, 'none'); -``` - -You should give the `.question` a `padding-bottom` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBottom, '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 16px; -} - -.info label, .info input { - display: inline-block; - text-align: right; -} - -.info input { - width: 50%; - text-align: left; -} - -.info label { - width: 10%; - min-width: 55px; -} - -.question-block { - text-align: left; - display: block; - width: 100%; - margin-top: 20px; - padding-top: 5px; -} - -p { - margin-top: 5px; - padding-left: 15px; - font-size: 20px; -} - -p::before { - content: "Question #"; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-060.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-060.md deleted file mode 100644 index d9d4b4bc05..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-060.md +++ /dev/null @@ -1,317 +0,0 @@ ---- -id: 6148defa9c01520fb9d178a0 -title: Part 60 -challengeType: 0 -dashedName: part-60 ---- - -# --description-- - -Remove the default styling for the list items of `.answers-list`, and remove the unordered list padding. - -# --hints-- - -You should use the `.answers-list` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.answers-list')); -``` - -You should give `.answers-list` a `list-style` of `none`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.listStyle, 'none'); -``` - -You should give `.answers-list` a `padding` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding, '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 16px; -} - -.info label, .info input { - display: inline-block; - text-align: right; -} - -.info input { - width: 50%; - text-align: left; -} - -.info label { - width: 10%; - min-width: 55px; -} - -.question-block { - text-align: left; - display: block; - width: 100%; - margin-top: 20px; - padding-top: 5px; -} - -p { - margin-top: 5px; - padding-left: 15px; - font-size: 20px; -} - -p::before { - content: "Question #"; -} - -.question { - border: none; - padding-bottom: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-061.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-061.md deleted file mode 100644 index b916266765..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-061.md +++ /dev/null @@ -1,362 +0,0 @@ ---- -id: 6148dfab9b54c110577de165 -title: Part 61 -challengeType: 0 -dashedName: part-61 ---- - -# --description-- - -Give the submit button a freeCodeCamp-style design, with the following CSS properties: - -```css -display: block; -margin: 40px auto; -width: 40%; -padding: 15px; -font-size: 23px; -background: #d0d0d5; -border: 3px solid #3b3b4f; -``` - -# --hints-- - -You should use the `button` element selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('button')); -``` - -You should give `button` a `display` of `block`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.display, 'block'); -``` - -You should give `button` a `margin` of `40px auto`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.margin, '40px auto'); -``` - -You should give `button` a `width` of `40%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.width, '40%'); -``` - -You should give `button` a `padding` of `15px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.padding, '15px'); -``` - -You should give `button` a `font-size` of `23px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.fontSize, '23px'); -``` - -You should give `button` a `background` of `#d0d0d5`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.background, 'rgb(208, 208, 213)'); -``` - -You should give `button` a `border` of `3px solid #3b3b4f`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px solid rgb(59, 59, 79)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 16px; -} - -.info label, .info input { - display: inline-block; - text-align: right; -} - -.info input { - width: 50%; - text-align: left; -} - -.info label { - width: 10%; - min-width: 55px; -} - -.question-block { - text-align: left; - display: block; - width: 100%; - margin-top: 20px; - padding-top: 5px; -} - -p { - margin-top: 5px; - padding-left: 15px; - font-size: 20px; -} - -p::before { - content: "Question #"; -} - -.question { - border: none; - padding-bottom: 0; -} - -.answers-list { - list-style: none; - padding: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-062.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-062.md deleted file mode 100644 index 22b6115c0c..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-062.md +++ /dev/null @@ -1,338 +0,0 @@ ---- -id: 6148e0bcc13efd10f7d7a6a9 -title: Part 62 -challengeType: 0 -dashedName: part-62 ---- - -# --description-- - -Set the `footer` background color to `#2a2a40`, and use _Flexbox_ to horizontally center the text. - -# --hints-- - -You should use the `footer` element selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('footer')); -``` - -You should give `footer` a `background-color` of `#2a2a40`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.backgroundColor, 'rgb(42, 42, 64)'); -``` - -You should give `footer` a `display` of `flex`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.display, 'flex'); -``` - -You should give `footer` a `justify-content` of `center`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent, 'center'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 16px; -} - -.info label, .info input { - display: inline-block; - text-align: right; -} - -.info input { - width: 50%; - text-align: left; -} - -.info label { - width: 10%; - min-width: 55px; -} - -.question-block { - text-align: left; - display: block; - width: 100%; - margin-top: 20px; - padding-top: 5px; -} - -p { - margin-top: 5px; - padding-left: 15px; - font-size: 20px; -} - -p::before { - content: "Question #"; -} - -.question { - border: none; - padding-bottom: 0; -} - -.answers-list { - list-style: none; - padding: 0; -} - -button { - display: block; - margin: 40px auto; - width: 40%; - padding: 15px; - font-size: 23px; - background: #d0d0d5; - border: 3px solid #3b3b4f; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-063.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-063.md deleted file mode 100644 index 69e2ab5fba..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-063.md +++ /dev/null @@ -1,358 +0,0 @@ ---- -id: 6148e161ecec9511941f8833 -title: Part 63 -challengeType: 0 -dashedName: part-63 ---- - -# --description-- - -Now, we cannot read the text. Target the `footer` and the anchor element within to set the font color to a color of adequate contrast ratio. - -# --hints-- - -You should use the `footer, footer a` selector. - -```js -const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); -assert.exists(gs('footer, footer a') || gs('footer a, footer')); -``` - -You should set the `color` to a value with a contrast ratio of at least `7:1`. _Hint: I suggest `#dfdfe2`_ - -```js -function luminance(r, g, b) { - const a = [r, g, b].map((v) => { - v /= 255; - return v <= 0.03928 ? v / 12.92 : Math.pow( (v + 0.055) / 1.055, 2.4 ); - }); - return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722; -} -function contrast(rgb1, rgb2) { - const lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]); - const lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]); - const brightest = Math.max(lum1, lum2); - const darkest = Math.min(lum1, lum2); - return (brightest + 0.05) - / (darkest + 0.05); -} -const backgroundColour = [42, 42, 64]; - -const foot = getComputedStyle(document.querySelector('footer'))?.color; -const a = getComputedStyle(document.querySelector('footer a'))?.color; - -const rgbFoot = foot?.match(/(\d+),\s(\d+),\s(\d+)/); -const rgbA = a?.match(/(\d+),\s(\d+),\s(\d+)/); -const footColour = [rgbFoot[1], rgbFoot[2], rgbFoot[3]]; -const aColour = [rgbA[1], rgbA[2], rgbA[3]]; -assert.isAtLeast(contrast(backgroundColour, footColour), 7); -assert.isAtLeast(contrast(backgroundColour, aColour), 7); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 16px; -} - -.info label, .info input { - display: inline-block; - text-align: right; -} - -.info input { - width: 50%; - text-align: left; -} - -.info label { - width: 10%; - min-width: 55px; -} - -.question-block { - text-align: left; - display: block; - width: 100%; - margin-top: 20px; - padding-top: 5px; -} - -p { - margin-top: 5px; - padding-left: 15px; - font-size: 20px; -} - -p::before { - content: "Question #"; -} - -.question { - border: none; - padding-bottom: 0; -} - -.answers-list { - list-style: none; - padding: 0; -} - -button { - display: block; - margin: 40px auto; - width: 40%; - padding: 15px; - font-size: 23px; - background: #d0d0d5; - border: 3px solid #3b3b4f; -} - -footer { - background-color: #2a2a40; - display: flex; - justify-content: center; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-064.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-064.md deleted file mode 100644 index 04de93aa8d..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-064.md +++ /dev/null @@ -1,361 +0,0 @@ ---- -id: 6148e28706b34912340fd042 -title: Part 64 -challengeType: 0 -dashedName: part-64 ---- - -# --description-- - -Horizontally center all the text within the `address` element, and add some padding. - -# --hints-- - -You should use the `address` element selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('address')); -``` - -You should give `address` a `text-align` of `center`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('address')?.textAlign, 'center'); -``` - -You should give `address` a `padding-top` of at least `1px`. - -```js -assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('address')?.paddingTop?.replace(/\D+/, '')), 1); -``` - -You should give `address` a `padding-right` of at least `1px`. - -```js -assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('address')?.paddingRight?.replace(/\D+/, '')), 1); -``` - -You should give `address` a `padding-bottom` of at least `1px`. - -```js -assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('address')?.paddingBottom?.replace(/\D+/, '')), 1); -``` - -You should give `address` a `padding-left` of at least `1px`. - -```js -assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('address')?.paddingLeft?.replace(/\D+/, '')), 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 16px; -} - -.info label, .info input { - display: inline-block; - text-align: right; -} - -.info input { - width: 50%; - text-align: left; -} - -.info label { - width: 10%; - min-width: 55px; -} - -.question-block { - text-align: left; - display: block; - width: 100%; - margin-top: 20px; - padding-top: 5px; -} - -p { - margin-top: 5px; - padding-left: 15px; - font-size: 20px; -} - -p::before { - content: "Question #"; -} - -.question { - border: none; - padding-bottom: 0; -} - -.answers-list { - list-style: none; - padding: 0; -} - -button { - display: block; - margin: 40px auto; - width: 40%; - padding: 15px; - font-size: 23px; - background: #d0d0d5; - border: 3px solid #3b3b4f; -} - -footer { - background-color: #2a2a40; - display: flex; - justify-content: center; -} - -footer, -footer a { - color: #dfdfe2; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-065.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-065.md deleted file mode 100644 index 42fb36e36a..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-065.md +++ /dev/null @@ -1,344 +0,0 @@ ---- -id: 6148e335c1edd512d00e4691 -title: Part 65 -challengeType: 0 -dashedName: part-65 ---- - -# --description-- - -Clicking on the navigation links should jump the viewport to the relevant section. However, this jumping can be disorienting for some users. - -Select all elements, and set the `scroll-behavior` to `smooth`. - -# --hints-- - -You should use the `*` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('*')); -``` - -You should give `*` a `scroll-behavior` of `smooth`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smooth'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css ---fcc-editable-region-- - ---fcc-editable-region-- - -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 16px; -} - -.info label, .info input { - display: inline-block; - text-align: right; -} - -.info input { - width: 50%; - text-align: left; -} - -.info label { - width: 10%; - min-width: 55px; -} - -.question-block { - text-align: left; - display: block; - width: 100%; - margin-top: 20px; - padding-top: 5px; -} - -p { - margin-top: 5px; - padding-left: 15px; - font-size: 20px; -} - -p::before { - content: "Question #"; -} - -.question { - border: none; - padding-bottom: 0; -} - -.answers-list { - list-style: none; - padding: 0; -} - -button { - display: block; - margin: 40px auto; - width: 40%; - padding: 15px; - font-size: 23px; - background: #d0d0d5; - border: 3px solid #3b3b4f; -} - -footer { - background-color: #2a2a40; - display: flex; - justify-content: center; -} - -footer, -footer a { - color: #dfdfe2; -} - -address { - text-align: center; - padding: 0.3em; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-066.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-066.md deleted file mode 100644 index caa6118bbb..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-066.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 6148e41c728f65138addf9cc -title: Part 66 -challengeType: 0 -dashedName: part-66 ---- - -# --description-- - -Setting the `scroll-behaviour` to `smooth` is preferred by most users. However, some users find this to be too slow, and prefer to have the scrolling happen instantaneously. - -There exists a media rule to set CSS based on the user's browser settings. This media rule is called `prefers-reduced-motion`, and expects one of the following values: - -- `reduce` -- `no-preference` - -Wrap the appropriate rule within a `prefers-reduced-motion` media rule such that a `scroll-behavior` of `smooth` is only set if the user's browser setting is `no-preference`. - -# --hints-- - -You should have a `@media (prefers-reduced-motion: no-preference)` rule. - -```js -assert.exists(new __helpers.CSSHelp(document).getRuleListsWithinMedia('(prefers-reduced-motion: no-preference)')); -``` - -You should wrap the existing `*` rule within the `@media` rule. - -```js -assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia('(prefers-reduced-motion: no-preference)')?.find(x => x.selectorText === '*')?.style?.scrollBehavior, 'smooth'); -assert.notExists(new __helpers.CSSHelp(document).getStyle('*')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css ---fcc-editable-region-- -* { - scroll-behavior: smooth; -} ---fcc-editable-region-- - -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 16px; -} - -.info label, .info input { - display: inline-block; - text-align: right; -} - -.info input { - width: 50%; - text-align: left; -} - -.info label { - width: 10%; - min-width: 55px; -} - -.question-block { - text-align: left; - display: block; - width: 100%; - margin-top: 20px; - padding-top: 5px; -} - -p { - margin-top: 5px; - padding-left: 15px; - font-size: 20px; -} - -p::before { - content: "Question #"; -} - -.question { - border: none; - padding-bottom: 0; -} - -.answers-list { - list-style: none; - padding: 0; -} - -button { - display: block; - margin: 40px auto; - width: 40%; - padding: 15px; - font-size: 23px; - background: #d0d0d5; - border: 3px solid #3b3b4f; -} - -footer { - background-color: #2a2a40; - display: flex; - justify-content: center; -} - -footer, -footer a { - color: #dfdfe2; -} - -address { - text-align: center; - padding: 0.3em; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-067.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-067.md deleted file mode 100644 index 7db0cf266a..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/part-067.md +++ /dev/null @@ -1,689 +0,0 @@ ---- -id: 6148e5aeb102e3142de026a2 -title: Part 67 -challengeType: 0 -dashedName: part-67 ---- - -# --description-- - -Finally, the navigation accessibility can be improved with providing keyboard shortcuts. - -The `accesskey` attribute accepts a space-separated list of access keys. For example: - -```html - -``` - -Give each of the navigation links a single-letter access key. - -_Note: It is not always advised to use access keys, but they can be useful_ - -Well done. You have completed the _Accessibility Quiz_ practice project. - -# --hints-- - -You should give the first `a` element a single-letter `accesskey`. - -```js -assert.equal(document.querySelectorAll('a')?.[0]?.getAttribute('accesskey')?.length, 1); -``` - -You should give the second `a` element a single-letter `accesskey`. - -```js -assert.equal(document.querySelectorAll('a')?.[1]?.getAttribute('accesskey')?.length, 1); -``` - -You should give the third `a` element a single-letter `accesskey`. - -```js -assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.length, 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - freeCodeCamp: Accessibility Quiz - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

-
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -@media (prefers-reduced-motion: no-preference) { - * { - scroll-behavior: smooth; - } -} - -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - background-color: #1b1b32; - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; -} - -#logo { - width: max(100px, 18vw); - background-color: #0a0a23; - aspect-ratio: 35 / 4; - padding: 0.4rem; -} - -h1 { - color: #f1be32; - font-size: min(5vw, 1.2em); - text-align: center; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - color: #dfdfe2; - margin: 0 0.2rem; - padding: 0.2rem; - display: block; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0 auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - -.info { - padding: 10px 0 0 5px; -} - -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 16px; -} - -.info label, .info input { - display: inline-block; - text-align: right; -} - -.info input { - width: 50%; - text-align: left; -} - -.info label { - width: 10%; - min-width: 55px; -} - -.question-block { - text-align: left; - display: block; - width: 100%; - margin-top: 20px; - padding-top: 5px; -} - -p { - margin-top: 5px; - padding-left: 15px; - font-size: 20px; -} - -p::before { - content: "Question #"; -} - -.question { - border: none; - padding-bottom: 0; -} - -.answers-list { - list-style: none; - padding: 0; -} - -button { - display: block; - margin: 40px auto; - width: 40%; - padding: 15px; - font-size: 23px; - background: #d0d0d5; - border: 3px solid #3b3b4f; -} - -footer { - background-color: #2a2a40; - display: flex; - justify-content: center; -} - -footer, -footer a { - color: #dfdfe2; -} - -address { - text-align: center; - padding: 0.3em; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` - -## --solutions-- - -```html - - - - - - - - freeCodeCamp: Accessibility Quiz - - - - -
- -

HTML/CSS Quiz

- -
-
-
-
-

Student Info

- -
- - -
-
- - -
-
- - -
-
-
-

HTML

-
-

1

-
- - The legend element represents a caption for the content of its - parent fieldset element - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-

2

-
- - A label element nesting an input element is required to have a - for attribute with the same value as the input's id - -
    -
  • - -
    • -
  • - -
    • -
-
-
-
-
-

CSS

-
-
- -
-
- -
-
- -
-
- -
-
-
- -
-
- - - - -``` - -```css -@media (prefers-reduced-motion: no-preference) { - * { - scroll-behavior: smooth; - } -} - -body { - background: #f5f6f7; - color: #1b1b32; - font-family: Helvetica; - margin: 0; -} - -header { - width: 100%; - height: 50px; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - position: fixed; - background-color: #1b1b32; - top: 0; -} - -#logo { - width: max(100px, 18vw); - aspect-ratio: 35 / 4; - max-height: 100%; - background-color: #0a0a23; - padding: 0.4rem; -} - -h1 { - text-align: center; - font-size: min(5vw, 1.2em); - color: #f1be32; -} - -nav { - width: 50%; - max-width: 300px; - height: 50px; -} - -nav > ul { - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; - align-items: center; - padding-inline-start: 0; - margin-block: 0; - height: 100%; -} - -nav > ul > li { - display: block; - margin: 0 0.2rem; - color: #dfdfe2; - padding: 0.2rem; -} - -nav > ul > li:hover { - background-color: #dfdfe2; - color: #1b1b32; - cursor: pointer; -} - -li > a { - color: inherit; - text-decoration: none; -} - -main { - padding-top: 50px; -} - -section { - width: 80%; - margin: 0px auto 10px auto; - max-width: 600px; -} - -h1, -h2 { - font-family: Verdana, Tahoma; -} - -h2 { - border-bottom: 4px solid #dfdfe2; - margin-top: 0px; - padding-top: 60px; -} - - -.info { - margin: 0 auto; - padding: 10px 0 0 5px; -} -.formrow { - margin-top: 30px; - padding: 0px 15px; -} - -input { - font-size: 16px; -} - -.info label, -.info input { - display: inline-block; - text-align: right; -} - -.info label { - width: 10%; - min-width: 55px; -} - -.info input { - width: 50%; - text-align: left; -} - -.question-block { - text-align: left; - display: block; - width: 100%; - margin-top: 20px; - padding-top: 5px; -} - -p { - margin-top: 5px; - padding-left: 15px; - font-size: 20px; -} - -p::before { - content: "Question #"; -} - -.question { - border: none; - padding-bottom: 0; -} - -.answers-list { - list-style: none; - padding: 0; -} - -button { - display: block; - margin: 40px auto; - width: 40%; - padding: 15px; - font-size: 23px; - background: #d0d0d5; - border: 3px solid #3b3b4f; -} - -footer { - background-color: #2a2a40; - display: flex; - justify-content: center; -} - -footer, -footer a { - color: #dfdfe2; -} - -address { - text-align: center; - padding: 0.3em; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-001.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-001.md new file mode 100644 index 0000000000..f04db43a1b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-001.md @@ -0,0 +1,50 @@ +--- +id: 614ccc21ea91ef1736b9b578 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +Welcome to the first part in the Accessibility Quiz. As you are becoming a seasoned HTML and CSS developer, we have started you off with the basic boilerplate. + +Start this accessibility journey, by providing a `lang` attribute to your `html` element. This will assist screen readers in identifying the language of the page. + +# --hints-- + +You should give the `html` element a `lang` attribute. _Hint: You can use the value `en` for English._ + +```js +assert.match(code, //i); +// TODO: This should/could be fixed in the builder.js +// assert.notThrow(Intl.getCanonicalLocales(document.querySelector('html').lang)); +``` + +# --seed-- + +## --seed-contents-- + +```html + +--fcc-editable-region-- + + + + + + + + +--fcc-editable-region-- + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-002.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-002.md new file mode 100644 index 0000000000..2d9fb6cd96 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-002.md @@ -0,0 +1,57 @@ +--- +id: 613297a923965e0703b64796 +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +You may be familiar with the `meta` tag already; it is used to specify information about the page, such as the title, description, keywords, and author. + +Give your page a `meta` tag with an appropriate `charset` value. + +The `charset` attribute specifies the character encoding of the page, and, nowadays, `UTF-8` is the only encoding supported by most browsers. + +# --hints-- + +You should create a `meta` element within the `head` element. + +```js +// TODO: Once builder is fixed so head info is not in body +assert.exists(document.querySelector('body > meta')); +``` + +You should give the `meta` tag a `charset` of `UTF-8`. + +```js +assert.equal(document.querySelector('body > meta')?.getAttribute('charset'), 'UTF-8'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + +--fcc-editable-region-- + + + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-003.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-003.md new file mode 100644 index 0000000000..1ad7d530fa --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-003.md @@ -0,0 +1,62 @@ +--- +id: 61329b210dac0b08047fd6ab +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Continuing with the `meta` tags, a `viewport` definition tells the browser how to render the page. Including one betters visual accessibility on mobile, and improves _SEO_ (search engine optimisation). + +Add a `viewport` definition with a `content` attribute detailing the `width` and `initial-scale` of the page. + +# --hints-- + +You should create another `meta` element in the `head`. + +```js +assert.equal(document.querySelectorAll('body > meta')?.length, 2); +``` + +You should give the `meta` a `name` attribute of `viewport`. + +```js +assert.equal(document.querySelectorAll('body > meta[name="viewport"]')?.length, 1); +``` + +You should give the `meta` a `content` attribute of `width=device-width, initial-scale=1`. + +```js +// TODO: Double-check this is the only correct answer +assert.equal(document.querySelectorAll('body > meta[content="width=device-width, initial-scale=1"]')?.length, 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + + +--fcc-editable-region-- + + + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-004.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-004.md new file mode 100644 index 0000000000..5e049d7c0e --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-004.md @@ -0,0 +1,68 @@ +--- +id: 61329d52e5010e08d9b9d66b +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Another important `meta` tag for accessibility and SEO is the `description` definition. The value of the `content` attribute is used by search engines to provide a description of your page. + +Add a `meta` tag with the `name` attribute set to `description`, and give it a useful `content` attribute. + +# --hints-- + +You should add a new `meta` tag to the `head`. + +```js +assert.equal(document.querySelectorAll('meta').length, 3); +``` + +You should give the `meta` a `name` attribute of `description`. + +```js +assert.exists(document.querySelector('meta[name="description"]')); +``` + +You should give the `meta` a `content` attribute. + +```js +assert.notEmpty(document.querySelector('meta[name="description"]')?.content); +``` + +The `content` attribute value should not be more than 165 characters. _This is Google's maximum description length._ + +```js +assert.isAtMost(document.querySelector('meta[name="description"]')?.content?.length, 165); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + + + +--fcc-editable-region-- + + + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-005.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-005.md new file mode 100644 index 0000000000..c59274f4dd --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-005.md @@ -0,0 +1,64 @@ +--- +id: 6133acc353338c0bba9cb553 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Lastly in the `head`, the `title` element is useful for screen readers to understand the content of a page. Furthermore, it is an important part of _SEO_. + +Give your page a `title` that is descriptive and concise. + +# --hints-- + +You should add a `title` element to the `head`. + +```js +// TODO: Fix once builder puts head in the right place +assert.exists(document.querySelector('body > title')); +``` + +You should not make the `title` longer than 60 characters. + +```js +assert.isAtMost(document.querySelector('body > title')?.textContent?.length, 60); +``` + +Try being more descriptive with your `title` element. _Hint: At least 20 characters_ + +```js +assert.isAtLeast(document.querySelector('body > title')?.textContent?.length, 20); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + + + + +--fcc-editable-region-- + + + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-006.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-006.md new file mode 100644 index 0000000000..7229b195af --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-006.md @@ -0,0 +1,68 @@ +--- +id: 6133d11ef548f51f876149e3 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Navigation is a core part of accessibility, and screen readers rely on you to provide the structure of your page. This is accomplished with semantic HTML elements. + +Add a `header` and a `main` element to your page. + +The `header` element will be used to introduce the page, as well as provide a navigation menu. + +The `main` element will contain the core content of your page. + +# --hints-- + +You should add a `header` element to the `body`. + +```js +assert.exists(document.querySelector('body > header')); +``` + +You should add a `main` element to the `body`. + +```js +assert.exists(document.querySelector('body > main')); +``` + +The `header` element should come before the `main` element. + +```js +assert.exists(document.querySelector('header + main')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + +--fcc-editable-region-- + + + +--fcc-editable-region-- + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-007.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-007.md new file mode 100644 index 0000000000..368ab4d59b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-007.md @@ -0,0 +1,93 @@ +--- +id: 613e2546d0594208229ada50 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Within the `header`, provide context about the page by nesting one `img`, `h1`, and `nav` element. + +The `img` should point to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`, and have an `id` of `logo`. + +The `h1` should contain the text `HTML/CSS Quiz`. + +# --hints-- + +You should add an `img` element to the `header` element. + +```js +assert.exists(document.querySelector('header > img')); +``` + +You should add an `h1` element to the `header` element. + +```js +assert.exists(document.querySelector('header > h1')); +``` + +You should add a `nav` element to the `header` element. + +```js +assert.exists(document.querySelector('header > nav')); +``` + +You should place the `img`, `h1`, and `nav` elements in that order. + +```js +assert.exists(document.querySelector('img + h1 + nav')); +``` + +You should give the `img` element a `src` attribute of `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`. + +```js +assert.equal(document.querySelector('img')?.src, 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg'); +``` + +You should give the `img` element an `id` attribute of `logo`. + +```js +assert.equal(document.querySelector('img')?.id, 'logo'); +``` + +You should give the `h1` element the text `HTML/CSS Quiz`. + +```js +assert.include(document.querySelector('h1')?.innerText?.toLowerCase(), 'html/css quiz'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-008.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-008.md new file mode 100644 index 0000000000..5ba9fce9e6 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-008.md @@ -0,0 +1,66 @@ +--- +id: 613e275749ebd008e74bb62e +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +A useful property of an _SVG_ (scalable vector graphics) is that is contains a `path` attribute which allows the image to be scaled without affecting the resolution of the resultant image. + +Currently, the `img` is assuming it's default size, which is too large. Correctly, scale the image using it's `id` as a selector, and setting the `width` to `max(100px, 18vw)`. + +# --hints-- + +You should use the `#logo` selector to target the `img` element. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('#logo')); +``` + +You should give the `img` a `width` of `max(100px, 18vw)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-009.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-009.md new file mode 100644 index 0000000000..85c7c1c8f4 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-009.md @@ -0,0 +1,93 @@ +--- +id: 6140827cff96e906bd38fc2b +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +As described in the [freeCodeCamp Style Guide](https://design-style-guide.freecodecamp.org/), the logo should retain an aspect ratio of `35:4`, and have padding around the text. + +First, change the `background-color` to `#0a0a23` so you can see the logo. Then, use the `aspect-ratio` property to set the desired aspect ratio. Finally, add a `padding` of `0.4rem` all around. + +# --hints-- + +You should give `#logo` a `background-color` of `#0a0a23`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.backgroundColor, 'rgb(10, 10, 35)'); +``` + +You should use the `aspect-ratio` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('#logo')?.aspectRatio); +``` + +You should not use the `height` property. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('#logo')?.height); +``` + +You should not change the `width` property. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)'); +``` + +You should give the `img` an `aspect-ratio` of `35 / 4`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.aspectRatio, '35 / 4'); +``` + +You should give the `img` a `padding` of `0.4rem`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.padding, '0.4rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +--fcc-editable-region-- +#logo { + width: max(100px, 18vw); + +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-010.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-010.md new file mode 100644 index 0000000000..fdc38577cc --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-010.md @@ -0,0 +1,89 @@ +--- +id: 6140883f74224508174794c0 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Make the `header` take up the full width of its parent container, set it's `height` to `50px`, and set the `background-color` to `#1b1b32`. Then, set the `display` to use _Flexbox_. + +# --hints-- + +You should use the `header` element selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('header')); +``` + +You should give the `header` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.width, '100%'); +``` + +You should give the `header` a `height` of `50px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.height, '50px'); +``` + +You should give the `header` a `background-color` of `#1b1b32`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.backgroundColor, 'rgb(27, 27, 50)'); +``` + +You should give the `header` a `display` of `flex`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.display, 'flex'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-011.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-011.md new file mode 100644 index 0000000000..15e849121e --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-011.md @@ -0,0 +1,83 @@ +--- +id: 61408e4ae3e35d08feb260eb +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Change the `h1` font color to `#f1be32`, and set the font size to `min(5vw, 1.2em)`. + +# --hints-- + +You should use the `h1` element selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('h1')); +``` + +You should give the `h1` a `color` of `#f1be32`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.color, 'rgb(241, 190, 50)'); +``` + +You should give the `h1` a `font-size` of `min(5vw, 1.2em)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.fontSize, 'min(5vw, 1.2em)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-012.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-012.md new file mode 100644 index 0000000000..b7b9cd3b02 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-012.md @@ -0,0 +1,112 @@ +--- +id: 61408f155e798909b6908712 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +To enable navigation on the page, add an unordered list with the following three list items: + +- `INFO` +- `HTML` +- `CSS` + +The list items text should be wrapped in anchor tags. + +# --hints-- + +You should nest one `ul` element inside the `nav`. + +```js +assert.equal(document.querySelectorAll('nav > ul')?.length, 1); +``` + +You should nest three `li` elements inside the `ul` element. + +```js +assert.equal(document.querySelectorAll('nav > ul > li')?.length, 3); +``` + +You should nest one `a` element inside each `li` element. + +```js +assert.equal(document.querySelectorAll('nav > ul > li > a')?.length, 3); +``` + +You should give the first `a` element the text `INFO`. + +```js +assert.equal(document.querySelectorAll('nav > ul > li > a')?.[0]?.textContent, 'INFO'); +``` + +You should give the second `a` element the text `HTML`. + +```js +assert.equal(document.querySelectorAll('nav > ul > li > a')?.[1]?.textContent, 'HTML'); +``` + +You should give the third `a` element the text `CSS`. + +```js +assert.equal(document.querySelectorAll('nav > ul > li > a')?.[2]?.textContent, 'CSS'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-013.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-013.md new file mode 100644 index 0000000000..4147c40341 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-013.md @@ -0,0 +1,102 @@ +--- +id: 614090d5a22b6f0a5a6b464c +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + + + +# --description-- + +Target unordered list elements within `nav` elements, and use _Flexbox_ to evenly space the children. + +# --hints-- + +You should use the `nav > ul` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('nav > ul')); +``` + +You should give the `nav > ul` elements a `display` of `flex`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.display, 'flex'); +``` + +You should give the `nav > ul` elements a `justify-content` of `space-evenly`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.justifyContent, 'space-evenly'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-014.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-014.md new file mode 100644 index 0000000000..77254669f0 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-014.md @@ -0,0 +1,125 @@ +--- +id: 6141fabd6f75610664e908fd +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +As this is a quiz, you will need a form for users to submit answers. You can semantically separate the content within the form using `section` elements. + +Within the `main` element, create a form with three nested `section` elements. Then, make the form submit to `https://freecodecamp.org/practice-project/accessibility-quiz`, using the correct method. + +# --hints-- + +You should nest a `form` element within your `main` element. + +```js +assert.exists(document.querySelector('main > form')); +``` + +You should nest three `section` elements within your `form` element. + +```js +assert.equal(document.querySelectorAll('main > form > section')?.length, 3); +``` + +You should give the `form` element an `action` attribute. + +```js +assert.notEmpty(document.querySelector('main > form')?.action); +``` + +You should give the `action` attribute a value of `https://freecodecamp.org/practice-project/accessibility-quiz`. + +```js +assert.equal(document.querySelector('main > form')?.action, 'https://freecodecamp.org/practice-project/accessibility-quiz'); +``` + +You should give the `form` element a `method` attribute. + +```js +assert.notEmpty(document.querySelector('main > form')?.method); +``` + +You should give the `form` element a `method` attribute with a value of `post`. + +```js +assert.equal(document.querySelector('main > form')?.method?.toLowerCase(), 'post'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-015.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-015.md new file mode 100644 index 0000000000..a7496d47e3 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-015.md @@ -0,0 +1,111 @@ +--- +id: 6141fed65b61320743da5894 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +To increase the page accessibility, the `role` attribute can be used to indicate the purpose behind an element on the page to assistive technologies. The `role` attribute is a part of the _Web Accessibility Initiative_ (WAI), and accepts preset values. + +Give each of the `section` elements the `region` role. + +# --hints-- + +You should give the first `section` element the `region` role. + +```js +assert.equal(document.querySelectorAll('section')?.[0]?.getAttribute('role'), 'region'); +``` + +You should give the second `section` element the `region` role. + +```js +assert.equal(document.querySelectorAll('section')?.[1]?.getAttribute('role'), 'region'); +``` + +You should give the third `section` element the `region` role. + +```js +assert.equal(document.querySelectorAll('section')?.[2]?.getAttribute('role'), 'region'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+--fcc-editable-region-- +
+
+
+
+
+--fcc-editable-region-- +
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-016.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-016.md new file mode 100644 index 0000000000..cf461adecc --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-016.md @@ -0,0 +1,171 @@ +--- +id: 614202874ca576084fca625f +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Every `region` role requires a visible label, which should be referenced by the `aria-labelledby` attribute. + +To the `section` elements, give the following `aria-labelledby` attributes: + +- `student-info` +- `html-questions` +- `css-questions` + +Then, within each `section` element, nest one `h2` element with an `id` matching the corresponding `aria-labelledby` attribute. Give each `h2` suitable text content. + +# --hints-- + +You should give the first `section` element an `aria-labelledby` attribute of `student-info`. + +```js +assert.equal(document.querySelectorAll('section')?.[0]?.getAttribute('aria-labelledby'), 'student-info'); +``` + +You should give the second `section` element an `aria-labelledby` attribute of `html-questions`. + +```js +assert.equal(document.querySelectorAll('section')?.[1]?.getAttribute('aria-labelledby'), 'html-questions'); +``` + +You should give the third `section` element an `aria-labelledby` attribute of `css-questions`. + +```js +assert.equal(document.querySelectorAll('section')?.[2]?.getAttribute('aria-labelledby'), 'css-questions'); +``` + +You should nest one `h2` element within the first `section` element. + +```js +assert.equal(document.querySelectorAll('section')?.[0]?.querySelectorAll('h2')?.length, 1); +``` + +You should nest one `h2` element within the second `section` element. + +```js +assert.equal(document.querySelectorAll('section')?.[1]?.querySelectorAll('h2')?.length, 1); +``` + +You should nest one `h2` element within the third `section` element. + +```js +assert.equal(document.querySelectorAll('section')?.[2]?.querySelectorAll('h2')?.length, 1); +``` + +You should give the first `h2` element an `id` attribute of `student-info`. + +```js +assert.equal(document.querySelectorAll('h2')?.[0]?.id, 'student-info'); +``` + +You should give the second `h2` element an `id` attribute of `html-questions`. + +```js +assert.equal(document.querySelectorAll('h2')?.[1]?.id, 'html-questions'); +``` + +You should give the third `h2` element an `id` attribute of `css-questions`. + +```js +assert.equal(document.querySelectorAll('h2')?.[2]?.id, 'css-questions'); +``` + +You should give the first `h2` element suitable text content. _Hint: I would have chosen `Student Info`_ + +```js +assert.isAtLeast(document.querySelectorAll('h2')?.[0]?.textContent?.length, 1); +``` + +You should give the second `h2` element suitable text content. _Hint: I would have chosen `HTML`_ + +```js +assert.isAtLeast(document.querySelectorAll('h2')?.[1]?.textContent?.length, 1); +``` + +You should give the third `h2` element suitable text content. _Hint: I would have chosen `CSS`_ + +```js +assert.isAtLeast(document.querySelectorAll('h2')?.[2]?.textContent?.length, 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+--fcc-editable-region-- +
+
+
+
+
+--fcc-editable-region-- +
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-017.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-017.md new file mode 100644 index 0000000000..62e71b2ccf --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-017.md @@ -0,0 +1,140 @@ +--- +id: 614206033d366c090ca7dd42 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Typeface plays an important role in the accessibility of a page. Some fonts are easier to read than others, and this is especially true on low-resolution screens. + +Change the font for both the `h1` and `h2` elements to `Verdana`, and use another sans-serif _web safe_ font as a fallback. + +Also, add a `border-bottom` of `4px solid #dfdfe2` to `h2` elements, to make the sections distinct. + +# --hints-- + +You should use a multiple element selector to target the `h1` and `h2` elements. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +assert.exists(gs('h1, h2') || gs('h2, h1')); +``` + +You should set the first value of the `font-family` property to `Verdana`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +const style = gs('h1, h2') || gs('h2, h1'); +assert.include(style?.fontFamily, 'Verdana'); +``` + +You should set the second value of the `font-family` property to another sans-serif, web safe font. _Hint: I would choose Tahoma_. + +```js +// Acceptable fonts: Arial, sans-serif, Helvetica, Tahoma, Trebuchet MS. +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +const style = gs('h1, h2') || gs('h2, h1'); +assert.match(style?.fontFamily, /(Tahoma)|(Arial)|(sans-serif)|(Helvetica)|(Trebuchet MS)/); +``` + +You should use an `h2` element selector to target the `h2` elements. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('h2')); +``` + +You should give `h2` a `border-bottom` property of `4px solid #dfdfe2`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.borderBottom, '4px solid rgb(223, 223, 226)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-018.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-018.md new file mode 100644 index 0000000000..b86841c5bd --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-018.md @@ -0,0 +1,125 @@ +--- +id: 61435e3c0679a306c20f1acc +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +To be able to navigate within the page, give each anchor element an `href` corresponding to the `id` of the `h2` elements. + +# --hints-- + +You should give the first `a` element an `href` of `#student-info`. + +```js +assert.equal(document.querySelectorAll('a')?.[0]?.getAttribute('href'), '#student-info'); +``` + +You should give the second `a` element an `href` of `#html-questions`. + +```js +assert.equal(document.querySelectorAll('a')?.[1]?.getAttribute('href'), '#html-questions'); +``` + +You should give the third `a` element an `href` of `#css-questions`. + +```js +assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('href'), '#css-questions'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-019.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-019.md new file mode 100644 index 0000000000..517796da94 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-019.md @@ -0,0 +1,173 @@ +--- +id: 6143610161323a081b249c19 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Filling out the content of the quiz, below the `#student-info`, add three `div` elements with a `class` of `info`. + +Then, within each `div` nest one `label` element, and one `input` element. + +# --hints-- + +You should nest three `div` elements below the `h2#student-info` element. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.length, 3); +``` + +You should give the first `div` a `class` of `info`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.className, 'info'); +``` + +You should give the second `div` a `class` of `info`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.className, 'info'); +``` + +You should give the third `div` a `class` of `info`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.className, 'info'); +``` + +You should nest one `label` element within the first `div`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelectorAll('label')?.length, 1); +``` + +You should nest one `input` element within the first `div`, after the `label`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelectorAll('input')?.length, 1); +assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelector('label + input')); +``` + +You should nest one `label` element within the second `div`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelectorAll('label')?.length, 1); +``` + +You should nest one `input` element within the second `div`, after the `label`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelectorAll('input')?.length, 1); +assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelector('label + input')); +``` + +You should nest one `label` element within the third `div`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelectorAll('label')?.length, 1); +``` + +You should nest one `input` element within the third `div`, after the `label`. + +```js +assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelectorAll('input')?.length, 1); +assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelector('label + input')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+--fcc-editable-region-- +
+

Student Info

+ +
+--fcc-editable-region-- +
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-020.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-020.md new file mode 100644 index 0000000000..c25d490cda --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-020.md @@ -0,0 +1,195 @@ +--- +id: 6143639d5eddc7094161648c +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +It is important to link each `input` to the corresponding `label` element. This provides assistive technology users with a visual reference to the input. + +This is done, by giving the `label` a `for` attribute, which contains the `id` of the `input`. + +This section will take a student's name, email address, and date of birth. Give the `label` elements appropriate `for` attributes, as well as text content. Then, link the `input` elements to the corresponding `label` elements. + +# --hints-- + +You should give the first `label` element an appropriate `for` attribute. + +```js +assert.isAtLeast(document.querySelectorAll('label')?.[0]?.htmlFor?.length, 1); +``` + +You should give the second `label` element an appropriate `for` attribute. + +```js +assert.isAtLeast(document.querySelectorAll('label')?.[1]?.htmlFor?.length, 1); +``` + +You should give the third `label` element an appropriate `for` attribute. + +```js +assert.isAtLeast(document.querySelectorAll('label')?.[2]?.htmlFor?.length, 1); +``` + +You should give the first `label` element an appropriate text content. + +```js +assert.isAtLeast(document.querySelectorAll('label')?.[0]?.textContent?.length, 1); +``` + +You should give the second `label` element an appropriate text content. + +```js +assert.isAtLeast(document.querySelectorAll('label')?.[1]?.textContent?.length, 1); +``` + +You should give the third `label` element an appropriate text content. + +```js +assert.isAtLeast(document.querySelectorAll('label')?.[2]?.textContent?.length, 1); +``` + +You should give the first `input` element an `id` attribute matching the `for` attribute of the first `label`. + +```js +assert.equal(document.querySelectorAll('input')?.[0]?.id, document.querySelectorAll('label')?.[0]?.htmlFor); +``` + +You should give the second `input` element an `id` attribute matching the `for` attribute of the second `label`. + +```js +assert.equal(document.querySelectorAll('input')?.[1]?.id, document.querySelectorAll('label')?.[1]?.htmlFor); +``` + +You should give the third `input` element an `id` attribute matching the `for` attribute of the third `label`. + +```js +assert.equal(document.querySelectorAll('input')?.[2]?.id, document.querySelectorAll('label')?.[2]?.htmlFor); +``` + +You should not use the same `id` attribute for more than one `input` element. + +```js +const id = (n) => document.querySelectorAll('input')?.[n]?.id; +assert.notEqual(id(0), id(1)); +assert.notEqual(id(0), id(2)); +assert.notEqual(id(1), id(2)); +``` + +You should not use the same `for` attribute for more than one `label` element. + +```js +const htmlFor = (n) => document.querySelectorAll('label')?.[n]?.htmlFor; +assert.notEqual(htmlFor(0), htmlFor(1)); +assert.notEqual(htmlFor(0), htmlFor(2)); +assert.notEqual(htmlFor(1), htmlFor(2)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+--fcc-editable-region-- +
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+--fcc-editable-region-- +
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-021.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-021.md new file mode 100644 index 0000000000..948c1c219f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-021.md @@ -0,0 +1,161 @@ +--- +id: 6143908b6aafb00a659ca189 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Keeping in mind best-practices for form inputs, give each `input` an appropriate `type` and `name` attribute. Then, give the first `input` a `placeholder` attribute. + +# --hints-- + +You should give the first `input` a `type` of `text`. + +```js +assert.equal(document.querySelectorAll('input')?.[0]?.type, 'text'); +``` + +You should give the second `input` a `type` of `email`. + +```js +assert.equal(document.querySelectorAll('input')?.[1]?.type, 'email'); +``` + +You should give the third `input` a `type` of `date`. + +```js +assert.equal(document.querySelectorAll('input')?.[2]?.type, 'date'); +``` + +You should give the first `input` an appropriate `name` attribute. + +```js +assert.isAtLeast(document.querySelectorAll('input')?.[0]?.name?.length, 1); +``` + +You should give the second `input` an appropriate `name` attribute. + +```js +assert.isAtLeast(document.querySelectorAll('input')?.[1]?.name?.length, 1); +``` + +You should give the third `input` an appropriate `name` attribute. + +```js +assert.isAtLeast(document.querySelectorAll('input')?.[2]?.name?.length, 1); +``` + +You should give the first `input` a `placeholder` attribute. + +```js +assert.notEmpty(document.querySelectorAll('input')?.[0]?.placeholder); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+--fcc-editable-region-- +
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+--fcc-editable-region-- +
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-022.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-022.md new file mode 100644 index 0000000000..64ca5cabfe --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-022.md @@ -0,0 +1,127 @@ +--- +id: 6143920c8eafb00b735746ce +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Even though you added a `placeholder` to the first `input` element in the previous lesson, this is actually not a best-practice for accessibility; too often, users confuse the placeholder text with an actual input value - they think there is already a value in the input. + +Remove the placeholder text from the first `input` element, relying on the `label` being the best-practice. + +# --hints-- + +You should remove the `placeholder` attribute from the first `input` element. + +```js +assert.isEmpty(document.querySelectorAll('input')?.[0]?.placeholder); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+--fcc-editable-region-- +
+ + +
+--fcc-editable-region-- +
+ + +
+
+ + +
+
+
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-023.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-023.md new file mode 100644 index 0000000000..9fd2a9b3fc --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-023.md @@ -0,0 +1,139 @@ +--- +id: 6143931a113bb80c45546287 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Arguably, `D.O.B.` is not descriptive enough. This is especially true for visually impaired users. One way to get around such an issue, without having to add visible text to the label, is to add text only a screen reader can read. + +Append a `span` element with a class of `sr-only` to the current text content of the third `label` element. + +# --hints-- + +You should add a `span` element within the third `label` element. + +```js +assert.exists(document.querySelector('.info:nth-of-type(3) > label > span')); +``` + +You should give the `span` element a class of `sr-only`. + +```js +assert.equal(document.querySelector('.info:nth-of-type(3) > label > span')?.className, 'sr-only'); +``` + +You should place the `span` after the text content `D.O.B.`. + +```js +assert.match(document.querySelector('.info:nth-of-type(3) > label')?.innerHTML, /D\.O\.B\. + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+--fcc-editable-region-- +
+ + +
+--fcc-editable-region-- +
+
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-024.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-024.md new file mode 100644 index 0000000000..a396c54b64 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-024.md @@ -0,0 +1,125 @@ +--- +id: 614394fb41985e0d2012a93e +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Within the `span` element, add the text `(Date of Birth)`. + +# --hints-- + +You should give the `span` element the text `(Date of Birth)`. + +```js +assert.equal(document.querySelector('.info:nth-of-type(3) > label > span')?.textContent, '(Date of Birth)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+--fcc-editable-region-- +
+ + +
+--fcc-editable-region-- +
+
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-025.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-025.md new file mode 100644 index 0000000000..fad5ffd710 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-025.md @@ -0,0 +1,197 @@ +--- +id: 6143956ed76ed60e012faa51 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +The `.sr-only` text is still visible. There is a common pattern to visually hide text for only screen readers to read. + +This pattern is to set the following CSS properties: + +```css +position: absolute; +width: 1px; +height: 1px; +padding: 0; +margin: -1px; +overflow: hidden; +clip: rect(0, 0, 0, 0); +white-space: nowrap; +border: 0; +``` + +Use the above to define the `sr-only` class. + +# --hints-- + +You should use the `.sr-only` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.sr-only')); +``` + +You should give the `.sr-only` a `position` of `absolute`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.position, 'absolute'); +``` + +You should give the `.sr-only` a `width` of `1px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.width, '1px'); +``` + +You should give the `.sr-only` a `height` of `1px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.height, '1px'); +``` + +You should give the `.sr-only` a `padding` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.padding, '0px'); +``` + +You should give the `.sr-only` a `margin` of `-1px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.margin, '-1px'); +``` + +You should give the `.sr-only` an `overflow` of `hidden`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.overflow, 'hidden'); +``` + +You should give the `.sr-only` a `clip` of `rect(0, 0, 0, 0)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.clip, 'rect(0px, 0px, 0px, 0px)'); +``` + +You should give the `.sr-only` a `white-space` of `nowrap`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.whiteSpace, 'nowrap'); +``` + +You should give the `.sr-only` a `border` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.border, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-026.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-026.md new file mode 100644 index 0000000000..1e04255f84 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-026.md @@ -0,0 +1,200 @@ +--- +id: 614396f7ae83f20ea6f9f4b3 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Within the second `section` element, add two `div` elements with a class of `question-block`. + +Then, within each `div.question-block` element, add one `p` element with text of incrementing numbers, starting at `1`, and one `fieldset` element with a class of `question`. + +# --hints-- + +You should nest two `div` elements within the second `section` element. + +```js +assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.length, 2); +``` + +You should give the first new `div` element a class of `question-block`. + +```js +assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[0]?.className, 'question-block'); +``` + +You should give the second new `div` element a class of `question-block`. + +```js +assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[1]?.className, 'question-block'); +``` + +You should nest one `p` element within each `div.question-block` element. + +```js +assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.length, 2); +``` + +You should give the first `p` element text of `1`. + +```js +assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[0]?.textContent, '1'); +``` + +You should give the second `p` element text of `2`. + +```js +assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[1]?.textContent, '2'); +``` + +You should nest one `fieldset` element within each `div.question-block` element. + +```js +assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.length, 2); +``` + +You should place the first `fieldset` element after the first `p` element. + +```js +assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > p + fieldset')); +``` + +You should place the second `fieldset` element after the second `p` element. + +```js +assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > p + fieldset')); +``` + +You should give the first `fieldset` element a class of `question`. + +```js +assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.[0]?.className, 'question'); +``` + +You should give the second `fieldset` element a class of `question`. + +```js +assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.[1]?.className, 'question'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+--fcc-editable-region-- +
+

HTML

+ +
+--fcc-editable-region-- +
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-027.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-027.md new file mode 100644 index 0000000000..01711eee89 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-027.md @@ -0,0 +1,177 @@ +--- +id: 6143cb26f7edff2dc28f7da5 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Each `fieldset` will contain a true/false question. + +Within each `fieldset`, nest one `legend` element, and one `ul` element with two options. + +# --hints-- + +You should nest one `legend` element within the first `fieldset` element. + +```js +assert.equal(document.querySelectorAll('.question-block:nth-of-type(1) > fieldset > legend')?.length, 1); +``` + +You should nest one `ul` element within the first `fieldset` element. + +```js +assert.equal(document.querySelectorAll('.question-block:nth-of-type(1) > fieldset > ul')?.length, 1); +``` + +You should nest two `li` elements within the first `ul` element. + +```js +assert.equal(document.querySelectorAll('fieldset > ul')?.[0]?.querySelectorAll('li')?.length, 2); +``` + +You should nest one `legend` element within the second `fieldset` element. + +```js +assert.equal(document.querySelectorAll('.question-block:nth-of-type(2) > fieldset > legend')?.length, 1); +``` + +You should nest one `ul` element within the second `fieldset` element. + +```js +assert.equal(document.querySelectorAll('.question-block:nth-of-type(2) > fieldset > ul')?.length, 1); +``` + +You should nest two `li` elements within the second `ul` element. + +```js +assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.querySelectorAll('li')?.length, 2); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+--fcc-editable-region-- +
+

HTML

+
+

1

+
+
+
+

2

+
+
+
+--fcc-editable-region-- +
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-028.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-028.md new file mode 100644 index 0000000000..0b31d65e96 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-028.md @@ -0,0 +1,195 @@ +--- +id: 6144e818fd5ea704fe56081d +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Give each `fieldset` an adaquate `name` attribute. Then, give both unordered lists a `class` of `answers-list`. + +Finally, add use the `legend` to caption the content of the `fieldset`, by placing a true/false question as the text content. + +# --hints-- + +You should give the first `fieldset` an adaquate `name` attribute. _Hint: I would use `html-question-one`_ + +```js +assert.notEmpty(document.querySelectorAll('fieldset')?.[0]?.name); +``` + +You should give the second `fieldset` an adaquate `name` attribute. _Hint: I would use `html-question-two`_ + +```js +assert.notEmpty(document.querySelectorAll('fieldset')?.[1]?.name); +``` + +You should give the first `ul` element a `class` of `answers-list`. + +```js +assert.equal(document.querySelectorAll('fieldset > ul')?.[0]?.className, 'answers-list'); +``` + +You should give the second `ul` element a `class` of `answers-list`. + +```js +assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.className, 'answers-list'); +``` + +You should give the first `legend` element text content. + +```js +assert.notEmpty(document.querySelectorAll('legend')?.[0]?.textContent); +``` + +You should give the second `legend` element text content. + +```js +assert.notEmpty(document.querySelectorAll('legend')?.[1]?.textContent); +``` + +You should not use the same text content for both `legend` elements. + +```js +assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.querySelectorAll('legend')?.[1]?.textContent); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+--fcc-editable-region-- +
+

HTML

+
+

1

+
+ +
    +
  • +
  • +
+
+
+
+

2

+
+ +
    +
  • +
  • +
+
+
+
+--fcc-editable-region-- +
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-029.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-029.md new file mode 100644 index 0000000000..de416871ca --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-029.md @@ -0,0 +1,231 @@ +--- +id: 6144f8dc6849e405dd8bb829 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +To provide the functionality of the true/false questions, we need a set of inputs which do not allow both to be selected at the same time. + +Within each list element, nest one `label` element, and within each `label` element, nest one `input` element with the appropriate `type`. + +# --hints-- + +You should nest one `label` element within the first `li` element. + +```js +assert.exists(document.querySelectorAll('ul.answers-list > li')?.[0]?.querySelector('label')); +``` + +You should nest one `label` element within the second `li` element. + +```js +assert.exists(document.querySelectorAll('ul.answers-list > li')?.[1]?.querySelector('label')); +``` + +You should nest one `label` element within the third `li` element. + +```js +assert.exists(document.querySelectorAll('ul.answers-list > li')?.[2]?.querySelector('label')); +``` + +You should nest one `label` element within the fourth `li` element. + +```js +assert.exists(document.querySelectorAll('ul.answers-list > li')?.[3]?.querySelector('label')); +``` + +You should nest one `input` element within the first `label` element. + +```js +assert.exists(document.querySelectorAll('ul.answers-list > li')?.[0]?.querySelector('label')?.querySelector('input')); +``` + +You should nest one `input` element within the second `label` element. + +```js +assert.exists(document.querySelectorAll('ul.answers-list > li')?.[1]?.querySelector('label')?.querySelector('input')); +``` + +You should nest one `input` element within the third `label` element. + +```js +assert.exists(document.querySelectorAll('ul.answers-list > li')?.[2]?.querySelector('label')?.querySelector('input')); +``` + +You should nest one `input` element within the fourth `label` element. + +```js +assert.exists(document.querySelectorAll('ul.answers-list > li')?.[3]?.querySelector('label')?.querySelector('input')); +``` + +You should give the first `input` a `type` of `radio`. + +```js +assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.type, 'radio'); +``` + +You should give the second `input` a `type` of `radio`. + +```js +assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.type, 'radio'); +``` + +You should give the third `input` a `type` of `radio`. + +```js +assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.type, 'radio'); +``` + +You should give the fourth `input` a `type` of `radio`. + +```js +assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.type, 'radio'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +--fcc-editable-region-- +
    +
  • +
  • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • +
  • +
+--fcc-editable-region-- +
+
+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-030.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-030.md new file mode 100644 index 0000000000..6b9180a5fb --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-030.md @@ -0,0 +1,207 @@ +--- +id: 6145e6eeaa66c605eb087fe9 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Although not required for `label` elements with a nested `input`, it is still best-practice to explicitly link a `label` with its corresponding `input` element. + +Link the `label` elements with their corresponding `input` elements. + +# --hints-- + +You should give the first `label` a `for` attribute matching the `id` of its `input` element. + +```js +const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[0]?.htmlFor; +assert.notEmpty(htmlFor); +assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.id); +``` + +You should give the second `label` a `for` attribute matching the `id` of its `input` element. + +```js +const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[1]?.htmlFor; +assert.notEmpty(htmlFor); +assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.id); +``` + +You should give the third `label` a `for` attribute matching the `id` of its `input` element. + +```js +const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[2]?.htmlFor; +assert.notEmpty(htmlFor); +assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.id); +``` + +You should give the fourth `label` a `for` attribute matching the `id` of its `input` element. + +```js +const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[3]?.htmlFor; +assert.notEmpty(htmlFor); +assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.id); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +--fcc-editable-region-- +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+--fcc-editable-region-- +
+
+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-031.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-031.md new file mode 100644 index 0000000000..a30c6aa541 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-031.md @@ -0,0 +1,287 @@ +--- +id: 6145e8b5080a5f06bb0223d0 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +Give the `label` elements text such that the `input` comes before the text. Then, give the `input` elements a `value` matching the text. + +The text should either be `True` or `False`. + +# --hints-- + +You should give the first `label` element text content. + +```js +assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim()); +``` + +You should give the second `label` element text content. + +```js +assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.textContent?.trim()); +``` + +You should give the third `label` element text content. + +```js +assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim()); +``` + +You should give the fourth `label` element text content. + +```js +assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.textContent?.trim()); +``` + +You should place the first `label` text content after the `input` element. + +```js +assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.innerHTML, />[\s\S]+[a-zA-Z]/); +``` + +You should place the second `label` text content after the `input` element. + +```js +assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.innerHTML, />[\s\S]+[a-zA-Z]/); +``` + +You should place the third `label` text content after the `input` element. + +```js +assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.innerHTML, />[\s\S]+[a-zA-Z]/); +``` + +You should place the fourth `label` text content after the `input` element. + +```js +assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.innerHTML, />[\s\S]+[a-zA-Z]/); +``` + +You should give the first `label` the text `True` or `False`. + +```js +assert.include(['True', 'False'], document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim()); +``` + +You should give the second `label` the text `True`. + +```js +const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim(); +assert(l(0) === 'False' ? l(1) === 'True' : true); +``` + +You should give the second `label` the text `False`. + +```js +const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim(); +assert(l(0) === 'True' ? l(1) === 'False' : true); +``` + +You should give the third `label` the text `True` or `False`. + +```js +assert.include(['True', 'False'], document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim()); +``` + +You should give the fourth `label` the text `True`. + +```js +const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim(); +assert(l(2) === 'False' ? l(3) === 'True' : true); +``` + +You should give the fourth `label` the text `False`. + +```js +const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim(); +assert(l(2) === 'True' ? l(3) === 'False' : true); +``` + +You should give the first `input` a `value` matching the `label` text content. + +```js +assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.value?.toLowerCase()); +``` + +You should give the second `input` a `value` matching the `label` text content. + +```js +assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.value?.toLowerCase()); +``` + +You should give the third `input` a `value` matching the `label` text content. + +```js +assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.value?.toLowerCase()); +``` + +You should give the fourth `input` a `value` matching the `label` text content. + +```js +assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.value?.toLowerCase()); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +--fcc-editable-region-- +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+--fcc-editable-region-- +
+
+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-032.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-032.md new file mode 100644 index 0000000000..2f40edbf99 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-032.md @@ -0,0 +1,224 @@ +--- +id: 6145eb5f08a38a0786c7a80c +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +If you click on the radio inputs, you might notice both inputs within the same true/false fieldset can be selected at the same time. + +Group the relevant inputs together such that only one input from a pair can be selected at a time. + +# --hints-- + +You should give the first `input` a `name` attribute. + +```js +assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.name); +``` + +You should give the second `input` a `name` attribute. + +```js +assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.name); +``` + +You should give the third `input` a `name` attribute. + +```js +assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.name); +``` + +You should give the fourth `input` a `name` attribute. + +```js +assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.name); +``` + +You should give the second `input` a `name` attribute matching the `name` attribute of the first `input`. + +```js +const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name; +assert.equal(i(1), i(0)); +``` + +You should give the fourth `input` a `name` attribute matching the `name` attribute of the third `input`. + +```js +const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name; +assert.equal(i(3), i(2)); +``` + +You should give different `name` attributes to the first `input` and the third `input`. + +```js +const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name; +assert.notEqual(i(0), i(2)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +--fcc-editable-region-- +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+--fcc-editable-region-- +
+
+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-033.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-033.md new file mode 100644 index 0000000000..777846dbf8 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-033.md @@ -0,0 +1,191 @@ +--- +id: 6145ed1f22caab087630aaad +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +To prevent unnecessary repetition, target the `before` pseudo-element of the `p` element, and give it a `content` property of `Question #`. + +# --hints-- + +You should use the `p::before` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('p::before')); +``` + +You should give the `p::before` pseudo-element a `content` property of `Question #`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, 'Question #'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-034.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-034.md new file mode 100644 index 0000000000..9302306110 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-034.md @@ -0,0 +1,232 @@ +--- +id: 6145ee65e2e1530938cb594d +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +The final section of this quiz will contain a dropdown, and a text box. + +Begin by nesting a `div` with a `class` of `formrow`, and nest four `div` elements inside of it, alternating their `class` attributes with `question-block` and `answer`. + +# --hints-- + +You should add one `div` element within the final `section`. + +```js +assert.exists(document.querySelector('section:nth-of-type(3) > div')); +``` + +You should give the first `div` a `class` of `formrow`. + +```js +assert.equal(document.querySelector('section:nth-of-type(3) > div')?.className, 'formrow'); +``` + +You should place `div.formrow` after the `h2` element. + +```js +assert.exists(document.querySelector('section:nth-of-type(3) > h2 + div.formrow')); +``` + +You should nest four `div` elements inside `div.formrow`. + +```js +assert.equal(document.querySelectorAll('section:nth-of-type(3) > div.formrow > div')?.length, 4); +``` + +You should give the first nested `div` a `class` of `question-block`. + +```js +assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(1)')?.className, 'question-block'); +``` + +You should give the second nested `div` a `class` of `answer`. + +```js +assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(2)')?.className, 'answer'); +``` + +You should give the third nested `div` a `class` of `question-block`. + +```js +assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(3)')?.className, 'question-block'); +``` + +You should give the fourth nested `div` a `class` of `answer`. + +```js +assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(4)')?.className, 'answer'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+--fcc-editable-region-- +
+

CSS

+ +
+--fcc-editable-region-- +
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-035.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-035.md new file mode 100644 index 0000000000..70790c38d0 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-035.md @@ -0,0 +1,215 @@ +--- +id: 6145f02240ff8f09f7ec913c +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Within the `div.question-block` elements, nest one `label` element, and give the `label` elements text content + +# --hints-- + +You should nest one `label` element within the first `div.question-block` element. + +```js +assert.exists(document.querySelectorAll('.formrow > .question-block')?.[0]?.querySelector('label')); +``` + +You should nest one `label` element within the second `div.question-block` element. + +```js +assert.exists(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')); +``` + +You should give the first `label` element text content. + +```js +assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[0]?.querySelector('label')?.textContent?.length, 1); +``` + +You should give the second `label` element text content. + +```js +assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.textContent?.length, 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+--fcc-editable-region-- +
+

CSS

+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-036.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-036.md new file mode 100644 index 0000000000..91d9709252 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-036.md @@ -0,0 +1,250 @@ +--- +id: 6145f14f019a4b0adb94b051 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Within the first `div.answer` element, nest one required `select` element with three `option` elements. + +Give the first `option` element a `value` of `""`, and the text `Select an option`. Give the second `option` element a `value` of `yes`, and the text `Yes`. Give the third `option` element a `value` of `no`, and the text `No`. + +# --hints-- + +You should nest one `select` element within the first `div.answer` element. + +```js +assert.exists(document.querySelector('div.answer > select')); +``` + +You should nest three `option` elements within the `select` element. + +```js +assert.equal(document.querySelectorAll('div.answer > select > option')?.length, 3); +``` + +You should give the first `option` element a `value` of `""`. + +```js +assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')?.value, ''); +``` + +You should give the first `option` element a text content of `Select an option`. + +```js +assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')?.textContent, 'Select an option'); +``` + +You should give the second `option` element a `value` of `yes`. + +```js +assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')?.value, 'yes'); +``` + +You should give the second `option` element a text content of `Yes`. + +```js +assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')?.textContent, 'Yes'); +``` + +You should give the third `option` element a `value` of `no`. + +```js +assert.equal(document.querySelector('div.answer > select > option:nth-child(3)')?.value, 'no'); +``` + +You should give the third `option` element a text content of `No`. + +```js +assert.equal(document.querySelector('div.answer > select > option:nth-child(3)')?.textContent, 'No'); +``` + +You should give the `select` an attribute of `required`. + +```js +assert.isTrue(document.querySelector('div.answer > select')?.required); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+ +
+
+
+
+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-037.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-037.md new file mode 100644 index 0000000000..1dde26581d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-037.md @@ -0,0 +1,222 @@ +--- +id: 6145f3a5cd9be60b9459cdd6 +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +Link the first `label` element to the `select` element, and give the `select` element a `name` attribute. + +# --hints-- + +You should give the `label` element a `for` attribute. + +```js +assert.notEmpty(document.querySelector('.question-block > label')?.htmlFor); +``` + +You should give the `select` element an `id` attribute. + +```js +assert.notEmpty(document.querySelector('.answer > select')?.id); +``` + +You should give the `select` element an `id` matching the `for` attribute of the `label` element. + +```js +assert.equal(document.querySelector('.answer > select')?.id, document.querySelector('.question-block > label')?.htmlFor); +``` + +You should give the `select` element a `name` attribute. + +```js +assert.notEmpty(document.querySelector('.answer > select')?.name); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+--fcc-editable-region-- +
+ +
+
+ +
+--fcc-editable-region-- +
+ +
+
+
+
+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-038.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-038.md new file mode 100644 index 0000000000..470cc3f774 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-038.md @@ -0,0 +1,229 @@ +--- +id: 6145f47393fbe70c4d885f9c +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Nest one `textarea` element within the second `div.answer` element, and set the number of rows and columns it has. + +Then, give the `textarea` placeholder text describing an example answer. + +# --hints-- + +You should nest one `textarea` element within the second `div.answer` element. + +```js +assert.exists(document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')); +``` + +You should give the `textarea` a `rows` attribute with a number. + +```js +const rows = document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.getAttribute('rows'); +assert.notEmpty(rows); +assert.isNotNaN(Number(rows)); +``` + +You should give the `textarea` a `cols` attribute with a number. + +```js +const cols = document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.getAttribute('cols'); +assert.notEmpty(cols); +assert.isNotNaN(Number(cols)); +``` + +You should give the `textarea` placeholder text describing an example answer. + +```js +assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.textContent); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-039.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-039.md new file mode 100644 index 0000000000..de65d1203b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-039.md @@ -0,0 +1,219 @@ +--- +id: 6145f59029474c0d3dc1c8b8 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +As with the other input elements and `labels`, link the `textarea` to its corresponding `label` element, and give it a `name` attribute. + +# --hints-- + +You should give the `label` element a `for` attribute. + +```js +assert.notEmpty(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.htmlFor); +``` + +You should give the `textarea` element an `id` attribute matching the `for` attribute of the `label` element. + +```js +assert.equal(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.htmlFor, document.querySelectorAll('.answer')?.[1]?.querySelector('textarea')?.id); +``` + +You should give the `textarea` element a `name` attribute. + +```js +assert.notEmpty(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea')?.name); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+--fcc-editable-region-- +
+ +
+
+ +
+--fcc-editable-region-- +
+
+
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-040.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-040.md new file mode 100644 index 0000000000..cc4fe819d3 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-040.md @@ -0,0 +1,232 @@ +--- +id: 6145f685797bd30df9784e8c +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +Do not forget to give your `form` a submit button. + +# --hints-- + +You should add either a `button` or `input` element. + +```js +assert.exists(document.querySelector('button') || document.querySelector('main > input') || document.querySelector('form > input')); +``` + +You should place the submit within the `form` element. + +```js +assert.exists(document.querySelector('form > button') || document.querySelector('form > input')); +``` + +You should place the submit after the last `section` element. + +```js +assert.exists(document.querySelector('section:last-of-type + button') || document.querySelector('section:last-of-type + input')); +``` + +You should give the submit a `type` of `submit`. + +```js +assert.exists(document.querySelector('button[type="submit"]') || document.querySelector('form > input[type="submit"]')); +``` + +The submit should display the text `Submit`. + +```js +assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? document.querySelector('input[type="submit"]')?.value, 'Submit'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+--fcc-editable-region-- +
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+--fcc-editable-region-- +
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-041.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-041.md new file mode 100644 index 0000000000..02a653e718 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-041.md @@ -0,0 +1,217 @@ +--- +id: 6145f829ac6a920ebf5797d7 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Two final semantic HTML elements for this project are the `footer` and `address` elements. The `footer` element is a container for a collection of content that is related to the page, and the `address` element is a container for contact information for the author of the page. + +After the `main` element, add one `footer` element, and nest one `address` element within it. + +# --hints-- + +You should add one `footer` element after the `main` element. + +```js +assert.exists(document.querySelector('main + footer')); +``` + +You should nest one `address` element within the `footer` element. + +```js +assert.exists(document.querySelector('footer > address')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+--fcc-editable-region-- + +--fcc-editable-region-- + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-042.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-042.md new file mode 100644 index 0000000000..9a0dc976ca --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-042.md @@ -0,0 +1,222 @@ +--- +id: 6145f8f8bcd4370f6509078e +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Within the `address` element, add the following: + +```html +freeCodeCamp
+San Francisco
+California
+USA +``` + +You can visit, but you might not find anything... + +# --hints-- + +You should add the above text including the `
` tags to the `address` element. + +```js +assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Francisco\nCalifornia\nUSA'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+--fcc-editable-region-- +
+
+ +
+
+--fcc-editable-region-- + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-043.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-043.md new file mode 100644 index 0000000000..8bb6c21ba9 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-043.md @@ -0,0 +1,231 @@ +--- +id: 6145fb5018cb5b100cb2a88c +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +The `address` element does not have to contain a physical geographical location. It can be used to provide a link to the subject. + +Wrap a link around the text `freeCodeCamp`, and set its location to `https://freecodecamp.org`. + +# --hints-- + +You should add an `a` element. + +```js +assert.exists(document.querySelector('address > a')); +``` + +You should give the `a` element a `href` attribute of `https://freecodecamp.org`. + +```js +assert.equal(document.querySelector('address > a')?.getAttribute('href'), 'https://freecodecamp.org'); +``` + +You should wrap the `a` element around the existing text `freeCodeCamp`. + +```js +assert.equal(document.querySelector('address > a')?.innerHTML, 'freeCodeCamp'); +assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g)?.length, 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+--fcc-editable-region-- +
+
+ freeCodeCamp
+ San Francisco
+ California
+ USA +
+
+--fcc-editable-region-- + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-044.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-044.md new file mode 100644 index 0000000000..1bf7c4e4d1 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-044.md @@ -0,0 +1,258 @@ +--- +id: 6145fc3707fc3310c277f5c8 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Back to styling the page. Select the list elements within the navigation bar, and give them the following styles: + +```css +color: #dfdfe2; +margin: 0 0.2rem; +padding: 0.2rem; +display: block; +``` + +# --hints-- + +You should use either the `nav li` or `nav > ul > li` selector. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +assert.exists(gs('nav li') || gs('nav > ul > li')); +``` + +You should give the `li` elements a `color` of `#dfdfe2`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +const color = gs('nav li')?.color ?? gs('nav > ul > li')?.color; +assert.equal(color, 'rgb(223, 223, 226)'); +``` + +You should give the `li` elements a `margin` of `0 0.2rem`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +const margin = gs('nav li')?.margin ?? gs('nav > ul > li')?.margin; +assert.equal(margin, '0px 0.2rem'); +``` + +You should give the `li` elements a `padding` of `0.2rem`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +const padding = gs('nav li')?.padding ?? gs('nav > ul > li')?.padding; +assert.equal(padding, '0.2rem'); +``` + +You should give the `li` elements a `display` of `block`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +const display = gs('nav li')?.display ?? gs('nav > ul > li')?.display; +assert.equal(display, 'block'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-045.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-045.md new file mode 100644 index 0000000000..3fa80b6884 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-045.md @@ -0,0 +1,262 @@ +--- +id: 614796cb8086be482d60e0ac +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +On the topic of visual accessibility, contrast between elements is a key factor. For example, the contrast between the text and the background of a heading should be at least 4.5:1. + +Change the font color of all the anchor elements within list elements to something with a contrast ratio of at least 7:1. + +# --hints-- + +You should use the `li > a` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('li > a')); +``` + +You should give the `a` element a `color` property. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('li > a')?.color); +``` + +You should give the `color` property a contrast with the background of at least 7:1. _Hint: I would use `#dfdfe2`_ + +```js +function luminance(r, g, b) { + const a = [r, g, b].map((v) => { + v /= 255; + return v <= 0.03928 ? v / 12.92 : Math.pow( (v + 0.055) / 1.055, 2.4 ); + }); + return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722; +} +function contrast(rgb1, rgb2) { + const lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]); + const lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]); + const brightest = Math.max(lum1, lum2); + const darkest = Math.min(lum1, lum2); + return (brightest + 0.05) + / (darkest + 0.05); +} +const backgroundColour = [27, 27, 50]; + +for (let elem of document.querySelectorAll('li > a')) { + const a = getComputedStyle(elem)?.color; + const rgbA = a?.match(/(\d+),\s(\d+),\s(\d+)/); + const aColour = [rgbA[1], rgbA[2], rgbA[3]]; + assert.isAtLeast(contrast(backgroundColour, aColour), 7); +} +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-046.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-046.md new file mode 100644 index 0000000000..e4a9bc1c5c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-046.md @@ -0,0 +1,262 @@ +--- +id: 6147a14ef5668b5881ef2297 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +To make the navigation buttons look more like typical buttons, remove the underline from the anchor tags. + +Then, create a new selector targetting the navigation list elements so that when the cursor hovers over them, the background color and text color are switched, and the cursor becomes a pointer. + +# --hints-- + +You should use the existing `li > a` selector to set the `text-decoration` to `none`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('li > a')?.textDecoration, 'none'); +``` + +You should use either the `nav > ul > li:hover` or `nav li:hover` selector to style the elements on hover. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +assert.exists(gs('nav > ul > li:hover') || gs('nav li:hover')); +``` + +You should give hovered `li` elements a `background-color` of `#dfdfe2`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +const bgColor = gs('nav > ul > li:hover')?.backgroundColor ?? gs('nav li:hover')?.backgroundColor; +assert.equal(bgColor, 'rgb(223, 223, 226)'); +``` + +You should give hovered `li` elements a `color` of `#1b1b32`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +const color = gs('nav > ul > li:hover')?.color ?? gs('nav li:hover')?.color; +assert.equal(color, 'rgb(27, 27, 50)'); +``` + +You should give hovered `li` elements a `cursor` of `pointer`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +const cursor = gs('nav > ul > li:hover')?.cursor ?? gs('nav li:hover')?.cursor; +assert.equal(cursor, 'pointer'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +--fcc-editable-region-- + + +li > a { + color: inherit; +} +--fcc-editable-region-- + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-047.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-047.md new file mode 100644 index 0000000000..d40a46633d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-047.md @@ -0,0 +1,255 @@ +--- +id: 614878f7a412310647873015 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Tidy up the `header`, by using _Flexbox_ to put space between the children, and vertically center them. + +Then, fix the `header` to the top of the viewport. + +# --hints-- + +You should give the `header` a `justify-content` of `space-between`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.justifyContent, 'space-between'); +``` + +You should give the `header` an `align-items` of `center`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.alignItems, 'center'); +``` + +You should give the `header` a `position` of `fixed`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.position, 'fixed'); +``` + +You should give the `header` a `top` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +--fcc-editable-region-- +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + +} +--fcc-editable-region-- + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-048.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-048.md new file mode 100644 index 0000000000..3c99034aaa --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-048.md @@ -0,0 +1,263 @@ +--- +id: 61487b77d4a37707073a64e5 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +When the screen width is small, the `h1` does not wrap its text content how it should. Center align the text for the `h1`. + +Then, give the `main` padding such that the `Student Info` section header can be fully seen. + +# --hints-- + +You should give the `h1` a `text-align` of `center`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign, 'center'); +``` + +You should add a `main` selector to target the `main` element. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('main')); +``` + +You should give the `main` a `padding-top` of at least `25px`. + +```js +assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('main')?.paddingTop?.replace(/\D+/, '')), 25); +``` + +You should only change the `padding-top` value. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingBottom); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingLeft); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +--fcc-editable-region-- +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + +} + + +--fcc-editable-region-- + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-049.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-049.md new file mode 100644 index 0000000000..df6f891668 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-049.md @@ -0,0 +1,277 @@ +--- +id: 61487da611a65307e78d2c20 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +On small screens, the unordered list in the navigation bar overflows the right side of the screen. + +Fix this by using _Flexbox_ to wrap the `ul` content. Then, set the following CSS properties to correctly align the text: + +```css +align-items: center; +padding-inline-start: 0; +margin-block: 0; +height: 100%; +``` + +# --hints-- + +You should give the `ul` a `flex-wrap` of `wrap`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.flexWrap, 'wrap'); +``` + +You should give the `ul` an `align-items` of `center`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.alignItems, 'center'); +``` + +You should give the `ul` a `padding-inline-start` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.paddingInlineStart, '0px'); +``` + +You should give the `ul` a `margin-block` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.marginBlock, '0px'); +``` + +You should give the `ul` a `height` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +--fcc-editable-region-- +nav > ul { + display: flex; + justify-content: space-evenly; + +} +--fcc-editable-region-- + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-050.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-050.md new file mode 100644 index 0000000000..8ef36ebb49 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-050.md @@ -0,0 +1,289 @@ +--- +id: 61487f703571b60899055cf9 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Set the width of the `section` elements to `80%` of their parent container. Then, use margins to center the `section` elements, adding `10px` to the bottom margin. + +Also, ensure the `section` elements cannot be larger than `600px` in width. + +# --hints-- + +You should use a `section` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('section')); +``` + +You should give the `section` a `width` of `80%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.width, '80%'); +``` + +You should give the `section` a `margin-top` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginTop, '0px'); +``` + +You should give the `section` a `margin-right` of `auto`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginRight, 'auto'); +``` + +You should give the `section` a `margin-bottom` of `10px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginBottom, '10px'); +``` + +You should give the `section` a `margin-left` of `auto`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginLeft, 'auto'); +``` + +You should give the `section` a `max-width` of `600px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +--fcc-editable-region-- + + +--fcc-editable-region-- + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; +} + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-051.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-051.md new file mode 100644 index 0000000000..f251829154 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-051.md @@ -0,0 +1,261 @@ +--- +id: 614880dc16070e093e29bc56 +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Replace the top margin of the `h2` elements with `60px` of top padding. + +# --hints-- + +You should give the `h2` a `margin-top` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.marginTop, '0px'); +``` + +You should give the `h2` a `padding-top` of `60px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +--fcc-editable-region-- +h2 { + border-bottom: 4px solid #dfdfe2; + +} +--fcc-editable-region-- + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-052.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-052.md new file mode 100644 index 0000000000..0768c4388e --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-052.md @@ -0,0 +1,282 @@ +--- +id: 614883b6fa720e09fb167de9 +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Add padding to the top and left of the `.info` elements, and set the other values to `0`. + +# --hints-- + +You should use the `.info` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.info')); +``` + +You should give `.info` a `padding-top` of at least `1px`. + +```js +assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddingTop?.replace(/\D+/, '')), 1); +``` + +You should give `.info` a `padding-right` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.info')?.paddingRight, '0px'); +``` + +You should give `.info` a `padding-bottom` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.info')?.paddingBottom, '0px'); +``` + +You should give `.info` a `padding-left` of at least `1px`. + +```js +assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddingLeft?.replace(/\D+/, '')), 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-053.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-053.md new file mode 100644 index 0000000000..2be5a93108 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-053.md @@ -0,0 +1,366 @@ +--- +id: 614884c1f5d6f30ab3d78cde +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Give the `.formrow` elements top margin, and left and right padding. The other padding values should be `0`. + +Then, increase the font size for all `input` elements. + +# --hints-- + +You should use a `.formrow` selector to target the `.formrow` elements. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.formrow')); +``` + +You should give the `.formrow` a `margin-top` of at least `1px`. + +```js +const val = new __helpers.CSSHelp(document).getStyle('.formrow')?.marginTop; +let valInPx = 0; +if (/^\d+rem$/.test(val)) { + valInPx = remToPx(Number(val.replace('rem', ''))); +} else if (/^\d+em$/.test(val)) { + valInPx = emToPx(Number(val.replace('em', ''))); +} else { + valInPx = Number(val?.replace('px', '')); +} +function emToPx(em) { + return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize); +} +function remToPx(rem) { + return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize); +} +assert.isAtLeast(valInPx, 1); +``` + +You should give the `.formrow` a `padding-top` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingTop, '0px'); +``` + +You should give the `.formrow` a `padding-right` of at least `1px`. + +```js +const val = new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingRight; +let valInPx = 0; +if (/^\d+rem$/.test(val)) { + valInPx = remToPx(Number(val.replace('rem', ''))); +} else if (/^\d+em$/.test(val)) { + valInPx = emToPx(Number(val.replace('em', ''))); +} else { + valInPx = Number(val?.replace('px', '')); +} +function emToPx(em) { + return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize); +} +function remToPx(rem) { + return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize); +} +assert.isAtLeast(valInPx, 1); +``` + +You should give the `.formrow` a `padding-bottom` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingBottom, '0px'); +``` + +You should give the `.formrow` a `padding-left` of at least `1px`. + +```js +const val = new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingLeft; +let valInPx = 0; +if (/^\d+rem$/.test(val)) { + valInPx = remToPx(Number(val.replace('rem', ''))); +} else if (/^\d+em$/.test(val)) { + valInPx = emToPx(Number(val.replace('em', ''))); +} else { + valInPx = Number(val?.replace('px', '')); +} +function emToPx(em) { + return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize); +} +function remToPx(rem) { + return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize); +} +assert.isAtLeast(valInPx, 1); +``` + +You should use an `input` selector to target the `input` elements. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('input')); +``` + +You should give the `input` a `font-size` greater than `13px`. + +```js +const val = new __helpers.CSSHelp(document).getStyle('input')?.fontSize; +let valInPx = 0; +if (/^\d+rem$/.test(val)) { + valInPx = remToPx(Number(val.replace('rem', ''))); +} else if (/^\d+em$/.test(val)) { + valInPx = emToPx(Number(val.replace('em', ''))); +} else { + valInPx = Number(val?.replace('px', '')); +} +function emToPx(em) { + return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize); +} +function remToPx(rem) { + return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize); +} +assert.isAtLeast(valInPx, 13); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-054.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-054.md new file mode 100644 index 0000000000..31d0751cf6 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-054.md @@ -0,0 +1,288 @@ +--- +id: 61488ecfd05e290b5712e6da +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +To make the first section look more inline, target only the `input` elements within `.info` elements, and set their `width` to `50%`, and left-align their text. + +# --hints-- + +You should use either the `.info input` or `.info > input` selector. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +assert.exists(gs('.info input') || gs('.info > input')); +``` + +You should give the `input` elements a `width` of `50%`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.width; +const width = gs('.info input') ?? gs('.info > input'); +assert.equal(width, '50%'); +``` + +You should give the `input` elements a `text-align` of `left`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.textAlign; +const textAlign = gs('.info input') ?? gs('.info > input'); +assert.equal(textAlign, 'left'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-055.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-055.md new file mode 100644 index 0000000000..21a7df5da0 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-055.md @@ -0,0 +1,293 @@ +--- +id: 6148d99cdc7acd0c519862cb +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Target all `label` elements within `.info` elements, and set their `width` to `10%`, and make it so they do not take up less than `55px`. + +# --hints-- + +You should use either the `.info label` or `.info > label` selector. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +assert.exists(gs('.info label') || gs('.info > label')); +``` + +You should give the `label` elements a `width` of `10%`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.width; +const width = gs('.info label') || gs('.info > label'); +assert.equal(width, '10%'); +``` + +You should give the `label` elements a `min-width` of `55px`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.minWidth; +const minWidth = gs('.info label') || gs('.info > label'); +assert.equal(minWidth, '55px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +--fcc-editable-region-- +.info input { + width: 50%; + text-align: left; +} + + +--fcc-editable-region-- + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-056.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-056.md new file mode 100644 index 0000000000..02caeb4ca9 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-056.md @@ -0,0 +1,308 @@ +--- +id: 6148da157cc0bd0d06df5c0a +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +To align the `input` boxes with each other, set the `display` property to `inline-block` for all `input` and `label` elements within `.info` elements. + +Also, align the text to the right. + +# --hints-- + +You should use either a `.info > label, .info > input` or `.info label, .info input` selector. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +assert.exists(gs('.info > label, .info > input') || gs('.info label, .info input') || gs('.info > input, .info > label') || gs('.info input, .info label')); +``` + +You should give the `input` and `label` elements a `display` of `inline-block`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.display; +const display = gs('.info > label, .info > input') ?? gs('.info label, .info input') ?? gs('.info > input, .info > label') ?? gs('.info input, .info label'); +assert.equal(display, 'inline-block'); +``` + +You should give the `input` and `label` elements a `text-align` of `right`. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.textAlign; +const textAlign = gs('.info > label, .info > input') ?? gs('.info label, .info input') ?? gs('.info > input, .info > label') ?? gs('.info input, .info label'); +assert.equal(textAlign, 'right'); +``` + +You should set the `text-align: right` property before the `.info input` rule. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyleRule(s); +assert(gs('.info input').isDeclaredAfter('.info label, .info input') || gs('.info input').isDeclaredAfter('.info > label, .info > input') || gs('.info input').isDeclaredAfter('.info > input, .info > label') || gs('.info input').isDeclaredAfter('.info input, .info label')); + +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +--fcc-editable-region-- + + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} +--fcc-editable-region-- + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-057.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-057.md new file mode 100644 index 0000000000..879cc6163f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-057.md @@ -0,0 +1,325 @@ +--- +id: 6148dc095264000dce348bf5 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +To neaten the `.question-block` elements, set the following CSS properties: + +```css +text-align: left; +display: block; +width: 100%; +margin-top: 20px; +padding-top: 5px; +``` + +# --hints-- + +You should use the `.question-block` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.question-block')); +``` + +You should give the `.question-block` element a `display` of `block`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.display, 'block'); +``` + +You should give the `.question-block` element a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.width, '100%'); +``` + +You should give the `.question-block` element a `margin-top` of `20px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.marginTop, '20px'); +``` + +You should give the `.question-block` element a `padding-top` of `5px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.paddingTop, '5px'); +``` + +You should give the `.question-block` element a `text-align` of `left`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAlign, 'left'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-058.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-058.md new file mode 100644 index 0000000000..cd50c3f0c4 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-058.md @@ -0,0 +1,318 @@ +--- +id: 6148dcaaf2e8750e6cb4501a +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Make the paragraph elements appear as a higher priority, with the following CSS properties: + +```css +margin-top: 5px; +padding-left: 15px; +font-size: 20px; +``` + +# --hints-- + +You should use the `p` element selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('p')); +``` + +You should give the `p` element a `margin-top` of `5px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.marginTop, '5px'); +``` + +You should give the `p` element a `padding-left` of `15px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.paddingLeft, '15px'); +``` + +You should give the `p` element a `font-size` of `20px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +p::before { + content: "Question #"; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-059.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-059.md new file mode 100644 index 0000000000..8f4572b03a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-059.md @@ -0,0 +1,314 @@ +--- +id: 6148dd31d210990f0fb140f8 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +It is useful to see the default border around the `fieldset` elements, during development. However, it might not be the style you want. + +Remove the border and bottom padding on the `.question` elements. + +# --hints-- + +You should use the `.question` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.question')); +``` + +You should give the `.question` a `border` of `none`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.border, 'none'); +``` + +You should give the `.question` a `padding-bottom` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBottom, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-060.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-060.md new file mode 100644 index 0000000000..4edd3d5b55 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-060.md @@ -0,0 +1,317 @@ +--- +id: 6148defa9c01520fb9d178a0 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Remove the default styling for the list items of `.answers-list`, and remove the unordered list padding. + +# --hints-- + +You should use the `.answers-list` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.answers-list')); +``` + +You should give `.answers-list` a `list-style` of `none`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.listStyle, 'none'); +``` + +You should give `.answers-list` a `padding` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-061.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-061.md new file mode 100644 index 0000000000..6b65152309 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-061.md @@ -0,0 +1,362 @@ +--- +id: 6148dfab9b54c110577de165 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Give the submit button a freeCodeCamp-style design, with the following CSS properties: + +```css +display: block; +margin: 40px auto; +width: 40%; +padding: 15px; +font-size: 23px; +background: #d0d0d5; +border: 3px solid #3b3b4f; +``` + +# --hints-- + +You should use the `button` element selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('button')); +``` + +You should give `button` a `display` of `block`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.display, 'block'); +``` + +You should give `button` a `margin` of `40px auto`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.margin, '40px auto'); +``` + +You should give `button` a `width` of `40%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.width, '40%'); +``` + +You should give `button` a `padding` of `15px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.padding, '15px'); +``` + +You should give `button` a `font-size` of `23px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.fontSize, '23px'); +``` + +You should give `button` a `background` of `#d0d0d5`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.background, 'rgb(208, 208, 213)'); +``` + +You should give `button` a `border` of `3px solid #3b3b4f`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px solid rgb(59, 59, 79)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-062.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-062.md new file mode 100644 index 0000000000..1b45e140b5 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-062.md @@ -0,0 +1,338 @@ +--- +id: 6148e0bcc13efd10f7d7a6a9 +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Set the `footer` background color to `#2a2a40`, and use _Flexbox_ to horizontally center the text. + +# --hints-- + +You should use the `footer` element selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('footer')); +``` + +You should give `footer` a `background-color` of `#2a2a40`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.backgroundColor, 'rgb(42, 42, 64)'); +``` + +You should give `footer` a `display` of `flex`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.display, 'flex'); +``` + +You should give `footer` a `justify-content` of `center`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent, 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +button { + display: block; + margin: 40px auto; + width: 40%; + padding: 15px; + font-size: 23px; + background: #d0d0d5; + border: 3px solid #3b3b4f; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-063.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-063.md new file mode 100644 index 0000000000..be31ff5891 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-063.md @@ -0,0 +1,358 @@ +--- +id: 6148e161ecec9511941f8833 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Now, we cannot read the text. Target the `footer` and the anchor element within to set the font color to a color of adequate contrast ratio. + +# --hints-- + +You should use the `footer, footer a` selector. + +```js +const gs = (s) => new __helpers.CSSHelp(document).getStyle(s); +assert.exists(gs('footer, footer a') || gs('footer a, footer')); +``` + +You should set the `color` to a value with a contrast ratio of at least `7:1`. _Hint: I suggest `#dfdfe2`_ + +```js +function luminance(r, g, b) { + const a = [r, g, b].map((v) => { + v /= 255; + return v <= 0.03928 ? v / 12.92 : Math.pow( (v + 0.055) / 1.055, 2.4 ); + }); + return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722; +} +function contrast(rgb1, rgb2) { + const lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]); + const lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]); + const brightest = Math.max(lum1, lum2); + const darkest = Math.min(lum1, lum2); + return (brightest + 0.05) + / (darkest + 0.05); +} +const backgroundColour = [42, 42, 64]; + +const foot = getComputedStyle(document.querySelector('footer'))?.color; +const a = getComputedStyle(document.querySelector('footer a'))?.color; + +const rgbFoot = foot?.match(/(\d+),\s(\d+),\s(\d+)/); +const rgbA = a?.match(/(\d+),\s(\d+),\s(\d+)/); +const footColour = [rgbFoot[1], rgbFoot[2], rgbFoot[3]]; +const aColour = [rgbA[1], rgbA[2], rgbA[3]]; +assert.isAtLeast(contrast(backgroundColour, footColour), 7); +assert.isAtLeast(contrast(backgroundColour, aColour), 7); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +button { + display: block; + margin: 40px auto; + width: 40%; + padding: 15px; + font-size: 23px; + background: #d0d0d5; + border: 3px solid #3b3b4f; +} + +footer { + background-color: #2a2a40; + display: flex; + justify-content: center; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-064.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-064.md new file mode 100644 index 0000000000..bfc6c2a98f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-064.md @@ -0,0 +1,361 @@ +--- +id: 6148e28706b34912340fd042 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Horizontally center all the text within the `address` element, and add some padding. + +# --hints-- + +You should use the `address` element selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('address')); +``` + +You should give `address` a `text-align` of `center`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('address')?.textAlign, 'center'); +``` + +You should give `address` a `padding-top` of at least `1px`. + +```js +assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('address')?.paddingTop?.replace(/\D+/, '')), 1); +``` + +You should give `address` a `padding-right` of at least `1px`. + +```js +assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('address')?.paddingRight?.replace(/\D+/, '')), 1); +``` + +You should give `address` a `padding-bottom` of at least `1px`. + +```js +assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('address')?.paddingBottom?.replace(/\D+/, '')), 1); +``` + +You should give `address` a `padding-left` of at least `1px`. + +```js +assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('address')?.paddingLeft?.replace(/\D+/, '')), 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +button { + display: block; + margin: 40px auto; + width: 40%; + padding: 15px; + font-size: 23px; + background: #d0d0d5; + border: 3px solid #3b3b4f; +} + +footer { + background-color: #2a2a40; + display: flex; + justify-content: center; +} + +footer, +footer a { + color: #dfdfe2; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-065.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-065.md new file mode 100644 index 0000000000..f15a4f80b3 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-065.md @@ -0,0 +1,344 @@ +--- +id: 6148e335c1edd512d00e4691 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Clicking on the navigation links should jump the viewport to the relevant section. However, this jumping can be disorienting for some users. + +Select all elements, and set the `scroll-behavior` to `smooth`. + +# --hints-- + +You should use the `*` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('*')); +``` + +You should give `*` a `scroll-behavior` of `smooth`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smooth'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- + +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +button { + display: block; + margin: 40px auto; + width: 40%; + padding: 15px; + font-size: 23px; + background: #d0d0d5; + border: 3px solid #3b3b4f; +} + +footer { + background-color: #2a2a40; + display: flex; + justify-content: center; +} + +footer, +footer a { + color: #dfdfe2; +} + +address { + text-align: center; + padding: 0.3em; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-066.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-066.md new file mode 100644 index 0000000000..d8ded71855 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-066.md @@ -0,0 +1,352 @@ +--- +id: 6148e41c728f65138addf9cc +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Setting the `scroll-behaviour` to `smooth` is preferred by most users. However, some users find this to be too slow, and prefer to have the scrolling happen instantaneously. + +There exists a media rule to set CSS based on the user's browser settings. This media rule is called `prefers-reduced-motion`, and expects one of the following values: + +- `reduce` +- `no-preference` + +Wrap the appropriate rule within a `prefers-reduced-motion` media rule such that a `scroll-behavior` of `smooth` is only set if the user's browser setting is `no-preference`. + +# --hints-- + +You should have a `@media (prefers-reduced-motion: no-preference)` rule. + +```js +assert.exists(new __helpers.CSSHelp(document).getRuleListsWithinMedia('(prefers-reduced-motion: no-preference)')); +``` + +You should wrap the existing `*` rule within the `@media` rule. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia('(prefers-reduced-motion: no-preference)')?.find(x => x.selectorText === '*')?.style?.scrollBehavior, 'smooth'); +assert.notExists(new __helpers.CSSHelp(document).getStyle('*')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +--fcc-editable-region-- +* { + scroll-behavior: smooth; +} +--fcc-editable-region-- + +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +button { + display: block; + margin: 40px auto; + width: 40%; + padding: 15px; + font-size: 23px; + background: #d0d0d5; + border: 3px solid #3b3b4f; +} + +footer { + background-color: #2a2a40; + display: flex; + justify-content: center; +} + +footer, +footer a { + color: #dfdfe2; +} + +address { + text-align: center; + padding: 0.3em; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-067.md b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-067.md new file mode 100644 index 0000000000..c1ce2000a3 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/accessibility-quiz/step-067.md @@ -0,0 +1,689 @@ +--- +id: 6148e5aeb102e3142de026a2 +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Finally, the navigation accessibility can be improved with providing keyboard shortcuts. + +The `accesskey` attribute accepts a space-separated list of access keys. For example: + +```html + +``` + +Give each of the navigation links a single-letter access key. + +_Note: It is not always advised to use access keys, but they can be useful_ + +Well done. You have completed the _Accessibility Quiz_ practice project. + +# --hints-- + +You should give the first `a` element a single-letter `accesskey`. + +```js +assert.equal(document.querySelectorAll('a')?.[0]?.getAttribute('accesskey')?.length, 1); +``` + +You should give the second `a` element a single-letter `accesskey`. + +```js +assert.equal(document.querySelectorAll('a')?.[1]?.getAttribute('accesskey')?.length, 1); +``` + +You should give the third `a` element a single-letter `accesskey`. + +```js +assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.length, 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + freeCodeCamp: Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +@media (prefers-reduced-motion: no-preference) { + * { + scroll-behavior: smooth; + } +} + +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + background-color: #1b1b32; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; +} + +#logo { + width: max(100px, 18vw); + background-color: #0a0a23; + aspect-ratio: 35 / 4; + padding: 0.4rem; +} + +h1 { + color: #f1be32; + font-size: min(5vw, 1.2em); + text-align: center; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + color: #dfdfe2; + margin: 0 0.2rem; + padding: 0.2rem; + display: block; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0 auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + +.info { + padding: 10px 0 0 5px; +} + +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, .info input { + display: inline-block; + text-align: right; +} + +.info input { + width: 50%; + text-align: left; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +button { + display: block; + margin: 40px auto; + width: 40%; + padding: 15px; + font-size: 23px; + background: #d0d0d5; + border: 3px solid #3b3b4f; +} + +footer { + background-color: #2a2a40; + display: flex; + justify-content: center; +} + +footer, +footer a { + color: #dfdfe2; +} + +address { + text-align: center; + padding: 0.3em; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` + +## --solutions-- + +```html + + + + + + + + freeCodeCamp: Accessibility Quiz + + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

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

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+
+

CSS

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ + + + +``` + +```css +@media (prefers-reduced-motion: no-preference) { + * { + scroll-behavior: smooth; + } +} + +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +header { + width: 100%; + height: 50px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + position: fixed; + background-color: #1b1b32; + top: 0; +} + +#logo { + width: max(100px, 18vw); + aspect-ratio: 35 / 4; + max-height: 100%; + background-color: #0a0a23; + padding: 0.4rem; +} + +h1 { + text-align: center; + font-size: min(5vw, 1.2em); + color: #f1be32; +} + +nav { + width: 50%; + max-width: 300px; + height: 50px; +} + +nav > ul { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: center; + padding-inline-start: 0; + margin-block: 0; + height: 100%; +} + +nav > ul > li { + display: block; + margin: 0 0.2rem; + color: #dfdfe2; + padding: 0.2rem; +} + +nav > ul > li:hover { + background-color: #dfdfe2; + color: #1b1b32; + cursor: pointer; +} + +li > a { + color: inherit; + text-decoration: none; +} + +main { + padding-top: 50px; +} + +section { + width: 80%; + margin: 0px auto 10px auto; + max-width: 600px; +} + +h1, +h2 { + font-family: Verdana, Tahoma; +} + +h2 { + border-bottom: 4px solid #dfdfe2; + margin-top: 0px; + padding-top: 60px; +} + + +.info { + margin: 0 auto; + padding: 10px 0 0 5px; +} +.formrow { + margin-top: 30px; + padding: 0px 15px; +} + +input { + font-size: 16px; +} + +.info label, +.info input { + display: inline-block; + text-align: right; +} + +.info label { + width: 10%; + min-width: 55px; +} + +.info input { + width: 50%; + text-align: left; +} + +.question-block { + text-align: left; + display: block; + width: 100%; + margin-top: 20px; + padding-top: 5px; +} + +p { + margin-top: 5px; + padding-left: 15px; + font-size: 20px; +} + +p::before { + content: "Question #"; +} + +.question { + border: none; + padding-bottom: 0; +} + +.answers-list { + list-style: none; + padding: 0; +} + +button { + display: block; + margin: 40px auto; + width: 40%; + padding: 15px; + font-size: 23px; + background: #d0d0d5; + border: 3px solid #3b3b4f; +} + +footer { + background-color: #2a2a40; + display: flex; + justify-content: center; +} + +footer, +footer a { + color: #dfdfe2; +} + +address { + text-align: center; + padding: 0.3em; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-001.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-001.md deleted file mode 100644 index cf1bfa7b34..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-001.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5f33071498eb2472b87ddee4 -title: Part 1 -challengeType: 0 -dashedName: part-1 ---- - -# --description-- - -As you learned in the last few steps of the Cat Photo App, there is a basic structure needed to start building your web page. - -Add the `` tag, and an `html` element. - -# --hints-- - -You should have the `DOCTYPE` declaration. - -```js -assert(code.match(//i)); -``` - -You should have an opening `` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `` tag. Remember that closing tags have a `/` following the opening `<` bracket. - -```js -assert(code.match(/<\/html>/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-002.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-002.md deleted file mode 100644 index 1b96ad27c5..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-002.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -id: 5f3313e74582ad9d063e3a38 -title: Part 2 -challengeType: 0 -dashedName: part-2 ---- - -# --description-- - -Add a `head` element within the `html` element, so you can add a `title` element. The title element's text should be `Camper Cafe Menu`. - -# --hints-- - -You should have an opening `` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `` tag. - -```js -assert(code.match(//i)); -``` - -You should have an opening `` tag. - -```js -assert(code.match(/<title>/i)); -``` - -You should have a closing `` tag. - -```js -assert(code.match(/<\/title>/i)); -``` - -Your `` element should be nested in your `<head>` element. - -```js -assert(code.match(/<head>\s*<title>.*<\/title>\s*<\/head>/i)); -``` - -Your `<title>` element should have the text `Camper Cafe Menu`. You may need to check your spelling. - -```js -assert(code.match(/<title>camper\scafe\smenu<\/title>/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html -<!DOCTYPE html> -<html> ---fcc-editable-region-- - ---fcc-editable-region-- -</html> -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-003.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-003.md deleted file mode 100644 index 9c15fc8ea3..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-003.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 5f331e55dfab7a896e53c3a1 -title: Part 3 -challengeType: 0 -dashedName: part-3 ---- - -# --description-- - -The `title` is one of several elements that provide extra information not visible on the web page, but could be useful for search engines or how the page gets displayed. - -Inside the `head` element, nest a `meta` element with an attribute named `charset` set to the value `utf-8` to tell the browser how to encode characters for the page. Note that `meta` elements are self-closing. - -# --hints-- - -You should have a `meta` tag. - -```js -assert(code.match(/<meta\s.*>/i)); -``` - -Your `meta` tag should have a `charset` attribute. - -```js -assert(code.match(/<meta charset=/i)); -``` - -Your `charset` attribute should have a value of `utf-8`. - -```js -assert(code.match(/charset=('|")utf-8\1/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html -<!DOCTYPE html> -<html> ---fcc-editable-region-- - <head> - <title>Camper Cafe Menu - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-004.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-004.md deleted file mode 100644 index a292209bd8..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-004.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5f3326b143638ee1a09ff1e3 -title: Part 4 -challengeType: 0 -dashedName: part-4 ---- - -# --description-- - -To prepare to create some actual content, add a `body` element below the `head` element. - -# --hints-- - -You should have an opening `` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `` tag. - -```js -assert(code.match(/<\/body>/i)); -``` - -You should not change your `head` element. Make sure you did not delete your closing tag. - -```js -assert(code.match(//i)); -assert(code.match(/<\/head>/i)); -``` - -Your `body` element should come after your `head` element. - -```js -assert(code.match(/<\/head>[.\n\s]*/im)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- - - - Camper Cafe Menu - ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-005.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-005.md deleted file mode 100644 index 0267635ef0..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-005.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5f33294a6af5e9188dbdb8f3 -title: Part 5 -challengeType: 0 -dashedName: part-5 ---- - -# --description-- - -The name of the cafe is `CAMPER CAFE`. Add an `h1` element within your `body` element. Give it the name of the cafe in capitalized letters to make it stand out. - -# --hints-- - -You should have an opening `

` tag. - -```js -assert(code.match(/

/i)); -``` - -You should have a closing `

` tag. - -```js -assert(code.match(/<\/h1>/i)); -``` - -You should not change your existing `body` element. - -```js -assert($('body').length === 1); -``` - -Your `h1` element should be nested in your `body` element. - -```js -assert($('h1')[0].parentElement.tagName === "BODY"); -``` - -Your `h1` element should have the text `CAMPER CAFE`. - -```js -assert(code.match(/

CAMPER CAFE<\/h1>/)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Camper Cafe Menu - ---fcc-editable-region-- - - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-006.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-006.md deleted file mode 100644 index 2f5945b1fc..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-006.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -id: 5f332a88dc25a0fd25c7687a -title: Part 6 -challengeType: 0 -dashedName: part-6 ---- - -# --description-- - -To let visitors know the cafe was founded in 2020, add a `p` element below the `h1` element with the text `Est. 2020`. - -# --hints-- - -You should have an opening `

` tag. - -```js -assert(code.match(/

/i)); -``` - -You should have a closing `

` tag. - -```js -assert(code.match(/<\/p>/i)); -``` - -You should not change your existing `h1` element. Make sure you did not delete the closing tag. - -```js -assert($('h1').length === 1); -``` - -Your `p` element should be below your `h1` element. - -```js -assert($('p')[0].previousElementSibling.tagName === 'H1'); -``` - -Your `p` element should have the text `Est. 2020`. - -```js -assert(code.match(/

Est. 2020<\/p>/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Camper Cafe Menu - - ---fcc-editable-region-- -

CAMPER CAFE

---fcc-editable-region-- - - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-007.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-007.md deleted file mode 100644 index e38f371ed1..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-007.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 5f332b23c2045fb843337579 -title: Part 7 -challengeType: 0 -dashedName: part-7 ---- - -# --description-- - -Since the `p` element added in the previous step provides supplemental information about the cafe, nest both the `h1` and `p` elements in a `header` element. - -# --hints-- - -You should have an opening `
` tag. - -```js -assert(code.match(/
/i)); -``` - -You should have a closing `
` tag. - -```js -assert(code.match(/<\/header>/i)); -``` - -Your `h1` element should be nested in your `header` element. - -```js -const header = document.querySelectorAll('header')[0]; -assert(header.children[0].tagName === 'H1'); -``` - -Your `p` element should be nested in your `header` element. - -```js -const header = document.querySelectorAll('header')[0]; -assert(header.children[1].tagName === "P"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Camper Cafe Menu - - ---fcc-editable-region-- -

CAMPER CAFE

-

Est. 2020

---fcc-editable-region-- - - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-008.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-008.md deleted file mode 100644 index 357ce84cec..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-008.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 5f33310c1851c6c4da013250 -title: Part 8 -challengeType: 0 -dashedName: part-8 ---- - -# --description-- - -It's time to add some menu content. Add a `main` element below the existing `header` element. It will eventually contain pricing information about coffee and desserts offered by the cafe. - -# --hints-- - -Your code should have an opening `
` tag. - -```js -assert(code.match(/
/i)); -``` - -Your code should have a closing `
` tag. - -```js -assert(code.match(/<\/main>/i)); -``` - -You should not change your `header` element. Make sure you don't accidentally delete your closing tag. - -```js -assert($('header').length === 1); -``` - -Your `main` tag should come after your `header` tag. - -```js -const main = document.querySelectorAll('main')[0]; -assert(main.previousElementSibling.tagName === 'HEADER'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Camper Cafe Menu - - ---fcc-editable-region-- -
-

CAMPER CAFE

-

Est. 2020

-
---fcc-editable-region-- - - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-009.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-009.md deleted file mode 100644 index 4eb0ee6325..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-009.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -id: 5f344fc1520b6719f2e35605 -title: Part 9 -challengeType: 0 -dashedName: part-9 ---- - -# --description-- - -There will be two sections on the menu, one for coffees and one for desserts. Add a `section` element within the `main` element so you have a place to put all the coffees available. - -# --hints-- - -You should have an opening `
` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `
` tag. - -```js -assert(code.match(/<\/section\s*>/i)); -``` - -You should not change your existing `main` element. Make sure you didn't delete the closing tag. - -```js -assert($('main').length === 1); -``` - -Your `section` element should be within your `main` element. - -```js -const main = document.querySelectorAll('main')?.[0]; -assert(main.children[0].tagName === 'SECTION'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Camper Cafe Menu - - -
-

CAMPER CAFE

-

Est. 2020

-
---fcc-editable-region-- -
-
---fcc-editable-region-- - - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-010.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-010.md deleted file mode 100644 index a5725d7428..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-010.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: 5f344fbc22624a2976425065 -title: Part 10 -challengeType: 0 -dashedName: part-10 ---- - -# --description-- - -Create an `h2` element in the `section` element and give it the text `Coffee`. - -# --hints-- - -You should have an opening `

` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `

` tag. - -```js -assert(code.match(/<\/h2\s*>/i)); -``` - -You should not change your existing `section` element. Make sure you did not delete the closing tag. - -```js -assert($('section').length === 1); -``` - -Your `h2` element should be within your `section` element. - -```js -const h2 = document.querySelector('h2'); -assert(h2.parentElement.tagName === 'SECTION'); -``` - -Your `h2` element should have the text `Coffee`. - -```js -const h2 = document.querySelector('h2'); -assert(h2.innerText === 'Coffee'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Camper Cafe Menu - - -
-

CAMPER CAFE

-

Est. 2020

-
-
---fcc-editable-region-- -
-
---fcc-editable-region-- -
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-011.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-011.md deleted file mode 100644 index 88e2bd4721..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-011.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -id: 5f344fad8bf01691e71a30eb -title: Part 11 -challengeType: 0 -dashedName: part-11 ---- - -# --description-- - -Up until now, you have been limited regarding the presentation and appearance of the content you create. To start taking control, add a `style` element within the `head` element. - -# --hints-- - -Your code should have an opening `` tag. - -```js -assert(code.match(/<\/style\s*>/)); -``` - -Your `style` element should be nested in your `head` element. - -```js -assert(code.match(/[\w\W\s]*[\w\W\s]*<\/style\s*>[\w\W\s]*<\/head\s*>/i)) -``` - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- - - - Camper Cafe Menu - - -
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
- ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-012.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-012.md deleted file mode 100644 index 43317a5e4c..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-012.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 5f344f9c805cd193c33d829c -title: Part 12 -challengeType: 0 -dashedName: part-12 ---- - -# --description-- - -You can add style to an element by specifying it in the `style` element and setting a property for it like this: - -```css -element { - property: value; -} -``` - -Center your `h1` element by setting its `text-align` property to the value `center`. - -# --hints-- - -You should have an `h1` selector in your `style` element. - -```js -const hasSelector = new __helpers.CSSHelp(document).getStyle('h1'); -assert(hasSelector); -``` - -Your `text-align` property should set a value of `center`. - -```js -const hasTextAlign = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['text-align'] === 'center'); -assert(hasTextAlign); -``` - -Your `h1` selector should set the `text-align` property to `center`. - -```js -const h1TextAlign = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('text-align'); -assert(h1TextAlign === 'center'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Camper Cafe Menu ---fcc-editable-region-- - ---fcc-editable-region-- - - -
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-013.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-013.md deleted file mode 100644 index 2233cb1c9a..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-013.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -id: 5f3477ae9675db8bb7655b30 -title: Part 13 -challengeType: 0 -dashedName: part-13 ---- - -# --description-- - -In the previous step, you used a type selector to style the `h1` element. Go ahead and center the `h2` and `p` elements with a new type selector for each one. - -# --hints-- - -You should not change the existing `h1` selector. - -```js -const hasH1 = new __helpers.CSSHelp(document).getStyle('h1'); -assert(hasH1); -``` - -You should add a new `h2` selector. - -```js -const hasH2 = new __helpers.CSSHelp(document).getStyle('h2'); -assert(hasH2); -``` - -You should add a new `p` selector. - -```js -const hasP = new __helpers.CSSHelp(document).getStyle('p'); -assert(hasP); -``` - -Your `h1` element should have a `text-align` of `center`. - -```js -const h1TextAlign = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('text-align'); -assert(h1TextAlign === 'center'); -``` - -Your `h2` element should have a `text-align` of `center`. - -```js -const h2TextAlign = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('text-align'); -assert(h2TextAlign === 'center'); -``` - -Your `p` element should have a `text-align` of `center`. - -```js -const pTextAlign = new __helpers.CSSHelp(document).getStyle('p')?.getPropertyValue('text-align'); -assert(pTextAlign === 'center'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Camper Cafe Menu ---fcc-editable-region-- - ---fcc-editable-region-- - - -
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-014.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-014.md deleted file mode 100644 index f71b45cca6..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-014.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: 5f3477ae34c1239cafe128be -title: Part 14 -challengeType: 0 -dashedName: part-14 ---- - -# --description-- - -You now have three type selectors with the exact same styling. You can add the same group of styles to many elements by separating the selectors with commas like this: - -```css -selector1, selector2 { - property: value; -} -``` - -Use a single type selector to center the `h1`, `h2` and `p` elements at the same time. - -# --hints-- - -You should use a single type selector for all three elements, `h1, h2, p`. Be sure to use that order. - -```js -const hasSelector = new __helpers.CSSHelp(document).getStyle('h1, h2, p'); -assert(hasSelector); -``` - -You should only have one selector in your `style` element. - -```js -const selectors = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.selectorText) -assert(selectors.length === 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Camper Cafe Menu ---fcc-editable-region-- - ---fcc-editable-region-- - - -
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-015.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-015.md deleted file mode 100644 index 70bf94ef00..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-015.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: 5f3477aefa51bfc29327200b -title: Part 15 -challengeType: 0 -dashedName: part-15 ---- - -# --description-- - -You have styled three elements by writing CSS inside the `style` tags. This works, but since there will many more styles, it's best to put all the styles in a separate file and link to it. - -We have created a separate `styles.css` file for you and switched the editor view to that file. You can change between files with the tabs at the top of the editor. - -Start by rewriting the styles you have created into the `styles.css` file. Make sure to exclude the opening and closing `style` tags. - -# --hints-- - -Your `styles.css` file should have the `h1, h2, p` type selector. - -```js -const css = code.split('')[0]; -assert(__helpers.removeWhiteSpace(css).match(/(h1|h2|p),(h1|h2|p),(h1|h2|p){/)) -``` - -Your selector should set the `text-align` property to `center`. - -```js -const css = code.split('')[0]; -assert(css.match(/text-align:\s*center;?/)); -``` - -You should only have one selector. - -```js -const css = code.split('')[0]; -assert(css.match(/text-align:\s*center;?/).length === 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Camper Cafe Menu - - - -
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
- - -``` - -```css ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-016.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-016.md deleted file mode 100644 index 83f4e8e659..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-016.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 5f3477ae8466a9a3d2cc953c -title: Part 16 -challengeType: 0 -dashedName: part-16 ---- - -# --description-- - -Now that you have the CSS in the `styles.css` file, go ahead and remove the `style` element and all its content. Once it is removed, the text that was centered will shift back to the left. - -# --hints-- - -You should not have any `style` tags in your code. - -```js -assert(!code.match(/style/i)); -``` - -You should not have any CSS selectors in your HTML file. - -```js -const html = code.split('')[1]; -assert(!html.includes('style')); -assert(!html.includes('text-align')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- - - - Camper Cafe Menu - - ---fcc-editable-region-- - -
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
- - -``` - -```css -h1, h2, p { - text-align: center; -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-017.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-017.md deleted file mode 100644 index 09fa54f587..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-017.md +++ /dev/null @@ -1,89 +0,0 @@ ---- -id: 5f3477cb2e27333b1ab2b955 -title: Part 17 -challengeType: 0 -dashedName: part-17 ---- - -# --description-- - -Now you need to link the `styles.css` file so the styles will be applied again. Nest a self-closing `link` element in the `head` element. Give it a `rel` attribute value `stylesheet`, a `type` attribute value of `text/css`, and an `href` attribute value of `styles.css`. - -# --hints-- - -Your code should have a `link` element. - -```js -// link is removed -> if exists, replaced with style -const link = document.querySelector('body > style'); -assert(link); -``` - -You should not change your existing `head` element. Make sure you did not delete the closing tag. - -```js -assert($('head').length === 1); -``` - -Your `link` element should be a self-closing element. - -```js -assert(code.match(//i)); -``` - -Your `link` element should be within your `head` element. - -```js -assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)) -``` - -Your `link` element should have a `rel` attribute with the value `stylesheet`. - -```js -assert(code.match(/rel=('|")stylesheet\1/i)); -``` - -Your `link` element should have a `type` attribute with the value `text/css`. - -```js -assert(code.match(/type=('|")text\/css\1/i)); -``` - -Your `link` element should have an `href` attribute with the value `styles.css`. - -```js -assert(code.match(/href=('|")styles.css\1/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- - - - Camper Cafe Menu - ---fcc-editable-region-- - -
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
- - -``` - -```css -h1, h2, p { - text-align: center; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-018.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-018.md deleted file mode 100644 index b8535eec70..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-018.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -id: 5f3477cbcb6ba47918c1da92 -title: Part 18 -challengeType: 0 -dashedName: part-18 ---- - -# --description-- - -So the styling of the page looks similar on mobile as it does on a desktop or laptop, you need to add a `meta` element with a special `content` attribute. - -Add the following within the `head` element: - -```html - -``` - -# --hints-- - -Your code should have two `meta` elements. - -```js -assert(code.match(//g).length === 2); -``` - -Your `meta` element should have a `name` attribute with a value of `viewport`. - -```js -const meta = $('meta'); -assert(meta[0].outerHTML.match(/name=('|")viewport\1/) || meta[1].outerHTML.match(/name=('|")viewport\1/)); -``` - -Your `meta` element should have a `content` attribute with a value of `width=device-width, initial-scale=1.0`. - -```js -const meta = $('meta'); -assert(meta[0].outerHTML.match(/content=('|")width=device-width, initial-scale=1.0\1/) || meta[1].outerHTML.match(/content=('|")width=device-width, initial-scale=1.0\1/)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- - - - Camper Cafe Menu - - ---fcc-editable-region-- - -
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
- - -``` - -```css -h1, h2, p { - text-align: center; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-019.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-019.md deleted file mode 100644 index 2a2d4d84b8..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-019.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: 5f3477cb303c5cb61b43aa9b -title: Part 19 -challengeType: 0 -dashedName: part-19 ---- - -# --description-- - -The text is centered again so the link to the CSS file is working. Add another style to the file that changes the `background-color` property to `brown` for the `body` element. - -# --hints-- - -You should use a `body` selector. - -```js -const hasBody = new __helpers.CSSHelp(document).getStyle('body'); -assert(hasBody); -``` - -You should set the `background-color` property to `brown`. - -```js -const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'brown'); -assert(hasBackground); -``` - -Your `body` element should have a `brown` background. - -```js -const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color'); -assert(bodyBackground === 'brown'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
- - -``` - -```css ---fcc-editable-region-- -h1, h2, p { - text-align: center; -} ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-020.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-020.md deleted file mode 100644 index d006e00161..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-020.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -id: 5f34a1fd611d003edeafd681 -title: Part 20 -challengeType: 0 -dashedName: part-20 ---- - -# --description-- - -That brown background makes it hard to read the text. Change the `body` element's background color to be `burlywood` so it has some color but you are still be able to read the text. - -# --hints-- - -You should set the `background-color` property to `burlywood`. - -```js -const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'burlywood'); -assert(hasBackground); -``` - -Your `body` element should have a `burlywood` background. - -```js -const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color'); -assert(bodyBackground === 'burlywood'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
- - -``` - -```css ---fcc-editable-region-- -body { - background-color: brown; -} ---fcc-editable-region-- -h1, h2, p { - text-align: center; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-021.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-021.md deleted file mode 100644 index 80de988606..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-021.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -id: 5f356ed6cf6eab5f15f5cfe6 -title: Part 21 -challengeType: 0 -dashedName: part-21 ---- - -# --description-- - -The `div` element is used mainly for design layout purposes unlike the other content elements you have used so far. Add a `div` element inside the `body` element and then move all the other elements inside the new `div`. - -# --hints-- - -You should have an opening `
` tag. - -```js -assert(code.match(/
/i)); -``` - -You should have a closing `
` tag. - -```js -assert(code.match(/<\/div>/i)); -``` - -You should not change your existing `body` element. Make sure you did not delete the closing tag. - -```js -assert($('body').length === 1); -``` - -Your `div` tag should be nested in the `body`. - -```js -const div = $('div')[0]; -assert(div.parentElement.tagName === 'BODY'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - ---fcc-editable-region-- - -
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
- ---fcc-editable-region-- - -``` - -```css -body { - background-color: burlywood; -} - -h1, h2, p { - text-align: center; -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-022.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-022.md deleted file mode 100644 index 7127c94b59..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-022.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -id: 5f356ed63c7807a4f1e6d054 -title: Part 22 -challengeType: 0 -dashedName: part-22 ---- - -# --description-- - -The goal now is to make the `div` not take up the entire width of the page. The CSS `width` property is perfect for this. Create a new type selector in the style sheet that gives your `div` element a width of `300px`. - -# --hints-- - -You should have a `div` type selector. - -```js -const hasDiv = new __helpers.CSSHelp(document).getStyle('div'); -assert(hasDiv); -``` - -You should set the `width` property to `300px`. - -```js -const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px'); -assert(hasWidth); -``` - -Your `div` should have a width of 300px. - -```js -const divWidth = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('width'); -assert(divWidth === '300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
-
- - -``` - -```css ---fcc-editable-region-- -body { - background-color: burlywood; -} - -h1, h2, p { - text-align: center; -} ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-023.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-023.md deleted file mode 100644 index 904356b9bc..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-023.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 5f356ed60a5decd94ab66986 -title: Part 23 -challengeType: 0 -removeComments: false -dashedName: part-23 ---- - -# --description-- - -Comments in CSS look like this: - -```css -/* comment here */ -``` - -In your style sheet, comment out the the line containing the `background-color` property and value, so you can see the effect of only styling `div` element. This will make the background white again. - -# --hints-- - -You should comment out the `background-color: burlywood;` line in your CSS. - -```js -assert(code.match(/\/\*\s*background-color:\s*burlywood;?\s*\*\//i)); -``` - - -Your `body` should have a white background. - -```js -const bodyCSS = $('body').css('background-color'); -assert(bodyCSS === "rgba(0, 0, 0, 0)") -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
-
- - -``` - -```css -body { ---fcc-editable-region-- - background-color: burlywood; ---fcc-editable-region-- -} - -h1, h2, p { - text-align: center; -} - -div { - width: 300px; -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-024.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-024.md deleted file mode 100644 index 74787abfa1..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-024.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: 5f356ed63e0fa262326eef05 -title: Part 24 -challengeType: 0 -dashedName: part-24 ---- - -# --description-- - -Now make the background color of the `div` element to be `burlywood`. - -# --hints-- - -You should set the `background-color` property to `burlywood`. - -```js -const hasBackgroundColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'burlywood'); -assert(hasBackgroundColor); -``` - -Your `div` should have a burlywood background. - -```js -const divBackground = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('background-color'); -assert(divBackground === 'burlywood'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
-
- - -``` - -```css -body { - /* - background-color: burlywood; - */ -} - -h1, h2, p { - text-align: center; -} - ---fcc-editable-region-- -div { - width: 300px; -} ---fcc-editable-region-- -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-025.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-025.md deleted file mode 100644 index a1a1e13469..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-025.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: 5f356ed60785e1f3e9850b6e -title: Part 25 -challengeType: 0 -dashedName: part-25 ---- - -# --description-- - -Now it's easy to see that the text is centered inside the `div` element. Currently, the width of the `div` element is specified in pixels (`px`). Change the `width` property's value to be `80%`, to make it is 80% the width of its parent element (`body`). - -# --hints-- - -You should set the `width` property to `80%`. - -```js -const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '80%'); -assert(hasWidth); -``` - -You should not have a `width` property of `300px`. - -```js -const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px'); -assert(!hasWidth); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
-
- - -``` - -```css -body { - /* - background-color: burlywood; - */ -} - -h1, h2, p { - text-align: center; -} ---fcc-editable-region-- -div { - width: 300px; - background-color: burlywood; -} ---fcc-editable-region-- -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-026.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-026.md deleted file mode 100644 index e61cab9c6e..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-026.md +++ /dev/null @@ -1,83 +0,0 @@ ---- -id: 5f356ed656a336993abd9f7c -title: Part 26 -challengeType: 0 -dashedName: part-26 ---- - -# --description-- - -Next, you want to center the `div` horizontally. You can do this by setting its `margin-left` and `margin-right` properties to `auto`. Think of the margin as invisible space around an element. Using these two margin properties, center the `div` element within the `body` element. - -# --hints-- - -You should set the `margin-left` property to `auto`. - -```js -const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-left'] === 'auto'); -assert(hasMargin); -``` - -You should set the `margin-right` property to `auto`. - -```js -const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-right'] === 'auto'); -assert(hasMargin); -``` - -You should set the `margin-left` and `margin-right` properties of your `div` to `auto`. - -```js -const divMarginRight = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('margin-right'); -const divMarginLeft = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('margin-left'); -assert(divMarginRight === 'auto'); -assert(divMarginLeft === 'auto'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
-
- - -``` - -```css -body { - /* - background-color: burlywood; - */ -} - -h1, h2, p { - text-align: center; -} - ---fcc-editable-region-- -div { - width: 80%; - background-color: burlywood; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-027.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-027.md deleted file mode 100644 index 6504b85e84..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-027.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -id: 5f356ed6199b0cdef1d2be8f -title: Part 27 -challengeType: 0 -dashedName: part-27 ---- - -# --description-- - -So far you have been using type selectors to style elements. A class selector is defined by a name with a dot directly in front it, like this: - -```css -.class-name { - styles -} -``` - -Change the existing `div` selector into a class selector by replacing `div` with a class named `menu`. - -# --hints-- - -You should have a `.menu` type selector. - -```js -const hasMenu = new __helpers.CSSHelp(document).getStyle('.menu'); -assert(hasMenu); -``` - -You should not have a `div` selector. - -```js -const hasDiv = new __helpers.CSSHelp(document).getStyle('div'); -assert(!hasDiv); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
-
- - -``` - -```css -body { - /* - background-color: burlywood; - */ -} - -h1, h2, p { - text-align: center; -} - ---fcc-editable-region-- -div { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} ---fcc-editable-region-- -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-028.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-028.md deleted file mode 100644 index b13c3c2179..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-028.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -id: 5f356ed69db0a491745e2bb6 -title: Part 28 -challengeType: 0 -dashedName: part-28 ---- - -# --description-- - -To apply the class's styling to the `div` element, add a `class` attribute to the `div` element's opening tag and set its value to `menu`. - -# --hints-- - -Your `div` should still render. Make sure you haven't malformed the `
` tag. - -```js -assert($('div').length === 1); -``` - -Your `div` element should have the `menu` class. - -```js -assert($('div').attr('class').includes('menu')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - ---fcc-editable-region-- -
---fcc-editable-region-- -
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
-
- - -``` - -```css -body { - /* - background-color: burlywood; - */ -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-029.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-029.md deleted file mode 100644 index af82358778..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-029.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -id: 5f35e5c44359872a137bd98f -title: Part 29 -challengeType: 0 -dashedName: part-29 ---- - -# --description-- - -Since the cafe's main product for sale is coffee, you could use an image of coffee beans for the background of the page. - -Delete the comment and its contents inside the `body` type selector. Now add a `background-image` property and set its value to `url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)`. - -# --hints-- - -You should remove the commented out `background-color` property. - -```js -assert(!code.match(/\/\*\s*background-color:\s*burlywood;?\s*\*\//i)) -``` - -Your `body` selector should not have any comments. - -```js -assert(!code.match(/body\s*{\s*\/\*/i)); -``` - -You should set the `background-image` property to `url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)`. - -```js -const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-image'] === `url("https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg")`) -assert(hasBackground) -``` - -Your `body` element should have the coffee beans background image. - -```js -const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-image'); -console.log(bodyBackground); -assert(bodyBackground === `url("https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg")`); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-
-
- - -``` - -```css -body { ---fcc-editable-region-- - /* - background-color: burlywood; - */ ---fcc-editable-region-- -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-030.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-030.md deleted file mode 100644 index 407c85d7c8..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-030.md +++ /dev/null @@ -1,86 +0,0 @@ ---- -id: 5f35e5c4321f818cdc4bed30 -title: Part 30 -challengeType: 0 -dashedName: part-30 ---- - -# --description-- - -It’s looking good. Time to start adding some menu items. Add an empty `article` element under the `Coffee` heading. It will contain a flavor and price of each coffee you currently offer. - -# --hints-- - -You should have an opening `
` tag. - -```js -assert(code.match(/
/i)); -``` - -You should have a closing `
` tag. - -```js -assert(code.match(/<\/article>/i)); -``` - -You should not change the existing `h2` element. - -```js -assert($('h2').length === 1); -``` - -Your `article` element should come after your `h2` element. - -```js -const article = $('article')[0]; -assert(article.previousElementSibling.tagName === 'H2'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
---fcc-editable-region-- -

Coffee

---fcc-editable-region-- -
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-031.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-031.md deleted file mode 100644 index 3c3f4e83ec..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-031.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 5f3c866daec9a49519871816 -title: Part 31 -challengeType: 0 -dashedName: part-31 ---- - -# --description-- - -`article` elements commonly contain multiple elements that have related information. In this case, it will contain a coffee flavor and a price for that flavor. Nest two `p` elements inside your `article` element. The first one's text should be `French Vanilla`, and the second's text `3.00`. - -# --hints-- - -You should not change the existing `article` element. - -```js -assert($('article').length === 1); -``` - -Your `article` element should have two `p` elements. - -```js -assert($('article').children('p').length === 2); -``` - -Your first `p` element should have the text `French Vanilla`. - -```js -const firstP = $('article').children('p')[0]; -assert(firstP.innerText.match(/French Vanilla/i)); -``` - -Your second `p` element should have the text `3.00`. - -```js -const secondP = $('article').children('p')[1]; -assert(secondP.innerText.match(/3\.00/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

---fcc-editable-region-- -
-
---fcc-editable-region-- -
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-032.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-032.md deleted file mode 100644 index 7a704ed606..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-032.md +++ /dev/null @@ -1,128 +0,0 @@ ---- -id: 5f3c866d5414453fc2d7b480 -title: Part 32 -challengeType: 0 -dashedName: part-32 ---- - -# --description-- - -Starting below the existing coffee/price pair, add the following coffee and prices using `article` elements with two nested `p` elements inside each. As before, the first `p` element's text should contain the coffee flavor and the second `p` element's text should contain the price. - -```bash -Caramel Macchiato 3.75 -Pumpkin Spice 3.50 -Hazelnut 4.00 -Mocha 4.50 -``` - -# --hints-- - -You should have five `article` elements. - -```js -assert($('article').length === 5); -``` - -Each `article` element should have two `p` elements. - -```js -const articles = $('article'); -assert(articles[0].children.length === 2); -assert(articles[1].children.length === 2); -assert(articles[2].children.length === 2); -assert(articles[3].children.length === 2); -assert(articles[4].children.length === 2); -``` - -Your first `article` element should have `p` elements with the text `French Vanilla` and `3.00`. - -```js -const children = $('article')[0].children; -assert(children[0].innerText.match(/French Vanilla/i)); -assert(children[1].innerText.match(/3\.00/i)); -``` - -Your second `article` element should have `p` elements with the text `Caramel Macchiato` and `3.75`. - -```js -const children = $('article')[1].children; -assert(children[0].innerText.match(/Caramel Macchiato/i)); -assert(children[1].innerText.match(/3\.75/i)); -``` - -Your third `article` element should have `p` elements with the text `Pumpkin Spice` and `3.50`. - -```js -const children = $('article')[2].children; -assert(children[0].innerText.match(/Pumpkin Spice/i)); -assert(children[1].innerText.match(/3\.50/i)); -``` - -Your fourth `article` element should have `p` elements with the text `Hazelnut` and `4.00`. - -```js -const children = $('article')[3].children; -assert(children[0].innerText.match(/Hazelnut/i)); -assert(children[1].innerText.match(/4\.00/i)); -``` - -Your fifth `article` element should have `p` elements with the text `Mocha` and `4.50`. - -```js -const children = $('article')[4].children; -assert(children[0].innerText.match(/Mocha/i)); -assert(children[1].innerText.match(/4\.50/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

---fcc-editable-region-- -
-

French Vanilla

-

3.00

-
---fcc-editable-region-- -
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-033.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-033.md deleted file mode 100644 index dc4fb48580..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-033.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 5f3c866d28d7ad0de6470505 -title: Part 33 -challengeType: 0 -dashedName: part-33 ---- - -# --description-- - -The flavors and prices are currently stacked on top of each other and centered with their respectable `p` elements. It would be nice if the flavor was on the left and the price was on the right. - -Add the class name `flavor` to the `French Vanilla` `p` element. - -# --hints-- - -You should add the `flavor` class to your `p` element. - -```js -assert(code.match(//i)); -``` - -You should only have one element with the `flavor` class. - -```js -assert($('.flavor').length === 1); -``` - -Your `flavor` class should be on the `p` element with the text `French Vanilla`. - -```js -assert($('.flavor')[0].innerText.match(/French Vanilla/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
---fcc-editable-region-- -

French Vanilla

-

3.00

---fcc-editable-region-- -
-
-

Caramel Macchiato

-

3.75

-
-
-

Pumpkin Spice

-

3.50

-
-
-

Hazelnut

-

4.00

-
-
-

Mocha

-

4.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-034.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-034.md deleted file mode 100644 index 98abe22d01..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-034.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 5f769541be494f25449b292f -title: Part 34 -challengeType: 0 -dashedName: part-34 ---- - -# --description-- - -Using your new `flavor` class as a selector, set the `text-align` property's value to `left`. - -# --hints-- - -You should have a `flavor` class selector. - -```js -const hasFlavor = new __helpers.CSSHelp(document).getStyle('.flavor'); -assert(hasFlavor); -``` - -You should set the `text-align` property to `left`. - -```js -const hasTextAlign = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['text-align'] === 'left'); -assert(hasTextAlign); -``` - -Your `flavor` class selector should set the `text-align` property to `left`. - -```js -const flavorTextAlign = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('text-align'); -assert(flavorTextAlign === 'left'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

-

3.00

-
-
-

Caramel Macchiato

-

3.75

-
-
-

Pumpkin Spice

-

3.50

-
-
-

Hazelnut

-

4.00

-
-
-

Mocha

-

4.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-035.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-035.md deleted file mode 100644 index 211f459fb0..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-035.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 5f76967fad478126d6552b0d -title: Part 35 -challengeType: 0 -dashedName: part-35 ---- - -# --description-- - -Next, you want to align the price to the right. Add a class named `price` to your `p` element that has `3.00` as its text. - -# --hints-- - -You should add the `price` class to your `p` element. - -```js -assert(code.match(//i)); -``` - -You should only have one element with the `price` class. - -```js -assert($('.price').length === 1); -``` - -Your `price` class should be on the `p` element with the text `3.00`. - -```js -assert($('.price')[0].innerText.match(/3\.00/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

---fcc-editable-region-- -

3.00

---fcc-editable-region-- -
-
-

Caramel Macchiato

-

3.75

-
-
-

Pumpkin Spice

-

3.50

-
-
-

Hazelnut

-

4.00

-
-
-

Mocha

-

4.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.flavor { - text-align: left; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-036.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-036.md deleted file mode 100644 index b68866acda..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-036.md +++ /dev/null @@ -1,106 +0,0 @@ ---- -id: 5f769702e6e33127d14aa120 -title: Part 36 -challengeType: 0 -dashedName: part-36 ---- - -# --description-- - -Now align the text to the `right` for the elements with the `price` class. - -# --hints-- - -You should have a `price` class selector. - -```js -assert(code.match(/\.price\s*{/i)); -``` - -Your `price` class selector should set the `text-align` property to `right`. - -```js -assert(code.match(/\.price\s*{\s*text-align:\s*right;?/i)); -``` - -Your `.price` element should be aligned to the right. - -```js -assert($('.price').css('text-align') === 'right'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

-

3.00

-
-
-

Caramel Macchiato

-

3.75

-
-
-

Pumpkin Spice

-

3.50

-
-
-

Hazelnut

-

4.00

-
-
-

Mocha

-

4.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.flavor { - text-align: left; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-037.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-037.md deleted file mode 100644 index 60eb6995c5..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-037.md +++ /dev/null @@ -1,108 +0,0 @@ ---- -id: 5f3c866de7a5b784048f94b1 -title: Part 37 -challengeType: 0 -dashedName: part-37 ---- - -# --description-- - -That is kind of what you want, but now it would be nice if the flavor and price were on the same line. `p` elements are block-level elements, so they take up the entire width of their parent element. - -To get them on the same line, you need to apply some styling to the `p` elements, so they behave more like `inline` elements. Add a `class` attribute with the value `item` to first `article` element under the `Coffee` heading. - -# --hints-- - -You should apply the `item` class to your `article` element. - -```js -assert(code.match(//i)) -``` - -You should only have one `item` class element. - -```js -assert($('.item').length === 1); -``` - -Your first `article` element should have the `item` class. - -```js -assert($('article')[0].className === 'item'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
---fcc-editable-region-- -

Coffee

-
-

French Vanilla

-

3.00

-
---fcc-editable-region-- -
-

Caramel Macchiato

-

3.75

-
-
-

Pumpkin Spice

-

3.50

-
-
-

Hazelnut

-

4.00

-
-
-

Mocha

-

4.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.flavor { - text-align: left; -} - -.price { - text-align: right; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-038.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-038.md deleted file mode 100644 index 17968ed170..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-038.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -id: 5f3c866dbf362f99b9a0c6d0 -title: Part 38 -challengeType: 0 -dashedName: part-38 ---- - -# --description-- - -The `p` elements are nested in an `article` element with the class attribute of `item`. You can style all the `p` elements nested anywhere in elements with a class named `item` like this: - -```css -.item p { } -``` - -Using the above selector, add a `display` property with value `inline-block` so the `p` elements behave more like `inline` elements. - -# --hints-- - -You should use the `.item p` selector. - -```js -const hasItemP = new __helpers.CSSHelp(document).getStyle('.item p'); -assert(hasItemP); -``` - -You should set the `display` property to `inline-block`. - -```js -const hasDisplay = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.display === 'inline-block'); -assert(hasDisplay); -``` - -Your `.item p` selector should set the `display` property to `inline-block`. - -```js -const itemPDisplay = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('display'); -assert(itemPDisplay === 'inline-block'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

-

3.00

-
-
-

Caramel Macchiato

-

3.75

-
-
-

Pumpkin Spice

-

3.50

-
-
-

Hazelnut

-

4.00

-
-
-

Mocha

-

4.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.flavor { - text-align: left; -} - -.price { - text-align: right; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-039.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-039.md deleted file mode 100644 index 0b53cd46cc..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-039.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: 5f3c866d0fc037f7311b4ac8 -title: Part 39 -challengeType: 0 -dashedName: part-39 ---- - -# --description-- - -That's closer, but the price didn't stay over on the right. This is because `inline-block` elements only take up the width of their content. To spread them out, add a `width` property to the `flavor` and `price` class selectors that have a value of `50%` each. - -# --hints-- - -You should set the `width` property to `50%` in your `.flavor` selector. - -```js -const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width'); -assert(flavorWidth === '50%'); -``` - -You should set the `width` property to `50%` in your `.price` selector. - -```js -const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width'); -assert(priceWidth === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

-

3.00

-
-
-

Caramel Macchiato

-

3.75

-
-
-

Pumpkin Spice

-

3.50

-
-
-

Hazelnut

-

4.00

-
-
-

Mocha

-

4.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.item p { - display: inline-block; -} - ---fcc-editable-region-- -.flavor { - text-align: left; -} - -.price { - text-align: right; -} ---fcc-editable-region-- -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-040.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-040.md deleted file mode 100644 index 37293ce41f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-040.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -id: 5f3c866dd0d0275f01d4d847 -title: Part 40 -challengeType: 0 -dashedName: part-40 ---- - -# --description-- - -Well that did not work. Styling the `p` elements as `inline-block` and placing them on separate lines in the code creates an extra space to the right of the first `p` element, causing the second one to shift to the next line. One way to fix this is to make each `p` element's width a little less than `50%`. - -Change the `width` value to `49%` for each class to see what happens. - -# --hints-- - -You should set the `width` property to `49%` in your `.flavor` selector. - -```js -const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width'); -assert(flavorWidth === '49%'); -``` - -You should set the `width` property to `49%` in your `.price` selector. - -```js -const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width'); -assert(priceWidth === '49%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

-

3.00

-
-
-

Caramel Macchiato

-

3.75

-
-
-

Pumpkin Spice

-

3.50

-
-
-

Hazelnut

-

4.00

-
-
-

Mocha

-

4.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.item p { - display: inline-block; -} - ---fcc-editable-region-- -.flavor { - text-align: left; - width: 50%; -} - -.price { - text-align: right; - width: 50%; -} ---fcc-editable-region-- -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-041.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-041.md deleted file mode 100644 index 1e50096abf..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-041.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: 5f3cade9fa77275d9f4efe62 -title: Part 41 -challengeType: 0 -dashedName: part-41 ---- - -# --description-- - -That worked, but there is still a little space on the right of the price. - -You could keep trying various percentages for the widths. Instead, simply move the price `p` element to be on the same line and make sure there is no space between them. - -# --hints-- - -Your `p` elements should not have any space between them. - -```js -assert(code.match(/Vanilla<\/p>

- - - - - Camper Cafe Menu - - - -

-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
---fcc-editable-region-- -

French Vanilla

-

3.00

---fcc-editable-region-- -
-
-

Caramel Macchiato

-

3.75

-
-
-

Pumpkin Spice

-

3.50

-
-
-

Hazelnut

-

4.00

-
-
-

Mocha

-

4.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.item p { - display: inline-block; -} - -.flavor { - text-align: left; - width: 49%; -} - -.price { - text-align: right; - width: 49%; -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-042.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-042.md deleted file mode 100644 index a68eb84293..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-042.md +++ /dev/null @@ -1,108 +0,0 @@ ---- -id: 5f3cade94c6576e7f7b7953f -title: Part 42 -challengeType: 0 -dashedName: part-42 ---- - -# --description-- - -Now go ahead and change both the `flavor` and `price` class' widths to be `50%` again. - -# --hints-- - -You should set the `width` property to `50%` in your `.flavor` selector. - -```js -const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width'); -assert(flavorWidth === '50%'); -``` - -You should set the `width` property to `50%` in your `.price` selector. - -```js -const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width'); -assert(priceWidth === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

-

3.75

-
-
-

Pumpkin Spice

-

3.50

-
-
-

Hazelnut

-

4.00

-
-
-

Mocha

-

4.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.item p { - display: inline-block; -} - ---fcc-editable-region-- -.flavor { - text-align: left; - width: 49%; -} - -.price { - text-align: right; - width: 49%; -} ---fcc-editable-region-- -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-043.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-043.md deleted file mode 100644 index 32d8f472a1..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-043.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -id: 5f3cade9993019e26313fa8e -title: Part 43 -challengeType: 0 -dashedName: part-43 ---- - -# --description-- - -Now that you know it works, you can change the remaining `article` and `p` elements to match the first set. Start by adding the class `item` to the other `article` elements. - -# --hints-- - -You should only have five `article` elements. - -```js -assert($('article').length === 5); -``` - -You should only have five `.item` elements. - -```js -assert($('.item').length === 5); -``` - -Your `.item` elements should be your `article` elements. - - -```js -const articles = $('article'); -const items = $('.item'); -assert(articles[0] === items[0]); -assert(articles[1] === items[1]); -assert(articles[2] === items[2]); -assert(articles[3] === items[3]); -assert(articles[4] === items[4]); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
---fcc-editable-region-- -
-

Caramel Macchiato

-

3.75

-
-
-

Pumpkin Spice

-

3.50

-
-
-

Hazelnut

-

4.00

-
-
-

Mocha

-

4.50

-
---fcc-editable-region-- -
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.item p { - display: inline-block; -} - -.flavor { - text-align: left; - width: 50%; -} - -.price { - text-align: right; - width: 50%; -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-044.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-044.md deleted file mode 100644 index 2b11e30ce9..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-044.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 5f7691dafd882520797cd2f0 -title: Part 44 -challengeType: 0 -dashedName: part-44 ---- - -# --description-- - -Next, position the other `p` elements to be on the same line with no space between them. - -# --hints-- - -You should not have any spaces between your `p` elements. - -```js -assert(!code.match(/<\/p>\s+

- - - - - Camper Cafe Menu - - - -

-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
---fcc-editable-region-- -
-

Caramel Macchiato

-

3.75

-
-
-

Pumpkin Spice

-

3.50

-
-
-

Hazelnut

-

4.00

-
-
-

Mocha

-

4.50

-
---fcc-editable-region-- -
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.item p { - display: inline-block; -} - -.flavor { - text-align: left; - width: 50%; -} - -.price { - text-align: right; - width: 50%; -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-045.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-045.md deleted file mode 100644 index e942762404..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-045.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -id: 5f7692f7c5b3ce22a57788b6 -title: Part 45 -challengeType: 0 -dashedName: part-45 ---- - -# --description-- - -To complete the styling, add the applicable class names `flavor` and `price` to all the remaining `p` elements. - -# --hints-- - -You should have five `.flavor` elements. - -```js -assert($('.flavor').length === 5); -``` - -You should have five `.price` elements. - -```js -assert($('.price').length === 5); -``` - -Your `.flavor` elements should be your `p` elements with the text `French Vanilla`, `Caramel Macchiato`, `Pumpkin Spice`, `Hazelnut`, and `Mocha`. - -```js -const p = $('p'); -const flavor = $('.flavor'); -assert(p[1] === flavor[0]); -assert(p[3] === flavor[1]); -assert(p[5] === flavor[2]); -assert(p[7] === flavor[3]); -assert(p[9] === flavor[4]); -``` - -Your `.price` elements should be your `p` elements with the text `3.00`, `3.75`, `3.50`, `4.00`, and `4.50`. - -```js -const p = $('p'); -const price = $('.price'); -assert(p[2] === price[0]); -assert(p[4] === price[1]); -assert(p[6] === price[2]); -assert(p[8] === price[3]); -assert(p[10] === price[4]); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
---fcc-editable-region-- -
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
---fcc-editable-region-- -
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.item p { - display: inline-block; -} - -.flavor { - text-align: left; - width: 50%; -} - -.price { - text-align: right; - width: 50%; -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-046.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-046.md deleted file mode 100644 index b2d93ea51f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-046.md +++ /dev/null @@ -1,106 +0,0 @@ ---- -id: 5f47633757ae3469f2d33d2e -title: Part 46 -challengeType: 0 -dashedName: part-46 ---- - -# --description-- - -If you make the width of the page preview smaller, you will notice at some point, some of the text on the left starts wrapping around to the next line. This is because the width of the `p` elements on the left side can only take up `50%` of the space. - -Since you know the prices on the right have significantly fewer characters, change the `flavor` class `width` value to be `75%` and then `price` class `width` value to be `25%`. - -# --hints-- - -You should set the `width` property to `75%` in your `.flavor` selector. - -```js -const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width'); -assert(flavorWidth === '75%'); -``` - -You should set the `width` property to `25%` in your `.price` selector. - -```js -const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width'); -assert(priceWidth === '25%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.item p { - display: inline-block; -} - ---fcc-editable-region-- -.flavor { - text-align: left; - width: 50%; -} - -.price { - text-align: right; - width: 50%; -} ---fcc-editable-region-- -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-047.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-047.md deleted file mode 100644 index bdd97e6d1f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-047.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 5f3cade99dda4e6071a85dfd -title: Part 47 -challengeType: 0 -dashedName: part-47 ---- - -# --description-- - -You will come back to the styling the menu in a few steps, but for now, go ahead add a second `section` element below the first for displaying the desserts offered by the cafe. - -# --hints-- - -You should have an opening `section` tag. - -```js -assert(code.match(/
/ig).length === 2); -``` - -You should have a closing `section` tag. - -```js -assert(code.match(/<\/section>/ig).length === 2); -``` - -You should not change the existing `main` element. - -```js -assert($('main').length === 1); -``` - -Your new `section` element should be nested in the `main` element. - -```js -assert($('main').children('section').length === 2); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
---fcc-editable-region-- -
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
---fcc-editable-region-- -
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.item p { - display: inline-block; -} - -.flavor { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-048.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-048.md deleted file mode 100644 index 48e0975fd9..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-048.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -id: 5f3ef6e0e0c3feaebcf647ad -title: Part 48 -challengeType: 0 -dashedName: part-48 ---- - -# --description-- - -Add an `h2` element in the new section and give it the text `Desserts`. - -# --hints-- - -You should not change your existing `section` element. - -```js -assert($('section').length === 2); -``` - -You should add an `h2` element in your second `section` element. - -```js -assert($('section')[1].children[0].tagName === 'H2'); -``` - -Your new `h2` element should have the text `Desserts`. - -```js -assert($('h2')[1].innerText.match(/Desserts/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
---fcc-editable-region-- -
-
---fcc-editable-region-- -
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.item p { - display: inline-block; -} - -.flavor { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-049.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-049.md deleted file mode 100644 index 5b4cdac205..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-049.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -id: 5f3ef6e0819d4f23ca7285e6 -title: Part 49 -challengeType: 0 -dashedName: part-49 ---- - -# --description-- - -Add an empty `article` element under the `Desserts` heading. Give it a `class` attribute with the value `item`. - -# --hints-- - -You should not change your existing `h2` element. - -```js -assert($('h2').length === 2); -``` - -Your `article` element should be below your `h2` element. - -```js -assert($('section')[1].children[1].tagName === 'ARTICLE'); -``` - -Your new `article` element should have the `item` class. - -```js -assert($('section')[1].children[1].className === 'item'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
---fcc-editable-region-- -

Desserts

---fcc-editable-region-- -
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.item p { - display: inline-block; -} - -.flavor { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-050.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-050.md deleted file mode 100644 index 42b0d2be38..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-050.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -id: 5f716ad029ee4053c7027a7a -title: Part 50 -challengeType: 0 -dashedName: part-50 ---- - -# --description-- - -Nest two `p` elements inside your `article` element. The first one's text should be `Donut`, and the second's text `1.50`. Put both of them on the same line making sure there is no space between them. - -# --hints-- - -You should not change your existing `article` element. - -```js -assert($('article').length === 6); -``` - -Your new `article` element should have two `p` elements. - -```js -assert($('article').last().children('p').length === 2); -``` - -Your first `p` element should have the text `Donut`. - -```js -assert($('article').last().children('p')[0].innerText.match(/Donut/i)); -``` - -Your second `p` element should have the text `1.50`. - -```js -assert($('article').last().children('p')[1].innerText.match(/1\.50/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

---fcc-editable-region-- -
-
---fcc-editable-region-- -
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.item p { - display: inline-block; -} - -.flavor { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-051.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-051.md deleted file mode 100644 index 97bebf10e0..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-051.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -id: 5f7b87422a560036fd03ccff -title: Part 51 -challengeType: 0 -dashedName: part-51 ---- - -# --description-- - -For the two `p` elements you just added, add `dessert` as the value of the first `p` element's `class` attribute and the value `price` as the second `p` elements `class` attribute. - -# --hints-- - -You should have one `p` element with the `dessert` class. - -```js -assert($('.dessert').length === 1); -``` - -Your `p` element with the text `Donut` should have the `dessert` class. - -```js -assert($('.dessert')[0].innerText.match(/donut/i)); -``` - -Your `p` element with the text `1.50` should have the `price` class. - -```js -assert($('.price').last().text().match(/1\.50/)); -``` - -You should not have any spaces between your `p` elements. - -```js -assert(!code.match(/<\/p>\s+

- - - - - Camper Cafe Menu - - - -

-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
---fcc-editable-region-- -

Donut

1.50

---fcc-editable-region-- -
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.item p { - display: inline-block; -} - -.flavor { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-052.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-052.md deleted file mode 100644 index a4cf119169..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-052.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: 5f7b88d37b1f98386f04edc0 -title: Part 52 -challengeType: 0 -dashedName: part-52 ---- - -# --description-- - -Something does not look right. You added the correct `class` attribute value to the `p` element with `Donut` as its text, but you have not defined a selector for it. - -Since the `flavor` class selector already has the properties you want, just add the `dessert` class name to it. - -# --hints-- - -You should add the `.dessert` selector to your `.flavor` selector. - -```js -const selector = new __helpers.CSSHelp(document).getStyle('.flavor, .dessert') || new __helpers.CSSHelp(document).getStyle('.dessert, .flavor'); -assert(selector) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.item p { - display: inline-block; -} - ---fcc-editable-region-- -.flavor { - text-align: left; - width: 75%; -} ---fcc-editable-region-- - -.price { - text-align: right; - width: 25% -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-053.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-053.md deleted file mode 100644 index 59a7af88cb..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-053.md +++ /dev/null @@ -1,145 +0,0 @@ ---- -id: 5f716bee5838c354c728a7c5 -title: Part 53 -challengeType: 0 -dashedName: part-53 ---- - -# --description-- - -Below the dessert you just added, add the rest of the desserts and prices using three more `article` elements, each with two nested `p` elements. Each element should have the correct dessert and price text, and all of them should have the correct classes. - -```bash -Cherry Pie 2.75 -Cheesecake 3.00 -Cinammon Roll 2.50 -``` - -# --hints-- - -You should have four `.dessert` elements. - -```js -assert($('.dessert').length === 4); -``` - -You should have four new `.price` elements. - -```js -assert($('section').last().find('.price').length === 4); -``` - -Your `section` element should have eight `p` elements. - -```js -assert($('section').last().find('p').length === 8); -``` - -Your `.dessert` elements should have the text `Donut`, `Cherry Pie`, `Cheesecake`, and `Cinammon Roll`. - -```js -const dessert = $('.dessert'); -assert(dessert[0].innerText.match(/donut/i)); -assert(dessert[1].innerText.match(/cherry pie/i)); -assert(dessert[2].innerText.match(/cheesecake/i)); -assert(dessert[3].innerText.match(/cinammon roll/i)); -``` - -Your new `.price` elements should have the text `1.50`, `2.75`, `3.00`, and `2.50`. - -```js -const prices = $('section').last().find('.price'); -assert(prices[0].innerText.match(/1\.50/)); -assert(prices[1].innerText.match(/2\.75/)); -assert(prices[2].innerText.match(/3\.00/)); -assert(prices[3].innerText.match(/2\.50/)); -``` - -You should not have any spaces between your `p` elements. - -```js -assert(!code.match(/<\/p>\s+

- - - - - Camper Cafe Menu - - - -

-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

---fcc-editable-region-- -
-

Donut

1.50

-
---fcc-editable-region-- -
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-054.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-054.md deleted file mode 100644 index 0e54c90f16..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-054.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 5f3ef6e0eaa7da26e3d34d78 -title: Part 54 -challengeType: 0 -dashedName: part-54 ---- - -# --description-- - -You can give your menu some space between the content and the sides with various `padding` properties. - -Give the `menu` class a `padding-left` and a `padding-right` with the same value `20px`. - -# --hints-- - -You should set the `padding-left` property to `20px`. - -```js -const hasPaddingLeft = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-left'] === '20px'); -assert(hasPaddingLeft); -``` - -You should set the `padding-right` property to `20px`. - -```js -const hasPaddingRight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-right'] === '20px'); -assert(hasPaddingRight); -``` - -Your `.menu` element should have a `padding-left` of `20px`. - -```js -const menuPaddingLeft = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-left'); -assert(menuPaddingLeft === '20px'); -``` - -Your `.menu` element should have a `padding-right` of `20px`. - -```js -const menuPaddingRight = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-right'); -assert(menuPaddingRight === '20px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - ---fcc-editable-region-- -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; -} ---fcc-editable-region-- - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-055.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-055.md deleted file mode 100644 index 30185742ca..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-055.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -id: 5f3ef6e050279c7a4a7101d3 -title: Part 55 -challengeType: 0 -dashedName: part-55 ---- - -# --description-- - -That looks better. Now try to add the same `20px` padding to the top and bottom of the menu. - -# --hints-- - -You should not remove the `padding-left` or `padding-right` properties. - -```js -const paddingLeft = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-left'); -assert(paddingLeft === '20px'); -const paddingRight = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-right'); -assert(paddingRight === '20px'); -``` - -You should set the `padding-top` property to `20px`. - -```js -const hasPaddingTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-top'] === '20px'); -assert(hasPaddingTop); -``` - -You should set the `padding-bottom` property to `20px`. - -```js -const hasPaddingBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-top'] === '20px'); -assert(hasPaddingBottom); -``` - -Your `.menu` element should have a `padding-top` of `20px`. - -```js -const menuPaddingTop = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-top'); -assert(menuPaddingTop === '20px'); -``` - -Your `.menu` element should have a `padding-bottom` of `20px`. - -```js -const menuPaddingBottom = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-bottom'); -assert(menuPaddingBottom === '20px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - ---fcc-editable-region-- -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding-left: 20px; - padding-right: 20px; -} ---fcc-editable-region-- - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-056.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-056.md deleted file mode 100644 index 06d459df0f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-056.md +++ /dev/null @@ -1,147 +0,0 @@ ---- -id: 5f3ef6e04559b939080db057 -title: Part 56 -challengeType: 0 -dashedName: part-56 ---- - -# --description-- - -Since all 4 sides of the menu have the same internal spacing, go ahead and delete the four properties and use a single `padding` property with the value `20px`. - -# --hints-- - -You should remove the `padding-left` property. - -```js -assert(!code.match(/padding-left/i)); -``` - -You should remove the `padding-right` property. - -```js -assert(!code.match(/padding-right/i)); -``` - -You should remove the `padding-top` property. - -```js -assert(!code.match(/padding-top/i)); -``` - -You should remove the `padding-bottom` property. - -```js -assert(!code.match(/padding-bottom/i)); -``` - -You should set the `padding` property to `20px`. - -```js -const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding'] === '20px'); -assert(hasPadding); -``` - -Your `.menu` element should have a `padding` value of `20px`. - -```js -const menuPadding = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding'); -assert(menuPadding === '20px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - ---fcc-editable-region-- -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding-left: 20px; - padding-right: 20px; - padding-top: 20px; - padding-bottom: 20px; -} ---fcc-editable-region-- - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-057.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-057.md deleted file mode 100644 index 7e2ace1db6..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-057.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -id: 5f3ef6e03d719d5ac4738993 -title: Part 57 -challengeType: 0 -dashedName: part-57 ---- - -# --description-- - -The current width of the menu will always take up 80% of the `body` element's width. On a very wide screen, the coffee and dessert appear far apart from their prices. - -Add a `max-width` property to the `menu` class with a value of `500px` to prevent it from growing too wide. - -# --hints-- - -You should set the `max-width` property to `500px`. - -```js -const hasMaxWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['max-width'] === '500px'); -assert(hasMaxWidth); -``` - -Your `.menu` element should have a `max-width` of `500px`. - -```js -const menuMaxWidth = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('max-width'); -assert(menuMaxWidth === '500px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} - -h1, h2, p { - text-align: center; -} - ---fcc-editable-region-- -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; -} ---fcc-editable-region-- - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-058.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-058.md deleted file mode 100644 index 3878c2c2ee..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-058.md +++ /dev/null @@ -1,121 +0,0 @@ ---- -id: 5f3ef6e05473f91f948724ab -title: Part 58 -challengeType: 0 -dashedName: part-58 ---- - -# --description-- - -You can change the `font-family` of text, to make it look different from the default font of your browser. Each browser has some common fonts available to it. - -Change all the text in your `body`, by adding a `font-family` property with the value `sans-serif`. This is a fairly common font that is very readable. - -# --hints-- - -You should set the `font-family` property to `sans-serif`. - -```js -const hasFontFamily = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-family'] === 'sans-serif'); -``` - -Your `body` should have a `font-family` of `sans-serif`. - -```js -const bodyFontFamily = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('font-family'); -assert(bodyFontFamily === 'sans-serif'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
-
- - -``` - -```css ---fcc-editable-region-- -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); -} ---fcc-editable-region-- - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-059.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-059.md deleted file mode 100644 index 170f139e89..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-059.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: 5f3ef6e056bdde6ae6892ba2 -title: Part 59 -challengeType: 0 -dashedName: part-59 ---- - -# --description-- - -It is a bit boring for all the text to have the same `font-family`. You can still have the majority of the text `sans-serif` and make just the `h1` and `h2` elements different using a different selector. - -Style both the `h1` and the `h2` elements so that only these elements' text use `Impact` font. - -# --hints-- - -You should use an `h1, h2` selector. - -```js -const h1h2Selector = new __helpers.CSSHelp(document).getStyle('h1, h2'); -assert(h1h2Selector); -``` - -You should set the `font-family` to `Impact`. - -```js -const hasFontFamily = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-family'] === 'Impact'); -assert(hasFontFamily); -``` - -Your `h1` element should have a `font-family` of `Impact`. - -```js -assert($('h1').css('font-family').match(/impact/i)); -``` - -Your `h2` element should have a `font-family` of `Impact`. - -```js -assert($('h2').css('font-family').match(/impact/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-060.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-060.md deleted file mode 100644 index 4a4f75e229..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-060.md +++ /dev/null @@ -1,121 +0,0 @@ ---- -id: 5f3ef6e0e9629bad967cd71e -title: Part 60 -challengeType: 0 -dashedName: part-60 ---- - -# --description-- - -You can add a fallback value for the font-family by adding another font name separated by a comma. This second font would be used in case the browser does not have the font built-in to it. - -Add the fallback font `serif` after the `Impact` font. - -# --hints-- - -You should add `serif` as a fallback for the `Impact` font. - -```js -const fontFamily = new __helpers.CSSHelp(document).getStyle('h1, h2')?.getPropertyValue('font-family'); -assert(fontFamily === 'Impact, serif'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - ---fcc-editable-region-- -h1, h2 { - font-family: Impact; -} ---fcc-editable-region-- - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-061.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-061.md deleted file mode 100644 index cc3b983e86..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-061.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 5f3ef6e06d34faac0447fc44 -title: Part 61 -challengeType: 0 -dashedName: part-61 ---- - -# --description-- - -Make the `Est. 2020` text italicized by creating an `established` class selector and giving it the `font-style` property with the value `italic`. - -# --hints-- - -You should have an `.established` selector. - -```js -const hasEstablished = new __helpers.CSSHelp(document).getStyle('.established'); -assert(hasEstablished); -``` - -You should set the `font-style` property to `italic`. - -```js -const hasFontStyle = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-style'] === 'italic'); -assert(hasFontStyle); -``` - -Your `.established` selector should set the `font-style` property to `italic`. - -```js -const establishedFontStyle = new __helpers.CSSHelp(document).getStyle('.established')?.getPropertyValue('font-style'); -assert(establishedFontStyle === 'italic'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-062.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-062.md deleted file mode 100644 index a39cbde319..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-062.md +++ /dev/null @@ -1,134 +0,0 @@ ---- -id: 5f3ef6e087d56ed3ffdc36be -title: Part 62 -challengeType: 0 -dashedName: part-62 ---- - -# --description-- - -Now apply the `established` class to the `Est. 2020` text. - -# --hints-- - -You should set the `class` of the `p` element to `established`. - -```js -assert(code.match(/

/i)); -``` - -Your `established` class should be on the element with the text `Est. 2020`. - -```js -const established = $('.established'); -assert(established[0].innerText.match(/Est\.\s2020/i)); -``` - -Your `established` class element should have italic text. - -```js -assert($('.established').css('font-style') === 'italic'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -

---fcc-editable-region-- -
-

CAMPER CAFE

-

Est. 2020

-
---fcc-editable-region-- -
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-063.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-063.md deleted file mode 100644 index 3d1eb0c279..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-063.md +++ /dev/null @@ -1,147 +0,0 @@ ---- -id: 5f3ef6e0f8c230bdd2349716 -title: Part 63 -challengeType: 0 -dashedName: part-63 ---- - -# --description-- - -The typography of heading elements (e.g. `h1`, `h2`) is set by default values of users' browsers. - -Add two new type selectors (`h1` and `h2`). Use the `font-size` property for both, but use the value `40px` for the `h1` and `30px` for the `h2`. - -# --hints-- - -You should use an `h1` selector. - -```js -const hasH1 = new __helpers.CSSHelp(document).getStyle('h1'); -assert(hasH1); -``` - -You should use an `h2` selector. - -```js -const hasH2 = new __helpers.CSSHelp(document).getStyle('h2'); -assert(hasH2); -``` - -Your `h1` element should have a `font-size` of `40px`. - -```js -const h1FontSize = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('font-size'); -assert(h1FontSize === '40px'); -``` - -Your `h2` element should have a `font-size` of `30px`. - -```js -const h2FontSize = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('font-size'); -assert(h2FontSize === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-064.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-064.md deleted file mode 100644 index b1ab67953f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-064.md +++ /dev/null @@ -1,149 +0,0 @@ ---- -id: 5f3ef6e07276f782bb46b93d -title: Part 64 -challengeType: 0 -dashedName: part-64 ---- - -# --description-- - -Add a `footer` element below the `main` element, where you can add some additional information. - -# --hints-- - -You should have an opening `
` tag. - -```js -assert(code.match(/
/i)); -``` - -You should have a closing `
` tag. - -```js -assert(code.match(/<\/footer>/i)); -``` - -You should not modify the existing `main` element. - -```js -assert($('main').length === 1); -``` - -Your `footer` element should be below your `main` element. - -```js -const footer = $('footer')[0] -assert(footer.previousElementSibling.tagName === 'MAIN'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
---fcc-editable-region-- -
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
---fcc-editable-region-- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-065.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-065.md deleted file mode 100644 index 9babeb5fe0..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-065.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 5f3ef6e0a81099d9a697b550 -title: Part 65 -challengeType: 0 -dashedName: part-65 ---- - -# --description-- - -Inside the `footer`, add a `p` element. Then, nest an anchor (`a`) element in the `p` that links to `https://www.freecodecamp.org` and has the text `Visit our website`. - -# --hints-- - -You should not modify the existing `footer` element. - -```js -assert($('footer').length === 1); -``` - -Your new `p` element should be nested within your `footer` element. - -```js -assert($('footer').children('p').length === 1); -``` - -Your new `a` element should be nested within your new `p` element. - -```js -assert($('footer').children('p').children('a').length === 1); -``` - -Your new `a` element should have the text `Visit our website`. - -```js -assert($('footer').find('a')[0].innerText.match(/Visit our website/i)); -``` - -Your new `a` element should link to `https://www.freecodecamp.org`. Remember that `a` elements use the `href` attribute to create a link. - -```js -assert($('footer').find('a').attr('href') === 'https://www.freecodecamp.org'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
---fcc-editable-region-- -
-
---fcc-editable-region-- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-066.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-066.md deleted file mode 100644 index d705e79f29..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-066.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 5f3ef6e0b431cc215bb16f55 -title: Part 66 -challengeType: 0 -dashedName: part-66 ---- - -# --description-- - -Add a second `p` element below the one with the link and give it the text `123 Free Code Camp Drive`. - -# --hints-- - -You should add a second `p` element to your `footer`. - -```js -assert($('footer').children('p').length === 2); -``` - -Your new `p` element should have the text `123 Free Code Camp Drive`. Make sure your new element comes after your existing element. - -```js -assert($('footer').children('p').last().text().match(/123 Free Code Camp Drive/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-067.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-067.md deleted file mode 100644 index 2688e74740..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-067.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 5f3ef6e01f288a026d709587 -title: Part 67 -challengeType: 0 -dashedName: part-67 ---- - -# --description-- - -You can use an `hr` element to display a divider between sections of different content. - -First, add an `hr` element between the first `header` element and the `main` element. Note that `hr` elements are self closing. - -# --hints-- - -You should add an `hr` element. `hr` elements are self-closing. - -```js -assert(code.match(//i)); -assert(!code.match(/<\/hr>/i)); -``` - -You should not change your existing `header` element. - -```js -assert($('header').length === 1); -``` - -You should not change your exiting `main` element. - -```js -assert($('main').length === 1); -``` - -Your `hr` element should be between your `header` element and your `main` element. - -```js -assert($('hr')[0].previousElementSibling.tagName === 'HEADER'); -assert($('hr')[0].nextElementSibling.tagName === 'MAIN'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
---fcc-editable-region-- -
-

CAMPER CAFE

-

Est. 2020

-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
---fcc-editable-region-- - -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-068.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-068.md deleted file mode 100644 index d40571b777..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-068.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 5f3f26fa39591db45e5cd7a0 -title: Part 68 -challengeType: 0 -dashedName: part-68 ---- - -# --description-- - -The default properties of an `hr` element will make it appear as a thin light grey line. You can change the height of the line by specifying a value for the `height` property. - -Change the height the `hr` element to be `3px`. - -# --hints-- - -You should use the `hr` selector. - -```js -const hasHr = new __helpers.CSSHelp(document).getStyle('hr'); -assert(hasHr); -``` - -You should set the `height` property to `3px`. - -```js -const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '3px'); -assert(hasHeight); -``` - -Your `hr` element should have a height of `3px`. - -```js -const hrHeight = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('height'); -assert(hrHeight === '3px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-069.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-069.md deleted file mode 100644 index 129a6ea6c3..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-069.md +++ /dev/null @@ -1,148 +0,0 @@ ---- -id: 5f459225127805351a6ad057 -title: Part 69 -challengeType: 0 -dashedName: part-69 ---- - -# --description-- - -Change the background color of the `hr` element to `brown` so it matches the color of the coffee beans. - -# --hints-- - -You should set the value of the `background-color` property to `brown`. - -```js -const hasBackgroundColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'brown'); -``` - -Your `hr` element should have a `background-color` of `brown`. - -```js -const hrBackgroundColor = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('background-color'); -assert(hrBackgroundColor === 'brown'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - ---fcc-editable-region-- -hr { - height: 3px; -} ---fcc-editable-region-- - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-070.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-070.md deleted file mode 100644 index 189f00c7c5..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-070.md +++ /dev/null @@ -1,152 +0,0 @@ ---- -id: 5f459a7ceb8b5c446656d88b -title: Part 70 -challengeType: 0 -dashedName: part-70 ---- - -# --description-- - -Notice the grey color along the edges of the line. Those edges are known as borders. Each side of an element can have a different color or they can all be the same. - -Make all the edges of the `hr` element the same color as the background of it using the `border-color` property. - -# --hints-- - -You should set the `border-color` property to `brown`. - -```js -const hasBorderColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-color'] === 'brown'); -assert(hasBorderColor); -``` - -Your `hr` element should have a `border-color` of `brown`. - -```js -const hrBorderColor = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('border-color'); -assert(hrBorderColor === 'brown'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - ---fcc-editable-region-- -hr { - height: 3px; - background-color: brown; -} ---fcc-editable-region-- - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-071.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-071.md deleted file mode 100644 index 7e8011774e..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-071.md +++ /dev/null @@ -1,153 +0,0 @@ ---- -id: 5f459cf202c2a3472fae6a9f -title: Part 71 -challengeType: 0 -dashedName: part-71 ---- - -# --description-- - -Notice how the thickness of the line looks bigger? The default value of a property named `border-width` is `1px` for all edges of `hr` elements. By changing the background to the same color as the background, the total height of the line is `5px` (`3px` plus the top and bottom border width of `1px`). - -Change the `height` property of the `hr` to be `2px`, so the total height of it becomes `4px`. - -# --hints-- - -You should set the `height` property to `2px`. - -```js -const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '2px'); -assert(hasHeight); -``` - -Your `hr` element should have a `height` of `2px`. - -```js -const hrHeight = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('height'); -assert(hrHeight === '2px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - ---fcc-editable-region-- -hr { - height: 3px; - background-color: brown; - border-color: brown; -} ---fcc-editable-region-- - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-072.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-072.md deleted file mode 100644 index 03e83c0698..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-072.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -id: 5f459fd48bdc98491ca6d1a3 -title: Part 72 -challengeType: 0 -dashedName: part-72 ---- - -# --description-- - -Go ahead and add another `hr` element between the `main` element and the `footer` element. - -# --hints-- - -You should add a second `hr` element. - -```js -assert($('hr').length === 2); -``` - -Your new `hr` element should be between the `main` element and the `footer` element. - -```js -assert($('hr')[1].previousElementSibling.tagName === 'MAIN'); -assert($('hr')[1].nextElementSibling.tagName === 'FOOTER'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
---fcc-editable-region-- -
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
- ---fcc-editable-region-- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-073.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-073.md deleted file mode 100644 index 63faef74a5..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-073.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -id: 5f45a05977e2fa49d9119437 -title: Part 73 -challengeType: 0 -dashedName: part-73 ---- - -# --description-- - -To create a little more room around the menu, add `20px` of space on the inside of the `body` element by using the `padding` property. - -# --hints-- - -You should set the `padding` property to `20px`. - -```js -assert(code.match(/padding:\s*20px;?/i)); -``` - -Your `body` element should have a `padding` of `20px`. - -```js -const bodyPadding = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('padding'); -assert(bodyPadding === '20px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
-
- -
- - -``` - -```css ---fcc-editable-region-- -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; -} ---fcc-editable-region-- - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-074.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-074.md deleted file mode 100644 index 9e8078b1af..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-074.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -id: 5f45a276c093334f0f6e9df4 -title: Part 74 -challengeType: 0 -dashedName: part-74 ---- - -# --description-- - -Focusing on the menu items and prices, there is a fairly large gap between each line. - -Target all the `p` elements nested in elements with the `class` named `item` and set their top and bottom margin to be `5px`. - -# --hints-- - -You should set the `margin-top` property to `5px`. - -```js -const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '5px'); -assert(hasMarginTop); -``` - -You should set the `margin-bottom` property to `5px`. - -```js -const hasMarginBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-bottom'] === '5px'); -assert(hasMarginBottom); -``` - -You should use the existing `.item p` selector. - -```js -const hasOneSelector = new __helpers.CSSHelp(document).getStyleDeclarations('.item p'); -assert(hasOneSelector.length === 1); -``` - -Your `p` elements nested in your `.item` elements should have a `margin-top` of `5px`. - -```js -const itemPMarginTop = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('margin-top'); -assert(itemPMarginTop === '5px'); -``` - -Your `p` elements nested in your `.item` elements should have a `margin-bottom` of `5px`. - -```js -const itemPMarginBottom = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('margin-bottom'); -assert(itemPMarginBottom === '5px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - ---fcc-editable-region-- -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} ---fcc-editable-region-- -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-075.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-075.md deleted file mode 100644 index 58c4c84cba..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-075.md +++ /dev/null @@ -1,162 +0,0 @@ ---- -id: 5f45a5a7c49a8251f0bdb527 -title: Part 75 -challengeType: 0 -dashedName: part-75 ---- - -# --description-- - -Using the same style selector in the previous step, make the font size of the items and prices larger by using a value of `18px`. - -# --hints-- - -You should set the `font-size` property to `18px`. - -```js -const hasFontSize = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-size'] === '18px'); -assert(hasFontSize); -``` - -You should use the existing `.item p` selector. - -```js -const hasOneSelector = new __helpers.CSSHelp(document).getStyleDeclarations('.item p'); -assert(hasOneSelector.length === 1); -``` - -Your `p` elements nested in your `.item` elements should have a `font-size` of `18px`. - -```js -const itemPFontSize = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('font-size'); -assert(itemPFontSize === '18px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -h1, h2 { - font-family: Impact, serif; -} - ---fcc-editable-region-- -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; -} ---fcc-editable-region-- - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-076.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-076.md deleted file mode 100644 index 8f4a568664..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-076.md +++ /dev/null @@ -1,167 +0,0 @@ ---- -id: 5f46fc57528aa1c4b5ea7c2e -title: Part 76 -challengeType: 0 -dashedName: part-76 ---- - -# --description-- - -Changing the `bottom-margin` to `5px` looks great. However, now the space between the `Cinnamon Roll` menu item and the second `hr` element does not match the space between the top `hr` element and the `Coffee` heading. - -Add some more space by creating a class named `bottom-line` using `25px` for the `margin-top` property. - -# --hints-- - -You should add a `.bottom-line` selector. - -```js -const hasBottomLine = new __helpers.CSSHelp(document).getStyle('.bottom-line'); -assert(hasBottomLine); -``` - -You should set the `margin-top` property to `25px`. - -```js -const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '25px'); -assert(hasMarginTop); -``` - -Your `.bottom-line` selector should have a `margin-top` of `25px`. - -```js -const bottomLineMargin = new __helpers.CSSHelp(document).getStyle('.bottom-line')?.getPropertyValue('margin-top'); -assert(bottomLineMargin === '25px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-077.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-077.md deleted file mode 100644 index 236d30c565..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-077.md +++ /dev/null @@ -1,157 +0,0 @@ ---- -id: 5f4701b942c824109626c3d8 -title: Part 77 -challengeType: 0 -dashedName: part-77 ---- - -# --description-- - -Now add the `bottom-line` class to the second `hr` element so the styling is applied. - -# --hints-- - -You should apply the `class="bottom-line"` property. - -```js -assert(code.match(/class=('|")bottom-line\1/i)); -``` - -Your `bottom-line` class should be applied to your second `hr` element. - -```js -assert($('hr')[1].className === 'bottom-line'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
---fcc-editable-region-- -
---fcc-editable-region-- - -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-078.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-078.md deleted file mode 100644 index ce69d8e923..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-078.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5f46ede1ff8fec5ba656b44c -title: Part 78 -challengeType: 0 -dashedName: part-78 ---- - -# --description-- - -Next you are going to be styling the `footer` element. To keep the CSS organized, add a comment at the end `styles.css` with the text `FOOTER`. - -# --hints-- - -You should have a CSS comment with the text `FOOTER`. - -```js -assert(code.match(/\/\*\s*FOOTER\s*\*\//i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
-
-

- Visit our website -

-

123 Free Code Camp Drive

-
-
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-079.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-079.md deleted file mode 100644 index 91cdc30e84..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-079.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -id: 5f45a66d4a2b0453301e5a26 -title: Part 79 -challengeType: 0 -dashedName: part-79 ---- - -# --description-- - -Moving down to the `footer` element, make all the text have a value of `14px` for the font size. - -# --hints-- - -You should have a `footer` selector. - -```js -const hasFooter = new __helpers.CSSHelp(document).getStyle('footer'); -assert(hasFooter); -``` - -Your `footer` selector should be below your comment. - -```js -assert(code.match(/\/\*\s*FOOTER\s*\*\/\s*footer/i)); -``` - -You should set the `font-size` property to `14px`. - - -```js -const hasFontSize = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-size'] === '14px'); -assert(hasFontSize); -``` - -Your `footer` element should have a `font-size` of `14px`. - -```js -const footerFontSize = new __helpers.CSSHelp(document).getStyle('footer')?.getPropertyValue('font-size'); -assert(footerFontSize === '14px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} - -/* FOOTER */ - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-080.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-080.md deleted file mode 100644 index 9c90df8354..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-080.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -id: 5f45b0731d39e15d54df4dfc -title: Part 80 -challengeType: 0 -dashedName: part-80 ---- - -# --description-- - -The default color of a link that has not yet been clicked on is typically blue. The default color of a link that has already been visited from a page is typically purple. - -To make the `footer` links the same color regardless if a link has been visited, use a type selector for the anchor element (`a`) and use the value `black` for the `color` property. - -# --hints-- - -You should use an `a` selector. - -```js -const hasASelector = new __helpers.CSSHelp(document).getStyle('a'); -assert(hasASelector); -``` - -You should set the `color` property to `black`. - -```js -const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.color === 'black'); -``` - -Your `a` element should have a `color` of `black`. - -```js -const aColor = new __helpers.CSSHelp(document).getStyle('a')?.getPropertyValue('color'); -assert(aColor === 'black'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} - -/* FOOTER */ - -footer { - font-size: 14px; -} ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-081.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-081.md deleted file mode 100644 index 9d9db85f07..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-081.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 5f45b25e7ec2405f166b9de1 -title: Part 81 -challengeType: 0 -dashedName: part-81 ---- - -# --description-- - -You change properties of a link when the link has actually been visited by using a pseudo-selector that looks like `a:visited { propertyName: propertyValue; }`. - -Change the color of the footer `Visit our website` link to be `grey` when a user has visited the link. - -# --hints-- - -You should use the `a:visited` pseudoselector. - -```js -const hasAVisited = new __helpers.CSSHelp(document).getStyle('a:visited'); -assert(hasAVisited); -``` - -You should set the `color` property to `grey`. - -```js -const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.color === 'grey'); -assert(hasColor); -``` - -Your `a:visited` should have a `color` of `grey`. - -```js -const aVisitedColor = new __helpers.CSSHelp(document).getStyle('a:visited')?.getPropertyValue('color'); -assert(aVisitedColor === 'grey'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} - -/* FOOTER */ - -footer { - font-size: 14px; -} - -a { - color: black; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-082.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-082.md deleted file mode 100644 index fca7adb2f3..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-082.md +++ /dev/null @@ -1,186 +0,0 @@ ---- -id: 5f45b3c93c027860d9298dbd -title: Part 82 -challengeType: 0 -dashedName: part-82 ---- - -# --description-- - -You change properties of a link when the mouse hovers them by using a pseudo-selector that looks like `a:hover { propertyName: propertyValue; }`. - -Change the color of the footer `Visit our website` link to be `brown` when a user hovers over it. - -# --hints-- - -You should use the `a:hover` pseudoselector. - -```js -const hasAHover = new __helpers.CSSHelp(document).getStyle('a:hover'); -assert(hasAHover); -``` - -You should set the `color` property to `brown`. - -```js -const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.color === 'brown'); -assert(hasColor); -``` - -Your `a:hover` should have a `color` of `brown`. - -```js -const aHoverColor = new __helpers.CSSHelp(document).getStyle('a:hover')?.getPropertyValue('color'); -assert(aHoverColor === 'brown'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} - -/* FOOTER */ - -footer { - font-size: 14px; -} - -a { - color: black; -} - -a:visited { - color: grey; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-083.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-083.md deleted file mode 100644 index 492e292762..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-083.md +++ /dev/null @@ -1,189 +0,0 @@ ---- -id: 5f45b45d099f3e621fbbb256 -title: Part 83 -challengeType: 0 -dashedName: part-83 ---- - -# --description-- - -You change properties of a link when the link is actually being clicked by using a pseudo-selector that looks like `a:active { propertyName: propertyValue; }`. - -Change the color of the footer `Visit our website` link to be `white` when clicked on. - -# --hints-- - -You should use the `a:active` pseudo-selector. - -```js -const hasAActive = new __helpers.CSSHelp(document).getStyle('a:active'); -assert(hasAActive); -``` - -You should set the `color` property to `white`. - -```js -const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.color === 'white'); -assert(hasColor); -``` - -Your `a:active` should have a `color` of `white`. - -```js -const aActiveColor = new __helpers.CSSHelp(document).getStyle('a:active')?.getPropertyValue('color'); -assert(aActiveColor === 'white'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} - -/* FOOTER */ - -footer { - font-size: 14px; -} - -a { - color: black; -} - -a:visited { - color: grey; -} - -a:hover { - color: brown; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-084.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-084.md deleted file mode 100644 index f369be268e..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-084.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 5f45b4c81cea7763550e40df -title: Part 84 -challengeType: 0 -dashedName: part-84 ---- - -# --description-- - -To keep with the same color theme you have already been using (black and brown), change the color for when the link is visited to `black` and use `brown` for when the link is actually clicked. - -# --hints-- - -You should set the `color` property to `black` when the link is `visited`. - -```js -const aVisitedColor = new __helpers.CSSHelp(document).getStyle('a:visited')?.getPropertyValue('color'); -assert(aVisitedColor === 'black'); -``` - -You should set the `color` property to `brown` when the link is `active`. - -```js -const aActiveColor = new __helpers.CSSHelp(document).getStyle('a:active')?.getPropertyValue('color'); -assert(aActiveColor === 'brown'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} - -/* FOOTER */ - -footer { - font-size: 14px; -} - -a { - color: black; -} - ---fcc-editable-region-- -a:visited { - color: grey; -} - -a:hover { - color: brown; -} - -a:active { - color: white; -} ---fcc-editable-region-- -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-085.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-085.md deleted file mode 100644 index e78801ff9d..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-085.md +++ /dev/null @@ -1,184 +0,0 @@ ---- -id: 5f45b715301bbf667badc04a -title: Part 85 -challengeType: 0 -dashedName: part-85 ---- - -# --description-- - -The menu text `CAMPER CAFE` has a different space from the top than the address at the bottom of the menu. This is due to the browser having some default top margin for the `h1` element. - -Change the top margin of the `h1` element to `0` to remove all the top margin. - -# --hints-- - -You should set the `margin-top` property to `0`. - -```js -const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '0px'); -assert(hasMarginTop); -``` - -Your `h1` element should have a `margin-top` of `0`. - -```js -const h1MarginTop = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin-top'); -assert(h1MarginTop === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - ---fcc-editable-region-- -h1 { - font-size: 40px; -} ---fcc-editable-region-- - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} - -/* FOOTER */ - -footer { - font-size: 14px; -} - -a { - color: black; -} - -a:visited { - color: black; -} - -a:hover { - color: brown; -} - -a:active { - color: brown; -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-086.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-086.md deleted file mode 100644 index b821fff97d..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-086.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5f46e270702a8456a664f0df -title: Part 86 -challengeType: 0 -dashedName: part-86 ---- - -# --description-- - -To remove some of the vertical space between the `h1` element and the text `Est. 2020`, change the bottom margin of the `h1` to `15px`. - -# --hints-- - -You should set the `margin-bottom` property to `15px`. - -```js -const hasMarginBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-bottom'] === '15px'); -assert(hasMarginBottom); -``` - -Your `h1` element should have a `margin-bottom` of `15px`. - -```js -const h1MarginBottom = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin-bottom'); -assert(h1MarginBottom === '15px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - ---fcc-editable-region-- -h1 { - font-size: 40px; - margin-top: 0; -} ---fcc-editable-region-- - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} - -/* FOOTER */ - -footer { - font-size: 14px; -} - -a { - color: black; -} - -a:visited { - color: black; -} - -a:hover { - color: brown; -} - -a:active { - color: brown; -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-087.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-087.md deleted file mode 100644 index a13a886bd4..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-087.md +++ /dev/null @@ -1,195 +0,0 @@ ---- -id: 5f46e36e745ead58487aabf2 -title: Part 87 -challengeType: 0 -dashedName: part-87 ---- - -# --description-- - -Now the top spacing looks good. The space below the address at the bottom of the menu is a little bigger than the space at the top of the menu and the `h1` element. - -To decrease the default margin space below the address `p` element, create a class selector named `address` and use the value `5px` for the `margin-bottom` property. - -# --hints-- - -You should add an `.address` selector. - -```js -const hasAddress = new __helpers.CSSHelp(document).getStyle('.address'); -assert(hasAddress); -``` - -You should set the `margin-bottom` property to `5px`. - -```js -const hasMarginBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-bottom'] === '5px'); -assert(hasMarginBottom); -``` - -Your `.address` selector should have the `margin-bottom` property set to `5px`. - -```js -const addressMarginBottom = new __helpers.CSSHelp(document).getStyle('.address')?.getPropertyValue('margin-bottom'); -assert(addressMarginBottom === '5px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; - margin-top: 0; - margin-bottom: 15px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} - -/* FOOTER */ - -footer { - font-size: 14px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -a { - color: black; -} - -a:visited { - color: black; -} - -a:hover { - color: brown; -} - -a:active { - color: brown; -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-088.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-088.md deleted file mode 100644 index 5698a4cd35..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-088.md +++ /dev/null @@ -1,191 +0,0 @@ ---- -id: 5f46e7a4750dd05b5a673920 -title: Part 88 -challengeType: 0 -dashedName: part-88 ---- - -# --description-- - -Now apply the `address` class to the `p` element containing the address. - -# --hints-- - -You should apply the `class="address"` attribute. - -```js -assert(code.match(/class=('|")address\1/i)); -``` - -Your `.address` element should be your `p` element. - -```js -assert($('.address')[0].tagName === 'P'); -``` - -Your `.address` element should have the text `123 freeCodeCamp Drive`. - -```js -assert($('.address')[0].innerText.match(/123 Free Code Camp Drive/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

-
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
-
---fcc-editable-region-- - ---fcc-editable-region-- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; - margin-top: 0; - margin-bottom: 15px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} - -/* FOOTER */ - -footer { - font-size: 14px; -} - -.address { - margin-bottom: 5px; -} - -a { - color: black; -} - -a:visited { - color: black; -} - -a:hover { - color: brown; -} - -a:active { - color: brown; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-089.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-089.md deleted file mode 100644 index 3625af0236..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-089.md +++ /dev/null @@ -1,194 +0,0 @@ ---- -id: 5f46e8284aae155c83015dee -title: Part 89 -challengeType: 0 -dashedName: part-89 ---- - -# --description-- - -The menu looks good, but other than the coffee beans background image, it is mainly just text. - -Under the `Coffee` heading, add an image using the url `https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg`. Give the image an `alt` value of `coffee icon`. - -# --hints-- - -You should have an `` tag. Remember that `img` elements are self-closing. - -```js -assert($('img').length === 1); -``` - -Your `img` element should have a `src` attribute of `https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg`. - -```js -assert($('img').attr('src') === 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg'); -``` - -Your `img` element should have an `alt` attribute of `coffee icon`. - -```js -assert($('img').attr('alt').match(/coffee icon/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
---fcc-editable-region-- -

Coffee

---fcc-editable-region-- -
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; - margin-top: 0; - margin-bottom: 15px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} - -/* FOOTER */ - -footer { - font-size: 14px; -} - -.address { - margin-bottom: 5px; -} - -a { - color: black; -} - -a:visited { - color: black; -} - -a:hover { - color: brown; -} - -a:active { - color: brown; -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-090.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-090.md deleted file mode 100644 index 7cfe542ac6..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-090.md +++ /dev/null @@ -1,223 +0,0 @@ ---- -id: 5f475bb508746c16c9431d42 -title: Part 90 -challengeType: 0 -dashedName: part-90 ---- - -# --description-- - -The image you added is not centered horizontally like the `Coffee` heading above it. `img` elements are "like" inline elements. - -To make the image behave like heading elements (which are block-level), create an `img` type selector and use the value `block` for the `display` property and use the applicable `margin-left` and `margin-right` values to center it horizontally. - -# --hints-- - -You should use an `img` selector. - -```js -const hasImg = new __helpers.CSSHelp(document).getStyle('img'); -assert(hasImg); -``` - -You should set the `display` property to `block`. - -```js -const hasDisplay = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.display === 'block'); -assert(hasDisplay); -``` - -You should set the `margin-left` property to `auto`. - -```js -const marginLeftFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style['margin-left'] === 'auto'); -assert(marginLeftFilter.length === 2); -``` - -You should set the `margin-right` property to `auto`. - -```js -const marginRightFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style['margin-right'] === 'auto'); -assert(marginRightFilter.length === 2); -``` - -Your `img` element should have a `display` of `block`. - -```js -const imgDisplay = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('display'); -assert(imgDisplay === 'block'); -``` - -Your `img` element should have a `margin-left` and `margin-right` of `auto`. - -```js -const imgMarginLeft = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('margin-left'); -assert(imgMarginLeft === 'auto'); -const imgMarginRight = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('margin-right'); -assert(imgMarginRight === 'auto'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

- coffee icon -
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

-
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; - margin-top: 0; - margin-bottom: 15px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25% -} - -/* FOOTER */ - -footer { - font-size: 14px; -} - -.address { - margin-bottom: 5px; -} - -a { - color: black; -} - -a:visited { - color: black; -} - -a:hover { - color: brown; -} - -a:active { - color: brown; -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-091.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-091.md deleted file mode 100644 index 0a2427ae65..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-091.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 5f475e1c7f71a61d913836c6 -title: Part 91 -challengeType: 0 -dashedName: part-91 ---- - -# --description-- - -Add one last image under the `Desserts` heading using the url `https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg`. Give the image an `alt` value of `pie icon`. - -# --hints-- - -You should add a second `img` element. - -```js -assert($('img').length === 2); -``` - -Your new `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg`. - -```js -assert($('img').last().attr('src') === 'https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg'); -``` - -Your new `img` element should have an `alt` of `pie icon`. - -```js -assert($('img').last().attr('alt').match(/pie icon/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

- coffee icon -
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
---fcc-editable-region-- -

Desserts

---fcc-editable-region-- -
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; - margin-top: 0; - margin-bottom: 15px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -img { - display: block; - margin-left: auto; - margin-right: auto; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25%; -} - -/* FOOTER */ - -footer { - font-size: 14px; -} - -.address { - margin-bottom: 5px; -} - -a { - color: black; -} - -a:visited { - color: black; -} - -a:hover { - color: brown; -} - -a:active { - color: brown; -} -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-092.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-092.md deleted file mode 100644 index 4ceab13e6a..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-092.md +++ /dev/null @@ -1,363 +0,0 @@ ---- -id: 5f47fe7e31980053a8d4403b -title: Part 92 -challengeType: 0 -dashedName: part-92 ---- - -# --description-- - -It would be nice if the vertical space between the `h2` elements and their associated icons was smaller. The `h2` elements have default top and bottom margin space, so you could change the bottom margin of the `h2` elements to say `0` or another number. - -There is an easier way, simply add a negative top margin to the `img` elements to pull them up from their current positions. Negative values are created using a `-` in front of the value. To complete this project, go ahead and use a negative top margin of `25px` in the `img` type selector. - -# --hints-- - -You should set the `margin-top` property to `-25px`. - -```js -const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '-25px'); -assert(hasMarginTop); -``` - -Your `img` elements should have a `margin-top` value of `-25px`. - -```js -const imgMarginTop = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('margin-top'); -assert(imgMarginTop === '-25px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

- coffee icon -
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

- pie icon -
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; - margin-top: 0; - margin-bottom: 15px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - ---fcc-editable-region-- -img { - display: block; - margin-left: auto; - margin-right: auto; -} ---fcc-editable-region-- - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25%; -} - -/* FOOTER */ - -footer { - font-size: 14px; -} - -.address { - margin-bottom: 5px; -} - -a { - color: black; -} - -a:visited { - color: black; -} - -a:hover { - color: brown; -} - -a:active { - color: brown; -} -``` - -# --solutions-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffee

- coffee icon -
-

French Vanilla

3.00

-
-
-

Caramel Macchiato

3.75

-
-
-

Pumpkin Spice

3.50

-
-
-

Hazelnut

4.00

-
-
-

Mocha

4.50

-
-
-
-

Desserts

- pie icon -
-

Donut

1.50

-
-
-

Cherry Pie

2.75

-
-
-

Cheesecake

3.00

-
-
-

Cinammon Roll

2.50

-
-
-
-
- -
- - -``` - -```css -body { - background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); - font-family: sans-serif; - padding: 20px; -} - -h1 { - font-size: 40px; - margin-top: 0; - margin-bottom: 15px; -} - -h2 { - font-size: 30px; -} - -.established { - font-style: italic; -} - -h1, h2, p { - text-align: center; -} - -.menu { - width: 80%; - background-color: burlywood; - margin-left: auto; - margin-right: auto; - padding: 20px; - max-width: 500px; -} - -img { - display: block; - margin-left: auto; - margin-right: auto; - margin-top: -25px; -} - -hr { - height: 2px; - background-color: brown; - border-color: brown; -} - -.bottom-line { - margin-top: 25px; -} - -h1, h2 { - font-family: Impact, serif; -} - -.item p { - display: inline-block; - margin-top: 5px; - margin-bottom: 5px; - font-size: 18px; -} - -.flavor, .dessert { - text-align: left; - width: 75%; -} - -.price { - text-align: right; - width: 25%; -} - -/* FOOTER */ - -footer { - font-size: 14px; -} - -.address { - margin-bottom: 5px; -} - -a { - color: black; -} - -a:visited { - color: black; -} - -a:hover { - color: brown; -} - -a:active { - color: brown; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-001.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-001.md new file mode 100644 index 0000000000..dc4a8df340 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-001.md @@ -0,0 +1,43 @@ +--- +id: 5f33071498eb2472b87ddee4 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +As you learned in the last few steps of the Cat Photo App, there is a basic structure needed to start building your web page. + +Add the `` tag, and an `html` element. + +# --hints-- + +You should have the `DOCTYPE` declaration. + +```js +assert(code.match(//i)); +``` + +You should have an opening `` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `` tag. Remember that closing tags have a `/` following the opening `<` bracket. + +```js +assert(code.match(/<\/html>/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-002.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-002.md new file mode 100644 index 0000000000..de97a59fc3 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-002.md @@ -0,0 +1,61 @@ +--- +id: 5f3313e74582ad9d063e3a38 +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Add a `head` element within the `html` element, so you can add a `title` element. The title element's text should be `Camper Cafe Menu`. + +# --hints-- + +You should have an opening `` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `` tag. + +```js +assert(code.match(//i)); +``` + +You should have an opening `` tag. + +```js +assert(code.match(/<title>/i)); +``` + +You should have a closing `` tag. + +```js +assert(code.match(/<\/title>/i)); +``` + +Your `` element should be nested in your `<head>` element. + +```js +assert(code.match(/<head>\s*<title>.*<\/title>\s*<\/head>/i)); +``` + +Your `<title>` element should have the text `Camper Cafe Menu`. You may need to check your spelling. + +```js +assert(code.match(/<title>camper\scafe\smenu<\/title>/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html +<!DOCTYPE html> +<html> +--fcc-editable-region-- + +--fcc-editable-region-- +</html> +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-003.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-003.md new file mode 100644 index 0000000000..1474c544d3 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-003.md @@ -0,0 +1,47 @@ +--- +id: 5f331e55dfab7a896e53c3a1 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +The `title` is one of several elements that provide extra information not visible on the web page, but could be useful for search engines or how the page gets displayed. + +Inside the `head` element, nest a `meta` element with an attribute named `charset` set to the value `utf-8` to tell the browser how to encode characters for the page. Note that `meta` elements are self-closing. + +# --hints-- + +You should have a `meta` tag. + +```js +assert(code.match(/<meta\s.*>/i)); +``` + +Your `meta` tag should have a `charset` attribute. + +```js +assert(code.match(/<meta charset=/i)); +``` + +Your `charset` attribute should have a value of `utf-8`. + +```js +assert(code.match(/charset=('|")utf-8\1/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html +<!DOCTYPE html> +<html> +--fcc-editable-region-- + <head> + <title>Camper Cafe Menu + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-004.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-004.md new file mode 100644 index 0000000000..4b25f11241 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-004.md @@ -0,0 +1,54 @@ +--- +id: 5f3326b143638ee1a09ff1e3 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +To prepare to create some actual content, add a `body` element below the `head` element. + +# --hints-- + +You should have an opening `` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `` tag. + +```js +assert(code.match(/<\/body>/i)); +``` + +You should not change your `head` element. Make sure you did not delete your closing tag. + +```js +assert(code.match(//i)); +assert(code.match(/<\/head>/i)); +``` + +Your `body` element should come after your `head` element. + +```js +assert(code.match(/<\/head>[.\n\s]*/im)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + Camper Cafe Menu + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-005.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-005.md new file mode 100644 index 0000000000..60b921c6a6 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-005.md @@ -0,0 +1,60 @@ +--- +id: 5f33294a6af5e9188dbdb8f3 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +The name of the cafe is `CAMPER CAFE`. Add an `h1` element within your `body` element. Give it the name of the cafe in capitalized letters to make it stand out. + +# --hints-- + +You should have an opening `

` tag. + +```js +assert(code.match(/

/i)); +``` + +You should have a closing `

` tag. + +```js +assert(code.match(/<\/h1>/i)); +``` + +You should not change your existing `body` element. + +```js +assert($('body').length === 1); +``` + +Your `h1` element should be nested in your `body` element. + +```js +assert($('h1')[0].parentElement.tagName === "BODY"); +``` + +Your `h1` element should have the text `CAMPER CAFE`. + +```js +assert(code.match(/

CAMPER CAFE<\/h1>/)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Camper Cafe Menu + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-006.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-006.md new file mode 100644 index 0000000000..e2f9dfbd3e --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-006.md @@ -0,0 +1,62 @@ +--- +id: 5f332a88dc25a0fd25c7687a +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +To let visitors know the cafe was founded in 2020, add a `p` element below the `h1` element with the text `Est. 2020`. + +# --hints-- + +You should have an opening `

` tag. + +```js +assert(code.match(/

/i)); +``` + +You should have a closing `

` tag. + +```js +assert(code.match(/<\/p>/i)); +``` + +You should not change your existing `h1` element. Make sure you did not delete the closing tag. + +```js +assert($('h1').length === 1); +``` + +Your `p` element should be below your `h1` element. + +```js +assert($('p')[0].previousElementSibling.tagName === 'H1'); +``` + +Your `p` element should have the text `Est. 2020`. + +```js +assert(code.match(/

Est. 2020<\/p>/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Camper Cafe Menu + + +--fcc-editable-region-- +

CAMPER CAFE

+--fcc-editable-region-- + + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-007.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-007.md new file mode 100644 index 0000000000..d025b22274 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-007.md @@ -0,0 +1,59 @@ +--- +id: 5f332b23c2045fb843337579 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Since the `p` element added in the previous step provides supplemental information about the cafe, nest both the `h1` and `p` elements in a `header` element. + +# --hints-- + +You should have an opening `
` tag. + +```js +assert(code.match(/
/i)); +``` + +You should have a closing `
` tag. + +```js +assert(code.match(/<\/header>/i)); +``` + +Your `h1` element should be nested in your `header` element. + +```js +const header = document.querySelectorAll('header')[0]; +assert(header.children[0].tagName === 'H1'); +``` + +Your `p` element should be nested in your `header` element. + +```js +const header = document.querySelectorAll('header')[0]; +assert(header.children[1].tagName === "P"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Camper Cafe Menu + + +--fcc-editable-region-- +

CAMPER CAFE

+

Est. 2020

+--fcc-editable-region-- + + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-008.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-008.md new file mode 100644 index 0000000000..290b875bf9 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-008.md @@ -0,0 +1,59 @@ +--- +id: 5f33310c1851c6c4da013250 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +It's time to add some menu content. Add a `main` element below the existing `header` element. It will eventually contain pricing information about coffee and desserts offered by the cafe. + +# --hints-- + +Your code should have an opening `
` tag. + +```js +assert(code.match(/
/i)); +``` + +Your code should have a closing `
` tag. + +```js +assert(code.match(/<\/main>/i)); +``` + +You should not change your `header` element. Make sure you don't accidentally delete your closing tag. + +```js +assert($('header').length === 1); +``` + +Your `main` tag should come after your `header` tag. + +```js +const main = document.querySelectorAll('main')[0]; +assert(main.previousElementSibling.tagName === 'HEADER'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Camper Cafe Menu + + +--fcc-editable-region-- +
+

CAMPER CAFE

+

Est. 2020

+
+--fcc-editable-region-- + + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-009.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-009.md new file mode 100644 index 0000000000..227fc7921b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-009.md @@ -0,0 +1,61 @@ +--- +id: 5f344fc1520b6719f2e35605 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +There will be two sections on the menu, one for coffees and one for desserts. Add a `section` element within the `main` element so you have a place to put all the coffees available. + +# --hints-- + +You should have an opening `
` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `
` tag. + +```js +assert(code.match(/<\/section\s*>/i)); +``` + +You should not change your existing `main` element. Make sure you didn't delete the closing tag. + +```js +assert($('main').length === 1); +``` + +Your `section` element should be within your `main` element. + +```js +const main = document.querySelectorAll('main')?.[0]; +assert(main.children[0].tagName === 'SECTION'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Camper Cafe Menu + + +
+

CAMPER CAFE

+

Est. 2020

+
+--fcc-editable-region-- +
+
+--fcc-editable-region-- + + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-010.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-010.md new file mode 100644 index 0000000000..eff8a34ac0 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-010.md @@ -0,0 +1,70 @@ +--- +id: 5f344fbc22624a2976425065 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Create an `h2` element in the `section` element and give it the text `Coffee`. + +# --hints-- + +You should have an opening `

` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `

` tag. + +```js +assert(code.match(/<\/h2\s*>/i)); +``` + +You should not change your existing `section` element. Make sure you did not delete the closing tag. + +```js +assert($('section').length === 1); +``` + +Your `h2` element should be within your `section` element. + +```js +const h2 = document.querySelector('h2'); +assert(h2.parentElement.tagName === 'SECTION'); +``` + +Your `h2` element should have the text `Coffee`. + +```js +const h2 = document.querySelector('h2'); +assert(h2.innerText === 'Coffee'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Camper Cafe Menu + + +
+

CAMPER CAFE

+

Est. 2020

+
+
+--fcc-editable-region-- +
+
+--fcc-editable-region-- +
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-011.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-011.md new file mode 100644 index 0000000000..b264f154f8 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-011.md @@ -0,0 +1,57 @@ +--- +id: 5f344fad8bf01691e71a30eb +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Up until now, you have been limited regarding the presentation and appearance of the content you create. To start taking control, add a `style` element within the `head` element. + +# --hints-- + +Your code should have an opening `` tag. + +```js +assert(code.match(/<\/style\s*>/)); +``` + +Your `style` element should be nested in your `head` element. + +```js +assert(code.match(/[\w\W\s]*[\w\W\s]*<\/style\s*>[\w\W\s]*<\/head\s*>/i)) +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + Camper Cafe Menu + + +
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+ +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-012.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-012.md new file mode 100644 index 0000000000..4643faeb33 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-012.md @@ -0,0 +1,71 @@ +--- +id: 5f344f9c805cd193c33d829c +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +You can add style to an element by specifying it in the `style` element and setting a property for it like this: + +```css +element { + property: value; +} +``` + +Center your `h1` element by setting its `text-align` property to the value `center`. + +# --hints-- + +You should have an `h1` selector in your `style` element. + +```js +const hasSelector = new __helpers.CSSHelp(document).getStyle('h1'); +assert(hasSelector); +``` + +Your `text-align` property should set a value of `center`. + +```js +const hasTextAlign = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['text-align'] === 'center'); +assert(hasTextAlign); +``` + +Your `h1` selector should set the `text-align` property to `center`. + +```js +const h1TextAlign = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('text-align'); +assert(h1TextAlign === 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Camper Cafe Menu +--fcc-editable-region-- + +--fcc-editable-region-- + + +
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-013.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-013.md new file mode 100644 index 0000000000..43cbfe57bc --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-013.md @@ -0,0 +1,87 @@ +--- +id: 5f3477ae9675db8bb7655b30 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +In the previous step, you used a type selector to style the `h1` element. Go ahead and center the `h2` and `p` elements with a new type selector for each one. + +# --hints-- + +You should not change the existing `h1` selector. + +```js +const hasH1 = new __helpers.CSSHelp(document).getStyle('h1'); +assert(hasH1); +``` + +You should add a new `h2` selector. + +```js +const hasH2 = new __helpers.CSSHelp(document).getStyle('h2'); +assert(hasH2); +``` + +You should add a new `p` selector. + +```js +const hasP = new __helpers.CSSHelp(document).getStyle('p'); +assert(hasP); +``` + +Your `h1` element should have a `text-align` of `center`. + +```js +const h1TextAlign = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('text-align'); +assert(h1TextAlign === 'center'); +``` + +Your `h2` element should have a `text-align` of `center`. + +```js +const h2TextAlign = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('text-align'); +assert(h2TextAlign === 'center'); +``` + +Your `p` element should have a `text-align` of `center`. + +```js +const pTextAlign = new __helpers.CSSHelp(document).getStyle('p')?.getPropertyValue('text-align'); +assert(pTextAlign === 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Camper Cafe Menu +--fcc-editable-region-- + +--fcc-editable-region-- + + +
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-014.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-014.md new file mode 100644 index 0000000000..20cb2c1b4f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-014.md @@ -0,0 +1,73 @@ +--- +id: 5f3477ae34c1239cafe128be +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +You now have three type selectors with the exact same styling. You can add the same group of styles to many elements by separating the selectors with commas like this: + +```css +selector1, selector2 { + property: value; +} +``` + +Use a single type selector to center the `h1`, `h2` and `p` elements at the same time. + +# --hints-- + +You should use a single type selector for all three elements, `h1, h2, p`. Be sure to use that order. + +```js +const hasSelector = new __helpers.CSSHelp(document).getStyle('h1, h2, p'); +assert(hasSelector); +``` + +You should only have one selector in your `style` element. + +```js +const selectors = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.selectorText) +assert(selectors.length === 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Camper Cafe Menu +--fcc-editable-region-- + +--fcc-editable-region-- + + +
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-015.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-015.md new file mode 100644 index 0000000000..a63fd9221a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-015.md @@ -0,0 +1,74 @@ +--- +id: 5f3477aefa51bfc29327200b +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +You have styled three elements by writing CSS inside the `style` tags. This works, but since there will many more styles, it's best to put all the styles in a separate file and link to it. + +We have created a separate `styles.css` file for you and switched the editor view to that file. You can change between files with the tabs at the top of the editor. + +Start by rewriting the styles you have created into the `styles.css` file. Make sure to exclude the opening and closing `style` tags. + +# --hints-- + +Your `styles.css` file should have the `h1, h2, p` type selector. + +```js +const css = code.split('')[0]; +assert(__helpers.removeWhiteSpace(css).match(/(h1|h2|p),(h1|h2|p),(h1|h2|p){/)) +``` + +Your selector should set the `text-align` property to `center`. + +```js +const css = code.split('')[0]; +assert(css.match(/text-align:\s*center;?/)); +``` + +You should only have one selector. + +```js +const css = code.split('')[0]; +assert(css.match(/text-align:\s*center;?/).length === 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Camper Cafe Menu + + + +
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-016.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-016.md new file mode 100644 index 0000000000..b602a766b9 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-016.md @@ -0,0 +1,65 @@ +--- +id: 5f3477ae8466a9a3d2cc953c +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Now that you have the CSS in the `styles.css` file, go ahead and remove the `style` element and all its content. Once it is removed, the text that was centered will shift back to the left. + +# --hints-- + +You should not have any `style` tags in your code. + +```js +assert(!code.match(/style/i)); +``` + +You should not have any CSS selectors in your HTML file. + +```js +const html = code.split('')[1]; +assert(!html.includes('style')); +assert(!html.includes('text-align')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + Camper Cafe Menu + + +--fcc-editable-region-- + +
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+ + +``` + +```css +h1, h2, p { + text-align: center; +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-017.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-017.md new file mode 100644 index 0000000000..ae92e9e0ee --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-017.md @@ -0,0 +1,89 @@ +--- +id: 5f3477cb2e27333b1ab2b955 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Now you need to link the `styles.css` file so the styles will be applied again. Nest a self-closing `link` element in the `head` element. Give it a `rel` attribute value `stylesheet`, a `type` attribute value of `text/css`, and an `href` attribute value of `styles.css`. + +# --hints-- + +Your code should have a `link` element. + +```js +// link is removed -> if exists, replaced with style +const link = document.querySelector('body > style'); +assert(link); +``` + +You should not change your existing `head` element. Make sure you did not delete the closing tag. + +```js +assert($('head').length === 1); +``` + +Your `link` element should be a self-closing element. + +```js +assert(code.match(//i)); +``` + +Your `link` element should be within your `head` element. + +```js +assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)) +``` + +Your `link` element should have a `rel` attribute with the value `stylesheet`. + +```js +assert(code.match(/rel=('|")stylesheet\1/i)); +``` + +Your `link` element should have a `type` attribute with the value `text/css`. + +```js +assert(code.match(/type=('|")text\/css\1/i)); +``` + +Your `link` element should have an `href` attribute with the value `styles.css`. + +```js +assert(code.match(/href=('|")styles.css\1/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + Camper Cafe Menu + +--fcc-editable-region-- + +
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+ + +``` + +```css +h1, h2, p { + text-align: center; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-018.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-018.md new file mode 100644 index 0000000000..ea92cc0683 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-018.md @@ -0,0 +1,72 @@ +--- +id: 5f3477cbcb6ba47918c1da92 +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +So the styling of the page looks similar on mobile as it does on a desktop or laptop, you need to add a `meta` element with a special `content` attribute. + +Add the following within the `head` element: + +```html + +``` + +# --hints-- + +Your code should have two `meta` elements. + +```js +assert(code.match(//g).length === 2); +``` + +Your `meta` element should have a `name` attribute with a value of `viewport`. + +```js +const meta = $('meta'); +assert(meta[0].outerHTML.match(/name=('|")viewport\1/) || meta[1].outerHTML.match(/name=('|")viewport\1/)); +``` + +Your `meta` element should have a `content` attribute with a value of `width=device-width, initial-scale=1.0`. + +```js +const meta = $('meta'); +assert(meta[0].outerHTML.match(/content=('|")width=device-width, initial-scale=1.0\1/) || meta[1].outerHTML.match(/content=('|")width=device-width, initial-scale=1.0\1/)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + Camper Cafe Menu + + +--fcc-editable-region-- + +
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+ + +``` + +```css +h1, h2, p { + text-align: center; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-019.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-019.md new file mode 100644 index 0000000000..d9da61aad0 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-019.md @@ -0,0 +1,70 @@ +--- +id: 5f3477cb303c5cb61b43aa9b +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +The text is centered again so the link to the CSS file is working. Add another style to the file that changes the `background-color` property to `brown` for the `body` element. + +# --hints-- + +You should use a `body` selector. + +```js +const hasBody = new __helpers.CSSHelp(document).getStyle('body'); +assert(hasBody); +``` + +You should set the `background-color` property to `brown`. + +```js +const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'brown'); +assert(hasBackground); +``` + +Your `body` element should have a `brown` background. + +```js +const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color'); +assert(bodyBackground === 'brown'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+ + +``` + +```css +--fcc-editable-region-- +h1, h2, p { + text-align: center; +} +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-020.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-020.md new file mode 100644 index 0000000000..f0f359b30c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-020.md @@ -0,0 +1,64 @@ +--- +id: 5f34a1fd611d003edeafd681 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +That brown background makes it hard to read the text. Change the `body` element's background color to be `burlywood` so it has some color but you are still be able to read the text. + +# --hints-- + +You should set the `background-color` property to `burlywood`. + +```js +const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'burlywood'); +assert(hasBackground); +``` + +Your `body` element should have a `burlywood` background. + +```js +const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color'); +assert(bodyBackground === 'burlywood'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+ + +``` + +```css +--fcc-editable-region-- +body { + background-color: brown; +} +--fcc-editable-region-- +h1, h2, p { + text-align: center; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-021.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-021.md new file mode 100644 index 0000000000..ba80041f97 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-021.md @@ -0,0 +1,77 @@ +--- +id: 5f356ed6cf6eab5f15f5cfe6 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +The `div` element is used mainly for design layout purposes unlike the other content elements you have used so far. Add a `div` element inside the `body` element and then move all the other elements inside the new `div`. + +# --hints-- + +You should have an opening `
` tag. + +```js +assert(code.match(/
/i)); +``` + +You should have a closing `
` tag. + +```js +assert(code.match(/<\/div>/i)); +``` + +You should not change your existing `body` element. Make sure you did not delete the closing tag. + +```js +assert($('body').length === 1); +``` + +Your `div` tag should be nested in the `body`. + +```js +const div = $('div')[0]; +assert(div.parentElement.tagName === 'BODY'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + +--fcc-editable-region-- + +
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+ +--fcc-editable-region-- + +``` + +```css +body { + background-color: burlywood; +} + +h1, h2, p { + text-align: center; +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-022.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-022.md new file mode 100644 index 0000000000..288907a95b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-022.md @@ -0,0 +1,76 @@ +--- +id: 5f356ed63c7807a4f1e6d054 +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +The goal now is to make the `div` not take up the entire width of the page. The CSS `width` property is perfect for this. Create a new type selector in the style sheet that gives your `div` element a width of `300px`. + +# --hints-- + +You should have a `div` type selector. + +```js +const hasDiv = new __helpers.CSSHelp(document).getStyle('div'); +assert(hasDiv); +``` + +You should set the `width` property to `300px`. + +```js +const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px'); +assert(hasWidth); +``` + +Your `div` should have a width of 300px. + +```js +const divWidth = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('width'); +assert(divWidth === '300px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+
+ + +``` + +```css +--fcc-editable-region-- +body { + background-color: burlywood; +} + +h1, h2, p { + text-align: center; +} +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-023.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-023.md new file mode 100644 index 0000000000..02b3c8efb6 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-023.md @@ -0,0 +1,79 @@ +--- +id: 5f356ed60a5decd94ab66986 +title: Step 23 +challengeType: 0 +removeComments: false +dashedName: step-23 +--- + +# --description-- + +Comments in CSS look like this: + +```css +/* comment here */ +``` + +In your style sheet, comment out the the line containing the `background-color` property and value, so you can see the effect of only styling `div` element. This will make the background white again. + +# --hints-- + +You should comment out the `background-color: burlywood;` line in your CSS. + +```js +assert(code.match(/\/\*\s*background-color:\s*burlywood;?\s*\*\//i)); +``` + + +Your `body` should have a white background. + +```js +const bodyCSS = $('body').css('background-color'); +assert(bodyCSS === "rgba(0, 0, 0, 0)") +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+
+ + +``` + +```css +body { +--fcc-editable-region-- + background-color: burlywood; +--fcc-editable-region-- +} + +h1, h2, p { + text-align: center; +} + +div { + width: 300px; +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-024.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-024.md new file mode 100644 index 0000000000..04681a5216 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-024.md @@ -0,0 +1,74 @@ +--- +id: 5f356ed63e0fa262326eef05 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Now make the background color of the `div` element to be `burlywood`. + +# --hints-- + +You should set the `background-color` property to `burlywood`. + +```js +const hasBackgroundColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'burlywood'); +assert(hasBackgroundColor); +``` + +Your `div` should have a burlywood background. + +```js +const divBackground = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('background-color'); +assert(divBackground === 'burlywood'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+
+ + +``` + +```css +body { + /* + background-color: burlywood; + */ +} + +h1, h2, p { + text-align: center; +} + +--fcc-editable-region-- +div { + width: 300px; +} +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-025.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-025.md new file mode 100644 index 0000000000..c709be666d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-025.md @@ -0,0 +1,74 @@ +--- +id: 5f356ed60785e1f3e9850b6e +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Now it's easy to see that the text is centered inside the `div` element. Currently, the width of the `div` element is specified in pixels (`px`). Change the `width` property's value to be `80%`, to make it is 80% the width of its parent element (`body`). + +# --hints-- + +You should set the `width` property to `80%`. + +```js +const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '80%'); +assert(hasWidth); +``` + +You should not have a `width` property of `300px`. + +```js +const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px'); +assert(!hasWidth); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+
+ + +``` + +```css +body { + /* + background-color: burlywood; + */ +} + +h1, h2, p { + text-align: center; +} +--fcc-editable-region-- +div { + width: 300px; + background-color: burlywood; +} +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-026.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-026.md new file mode 100644 index 0000000000..8a919adcd3 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-026.md @@ -0,0 +1,83 @@ +--- +id: 5f356ed656a336993abd9f7c +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Next, you want to center the `div` horizontally. You can do this by setting its `margin-left` and `margin-right` properties to `auto`. Think of the margin as invisible space around an element. Using these two margin properties, center the `div` element within the `body` element. + +# --hints-- + +You should set the `margin-left` property to `auto`. + +```js +const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-left'] === 'auto'); +assert(hasMargin); +``` + +You should set the `margin-right` property to `auto`. + +```js +const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-right'] === 'auto'); +assert(hasMargin); +``` + +You should set the `margin-left` and `margin-right` properties of your `div` to `auto`. + +```js +const divMarginRight = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('margin-right'); +const divMarginLeft = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('margin-left'); +assert(divMarginRight === 'auto'); +assert(divMarginLeft === 'auto'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+
+ + +``` + +```css +body { + /* + background-color: burlywood; + */ +} + +h1, h2, p { + text-align: center; +} + +--fcc-editable-region-- +div { + width: 80%; + background-color: burlywood; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-027.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-027.md new file mode 100644 index 0000000000..9d3b8e05ea --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-027.md @@ -0,0 +1,85 @@ +--- +id: 5f356ed6199b0cdef1d2be8f +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +So far you have been using type selectors to style elements. A class selector is defined by a name with a dot directly in front it, like this: + +```css +.class-name { + styles +} +``` + +Change the existing `div` selector into a class selector by replacing `div` with a class named `menu`. + +# --hints-- + +You should have a `.menu` type selector. + +```js +const hasMenu = new __helpers.CSSHelp(document).getStyle('.menu'); +assert(hasMenu); +``` + +You should not have a `div` selector. + +```js +const hasDiv = new __helpers.CSSHelp(document).getStyle('div'); +assert(!hasDiv); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+
+ + +``` + +```css +body { + /* + background-color: burlywood; + */ +} + +h1, h2, p { + text-align: center; +} + +--fcc-editable-region-- +div { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-028.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-028.md new file mode 100644 index 0000000000..114cb1d79e --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-028.md @@ -0,0 +1,75 @@ +--- +id: 5f356ed69db0a491745e2bb6 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +To apply the class's styling to the `div` element, add a `class` attribute to the `div` element's opening tag and set its value to `menu`. + +# --hints-- + +Your `div` should still render. Make sure you haven't malformed the `
` tag. + +```js +assert($('div').length === 1); +``` + +Your `div` element should have the `menu` class. + +```js +assert($('div').attr('class').includes('menu')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +--fcc-editable-region-- +
+--fcc-editable-region-- +
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+
+ + +``` + +```css +body { + /* + background-color: burlywood; + */ +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-029.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-029.md new file mode 100644 index 0000000000..2a83a2654b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-029.md @@ -0,0 +1,92 @@ +--- +id: 5f35e5c44359872a137bd98f +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Since the cafe's main product for sale is coffee, you could use an image of coffee beans for the background of the page. + +Delete the comment and its contents inside the `body` type selector. Now add a `background-image` property and set its value to `url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)`. + +# --hints-- + +You should remove the commented out `background-color` property. + +```js +assert(!code.match(/\/\*\s*background-color:\s*burlywood;?\s*\*\//i)) +``` + +Your `body` selector should not have any comments. + +```js +assert(!code.match(/body\s*{\s*\/\*/i)); +``` + +You should set the `background-image` property to `url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)`. + +```js +const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-image'] === `url("https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg")`) +assert(hasBackground) +``` + +Your `body` element should have the coffee beans background image. + +```js +const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-image'); +console.log(bodyBackground); +assert(bodyBackground === `url("https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg")`); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+
+
+ + +``` + +```css +body { +--fcc-editable-region-- + /* + background-color: burlywood; + */ +--fcc-editable-region-- +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-030.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-030.md new file mode 100644 index 0000000000..2d225ddfef --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-030.md @@ -0,0 +1,86 @@ +--- +id: 5f35e5c4321f818cdc4bed30 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +It’s looking good. Time to start adding some menu items. Add an empty `article` element under the `Coffee` heading. It will contain a flavor and price of each coffee you currently offer. + +# --hints-- + +You should have an opening `
` tag. + +```js +assert(code.match(/
/i)); +``` + +You should have a closing `
` tag. + +```js +assert(code.match(/<\/article>/i)); +``` + +You should not change the existing `h2` element. + +```js +assert($('h2').length === 1); +``` + +Your `article` element should come after your `h2` element. + +```js +const article = $('article')[0]; +assert(article.previousElementSibling.tagName === 'H2'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+--fcc-editable-region-- +

Coffee

+--fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-031.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-031.md new file mode 100644 index 0000000000..c9c364fd40 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-031.md @@ -0,0 +1,88 @@ +--- +id: 5f3c866daec9a49519871816 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +`article` elements commonly contain multiple elements that have related information. In this case, it will contain a coffee flavor and a price for that flavor. Nest two `p` elements inside your `article` element. The first one's text should be `French Vanilla`, and the second's text `3.00`. + +# --hints-- + +You should not change the existing `article` element. + +```js +assert($('article').length === 1); +``` + +Your `article` element should have two `p` elements. + +```js +assert($('article').children('p').length === 2); +``` + +Your first `p` element should have the text `French Vanilla`. + +```js +const firstP = $('article').children('p')[0]; +assert(firstP.innerText.match(/French Vanilla/i)); +``` + +Your second `p` element should have the text `3.00`. + +```js +const secondP = $('article').children('p')[1]; +assert(secondP.innerText.match(/3\.00/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+--fcc-editable-region-- +
+
+--fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-032.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-032.md new file mode 100644 index 0000000000..5077d6cb25 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-032.md @@ -0,0 +1,128 @@ +--- +id: 5f3c866d5414453fc2d7b480 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Starting below the existing coffee/price pair, add the following coffee and prices using `article` elements with two nested `p` elements inside each. As before, the first `p` element's text should contain the coffee flavor and the second `p` element's text should contain the price. + +```bash +Caramel Macchiato 3.75 +Pumpkin Spice 3.50 +Hazelnut 4.00 +Mocha 4.50 +``` + +# --hints-- + +You should have five `article` elements. + +```js +assert($('article').length === 5); +``` + +Each `article` element should have two `p` elements. + +```js +const articles = $('article'); +assert(articles[0].children.length === 2); +assert(articles[1].children.length === 2); +assert(articles[2].children.length === 2); +assert(articles[3].children.length === 2); +assert(articles[4].children.length === 2); +``` + +Your first `article` element should have `p` elements with the text `French Vanilla` and `3.00`. + +```js +const children = $('article')[0].children; +assert(children[0].innerText.match(/French Vanilla/i)); +assert(children[1].innerText.match(/3\.00/i)); +``` + +Your second `article` element should have `p` elements with the text `Caramel Macchiato` and `3.75`. + +```js +const children = $('article')[1].children; +assert(children[0].innerText.match(/Caramel Macchiato/i)); +assert(children[1].innerText.match(/3\.75/i)); +``` + +Your third `article` element should have `p` elements with the text `Pumpkin Spice` and `3.50`. + +```js +const children = $('article')[2].children; +assert(children[0].innerText.match(/Pumpkin Spice/i)); +assert(children[1].innerText.match(/3\.50/i)); +``` + +Your fourth `article` element should have `p` elements with the text `Hazelnut` and `4.00`. + +```js +const children = $('article')[3].children; +assert(children[0].innerText.match(/Hazelnut/i)); +assert(children[1].innerText.match(/4\.00/i)); +``` + +Your fifth `article` element should have `p` elements with the text `Mocha` and `4.50`. + +```js +const children = $('article')[4].children; +assert(children[0].innerText.match(/Mocha/i)); +assert(children[1].innerText.match(/4\.50/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+--fcc-editable-region-- +
+

French Vanilla

+

3.00

+
+--fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-033.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-033.md new file mode 100644 index 0000000000..97b4e83d16 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-033.md @@ -0,0 +1,100 @@ +--- +id: 5f3c866d28d7ad0de6470505 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +The flavors and prices are currently stacked on top of each other and centered with their respectable `p` elements. It would be nice if the flavor was on the left and the price was on the right. + +Add the class name `flavor` to the `French Vanilla` `p` element. + +# --hints-- + +You should add the `flavor` class to your `p` element. + +```js +assert(code.match(//i)); +``` + +You should only have one element with the `flavor` class. + +```js +assert($('.flavor').length === 1); +``` + +Your `flavor` class should be on the `p` element with the text `French Vanilla`. + +```js +assert($('.flavor')[0].innerText.match(/French Vanilla/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+--fcc-editable-region-- +

French Vanilla

+

3.00

+--fcc-editable-region-- +
+
+

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-034.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-034.md new file mode 100644 index 0000000000..ee300daa0f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-034.md @@ -0,0 +1,105 @@ +--- +id: 5f769541be494f25449b292f +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Using your new `flavor` class as a selector, set the `text-align` property's value to `left`. + +# --hints-- + +You should have a `flavor` class selector. + +```js +const hasFlavor = new __helpers.CSSHelp(document).getStyle('.flavor'); +assert(hasFlavor); +``` + +You should set the `text-align` property to `left`. + +```js +const hasTextAlign = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['text-align'] === 'left'); +assert(hasTextAlign); +``` + +Your `flavor` class selector should set the `text-align` property to `left`. + +```js +const flavorTextAlign = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('text-align'); +assert(flavorTextAlign === 'left'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

+

3.00

+
+
+

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-035.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-035.md new file mode 100644 index 0000000000..a747d163e4 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-035.md @@ -0,0 +1,102 @@ +--- +id: 5f76967fad478126d6552b0d +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Next, you want to align the price to the right. Add a class named `price` to your `p` element that has `3.00` as its text. + +# --hints-- + +You should add the `price` class to your `p` element. + +```js +assert(code.match(//i)); +``` + +You should only have one element with the `price` class. + +```js +assert($('.price').length === 1); +``` + +Your `price` class should be on the `p` element with the text `3.00`. + +```js +assert($('.price')[0].innerText.match(/3\.00/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

+--fcc-editable-region-- +

3.00

+--fcc-editable-region-- +
+
+

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.flavor { + text-align: left; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-036.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-036.md new file mode 100644 index 0000000000..aa742bd412 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-036.md @@ -0,0 +1,106 @@ +--- +id: 5f769702e6e33127d14aa120 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Now align the text to the `right` for the elements with the `price` class. + +# --hints-- + +You should have a `price` class selector. + +```js +assert(code.match(/\.price\s*{/i)); +``` + +Your `price` class selector should set the `text-align` property to `right`. + +```js +assert(code.match(/\.price\s*{\s*text-align:\s*right;?/i)); +``` + +Your `.price` element should be aligned to the right. + +```js +assert($('.price').css('text-align') === 'right'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

+

3.00

+
+
+

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.flavor { + text-align: left; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-037.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-037.md new file mode 100644 index 0000000000..0b93281298 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-037.md @@ -0,0 +1,108 @@ +--- +id: 5f3c866de7a5b784048f94b1 +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +That is kind of what you want, but now it would be nice if the flavor and price were on the same line. `p` elements are block-level elements, so they take up the entire width of their parent element. + +To get them on the same line, you need to apply some styling to the `p` elements, so they behave more like `inline` elements. Add a `class` attribute with the value `item` to first `article` element under the `Coffee` heading. + +# --hints-- + +You should apply the `item` class to your `article` element. + +```js +assert(code.match(//i)) +``` + +You should only have one `item` class element. + +```js +assert($('.item').length === 1); +``` + +Your first `article` element should have the `item` class. + +```js +assert($('article')[0].className === 'item'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+--fcc-editable-region-- +

Coffee

+
+

French Vanilla

+

3.00

+
+--fcc-editable-region-- +
+

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.flavor { + text-align: left; +} + +.price { + text-align: right; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-038.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-038.md new file mode 100644 index 0000000000..ef90cd397a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-038.md @@ -0,0 +1,117 @@ +--- +id: 5f3c866dbf362f99b9a0c6d0 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +The `p` elements are nested in an `article` element with the class attribute of `item`. You can style all the `p` elements nested anywhere in elements with a class named `item` like this: + +```css +.item p { } +``` + +Using the above selector, add a `display` property with value `inline-block` so the `p` elements behave more like `inline` elements. + +# --hints-- + +You should use the `.item p` selector. + +```js +const hasItemP = new __helpers.CSSHelp(document).getStyle('.item p'); +assert(hasItemP); +``` + +You should set the `display` property to `inline-block`. + +```js +const hasDisplay = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.display === 'inline-block'); +assert(hasDisplay); +``` + +Your `.item p` selector should set the `display` property to `inline-block`. + +```js +const itemPDisplay = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('display'); +assert(itemPDisplay === 'inline-block'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

+

3.00

+
+
+

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.flavor { + text-align: left; +} + +.price { + text-align: right; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-039.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-039.md new file mode 100644 index 0000000000..6eb7d80828 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-039.md @@ -0,0 +1,107 @@ +--- +id: 5f3c866d0fc037f7311b4ac8 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +That's closer, but the price didn't stay over on the right. This is because `inline-block` elements only take up the width of their content. To spread them out, add a `width` property to the `flavor` and `price` class selectors that have a value of `50%` each. + +# --hints-- + +You should set the `width` property to `50%` in your `.flavor` selector. + +```js +const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width'); +assert(flavorWidth === '50%'); +``` + +You should set the `width` property to `50%` in your `.price` selector. + +```js +const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width'); +assert(priceWidth === '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

+

3.00

+
+
+

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.item p { + display: inline-block; +} + +--fcc-editable-region-- +.flavor { + text-align: left; +} + +.price { + text-align: right; +} +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-040.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-040.md new file mode 100644 index 0000000000..c133014418 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-040.md @@ -0,0 +1,111 @@ +--- +id: 5f3c866dd0d0275f01d4d847 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +Well that did not work. Styling the `p` elements as `inline-block` and placing them on separate lines in the code creates an extra space to the right of the first `p` element, causing the second one to shift to the next line. One way to fix this is to make each `p` element's width a little less than `50%`. + +Change the `width` value to `49%` for each class to see what happens. + +# --hints-- + +You should set the `width` property to `49%` in your `.flavor` selector. + +```js +const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width'); +assert(flavorWidth === '49%'); +``` + +You should set the `width` property to `49%` in your `.price` selector. + +```js +const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width'); +assert(priceWidth === '49%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

+

3.00

+
+
+

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.item p { + display: inline-block; +} + +--fcc-editable-region-- +.flavor { + text-align: left; + width: 50%; +} + +.price { + text-align: right; + width: 50%; +} +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-041.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-041.md new file mode 100644 index 0000000000..cc32e2bd6b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-041.md @@ -0,0 +1,103 @@ +--- +id: 5f3cade9fa77275d9f4efe62 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +That worked, but there is still a little space on the right of the price. + +You could keep trying various percentages for the widths. Instead, simply move the price `p` element to be on the same line and make sure there is no space between them. + +# --hints-- + +Your `p` elements should not have any space between them. + +```js +assert(code.match(/Vanilla<\/p>

+ + + + + Camper Cafe Menu + + + +

+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+--fcc-editable-region-- +

French Vanilla

+

3.00

+--fcc-editable-region-- +
+
+

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.item p { + display: inline-block; +} + +.flavor { + text-align: left; + width: 49%; +} + +.price { + text-align: right; + width: 49%; +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-042.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-042.md new file mode 100644 index 0000000000..1b9f7bd588 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-042.md @@ -0,0 +1,108 @@ +--- +id: 5f3cade94c6576e7f7b7953f +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Now go ahead and change both the `flavor` and `price` class' widths to be `50%` again. + +# --hints-- + +You should set the `width` property to `50%` in your `.flavor` selector. + +```js +const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width'); +assert(flavorWidth === '50%'); +``` + +You should set the `width` property to `50%` in your `.price` selector. + +```js +const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width'); +assert(priceWidth === '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.item p { + display: inline-block; +} + +--fcc-editable-region-- +.flavor { + text-align: left; + width: 49%; +} + +.price { + text-align: right; + width: 49%; +} +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-043.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-043.md new file mode 100644 index 0000000000..03f0089951 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-043.md @@ -0,0 +1,119 @@ +--- +id: 5f3cade9993019e26313fa8e +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Now that you know it works, you can change the remaining `article` and `p` elements to match the first set. Start by adding the class `item` to the other `article` elements. + +# --hints-- + +You should only have five `article` elements. + +```js +assert($('article').length === 5); +``` + +You should only have five `.item` elements. + +```js +assert($('.item').length === 5); +``` + +Your `.item` elements should be your `article` elements. + + +```js +const articles = $('article'); +const items = $('.item'); +assert(articles[0] === items[0]); +assert(articles[1] === items[1]); +assert(articles[2] === items[2]); +assert(articles[3] === items[3]); +assert(articles[4] === items[4]); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+--fcc-editable-region-- +
+

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+--fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.item p { + display: inline-block; +} + +.flavor { + text-align: left; + width: 50%; +} + +.price { + text-align: right; + width: 50%; +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-044.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-044.md new file mode 100644 index 0000000000..f34cb4a6ca --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-044.md @@ -0,0 +1,100 @@ +--- +id: 5f7691dafd882520797cd2f0 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Next, position the other `p` elements to be on the same line with no space between them. + +# --hints-- + +You should not have any spaces between your `p` elements. + +```js +assert(!code.match(/<\/p>\s+

+ + + + + Camper Cafe Menu + + + +

+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+--fcc-editable-region-- +
+

Caramel Macchiato

+

3.75

+
+
+

Pumpkin Spice

+

3.50

+
+
+

Hazelnut

+

4.00

+
+
+

Mocha

+

4.50

+
+--fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.item p { + display: inline-block; +} + +.flavor { + text-align: left; + width: 50%; +} + +.price { + text-align: right; + width: 50%; +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-045.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-045.md new file mode 100644 index 0000000000..bf209f87a0 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-045.md @@ -0,0 +1,126 @@ +--- +id: 5f7692f7c5b3ce22a57788b6 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +To complete the styling, add the applicable class names `flavor` and `price` to all the remaining `p` elements. + +# --hints-- + +You should have five `.flavor` elements. + +```js +assert($('.flavor').length === 5); +``` + +You should have five `.price` elements. + +```js +assert($('.price').length === 5); +``` + +Your `.flavor` elements should be your `p` elements with the text `French Vanilla`, `Caramel Macchiato`, `Pumpkin Spice`, `Hazelnut`, and `Mocha`. + +```js +const p = $('p'); +const flavor = $('.flavor'); +assert(p[1] === flavor[0]); +assert(p[3] === flavor[1]); +assert(p[5] === flavor[2]); +assert(p[7] === flavor[3]); +assert(p[9] === flavor[4]); +``` + +Your `.price` elements should be your `p` elements with the text `3.00`, `3.75`, `3.50`, `4.00`, and `4.50`. + +```js +const p = $('p'); +const price = $('.price'); +assert(p[2] === price[0]); +assert(p[4] === price[1]); +assert(p[6] === price[2]); +assert(p[8] === price[3]); +assert(p[10] === price[4]); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+--fcc-editable-region-- +
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+--fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.item p { + display: inline-block; +} + +.flavor { + text-align: left; + width: 50%; +} + +.price { + text-align: right; + width: 50%; +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-046.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-046.md new file mode 100644 index 0000000000..907460d075 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-046.md @@ -0,0 +1,106 @@ +--- +id: 5f47633757ae3469f2d33d2e +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +If you make the width of the page preview smaller, you will notice at some point, some of the text on the left starts wrapping around to the next line. This is because the width of the `p` elements on the left side can only take up `50%` of the space. + +Since you know the prices on the right have significantly fewer characters, change the `flavor` class `width` value to be `75%` and then `price` class `width` value to be `25%`. + +# --hints-- + +You should set the `width` property to `75%` in your `.flavor` selector. + +```js +const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width'); +assert(flavorWidth === '75%'); +``` + +You should set the `width` property to `25%` in your `.price` selector. + +```js +const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width'); +assert(priceWidth === '25%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.item p { + display: inline-block; +} + +--fcc-editable-region-- +.flavor { + text-align: left; + width: 50%; +} + +.price { + text-align: right; + width: 50%; +} +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-047.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-047.md new file mode 100644 index 0000000000..ef7ec170d0 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-047.md @@ -0,0 +1,114 @@ +--- +id: 5f3cade99dda4e6071a85dfd +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +You will come back to the styling the menu in a few steps, but for now, go ahead add a second `section` element below the first for displaying the desserts offered by the cafe. + +# --hints-- + +You should have an opening `section` tag. + +```js +assert(code.match(/
/ig).length === 2); +``` + +You should have a closing `section` tag. + +```js +assert(code.match(/<\/section>/ig).length === 2); +``` + +You should not change the existing `main` element. + +```js +assert($('main').length === 1); +``` + +Your new `section` element should be nested in the `main` element. + +```js +assert($('main').children('section').length === 2); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+--fcc-editable-region-- +
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+--fcc-editable-region-- +
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.item p { + display: inline-block; +} + +.flavor { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-048.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-048.md new file mode 100644 index 0000000000..df10baac31 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-048.md @@ -0,0 +1,110 @@ +--- +id: 5f3ef6e0e0c3feaebcf647ad +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Add an `h2` element in the new section and give it the text `Desserts`. + +# --hints-- + +You should not change your existing `section` element. + +```js +assert($('section').length === 2); +``` + +You should add an `h2` element in your second `section` element. + +```js +assert($('section')[1].children[0].tagName === 'H2'); +``` + +Your new `h2` element should have the text `Desserts`. + +```js +assert($('h2')[1].innerText.match(/Desserts/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+--fcc-editable-region-- +
+
+--fcc-editable-region-- +
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.item p { + display: inline-block; +} + +.flavor { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-049.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-049.md new file mode 100644 index 0000000000..28b88de129 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-049.md @@ -0,0 +1,111 @@ +--- +id: 5f3ef6e0819d4f23ca7285e6 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Add an empty `article` element under the `Desserts` heading. Give it a `class` attribute with the value `item`. + +# --hints-- + +You should not change your existing `h2` element. + +```js +assert($('h2').length === 2); +``` + +Your `article` element should be below your `h2` element. + +```js +assert($('section')[1].children[1].tagName === 'ARTICLE'); +``` + +Your new `article` element should have the `item` class. + +```js +assert($('section')[1].children[1].className === 'item'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+--fcc-editable-region-- +

Desserts

+--fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.item p { + display: inline-block; +} + +.flavor { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-050.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-050.md new file mode 100644 index 0000000000..99403103b7 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-050.md @@ -0,0 +1,119 @@ +--- +id: 5f716ad029ee4053c7027a7a +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Nest two `p` elements inside your `article` element. The first one's text should be `Donut`, and the second's text `1.50`. Put both of them on the same line making sure there is no space between them. + +# --hints-- + +You should not change your existing `article` element. + +```js +assert($('article').length === 6); +``` + +Your new `article` element should have two `p` elements. + +```js +assert($('article').last().children('p').length === 2); +``` + +Your first `p` element should have the text `Donut`. + +```js +assert($('article').last().children('p')[0].innerText.match(/Donut/i)); +``` + +Your second `p` element should have the text `1.50`. + +```js +assert($('article').last().children('p')[1].innerText.match(/1\.50/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+--fcc-editable-region-- +
+
+--fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.item p { + display: inline-block; +} + +.flavor { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-051.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-051.md new file mode 100644 index 0000000000..5ebcd7ad3c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-051.md @@ -0,0 +1,120 @@ +--- +id: 5f7b87422a560036fd03ccff +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +For the two `p` elements you just added, add `dessert` as the value of the first `p` element's `class` attribute and the value `price` as the second `p` elements `class` attribute. + +# --hints-- + +You should have one `p` element with the `dessert` class. + +```js +assert($('.dessert').length === 1); +``` + +Your `p` element with the text `Donut` should have the `dessert` class. + +```js +assert($('.dessert')[0].innerText.match(/donut/i)); +``` + +Your `p` element with the text `1.50` should have the `price` class. + +```js +assert($('.price').last().text().match(/1\.50/)); +``` + +You should not have any spaces between your `p` elements. + +```js +assert(!code.match(/<\/p>\s+

+ + + + + Camper Cafe Menu + + + +

+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+--fcc-editable-region-- +

Donut

1.50

+--fcc-editable-region-- +
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.item p { + display: inline-block; +} + +.flavor { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-052.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-052.md new file mode 100644 index 0000000000..6aba6977bf --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-052.md @@ -0,0 +1,104 @@ +--- +id: 5f7b88d37b1f98386f04edc0 +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Something does not look right. You added the correct `class` attribute value to the `p` element with `Donut` as its text, but you have not defined a selector for it. + +Since the `flavor` class selector already has the properties you want, just add the `dessert` class name to it. + +# --hints-- + +You should add the `.dessert` selector to your `.flavor` selector. + +```js +const selector = new __helpers.CSSHelp(document).getStyle('.flavor, .dessert') || new __helpers.CSSHelp(document).getStyle('.dessert, .flavor'); +assert(selector) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.item p { + display: inline-block; +} + +--fcc-editable-region-- +.flavor { + text-align: left; + width: 75%; +} +--fcc-editable-region-- + +.price { + text-align: right; + width: 25% +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-053.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-053.md new file mode 100644 index 0000000000..7984a21f9d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-053.md @@ -0,0 +1,145 @@ +--- +id: 5f716bee5838c354c728a7c5 +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Below the dessert you just added, add the rest of the desserts and prices using three more `article` elements, each with two nested `p` elements. Each element should have the correct dessert and price text, and all of them should have the correct classes. + +```bash +Cherry Pie 2.75 +Cheesecake 3.00 +Cinammon Roll 2.50 +``` + +# --hints-- + +You should have four `.dessert` elements. + +```js +assert($('.dessert').length === 4); +``` + +You should have four new `.price` elements. + +```js +assert($('section').last().find('.price').length === 4); +``` + +Your `section` element should have eight `p` elements. + +```js +assert($('section').last().find('p').length === 8); +``` + +Your `.dessert` elements should have the text `Donut`, `Cherry Pie`, `Cheesecake`, and `Cinammon Roll`. + +```js +const dessert = $('.dessert'); +assert(dessert[0].innerText.match(/donut/i)); +assert(dessert[1].innerText.match(/cherry pie/i)); +assert(dessert[2].innerText.match(/cheesecake/i)); +assert(dessert[3].innerText.match(/cinammon roll/i)); +``` + +Your new `.price` elements should have the text `1.50`, `2.75`, `3.00`, and `2.50`. + +```js +const prices = $('section').last().find('.price'); +assert(prices[0].innerText.match(/1\.50/)); +assert(prices[1].innerText.match(/2\.75/)); +assert(prices[2].innerText.match(/3\.00/)); +assert(prices[3].innerText.match(/2\.50/)); +``` + +You should not have any spaces between your `p` elements. + +```js +assert(!code.match(/<\/p>\s+

+ + + + + Camper Cafe Menu + + + +

+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+--fcc-editable-region-- +
+

Donut

1.50

+
+--fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-054.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-054.md new file mode 100644 index 0000000000..ddebbd11b0 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-054.md @@ -0,0 +1,135 @@ +--- +id: 5f3ef6e0eaa7da26e3d34d78 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +You can give your menu some space between the content and the sides with various `padding` properties. + +Give the `menu` class a `padding-left` and a `padding-right` with the same value `20px`. + +# --hints-- + +You should set the `padding-left` property to `20px`. + +```js +const hasPaddingLeft = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-left'] === '20px'); +assert(hasPaddingLeft); +``` + +You should set the `padding-right` property to `20px`. + +```js +const hasPaddingRight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-right'] === '20px'); +assert(hasPaddingRight); +``` + +Your `.menu` element should have a `padding-left` of `20px`. + +```js +const menuPaddingLeft = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-left'); +assert(menuPaddingLeft === '20px'); +``` + +Your `.menu` element should have a `padding-right` of `20px`. + +```js +const menuPaddingRight = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-right'); +assert(menuPaddingRight === '20px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +--fcc-editable-region-- +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; +} +--fcc-editable-region-- + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-055.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-055.md new file mode 100644 index 0000000000..60472bcf83 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-055.md @@ -0,0 +1,144 @@ +--- +id: 5f3ef6e050279c7a4a7101d3 +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +That looks better. Now try to add the same `20px` padding to the top and bottom of the menu. + +# --hints-- + +You should not remove the `padding-left` or `padding-right` properties. + +```js +const paddingLeft = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-left'); +assert(paddingLeft === '20px'); +const paddingRight = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-right'); +assert(paddingRight === '20px'); +``` + +You should set the `padding-top` property to `20px`. + +```js +const hasPaddingTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-top'] === '20px'); +assert(hasPaddingTop); +``` + +You should set the `padding-bottom` property to `20px`. + +```js +const hasPaddingBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-top'] === '20px'); +assert(hasPaddingBottom); +``` + +Your `.menu` element should have a `padding-top` of `20px`. + +```js +const menuPaddingTop = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-top'); +assert(menuPaddingTop === '20px'); +``` + +Your `.menu` element should have a `padding-bottom` of `20px`. + +```js +const menuPaddingBottom = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-bottom'); +assert(menuPaddingBottom === '20px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +--fcc-editable-region-- +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding-left: 20px; + padding-right: 20px; +} +--fcc-editable-region-- + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-056.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-056.md new file mode 100644 index 0000000000..ec56f82510 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-056.md @@ -0,0 +1,147 @@ +--- +id: 5f3ef6e04559b939080db057 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Since all 4 sides of the menu have the same internal spacing, go ahead and delete the four properties and use a single `padding` property with the value `20px`. + +# --hints-- + +You should remove the `padding-left` property. + +```js +assert(!code.match(/padding-left/i)); +``` + +You should remove the `padding-right` property. + +```js +assert(!code.match(/padding-right/i)); +``` + +You should remove the `padding-top` property. + +```js +assert(!code.match(/padding-top/i)); +``` + +You should remove the `padding-bottom` property. + +```js +assert(!code.match(/padding-bottom/i)); +``` + +You should set the `padding` property to `20px`. + +```js +const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding'] === '20px'); +assert(hasPadding); +``` + +Your `.menu` element should have a `padding` value of `20px`. + +```js +const menuPadding = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding'); +assert(menuPadding === '20px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +--fcc-editable-region-- +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding-left: 20px; + padding-right: 20px; + padding-top: 20px; + padding-bottom: 20px; +} +--fcc-editable-region-- + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-057.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-057.md new file mode 100644 index 0000000000..49dbb58b22 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-057.md @@ -0,0 +1,122 @@ +--- +id: 5f3ef6e03d719d5ac4738993 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +The current width of the menu will always take up 80% of the `body` element's width. On a very wide screen, the coffee and dessert appear far apart from their prices. + +Add a `max-width` property to the `menu` class with a value of `500px` to prevent it from growing too wide. + +# --hints-- + +You should set the `max-width` property to `500px`. + +```js +const hasMaxWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['max-width'] === '500px'); +assert(hasMaxWidth); +``` + +Your `.menu` element should have a `max-width` of `500px`. + +```js +const menuMaxWidth = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('max-width'); +assert(menuMaxWidth === '500px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} + +h1, h2, p { + text-align: center; +} + +--fcc-editable-region-- +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; +} +--fcc-editable-region-- + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-058.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-058.md new file mode 100644 index 0000000000..7f6dcd4d0e --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-058.md @@ -0,0 +1,121 @@ +--- +id: 5f3ef6e05473f91f948724ab +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +You can change the `font-family` of text, to make it look different from the default font of your browser. Each browser has some common fonts available to it. + +Change all the text in your `body`, by adding a `font-family` property with the value `sans-serif`. This is a fairly common font that is very readable. + +# --hints-- + +You should set the `font-family` property to `sans-serif`. + +```js +const hasFontFamily = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-family'] === 'sans-serif'); +``` + +Your `body` should have a `font-family` of `sans-serif`. + +```js +const bodyFontFamily = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('font-family'); +assert(bodyFontFamily === 'sans-serif'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); +} +--fcc-editable-region-- + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-059.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-059.md new file mode 100644 index 0000000000..2cf2cd5028 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-059.md @@ -0,0 +1,138 @@ +--- +id: 5f3ef6e056bdde6ae6892ba2 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +It is a bit boring for all the text to have the same `font-family`. You can still have the majority of the text `sans-serif` and make just the `h1` and `h2` elements different using a different selector. + +Style both the `h1` and the `h2` elements so that only these elements' text use `Impact` font. + +# --hints-- + +You should use an `h1, h2` selector. + +```js +const h1h2Selector = new __helpers.CSSHelp(document).getStyle('h1, h2'); +assert(h1h2Selector); +``` + +You should set the `font-family` to `Impact`. + +```js +const hasFontFamily = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-family'] === 'Impact'); +assert(hasFontFamily); +``` + +Your `h1` element should have a `font-family` of `Impact`. + +```js +assert($('h1').css('font-family').match(/impact/i)); +``` + +Your `h2` element should have a `font-family` of `Impact`. + +```js +assert($('h2').css('font-family').match(/impact/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-060.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-060.md new file mode 100644 index 0000000000..4f9874a499 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-060.md @@ -0,0 +1,121 @@ +--- +id: 5f3ef6e0e9629bad967cd71e +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +You can add a fallback value for the font-family by adding another font name separated by a comma. This second font would be used in case the browser does not have the font built-in to it. + +Add the fallback font `serif` after the `Impact` font. + +# --hints-- + +You should add `serif` as a fallback for the `Impact` font. + +```js +const fontFamily = new __helpers.CSSHelp(document).getStyle('h1, h2')?.getPropertyValue('font-family'); +assert(fontFamily === 'Impact, serif'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +--fcc-editable-region-- +h1, h2 { + font-family: Impact; +} +--fcc-editable-region-- + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-061.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-061.md new file mode 100644 index 0000000000..f9d2ab7794 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-061.md @@ -0,0 +1,135 @@ +--- +id: 5f3ef6e06d34faac0447fc44 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Make the `Est. 2020` text italicized by creating an `established` class selector and giving it the `font-style` property with the value `italic`. + +# --hints-- + +You should have an `.established` selector. + +```js +const hasEstablished = new __helpers.CSSHelp(document).getStyle('.established'); +assert(hasEstablished); +``` + +You should set the `font-style` property to `italic`. + +```js +const hasFontStyle = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-style'] === 'italic'); +assert(hasFontStyle); +``` + +Your `.established` selector should set the `font-style` property to `italic`. + +```js +const establishedFontStyle = new __helpers.CSSHelp(document).getStyle('.established')?.getPropertyValue('font-style'); +assert(establishedFontStyle === 'italic'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-062.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-062.md new file mode 100644 index 0000000000..a04c7bce3c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-062.md @@ -0,0 +1,134 @@ +--- +id: 5f3ef6e087d56ed3ffdc36be +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Now apply the `established` class to the `Est. 2020` text. + +# --hints-- + +You should set the `class` of the `p` element to `established`. + +```js +assert(code.match(/

/i)); +``` + +Your `established` class should be on the element with the text `Est. 2020`. + +```js +const established = $('.established'); +assert(established[0].innerText.match(/Est\.\s2020/i)); +``` + +Your `established` class element should have italic text. + +```js +assert($('.established').css('font-style') === 'italic'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +

+--fcc-editable-region-- +
+

CAMPER CAFE

+

Est. 2020

+
+--fcc-editable-region-- +
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-063.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-063.md new file mode 100644 index 0000000000..1f8c016d8f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-063.md @@ -0,0 +1,147 @@ +--- +id: 5f3ef6e0f8c230bdd2349716 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +The typography of heading elements (e.g. `h1`, `h2`) is set by default values of users' browsers. + +Add two new type selectors (`h1` and `h2`). Use the `font-size` property for both, but use the value `40px` for the `h1` and `30px` for the `h2`. + +# --hints-- + +You should use an `h1` selector. + +```js +const hasH1 = new __helpers.CSSHelp(document).getStyle('h1'); +assert(hasH1); +``` + +You should use an `h2` selector. + +```js +const hasH2 = new __helpers.CSSHelp(document).getStyle('h2'); +assert(hasH2); +``` + +Your `h1` element should have a `font-size` of `40px`. + +```js +const h1FontSize = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('font-size'); +assert(h1FontSize === '40px'); +``` + +Your `h2` element should have a `font-size` of `30px`. + +```js +const h2FontSize = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('font-size'); +assert(h2FontSize === '30px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-064.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-064.md new file mode 100644 index 0000000000..63a5596ec5 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-064.md @@ -0,0 +1,149 @@ +--- +id: 5f3ef6e07276f782bb46b93d +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Add a `footer` element below the `main` element, where you can add some additional information. + +# --hints-- + +You should have an opening `
` tag. + +```js +assert(code.match(/
/i)); +``` + +You should have a closing `
` tag. + +```js +assert(code.match(/<\/footer>/i)); +``` + +You should not modify the existing `main` element. + +```js +assert($('main').length === 1); +``` + +Your `footer` element should be below your `main` element. + +```js +const footer = $('footer')[0] +assert(footer.previousElementSibling.tagName === 'MAIN'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+--fcc-editable-region-- +
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+--fcc-editable-region-- +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-065.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-065.md new file mode 100644 index 0000000000..4d544bee44 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-065.md @@ -0,0 +1,156 @@ +--- +id: 5f3ef6e0a81099d9a697b550 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Inside the `footer`, add a `p` element. Then, nest an anchor (`a`) element in the `p` that links to `https://www.freecodecamp.org` and has the text `Visit our website`. + +# --hints-- + +You should not modify the existing `footer` element. + +```js +assert($('footer').length === 1); +``` + +Your new `p` element should be nested within your `footer` element. + +```js +assert($('footer').children('p').length === 1); +``` + +Your new `a` element should be nested within your new `p` element. + +```js +assert($('footer').children('p').children('a').length === 1); +``` + +Your new `a` element should have the text `Visit our website`. + +```js +assert($('footer').find('a')[0].innerText.match(/Visit our website/i)); +``` + +Your new `a` element should link to `https://www.freecodecamp.org`. Remember that `a` elements use the `href` attribute to create a link. + +```js +assert($('footer').find('a').attr('href') === 'https://www.freecodecamp.org'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+--fcc-editable-region-- +
+
+--fcc-editable-region-- +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-066.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-066.md new file mode 100644 index 0000000000..5e722180d3 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-066.md @@ -0,0 +1,141 @@ +--- +id: 5f3ef6e0b431cc215bb16f55 +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Add a second `p` element below the one with the link and give it the text `123 Free Code Camp Drive`. + +# --hints-- + +You should add a second `p` element to your `footer`. + +```js +assert($('footer').children('p').length === 2); +``` + +Your new `p` element should have the text `123 Free Code Camp Drive`. Make sure your new element comes after your existing element. + +```js +assert($('footer').children('p').last().text().match(/123 Free Code Camp Drive/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-067.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-067.md new file mode 100644 index 0000000000..2a219a5d8c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-067.md @@ -0,0 +1,158 @@ +--- +id: 5f3ef6e01f288a026d709587 +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +You can use an `hr` element to display a divider between sections of different content. + +First, add an `hr` element between the first `header` element and the `main` element. Note that `hr` elements are self closing. + +# --hints-- + +You should add an `hr` element. `hr` elements are self-closing. + +```js +assert(code.match(//i)); +assert(!code.match(/<\/hr>/i)); +``` + +You should not change your existing `header` element. + +```js +assert($('header').length === 1); +``` + +You should not change your exiting `main` element. + +```js +assert($('main').length === 1); +``` + +Your `hr` element should be between your `header` element and your `main` element. + +```js +assert($('hr')[0].previousElementSibling.tagName === 'HEADER'); +assert($('hr')[0].nextElementSibling.tagName === 'MAIN'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+--fcc-editable-region-- +
+

CAMPER CAFE

+

Est. 2020

+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-068.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-068.md new file mode 100644 index 0000000000..7c4fb315ed --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-068.md @@ -0,0 +1,156 @@ +--- +id: 5f3f26fa39591db45e5cd7a0 +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +The default properties of an `hr` element will make it appear as a thin light grey line. You can change the height of the line by specifying a value for the `height` property. + +Change the height the `hr` element to be `3px`. + +# --hints-- + +You should use the `hr` selector. + +```js +const hasHr = new __helpers.CSSHelp(document).getStyle('hr'); +assert(hasHr); +``` + +You should set the `height` property to `3px`. + +```js +const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '3px'); +assert(hasHeight); +``` + +Your `hr` element should have a height of `3px`. + +```js +const hrHeight = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('height'); +assert(hrHeight === '3px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-069.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-069.md new file mode 100644 index 0000000000..d920de698b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-069.md @@ -0,0 +1,148 @@ +--- +id: 5f459225127805351a6ad057 +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Change the background color of the `hr` element to `brown` so it matches the color of the coffee beans. + +# --hints-- + +You should set the value of the `background-color` property to `brown`. + +```js +const hasBackgroundColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'brown'); +``` + +Your `hr` element should have a `background-color` of `brown`. + +```js +const hrBackgroundColor = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('background-color'); +assert(hrBackgroundColor === 'brown'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +--fcc-editable-region-- +hr { + height: 3px; +} +--fcc-editable-region-- + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-070.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-070.md new file mode 100644 index 0000000000..dc6a50d3a4 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-070.md @@ -0,0 +1,152 @@ +--- +id: 5f459a7ceb8b5c446656d88b +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Notice the grey color along the edges of the line. Those edges are known as borders. Each side of an element can have a different color or they can all be the same. + +Make all the edges of the `hr` element the same color as the background of it using the `border-color` property. + +# --hints-- + +You should set the `border-color` property to `brown`. + +```js +const hasBorderColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-color'] === 'brown'); +assert(hasBorderColor); +``` + +Your `hr` element should have a `border-color` of `brown`. + +```js +const hrBorderColor = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('border-color'); +assert(hrBorderColor === 'brown'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +--fcc-editable-region-- +hr { + height: 3px; + background-color: brown; +} +--fcc-editable-region-- + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-071.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-071.md new file mode 100644 index 0000000000..2438d9cf1b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-071.md @@ -0,0 +1,153 @@ +--- +id: 5f459cf202c2a3472fae6a9f +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +Notice how the thickness of the line looks bigger? The default value of a property named `border-width` is `1px` for all edges of `hr` elements. By changing the background to the same color as the background, the total height of the line is `5px` (`3px` plus the top and bottom border width of `1px`). + +Change the `height` property of the `hr` to be `2px`, so the total height of it becomes `4px`. + +# --hints-- + +You should set the `height` property to `2px`. + +```js +const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '2px'); +assert(hasHeight); +``` + +Your `hr` element should have a `height` of `2px`. + +```js +const hrHeight = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('height'); +assert(hrHeight === '2px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +--fcc-editable-region-- +hr { + height: 3px; + background-color: brown; + border-color: brown; +} +--fcc-editable-region-- + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-072.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-072.md new file mode 100644 index 0000000000..ee87dfd944 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-072.md @@ -0,0 +1,150 @@ +--- +id: 5f459fd48bdc98491ca6d1a3 +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Go ahead and add another `hr` element between the `main` element and the `footer` element. + +# --hints-- + +You should add a second `hr` element. + +```js +assert($('hr').length === 2); +``` + +Your new `hr` element should be between the `main` element and the `footer` element. + +```js +assert($('hr')[1].previousElementSibling.tagName === 'MAIN'); +assert($('hr')[1].nextElementSibling.tagName === 'FOOTER'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+--fcc-editable-region-- +
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+ +--fcc-editable-region-- +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-073.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-073.md new file mode 100644 index 0000000000..3617e97fa7 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-073.md @@ -0,0 +1,150 @@ +--- +id: 5f45a05977e2fa49d9119437 +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +To create a little more room around the menu, add `20px` of space on the inside of the `body` element by using the `padding` property. + +# --hints-- + +You should set the `padding` property to `20px`. + +```js +assert(code.match(/padding:\s*20px;?/i)); +``` + +Your `body` element should have a `padding` of `20px`. + +```js +const bodyPadding = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('padding'); +assert(bodyPadding === '20px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +--fcc-editable-region-- +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; +} +--fcc-editable-region-- + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-074.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-074.md new file mode 100644 index 0000000000..a142187bea --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-074.md @@ -0,0 +1,176 @@ +--- +id: 5f45a276c093334f0f6e9df4 +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Focusing on the menu items and prices, there is a fairly large gap between each line. + +Target all the `p` elements nested in elements with the `class` named `item` and set their top and bottom margin to be `5px`. + +# --hints-- + +You should set the `margin-top` property to `5px`. + +```js +const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '5px'); +assert(hasMarginTop); +``` + +You should set the `margin-bottom` property to `5px`. + +```js +const hasMarginBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-bottom'] === '5px'); +assert(hasMarginBottom); +``` + +You should use the existing `.item p` selector. + +```js +const hasOneSelector = new __helpers.CSSHelp(document).getStyleDeclarations('.item p'); +assert(hasOneSelector.length === 1); +``` + +Your `p` elements nested in your `.item` elements should have a `margin-top` of `5px`. + +```js +const itemPMarginTop = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('margin-top'); +assert(itemPMarginTop === '5px'); +``` + +Your `p` elements nested in your `.item` elements should have a `margin-bottom` of `5px`. + +```js +const itemPMarginBottom = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('margin-bottom'); +assert(itemPMarginBottom === '5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +--fcc-editable-region-- +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-075.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-075.md new file mode 100644 index 0000000000..512c9279ea --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-075.md @@ -0,0 +1,162 @@ +--- +id: 5f45a5a7c49a8251f0bdb527 +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Using the same style selector in the previous step, make the font size of the items and prices larger by using a value of `18px`. + +# --hints-- + +You should set the `font-size` property to `18px`. + +```js +const hasFontSize = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-size'] === '18px'); +assert(hasFontSize); +``` + +You should use the existing `.item p` selector. + +```js +const hasOneSelector = new __helpers.CSSHelp(document).getStyleDeclarations('.item p'); +assert(hasOneSelector.length === 1); +``` + +Your `p` elements nested in your `.item` elements should have a `font-size` of `18px`. + +```js +const itemPFontSize = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('font-size'); +assert(itemPFontSize === '18px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +h1, h2 { + font-family: Impact, serif; +} + +--fcc-editable-region-- +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; +} +--fcc-editable-region-- + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-076.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-076.md new file mode 100644 index 0000000000..9f00bd192c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-076.md @@ -0,0 +1,167 @@ +--- +id: 5f46fc57528aa1c4b5ea7c2e +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Changing the `bottom-margin` to `5px` looks great. However, now the space between the `Cinnamon Roll` menu item and the second `hr` element does not match the space between the top `hr` element and the `Coffee` heading. + +Add some more space by creating a class named `bottom-line` using `25px` for the `margin-top` property. + +# --hints-- + +You should add a `.bottom-line` selector. + +```js +const hasBottomLine = new __helpers.CSSHelp(document).getStyle('.bottom-line'); +assert(hasBottomLine); +``` + +You should set the `margin-top` property to `25px`. + +```js +const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '25px'); +assert(hasMarginTop); +``` + +Your `.bottom-line` selector should have a `margin-top` of `25px`. + +```js +const bottomLineMargin = new __helpers.CSSHelp(document).getStyle('.bottom-line')?.getPropertyValue('margin-top'); +assert(bottomLineMargin === '25px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-077.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-077.md new file mode 100644 index 0000000000..1fdbb60193 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-077.md @@ -0,0 +1,157 @@ +--- +id: 5f4701b942c824109626c3d8 +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +Now add the `bottom-line` class to the second `hr` element so the styling is applied. + +# --hints-- + +You should apply the `class="bottom-line"` property. + +```js +assert(code.match(/class=('|")bottom-line\1/i)); +``` + +Your `bottom-line` class should be applied to your second `hr` element. + +```js +assert($('hr')[1].className === 'bottom-line'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-078.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-078.md new file mode 100644 index 0000000000..774b4cf540 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-078.md @@ -0,0 +1,154 @@ +--- +id: 5f46ede1ff8fec5ba656b44c +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +Next you are going to be styling the `footer` element. To keep the CSS organized, add a comment at the end `styles.css` with the text `FOOTER`. + +# --hints-- + +You should have a CSS comment with the text `FOOTER`. + +```js +assert(code.match(/\/\*\s*FOOTER\s*\*\//i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+
+

+ Visit our website +

+

123 Free Code Camp Drive

+
+
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-079.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-079.md new file mode 100644 index 0000000000..66533d05f7 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-079.md @@ -0,0 +1,178 @@ +--- +id: 5f45a66d4a2b0453301e5a26 +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +Moving down to the `footer` element, make all the text have a value of `14px` for the font size. + +# --hints-- + +You should have a `footer` selector. + +```js +const hasFooter = new __helpers.CSSHelp(document).getStyle('footer'); +assert(hasFooter); +``` + +Your `footer` selector should be below your comment. + +```js +assert(code.match(/\/\*\s*FOOTER\s*\*\/\s*footer/i)); +``` + +You should set the `font-size` property to `14px`. + + +```js +const hasFontSize = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-size'] === '14px'); +assert(hasFontSize); +``` + +Your `footer` element should have a `font-size` of `14px`. + +```js +const footerFontSize = new __helpers.CSSHelp(document).getStyle('footer')?.getPropertyValue('font-size'); +assert(footerFontSize === '14px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} + +/* FOOTER */ + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-080.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-080.md new file mode 100644 index 0000000000..1a5b3ed4bf --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-080.md @@ -0,0 +1,175 @@ +--- +id: 5f45b0731d39e15d54df4dfc +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +The default color of a link that has not yet been clicked on is typically blue. The default color of a link that has already been visited from a page is typically purple. + +To make the `footer` links the same color regardless if a link has been visited, use a type selector for the anchor element (`a`) and use the value `black` for the `color` property. + +# --hints-- + +You should use an `a` selector. + +```js +const hasASelector = new __helpers.CSSHelp(document).getStyle('a'); +assert(hasASelector); +``` + +You should set the `color` property to `black`. + +```js +const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.color === 'black'); +``` + +Your `a` element should have a `color` of `black`. + +```js +const aColor = new __helpers.CSSHelp(document).getStyle('a')?.getPropertyValue('color'); +assert(aColor === 'black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} + +/* FOOTER */ + +footer { + font-size: 14px; +} +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-081.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-081.md new file mode 100644 index 0000000000..71f3af9b68 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-081.md @@ -0,0 +1,182 @@ +--- +id: 5f45b25e7ec2405f166b9de1 +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +You change properties of a link when the link has actually been visited by using a pseudo-selector that looks like `a:visited { propertyName: propertyValue; }`. + +Change the color of the footer `Visit our website` link to be `grey` when a user has visited the link. + +# --hints-- + +You should use the `a:visited` pseudoselector. + +```js +const hasAVisited = new __helpers.CSSHelp(document).getStyle('a:visited'); +assert(hasAVisited); +``` + +You should set the `color` property to `grey`. + +```js +const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.color === 'grey'); +assert(hasColor); +``` + +Your `a:visited` should have a `color` of `grey`. + +```js +const aVisitedColor = new __helpers.CSSHelp(document).getStyle('a:visited')?.getPropertyValue('color'); +assert(aVisitedColor === 'grey'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} + +/* FOOTER */ + +footer { + font-size: 14px; +} + +a { + color: black; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-082.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-082.md new file mode 100644 index 0000000000..01890c4254 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-082.md @@ -0,0 +1,186 @@ +--- +id: 5f45b3c93c027860d9298dbd +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +You change properties of a link when the mouse hovers them by using a pseudo-selector that looks like `a:hover { propertyName: propertyValue; }`. + +Change the color of the footer `Visit our website` link to be `brown` when a user hovers over it. + +# --hints-- + +You should use the `a:hover` pseudoselector. + +```js +const hasAHover = new __helpers.CSSHelp(document).getStyle('a:hover'); +assert(hasAHover); +``` + +You should set the `color` property to `brown`. + +```js +const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.color === 'brown'); +assert(hasColor); +``` + +Your `a:hover` should have a `color` of `brown`. + +```js +const aHoverColor = new __helpers.CSSHelp(document).getStyle('a:hover')?.getPropertyValue('color'); +assert(aHoverColor === 'brown'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} + +/* FOOTER */ + +footer { + font-size: 14px; +} + +a { + color: black; +} + +a:visited { + color: grey; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-083.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-083.md new file mode 100644 index 0000000000..c85b04cc80 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-083.md @@ -0,0 +1,189 @@ +--- +id: 5f45b45d099f3e621fbbb256 +title: Step 83 +challengeType: 0 +dashedName: step-83 +--- + +# --description-- + +You change properties of a link when the link is actually being clicked by using a pseudo-selector that looks like `a:active { propertyName: propertyValue; }`. + +Change the color of the footer `Visit our website` link to be `white` when clicked on. + +# --hints-- + +You should use the `a:active` pseudo-selector. + +```js +const hasAActive = new __helpers.CSSHelp(document).getStyle('a:active'); +assert(hasAActive); +``` + +You should set the `color` property to `white`. + +```js +const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.color === 'white'); +assert(hasColor); +``` + +Your `a:active` should have a `color` of `white`. + +```js +const aActiveColor = new __helpers.CSSHelp(document).getStyle('a:active')?.getPropertyValue('color'); +assert(aActiveColor === 'white'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} + +/* FOOTER */ + +footer { + font-size: 14px; +} + +a { + color: black; +} + +a:visited { + color: grey; +} + +a:hover { + color: brown; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-084.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-084.md new file mode 100644 index 0000000000..e71263637c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-084.md @@ -0,0 +1,182 @@ +--- +id: 5f45b4c81cea7763550e40df +title: Step 84 +challengeType: 0 +dashedName: step-84 +--- + +# --description-- + +To keep with the same color theme you have already been using (black and brown), change the color for when the link is visited to `black` and use `brown` for when the link is actually clicked. + +# --hints-- + +You should set the `color` property to `black` when the link is `visited`. + +```js +const aVisitedColor = new __helpers.CSSHelp(document).getStyle('a:visited')?.getPropertyValue('color'); +assert(aVisitedColor === 'black'); +``` + +You should set the `color` property to `brown` when the link is `active`. + +```js +const aActiveColor = new __helpers.CSSHelp(document).getStyle('a:active')?.getPropertyValue('color'); +assert(aActiveColor === 'brown'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} + +/* FOOTER */ + +footer { + font-size: 14px; +} + +a { + color: black; +} + +--fcc-editable-region-- +a:visited { + color: grey; +} + +a:hover { + color: brown; +} + +a:active { + color: white; +} +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-085.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-085.md new file mode 100644 index 0000000000..718f1e9516 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-085.md @@ -0,0 +1,184 @@ +--- +id: 5f45b715301bbf667badc04a +title: Step 85 +challengeType: 0 +dashedName: step-85 +--- + +# --description-- + +The menu text `CAMPER CAFE` has a different space from the top than the address at the bottom of the menu. This is due to the browser having some default top margin for the `h1` element. + +Change the top margin of the `h1` element to `0` to remove all the top margin. + +# --hints-- + +You should set the `margin-top` property to `0`. + +```js +const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '0px'); +assert(hasMarginTop); +``` + +Your `h1` element should have a `margin-top` of `0`. + +```js +const h1MarginTop = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin-top'); +assert(h1MarginTop === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +--fcc-editable-region-- +h1 { + font-size: 40px; +} +--fcc-editable-region-- + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} + +/* FOOTER */ + +footer { + font-size: 14px; +} + +a { + color: black; +} + +a:visited { + color: black; +} + +a:hover { + color: brown; +} + +a:active { + color: brown; +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-086.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-086.md new file mode 100644 index 0000000000..ff5bfa9b27 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-086.md @@ -0,0 +1,183 @@ +--- +id: 5f46e270702a8456a664f0df +title: Step 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +To remove some of the vertical space between the `h1` element and the text `Est. 2020`, change the bottom margin of the `h1` to `15px`. + +# --hints-- + +You should set the `margin-bottom` property to `15px`. + +```js +const hasMarginBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-bottom'] === '15px'); +assert(hasMarginBottom); +``` + +Your `h1` element should have a `margin-bottom` of `15px`. + +```js +const h1MarginBottom = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin-bottom'); +assert(h1MarginBottom === '15px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +--fcc-editable-region-- +h1 { + font-size: 40px; + margin-top: 0; +} +--fcc-editable-region-- + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} + +/* FOOTER */ + +footer { + font-size: 14px; +} + +a { + color: black; +} + +a:visited { + color: black; +} + +a:hover { + color: brown; +} + +a:active { + color: brown; +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-087.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-087.md new file mode 100644 index 0000000000..04633c9eaa --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-087.md @@ -0,0 +1,195 @@ +--- +id: 5f46e36e745ead58487aabf2 +title: Step 87 +challengeType: 0 +dashedName: step-87 +--- + +# --description-- + +Now the top spacing looks good. The space below the address at the bottom of the menu is a little bigger than the space at the top of the menu and the `h1` element. + +To decrease the default margin space below the address `p` element, create a class selector named `address` and use the value `5px` for the `margin-bottom` property. + +# --hints-- + +You should add an `.address` selector. + +```js +const hasAddress = new __helpers.CSSHelp(document).getStyle('.address'); +assert(hasAddress); +``` + +You should set the `margin-bottom` property to `5px`. + +```js +const hasMarginBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-bottom'] === '5px'); +assert(hasMarginBottom); +``` + +Your `.address` selector should have the `margin-bottom` property set to `5px`. + +```js +const addressMarginBottom = new __helpers.CSSHelp(document).getStyle('.address')?.getPropertyValue('margin-bottom'); +assert(addressMarginBottom === '5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; + margin-top: 0; + margin-bottom: 15px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} + +/* FOOTER */ + +footer { + font-size: 14px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +a { + color: black; +} + +a:visited { + color: black; +} + +a:hover { + color: brown; +} + +a:active { + color: brown; +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-088.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-088.md new file mode 100644 index 0000000000..d5768628dc --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-088.md @@ -0,0 +1,191 @@ +--- +id: 5f46e7a4750dd05b5a673920 +title: Step 88 +challengeType: 0 +dashedName: step-88 +--- + +# --description-- + +Now apply the `address` class to the `p` element containing the address. + +# --hints-- + +You should apply the `class="address"` attribute. + +```js +assert(code.match(/class=('|")address\1/i)); +``` + +Your `.address` element should be your `p` element. + +```js +assert($('.address')[0].tagName === 'P'); +``` + +Your `.address` element should have the text `123 freeCodeCamp Drive`. + +```js +assert($('.address')[0].innerText.match(/123 Free Code Camp Drive/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; + margin-top: 0; + margin-bottom: 15px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} + +/* FOOTER */ + +footer { + font-size: 14px; +} + +.address { + margin-bottom: 5px; +} + +a { + color: black; +} + +a:visited { + color: black; +} + +a:hover { + color: brown; +} + +a:active { + color: brown; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-089.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-089.md new file mode 100644 index 0000000000..64c8e74f18 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-089.md @@ -0,0 +1,194 @@ +--- +id: 5f46e8284aae155c83015dee +title: Step 89 +challengeType: 0 +dashedName: step-89 +--- + +# --description-- + +The menu looks good, but other than the coffee beans background image, it is mainly just text. + +Under the `Coffee` heading, add an image using the url `https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg`. Give the image an `alt` value of `coffee icon`. + +# --hints-- + +You should have an `` tag. Remember that `img` elements are self-closing. + +```js +assert($('img').length === 1); +``` + +Your `img` element should have a `src` attribute of `https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg`. + +```js +assert($('img').attr('src') === 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg'); +``` + +Your `img` element should have an `alt` attribute of `coffee icon`. + +```js +assert($('img').attr('alt').match(/coffee icon/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+--fcc-editable-region-- +

Coffee

+--fcc-editable-region-- +
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; + margin-top: 0; + margin-bottom: 15px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} + +/* FOOTER */ + +footer { + font-size: 14px; +} + +.address { + margin-bottom: 5px; +} + +a { + color: black; +} + +a:visited { + color: black; +} + +a:hover { + color: brown; +} + +a:active { + color: brown; +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-090.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-090.md new file mode 100644 index 0000000000..6964826e16 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-090.md @@ -0,0 +1,223 @@ +--- +id: 5f475bb508746c16c9431d42 +title: Step 90 +challengeType: 0 +dashedName: step-90 +--- + +# --description-- + +The image you added is not centered horizontally like the `Coffee` heading above it. `img` elements are "like" inline elements. + +To make the image behave like heading elements (which are block-level), create an `img` type selector and use the value `block` for the `display` property and use the applicable `margin-left` and `margin-right` values to center it horizontally. + +# --hints-- + +You should use an `img` selector. + +```js +const hasImg = new __helpers.CSSHelp(document).getStyle('img'); +assert(hasImg); +``` + +You should set the `display` property to `block`. + +```js +const hasDisplay = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.display === 'block'); +assert(hasDisplay); +``` + +You should set the `margin-left` property to `auto`. + +```js +const marginLeftFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style['margin-left'] === 'auto'); +assert(marginLeftFilter.length === 2); +``` + +You should set the `margin-right` property to `auto`. + +```js +const marginRightFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style['margin-right'] === 'auto'); +assert(marginRightFilter.length === 2); +``` + +Your `img` element should have a `display` of `block`. + +```js +const imgDisplay = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('display'); +assert(imgDisplay === 'block'); +``` + +Your `img` element should have a `margin-left` and `margin-right` of `auto`. + +```js +const imgMarginLeft = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('margin-left'); +assert(imgMarginLeft === 'auto'); +const imgMarginRight = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('margin-right'); +assert(imgMarginRight === 'auto'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+ coffee icon +
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; + margin-top: 0; + margin-bottom: 15px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25% +} + +/* FOOTER */ + +footer { + font-size: 14px; +} + +.address { + margin-bottom: 5px; +} + +a { + color: black; +} + +a:visited { + color: black; +} + +a:hover { + color: brown; +} + +a:active { + color: brown; +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-091.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-091.md new file mode 100644 index 0000000000..6171a11016 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-091.md @@ -0,0 +1,199 @@ +--- +id: 5f475e1c7f71a61d913836c6 +title: Step 91 +challengeType: 0 +dashedName: step-91 +--- + +# --description-- + +Add one last image under the `Desserts` heading using the url `https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg`. Give the image an `alt` value of `pie icon`. + +# --hints-- + +You should add a second `img` element. + +```js +assert($('img').length === 2); +``` + +Your new `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg`. + +```js +assert($('img').last().attr('src') === 'https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg'); +``` + +Your new `img` element should have an `alt` of `pie icon`. + +```js +assert($('img').last().attr('alt').match(/pie icon/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+ coffee icon +
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+--fcc-editable-region-- +

Desserts

+--fcc-editable-region-- +
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; + margin-top: 0; + margin-bottom: 15px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +img { + display: block; + margin-left: auto; + margin-right: auto; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25%; +} + +/* FOOTER */ + +footer { + font-size: 14px; +} + +.address { + margin-bottom: 5px; +} + +a { + color: black; +} + +a:visited { + color: black; +} + +a:hover { + color: brown; +} + +a:active { + color: brown; +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-092.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-092.md new file mode 100644 index 0000000000..7a044c4d96 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/step-092.md @@ -0,0 +1,363 @@ +--- +id: 5f47fe7e31980053a8d4403b +title: Step 92 +challengeType: 0 +dashedName: step-92 +--- + +# --description-- + +It would be nice if the vertical space between the `h2` elements and their associated icons was smaller. The `h2` elements have default top and bottom margin space, so you could change the bottom margin of the `h2` elements to say `0` or another number. + +There is an easier way, simply add a negative top margin to the `img` elements to pull them up from their current positions. Negative values are created using a `-` in front of the value. To complete this project, go ahead and use a negative top margin of `25px` in the `img` type selector. + +# --hints-- + +You should set the `margin-top` property to `-25px`. + +```js +const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '-25px'); +assert(hasMarginTop); +``` + +Your `img` elements should have a `margin-top` value of `-25px`. + +```js +const imgMarginTop = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('margin-top'); +assert(imgMarginTop === '-25px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+ coffee icon +
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+ pie icon +
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; + margin-top: 0; + margin-bottom: 15px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +--fcc-editable-region-- +img { + display: block; + margin-left: auto; + margin-right: auto; +} +--fcc-editable-region-- + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25%; +} + +/* FOOTER */ + +footer { + font-size: 14px; +} + +.address { + margin-bottom: 5px; +} + +a { + color: black; +} + +a:visited { + color: black; +} + +a:hover { + color: brown; +} + +a:active { + color: brown; +} +``` + +# --solutions-- + +```html + + + + + + Camper Cafe Menu + + + +
+
+

CAMPER CAFE

+

Est. 2020

+
+
+
+
+

Coffee

+ coffee icon +
+

French Vanilla

3.00

+
+
+

Caramel Macchiato

3.75

+
+
+

Pumpkin Spice

3.50

+
+
+

Hazelnut

4.00

+
+
+

Mocha

4.50

+
+
+
+

Desserts

+ pie icon +
+

Donut

1.50

+
+
+

Cherry Pie

2.75

+
+
+

Cheesecake

3.00

+
+
+

Cinammon Roll

2.50

+
+
+
+
+ +
+ + +``` + +```css +body { + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; + padding: 20px; +} + +h1 { + font-size: 40px; + margin-top: 0; + margin-bottom: 15px; +} + +h2 { + font-size: 30px; +} + +.established { + font-style: italic; +} + +h1, h2, p { + text-align: center; +} + +.menu { + width: 80%; + background-color: burlywood; + margin-left: auto; + margin-right: auto; + padding: 20px; + max-width: 500px; +} + +img { + display: block; + margin-left: auto; + margin-right: auto; + margin-top: -25px; +} + +hr { + height: 2px; + background-color: brown; + border-color: brown; +} + +.bottom-line { + margin-top: 25px; +} + +h1, h2 { + font-family: Impact, serif; +} + +.item p { + display: inline-block; + margin-top: 5px; + margin-bottom: 5px; + font-size: 18px; +} + +.flavor, .dessert { + text-align: left; + width: 75%; +} + +.price { + text-align: right; + width: 25%; +} + +/* FOOTER */ + +footer { + font-size: 14px; +} + +.address { + margin-bottom: 5px; +} + +a { + color: black; +} + +a:visited { + color: black; +} + +a:hover { + color: brown; +} + +a:active { + color: brown; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-001.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-001.md deleted file mode 100644 index e0751a6ffc..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-001.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 5dc174fcf86c76b9248c6eb2 -title: Part 1 -challengeType: 0 -dashedName: part-1 ---- - -# --description-- - -HTML elements have opening tags like `

` and closing tags like `

`. - -Find the `h1` element and change the text between its opening and closing tags to say `CatPhotoApp`. - -# --hints-- - -The text `CatPhotoApp` should be present in the code. You may want to check your spelling. - -```js -assert(code.match(/catphotoapp/i)); -``` - -Your `h1` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelector('h1')); -``` - -Your `h1` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/h1\>/)); -``` - -You have more than one `h1` element. Remove the extra `h1` element. - -```js -assert(document.querySelectorAll('h1').length === 1); -``` - -Your `h1` element's text should be `CatPhotoApp`. You have either omitted the text, have a typo, or it is not between the `h1` element's opening and closing tags. - -```js -assert(document.querySelector('h1').innerText.toLowerCase() === 'catphotoapp'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- -

Hello World

---fcc-editable-region-- - - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-002.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-002.md deleted file mode 100644 index 6fe26c03c1..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-002.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: 5dc1798ff86c76b9248c6eb3 -title: Part 2 -challengeType: 0 -dashedName: part-2 ---- - -# --description-- - -The `h1` to `h6` heading elements are used to signify the importance of content below them. The lower the number, the higher the importance, so `h2` elements have less importance than `h1` elements. Only use one `h1` element per page and place lower importance headings below higher importance headings. - -Add an `h2` element below the `h1` element that says `Cat Photos`. - -# --hints-- - -Your `h1` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelector('h1')); -``` - -Your `h1` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/h1\>/)); -``` - -You should only have one `h1` element. Remove the extra. - -```js -assert( - document.querySelector('h1') && document.querySelectorAll('h1').length === 1 -); -``` - -Your `h1` element's text should be 'CatPhotoApp'. You have either omitted the text or have a typo. - -```js -assert(document.querySelector('h1').innerText.toLowerCase() === 'catphotoapp'); -``` - -Your `h2` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelector('h2')); -``` - -Your `h2` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/h2\>/)); -``` - -Your `h2` element's text should be 'Cat Photos'. Only place the text `Cat Photos` between the opening and closing `h2` tags. - -```js -assert(document.querySelector('h2').innerText.toLowerCase() === 'cat photos'); -``` - -Your `h2` element should be below the `h1` element. The `h1` element has greater importance and must be above the `h2` element. - -```js -const collection = [...document.querySelectorAll('h1,h2')].map( - (node) => node.nodeName -); -assert(collection.indexOf('H1') < collection.indexOf('H2')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- -

CatPhotoApp

---fcc-editable-region-- - - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-003.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-003.md deleted file mode 100644 index dc9ed7a3fa..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-003.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5dc17d3bf86c76b9248c6eb4 -title: Part 3 -challengeType: 0 -dashedName: part-3 ---- - -# --description-- - -Paragraph (`p`) elements are used to create paragraph text on websites. - -Create a paragraph (`p`) element below your `h2` element, and give it the text `Click here to view more cat photos.` - -# --hints-- - -Your `p` element should have an opening tag. Opening tags have the following syntax: ``. - -```js -assert(document.querySelector('p')); -``` - -Your `p` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/p\>/)); -``` - -Your `p` element's text should be `Click here to view more cat photos.` You have either omitted the text or have a typo. - -```js -const extraSpacesRemoved = document - .querySelector('p') - .innerText.replace(/\s+/g, ' '); -assert(extraSpacesRemoved.match(/click here to view more cat photos\.?$/i)); -``` - -Your `p` element should be below the `h2` element. You have them in the wrong order. - -```js -const collection = [...document.querySelectorAll('h2,p')].map( - (node) => node.nodeName -); -assert(collection.indexOf('H2') < collection.indexOf('P')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

---fcc-editable-region-- -

Cat Photos

---fcc-editable-region-- - - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-004.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-004.md deleted file mode 100644 index e38850976f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-004.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -id: 5dc17dc8f86c76b9248c6eb5 -title: Part 4 -challengeType: 0 -dashedName: part-4 ---- - -# --description-- - -Commenting allows you to leave messages without affecting the browser display. It also allows you to make code inactive. A comment in HTML starts with ``. For example, the comment `` contains the text `TODO: Remove h1`. - -Add a comment above the `p` element with the text `TODO: Add link to cat photos`. \\ - -# --hints-- - -Your comment should start with ``. You are missing one or more of the characters that define the end of a comment. - -```js -assert(code.match(/-->/)); -``` - -Your code should not have extra opening/closing comment characters. You have an extra `` displaying in the browser. - -```js -const noSpaces = code.replace(/\s/g, ''); -assert(noSpaces.match(//g).length < 2); -``` - -Your comment should contain the text `TODO: Add link to cat photos`. - -```js -assert(code.match(//i)); -``` - -Your comment should be above the `p` element. You have them in the wrong order. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /

clickheretoviewmorecatphotos\.?<\/p>/i - ) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-

Cat Photos

---fcc-editable-region-- -

Click here to view more cat photos.

---fcc-editable-region-- - - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-005.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-005.md deleted file mode 100644 index b1d661d06f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-005.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: 5dc2385ff86c76b9248c6eb7 -title: Part 5 -challengeType: 0 -dashedName: part-5 ---- - -# --description-- - -HTML5 has some elements that identify different content areas. These elements make your HTML easier to read and help with Search Engine Optimization (SEO) and accessibility. - -Identify the main section of this page by adding a `
` opening tag after the `h1` element, and a `
` closing tag after the `p` element. - -# --hints-- - -Your `main` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelector('main')); -``` - -Your `main` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/main\>/)); -``` - -Your `main` element's opening tag should be below the `h1` element. You have them in the wrong order. - -```js -const collection = [...document.querySelectorAll('main,h1')].map( - (node) => node.nodeName -); -assert(collection.indexOf('H1') < collection.indexOf('MAIN')); -``` - -Your `main` element's opening tag should be above the `h2` element. You have them in the wrong order. - -```js -const collection = [...document.querySelectorAll('main,h2')].map( - (node) => node.nodeName -); -assert(collection.indexOf('MAIN') < collection.indexOf('H2')); -``` - -Your `main` element's closing tag should be below the `p` element. You have them in the wrong order. - -```js -const mainNode = document.querySelector('main'); -const pNode = document.querySelector('p'); -assert( - mainNode.contains(pNode) && - pNode.textContent.toLowerCase().match(/click here to view more cat photos/) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- -

CatPhotoApp

-

Cat Photos

- -

Click here to view more cat photos.

---fcc-editable-region-- - - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-006.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-006.md deleted file mode 100644 index 9c149f31b8..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-006.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -id: 5dc23991f86c76b9248c6eb8 -title: Part 6 -challengeType: 0 -dashedName: part-6 ---- - -# --description-- - -HTML elements are often nested within other HTML elements. In the previous step you nested the `h2` element, comment and `p` element within the `main` element. A nested element is a child of its parent element. - -To make HTML easier to read, indent the `h2` element, the comment, and `p` element exactly two spaces to indicate they are children of the `main` element. - -# --hints-- - -Your should have an `h2` element with text `Cat Photos`. You may have accidentally deleted it, it is missing both opening and closing tags, or the text has changed. - -```js -assert( - document.querySelector('h2') && - code.match(/<\/h2\>/) && - document.querySelector('h2').innerText.toLowerCase() === 'cat photos' -); -``` - -Your `h2` element should below the `main` element's opening tag and its opening tag should start 6 spaces over from the start of the line. - -```js -assert(code.toLowerCase().match(/\n\s{6}

/)); -``` - -Your code should have a comment. You removed the comment from an earlier step. - -```js -assert(code.match(//)); -``` - -The comment's text should be `TODO: Add link to cat photos`. Do not change the text or spacing of the comment. - -```js -assert(code.match(//i)); -``` - -Your comment should be below the `h2` element and start 6 spaces over from the start of the line. - -```js -assert( - code - .toLowerCase() - .match(/<\/h2>\n\s{6}/) -); -``` - -Your code should have a `p` element. You have removed the `p` element from an earlier step. - -```js -assert(document.querySelector('p')); -``` - -The text of the `p` element should be `Click here to view more cat photos.` Do not change the text, spacing, or punctuation of the `p` element. - -```js -assert( - document - .querySelector('p') - .innerText.toLowerCase() - .match(/click\s+here\s+to\s+view\s+more\s+cat\s+photos\.?$/) -); -``` - -Your `p` element should be below the comment and its opening tag should start 6 spaces over from the start of the line. - -```js -assert(code.toLowerCase().match(/-->\n\s{6}

/)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
---fcc-editable-region-- -

Cat Photos

- -

Click here to view more cat photos.

---fcc-editable-region-- -
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-007.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-007.md deleted file mode 100644 index 1bbceb7b6f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-007.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -id: 5dc23f9bf86c76b9248c6eba -title: Part 7 -challengeType: 0 -dashedName: part-7 ---- - -# --description-- - -You can add images to your website by using the `img` element. `img` elements have an opening tag without a closing tag. A tag for an element without a closing tag is known as a self-closing tag. - -Add an `img` element below the `p` element. At this point, no image will show up in the browser. - -# --hints-- - -Your `img` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelector('img')); -``` - -Your `img` element should not have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(!code.match(/<\/img\>/)); -``` - -You should only have one `img` element. Remove any extras. - -```js -assert(document.querySelectorAll('img').length === 1); -``` - -Your `img` element should be below the `p` element. You have them in the wrong order. - -```js -const collection = [...document.querySelectorAll('p,img')].map( - (node) => node.nodeName -); -assert(collection.indexOf('P') < collection.indexOf('IMG')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-

Cat Photos

- ---fcc-editable-region-- -

Click here to view more cat photos.

---fcc-editable-region-- -
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-008.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-008.md deleted file mode 100644 index 42f095135f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-008.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 5dc24073f86c76b9248c6ebb -title: Part 8 -challengeType: 0 -dashedName: part-8 ---- - -# --description-- - -HTML attributes are special words used inside the opening tag of an element to control the element's behavior. The `src` attribute in an `img` element specifies the image's URL (where the image is located). An example of an `img` element using an `src` attribute: ``. - -Add an `src` attribute to the existing `img` element that is set to the following URL: `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. - -# --hints-- - -Your code should have an `img` element. You may have removed the `img` element or you have not surrounded the `src` attribute's value with quotes. - -```js -assert(document.querySelector('img')); -``` - -Your `img` element should have an `src` attribute. You have either omitted the attribute or have a typo. Make sure there is a space between the element name and the attribute name. - -```js -assert(document.querySelector('img').src); -``` - -Your `img` element's `src` attribute should be set to '`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`'. You have either omitted the URL or have a typo. The case of the URL is important. - -```js -assert(document.querySelector('img').src === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg'); -``` - -Although you have set the `img` element's `src` to the correct URL, it is recommended to always surround the value of an attribute with quotation marks. - -```js -assert(!/\ - -

CatPhotoApp

-
-

Cat Photos

- -

Click here to view more cat photos.

---fcc-editable-region-- - ---fcc-editable-region-- -
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-009.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-009.md deleted file mode 100644 index 704ae16bc9..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-009.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -id: 5dc24165f86c76b9248c6ebc -title: Part 9 -challengeType: 0 -dashedName: part-9 ---- - -# --description-- - -All `img` elements should have an `alt` attribute. The `alt` attribute's text is used for screen readers to improve accessibility and is displayed if the image fails to load. For example, `A cat` has an `alt` attribute with the text `A cat`. - -Add an `alt` attribute to the `img` element with the text `A cute orange cat lying on its back`. - -# --hints-- - -Your code should have an `img` element. You removed the `img` element from an earlier step. - -```js -assert(document.querySelector('img')); -``` - -Your `img` element does not have an `alt` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -assert(document.querySelector('img').hasAttribute('alt')); -``` - -Your `img` element's `alt` attribute value is set to something other than 'A cute orange cat lying on its back'. Make sure the `alt` attribute's value is surrounded with quotation marks. - -```js -const altText = document - .querySelector('img') - .alt.toLowerCase() - .replace(/\s+/g, ' '); -assert(altText.match(/A cute orange cat lying on its back\.?$/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-

Cat Photos

- -

Click here to view more cat photos.

---fcc-editable-region-- - ---fcc-editable-region-- -
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-010.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-010.md deleted file mode 100644 index 83f7bce71f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-010.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 5dc24614f86c76b9248c6ebd -title: Part 10 -challengeType: 0 -dashedName: part-10 ---- - -# --description-- - -You can link to another page with the anchor (`a`) element. For example, `` would link to `freecodecamp.org`. - -Add an anchor element after the paragraph that links to `https://freecatphotoapp.com`. At this point, the link won’t show up in the preview. - -# --hints-- - -Your anchor (`a`) element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelector('a')); -``` - -Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/a\>/)); -``` - -Your anchor (`a`) element should be below the `p` element. You have them in the wrong order. - -```js -const collection = [...document.querySelectorAll('a, p')].map( - (node) => node.nodeName -); -assert(collection.indexOf('P') < collection.indexOf('A')); -``` - -Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -assert(document.querySelector('a').hasAttribute('href')); -``` - -Your anchor (`a`) element should link to `https://freecatphotoapp.com`. You have either omitted the URL or have a typo. - -```js -assert( - document.querySelector('a').getAttribute('href') === - 'https://freecatphotoapp.com' -); -``` - -Although you have set the anchor ('a') element's `href` attribute to the correct link, it is recommended to always surround the value of an attribute with quotation marks. - -```js -assert( - !/\ - -

CatPhotoApp

-
-

Cat Photos

- ---fcc-editable-region-- -

Click here to view more cat photos.

---fcc-editable-region-- - A cute orange cat lying on its back. -
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-011.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-011.md deleted file mode 100644 index 097cb6fdb0..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-011.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -id: 5ddbd81294d8ddc1510a8e56 -title: Part 11 -challengeType: 0 -dashedName: part-11 ---- - -# --description-- - -A link's text must be placed between the opening and closing tags of an anchor (`a`) element. For example, `click here to go to freeCodeCamp.org` is a link with the text `click here to go to freeCodeCamp.org`. - -Add the anchor text `cat photos` to the anchor element. This will become the link's text. - -# --hints-- - -Your anchor (`a`) element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelector('a')); -``` - -Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/a\>/)); -``` - -Your anchor (`a`) element's text should be `cat photos`. Make sure to put the link text between the anchor (`a`) element's opening tag and closing tag. - -```js -assert( - document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' ') === - 'cat photos' -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-

Cat Photos

- -

Click here to view more cat photos.

---fcc-editable-region-- - ---fcc-editable-region-- - A cute orange cat lying on its back. -
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-012.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-012.md deleted file mode 100644 index fa4c601b9e..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-012.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 5dfa22d1b521be39a3de7be0 -title: Part 12 -challengeType: 0 -dashedName: part-12 ---- - -# --description-- - -Turn the words `cat photos` located inside `p` element into a link by replacing the words with the anchor element added previously. The `p` element should show the same text in the browser, but the words `cat photos` should now be a link. There should only be one link showing in the app. - -# --hints-- - -Your code should only contain one anchor (`a`) element. Remove any extra anchor elements. - -```js -assert(document.querySelectorAll('a').length === 1); -``` - -Your anchor (`a`) element should be nested within the `p` element. - -```js -assert($('p > a').length); -``` - -The link's text should be `cat photos`. You have either omitted the text or have a typo. - -```js -const nestedAnchor = $('p > a')[0]; -assert( - nestedAnchor.getAttribute('href') === 'https://freecatphotoapp.com' && - nestedAnchor.innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos' -); -``` - -After nesting the anchor (`a`) element, the only `p` element content visible in the browser should be `Click here to view more cat photos.` Double check the text, spacing, or punctuation of both the `p` and nested anchor element. - -```js -const pText = document - .querySelector('p') - .innerText.toLowerCase() - .replace(/\s+/g, ' '); -assert(pText.match(/click here to view more cat photos\.?$/)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-

Cat Photos

- ---fcc-editable-region-- -

Click here to view more cat photos.

- cat photos ---fcc-editable-region-- - A cute orange cat lying on its back. -
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-013.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-013.md deleted file mode 100644 index c98eb0ae30..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-013.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 5dfa2407b521be39a3de7be1 -title: Part 13 -challengeType: 0 -dashedName: part-13 ---- - -# --description-- - -Add a `target` attribute with the value `_blank` to the anchor (`a`) element's opening tag, so that the link opens in a new tab. - -# --hints-- - -Your `p` element should have a nested anchor (`a`) element with the text `cat photos`. You may have deleted it or have a typo. - -```js -const anchor = $('p > a'); -assert( - anchor.length && - anchor[0].innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos' -); -``` - -Your anchor (`a`) element does not have a `target` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -assert(document.querySelector('a').hasAttribute('target')); -``` - -The value of the `target` attribute should '\_blank'. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -assert(document.querySelector('a').getAttribute('target') === '_blank'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-

Cat Photos

- ---fcc-editable-region-- -

Click here to view more cat photos.

---fcc-editable-region-- - A cute orange cat lying on its back. -
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-014.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-014.md deleted file mode 100644 index e828ad6d22..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-014.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 5dfa30b9eacea3f48c6300ad -title: Part 14 -challengeType: 0 -dashedName: part-14 ---- - -# --description-- - -Turn the image into a link by surrounding it with necessary element tags. Use `https://freecatphotoapp.com` as the anchor's `href` attribute value. - -# --hints-- - -You should have an `img` element with an `src` value of `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. You may have accidentally deleted it. - -```js -assert( - document.querySelector('img') && - document.querySelector('img').getAttribute('src') === - 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg' -); -``` - -Your anchor (`a`) element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelectorAll('a').length >= 2); -``` - -You should only add one opening anchor (`a`) tag. Please remove any extras. - -```js -assert(document.querySelectorAll('a').length === 2); -``` - -Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/a>/g).length >= 2); -``` - -You should only add one closing anchor (`a`) tag. Please remove any extras. - -```js -assert(code.match(/<\/a>/g).length === 2); -``` - -Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -assert(document.querySelector('a').hasAttribute('href')); -``` - -Your anchor (`a`) element should link to `https://freecatphotoapp.com`. You have either omitted the URL or have a typo. - -```js -assert( - document.querySelectorAll('a')[1].getAttribute('href') === - 'https://freecatphotoapp.com' -); -``` - -Your `img` element should be nested within the anchor (`a`) element. The entire `img` element should be inside the opening and closing tags of the anchor (`a`) element. - -```js -assert(document.querySelector('img').parentNode.nodeName === 'A'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-

Cat Photos

- -

Click here to view more cat photos.

---fcc-editable-region-- - A cute orange cat lying on its back. ---fcc-editable-region-- -
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-015.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-015.md deleted file mode 100644 index 365ba81e39..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-015.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 5f07be6ef7412fbad0c5626b -title: Part 15 -challengeType: 0 -dashedName: part-15 ---- - -# --description-- - -Before adding any new content, you should make use of a `section` element to separate the cat photos content from the future content. - -Take all the elements currently located within the `main` element and nest them in a `section` element. - -# --hints-- - -Your `section` element should have an opening tag. Opening tags have the following syntax: ``. - -```js -assert(document.querySelector('section')); -``` - -Your `section` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/section\>/)); -``` - -The entire `section` element should be between the opening and closing tags of the `main` element. - -```js -assert(document.querySelector('section').parentNode.nodeName === 'MAIN'); -``` - -The existing `h2`, comment, `p` element, and anchor (`a`) element should be between the opening and closing tags of the `section` element. - -```js -const childrenOfSection = [...document.querySelector('section').childNodes]; -const foundElems = childrenOfSection.filter((child) => { - return ['H2', 'A', 'P'].includes(child.nodeName); -}); -assert(foundElems.length === 3); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

---fcc-editable-region-- -
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
---fcc-editable-region-- - - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-016.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-016.md deleted file mode 100644 index 5e7b6661f9..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-016.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -id: 5f07c98cdb9413cbd4b16750 -title: Part 16 -challengeType: 0 -dashedName: part-16 ---- - -# --description-- - -It is time to add a new section. Add a second `section` element below the existing `section` element. - -# --hints-- - -Your `section` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelectorAll('section').length >= 2); -``` - -You should only add one opening `section` tag. Please remove any extras. - -```js -assert(document.querySelectorAll('section').length === 2); -``` - -Your `section` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/section>/g).length >= 2); -``` - -You should only add one closing `section` tag. Please remove any extras. - -```js -assert(code.match(/<\/section>/g).length === 2); -``` - -The second `section` element should not be nested in the first `section` element. - -```js -const childrenOf1stSection = [ - ...document.querySelector('main > section').children -]; -const foundElems = childrenOf1stSection.filter((child) => { - return child.nodeName === 'SECTION'; -}); -assert(foundElems.length === 0); -``` - -Both `section` elements should be between the opening and closing tags of the `main` element. - -```js -const childrenOfMain = [...document.querySelector('main').children]; -const foundElems = childrenOfMain.filter((child) => { - return child.nodeName === 'SECTION'; -}); -assert(foundElems.length === 2); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
---fcc-editable-region-- -
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
---fcc-editable-region-- -
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-017.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-017.md deleted file mode 100644 index a1fb58b10b..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-017.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -id: 5dfa3589eacea3f48c6300ae -title: Part 17 -challengeType: 0 -dashedName: part-17 ---- - -# --description-- - -Within the second `section` element, add a new `h2` element with the text `Cat Lists`. - -# --hints-- - -Your `section` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert( - document.querySelectorAll('section').length === 2 && - code.match(/<\/section>/g).length === 2 -); -``` - -Your `h2` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelectorAll('h2').length === 2); -``` - -Your `h2` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/h2\>/g).length === 2); -``` - -Your second `h2` element should be right above the second `section` element's closing tag. It is not in the correct position. - -```js -const secondSection = document.querySelectorAll('section')[1]; -assert(secondSection.lastElementChild.nodeName === 'H2'); -``` - -The second `h2` element should have the text `Cat Lists`. You have either omitted the text or have a typo. - -```js -assert( - document - .querySelectorAll('main > section')[1] - .lastElementChild.innerText.toLowerCase() === 'cat lists' -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
---fcc-editable-region-- -
-
---fcc-editable-region-- -
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-018.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-018.md deleted file mode 100644 index 258e7c8ab3..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-018.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: 5dfa371beacea3f48c6300af -title: Part 18 -challengeType: 0 -dashedName: part-18 ---- - -# --description-- - -When you add a lower rank heading element to the page, it's implied that you're starting a new subsection. - -After the last `h2` element of the second `section` element, add an `h3` element with the text `Things cats love:`. - -# --hints-- - -The second `section` element appears to be missing or does not have both an opening and closing tag. - -```js -assert( - document.querySelectorAll('main > section')[1] && - code.match(/\<\/section>/g).length == 2 -); -``` - -There should be an `h3` element right above the second `section` element's closing tag. - -```js -assert( - document.querySelectorAll('main > section')[1].lastElementChild.nodeName === - 'H3' -); -``` - -The `h3` element right above the second `section` element's closing tag should have the text `Things cats love:`. Make sure to include the colon at the end of the text. - -```js -assert( - document - .querySelectorAll('main > section')[1] - .lastElementChild.innerText.toLowerCase() - .replace(/\s+/g, ' ') === 'things cats love:' -); -``` - -There should be an `h2` element with the text `Cat Lists` above the last `h3` element that is nested in the last `section` element'. You may have accidentally deleted the `h2` element. - -```js -const secondSectionLastElemNode = document.querySelectorAll('main > section')[1] - .lastElementChild; -assert( - secondSectionLastElemNode.nodeName === 'H3' && - secondSectionLastElemNode.previousElementSibling.innerText - .toLowerCase() - .replace(/\s+/g, ' ') === 'cat lists' -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
---fcc-editable-region-- -
-

Cat Lists

-
---fcc-editable-region-- -
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-019.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-019.md deleted file mode 100644 index 553378e9e9..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-019.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -id: 5dfa37b9eacea3f48c6300b0 -title: Part 19 -challengeType: 0 -dashedName: part-19 ---- - -# --description-- - -After the `h3` element with the `Things cats love:` text, add an unordered list (`ul`) element. Note that nothing will be displayed at this point. - -# --hints-- - -Your `ul` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelector('ul')); -``` - -Your `ul` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/ul>/)); -``` - -The `ul` element should be above the second `section` element's closing tag. - -```js -const secondSectionLastElemNode = $('main > section')[1].lastElementChild; -assert(secondSectionLastElemNode.nodeName === 'UL'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
---fcc-editable-region-- -

Cat Lists

-

Things cats love:

---fcc-editable-region-- -
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-020.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-020.md deleted file mode 100644 index 78e2ed3443..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-020.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -id: 5dfb5ecbeacea3f48c6300b1 -title: Part 20 -challengeType: 0 -dashedName: part-20 ---- - -# --description-- - -Use list item (`li`) elements to create items in a list. Here is an example of list items in an unordered list: - -```html -
    -
  • milk
    • -
  • cheese
    • -
-``` - -Nest three list items within the `ul` element to display three things cats love: `cat nip`, `laser pointers` and `lasagna`. - -# --hints-- - -You should have three `li` elements. Each `li` element should have its own opening and closing tag. - -```js -assert($('li').length === 3 && code.match(/<\/li\>/g).length === 3); -``` - -You should have three `li` elements with the text `cat nip`, `laser pointers` and `lasagna` in any order. You have either omitted some text or have a typo. - -```js -assert.deepStrictEqual( - [...document.querySelectorAll('li')] - .map((item) => item.innerText.toLowerCase()) - .sort((a, b) => a.localeCompare(b)), - ['cat nip', 'lasagna', 'laser pointers'] -); -``` - -The three `li` elements should be located between the `ul` element's opening and closing tags. - -```js -assert( - [...document.querySelectorAll('li')].filter( - (item) => item.parentNode.nodeName === 'UL' - ).length === 3 -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

---fcc-editable-region-- -
    -
---fcc-editable-region-- -
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-021.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-021.md deleted file mode 100644 index 1b0923a591..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-021.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 5dfb6250eacea3f48c6300b2 -title: Part 21 -challengeType: 0 -dashedName: part-21 ---- - -# --description-- - -After the unordered list, add a new image with an `src` attribute value set to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg` and an `alt` attribute value set to `A slice of lasagna on a plate.` - -# --hints-- - -There should be an `img` element right above the second `section` element's closing tag. - -```js -assert($('section')[1].lastElementChild.nodeName === 'IMG'); -``` - -The new image either does not have an `alt` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -assert($('section')[1].lastElementChild.hasAttribute('alt')); -``` - -The new image should have an `alt` value of `A slice of lasagna on a plate.` Make sure the `alt` attribute's value is surrounded with quotation marks. - -```js -assert( - $('section')[1] - .lastElementChild.getAttribute('alt') - .replace(/\s+/g, ' ') - .match(/^A slice of lasagna on a plate\.?$/i) -); -``` - -The new image does not have an `src` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -assert($('section')[1].lastElementChild.hasAttribute('src')); -``` - -The new image should have an `src` value of `https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg`. Make sure the `src` attribute's value is surrounded with quotation marks. - -```js -assert( - $('section')[1].lastElementChild.getAttribute('src') === - 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg' -); -``` - -Although you have set the new image's `src` to the correct URL, it is recommended to always surround the value of an attribute with quotation marks. - -```js -assert(!/\ - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

---fcc-editable-region-- -
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
---fcc-editable-region-- -
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-022.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-022.md deleted file mode 100644 index 61f012759a..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-022.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -id: 5dfb655eeacea3f48c6300b3 -title: Part 22 -challengeType: 0 -dashedName: part-22 ---- - -# --description-- - -The `figure` element represents self-contained content and will allow you to associate an image with a caption. - -Nest the image you just added within a `figure` element. - -# --hints-- - -Your `figure` element should have an opening tag. Opening tags have the following syntax: ``. - -```js -assert(document.querySelector('figure')); -``` - -Your `figure` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/figure\>/)); -``` - -There should be an `figure` element right above the second `section` element's closing tag. - -```js -assert($('section')[1].lastElementChild.nodeName === 'FIGURE'); -``` - -The lasagna `img` element should be nested in the `figure` element. - -```js -assert( - document.querySelector('figure > img') && - document.querySelector('figure > img').getAttribute('src').toLowerCase() === - 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg' -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
---fcc-editable-region-- - A slice of lasagna on a plate. ---fcc-editable-region-- -
-
- - - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-023.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-023.md deleted file mode 100644 index 72f413b4da..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-023.md +++ /dev/null @@ -1,106 +0,0 @@ ---- -id: 5dfb6a35eacea3f48c6300b4 -title: Part 23 -challengeType: 0 -dashedName: part-23 ---- - -# --description-- - -A figure caption (`figcaption`) element is used to add a caption to describe the image contained withing the `figure` element. For example, `
A cute cat
` adds the caption `A cute cat`. - -After the image nested in the `figure` element, add a `figcaption` element with the text `Cats love lasagna.` - -# --hints-- - -The Lasagna `img` element should be nested in the `figure` element. - -```js -assert( - document.querySelector('figure > img') && - document.querySelector('figure > img').getAttribute('src').toLowerCase() === - 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg' -); -``` - -Your `figcaption` element should have an opening tag. Opening tags have the following syntax: ``. - -```js -assert(document.querySelector('figcaption')); -``` - -Your `figcaption` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/figcaption\>/)); -``` - -The `figcaption` element should be nested in the `figure` element. - -```js -assert( - document.querySelector('figure > figcaption') && - document.querySelector('figure > figcaption') -); -``` - -The lasagna `img` element should be nested in the `figure` element. - -```js -assert( - document.querySelector('figure > img') && - document.querySelector('figure > img').getAttribute('src').toLowerCase() === - 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg' -); -``` - -The `figcaption` element nested in the `figure` element should be below the `img` element. You have them in the wrong order. - -```js -assert( - document.querySelector('figcaption').previousElementSibling.nodeName === 'IMG' -); -``` - -Your `figcaption` element's text should be `Cats love lasagna.` You have either omitted the text or have a typo. - -```js -assert( - document.querySelector('figcaption').innerText.match(/Cats love lasagna.?$/i) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
---fcc-editable-region-- - A slice of lasagna on a plate. ---fcc-editable-region-- -
-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-024.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-024.md deleted file mode 100644 index 1efe436aa3..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-024.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -id: 5ef9b03c81a63668521804d0 -title: Part 24 -challengeType: 0 -dashedName: part-24 ---- - -# --description-- - -Emphasize the word `love` in the `figcaption` element by wrapping it in an emphasis (`em`) element. - -# --hints-- - -Your emphasis (`em`) element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelector('em')); -``` - -Your emphasis (`em`) element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/em\>/)); -``` - -You have either deleted the `figcaption` element or it is missing an opening or closing tag. - -```js -assert(document.querySelector('figcaption') && code.match(/<\/figcaption\>/)); -``` - -Your emphasis (`em`) element should surround the text `love`. You have either omitted the text or have a typo. - -```js -assert( - document.querySelector('figcaption > em').innerText.toLowerCase() === 'love' -); -``` - -The `figcaption`'s text should be `Cats love lasagna`. Check for typos and that the necessary spaces are present around the `em` element's opening and closing tags. - -```js -assert( - document - .querySelector('figcaption') - .innerText.replace(/\s+/gi, ' ') - .match(/cats love lasagna\.?/i) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. ---fcc-editable-region-- -
Cats love lasagna.
---fcc-editable-region-- -
-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-025.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-025.md deleted file mode 100644 index 72108fa981..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-025.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 5ef9b03c81a63668521804d1 -title: Part 25 -challengeType: 0 -dashedName: part-25 ---- - -# --description-- - -After the `figure` element, add another `h3` element with the text `Top 3 things cats hate:`. - -# --hints-- - -There should be an `h3` element right above the second `section` element's closing tag. Make it has an opening and closing tag. - -```js -assert( - document.querySelectorAll('main > section')[1].lastElementChild.nodeName === - 'H3' && code.match(/<\/h3\>/g).length === 2 -); -``` - -The new `h3` element should have the text `Top 3 things cats hate:`. Make sure to include the colon at the end of the text. - -```js -assert( - document - .querySelectorAll('main > section')[1] - .lastElementChild.innerText.toLowerCase() - .replace(/\s+/g, ' ') === 'top 3 things cats hate:' -); -``` - -There should be a `figure` above the new `h3` element. You may have accidentally deleted the `figure` element. - -```js -const secondSectionLastElemNode = document.querySelectorAll('main > section')[1] - .lastElementChild; -assert( - secondSectionLastElemNode.nodeName === 'H3' && - secondSectionLastElemNode.previousElementSibling.nodeName === 'FIGURE' -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
---fcc-editable-region-- -
- A slice of lasagna on a plate. -
Cats love lasagna.
-
---fcc-editable-region-- -
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-026.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-026.md deleted file mode 100644 index 5242b61023..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-026.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -id: 5ef9b03c81a63668521804d2 -title: Part 26 -challengeType: 0 -dashedName: part-26 ---- - -# --description-- - -The code for an ordered list (`ol`) is similar to an unordered list, but list items in an ordered list are numbered when displayed. - -After the final second section' last `h3` element, add an ordered list with these three list items: `flea treatment`, `thunder` and `other cats`. - -# --hints-- - -Your `ol` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelector('ol')); -``` - -Your `ol` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/ol>/)); -``` - -The `ol` element should be above the second `section` element's closing tag. You have them in the wrong order. - -```js -assert($('main > section')[1].lastElementChild.nodeName === 'OL'); -``` - -The three `li` elements should be nested inside the `ol` element. - -```js -assert( - [...document.querySelectorAll('li')].filter( - (item) => item.parentNode.nodeName === 'OL' - ).length === 3 -); -``` - -You should have three `li` elements with the text `flea treatment`, `thunder` and `other cats` in any order. - -```js -assert.deepStrictEqual( - [...document.querySelectorAll('li')] - .filter((item) => item.parentNode.nodeName === 'OL') - .map((item) => item.innerText.toLowerCase()) - .sort((a, b) => a.localeCompare(b)), - ['flea treatment', 'other cats', 'thunder'] -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
---fcc-editable-region-- -

Top 3 things cats hate:

---fcc-editable-region-- -
-
- - - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-027.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-027.md deleted file mode 100644 index 7f1e670363..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-027.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -id: 5ef9b03c81a63668521804d3 -title: Part 27 -challengeType: 0 -dashedName: part-27 ---- - -# --description-- - -After the ordered list, add another `figure` element. - -# --hints-- - -Your `figure` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelectorAll('figure').length === 2); -``` - -Your `figure` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/figure>/g).length === 2); -``` - -There should be a `figure` element right above the second `section` element's closing tag. - -```js -assert($('main > section')[1].lastElementChild.nodeName === 'FIGURE'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

---fcc-editable-region-- -
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
---fcc-editable-region-- -
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-028.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-028.md deleted file mode 100644 index fef1f7d6aa..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-028.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 5efada803cbd2bbdab94e332 -title: Part 28 -challengeType: 0 -dashedName: part-28 ---- - -# --description-- - -Inside the `figure` element you just added, nest an `img` element with a `src` attribute set to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg`. - -# --hints-- - -Your second `figure` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelectorAll('figure').length === 2); -``` - -Your second `figure` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/figure>/g).length === 2); -``` - -There should be a second `figure` element right above the second `section` element's closing tag. You have them in the wrong order. - -```js -assert($('main > section')[1].lastElementChild.nodeName === 'FIGURE'); -``` - -You should have a third `img` element nested in the `figure` element. - -```js -const catsImg = document.querySelectorAll('figure > img')[1]; -assert( - catsImg && - catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg' -); -``` - -The third image should have an `src` attribute set to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg`. - -```js -const catsImg = document.querySelectorAll('figure > img')[1]; -assert( - catsImg && - catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg' -); -``` - -Although you have set the new image's `src` to the correct URL, it is recommended to always surround the value of an attribute with quotation marks. - -```js -assert(!/\ - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
---fcc-editable-region-- -
-
---fcc-editable-region-- -
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-029.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-029.md deleted file mode 100644 index 4aaa722698..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-029.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: 5efae0543cbd2bbdab94e333 -title: Part 29 -challengeType: 0 -dashedName: part-29 ---- - -# --description-- - -To improve accessibility of the image you just added, add an `alt` attribute with the text `Five cats looking around a field.` - -# --hints-- - -Your `figure` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelectorAll('figure').length === 2); -``` - -Your `ol` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/figure>/g).length === 2); -``` - -There should be a `figure` element right above the last `section` element's closing tag. - -```js -assert($('main > section')[1].lastElementChild.nodeName === 'FIGURE'); -``` - -The Cats `img` element should be nested in the `figure` element. - -```js -const catsImg = document.querySelectorAll('figure > img')[1]; -assert( - catsImg && - catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg' -); -``` - -The Cats `img` element should have an `alt` attribute with the value `Five cats looking around a field.` - -```js -const catsImg = document.querySelectorAll('figure > img')[1]; -assert( - catsImg - .getAttribute('alt') - .replace(/\s+/g, ' ') - .match(/^Five cats looking around a field\.?$/i) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
---fcc-editable-region-- - ---fcc-editable-region-- -
-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-030.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-030.md deleted file mode 100644 index 13249601a2..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-030.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 5efae16e3cbd2bbdab94e334 -title: Part 30 -challengeType: 0 -dashedName: part-30 ---- - -# --description-- - -After the last `img` element, add a `figcaption` element with the text `Cats hate other cats.` - -# --hints-- - -Your `figcaption` element should have an opening tag. Opening tags have the following syntax: ``. - -```js -assert(document.querySelectorAll('figcaption').length === 2); -``` - -Your `figcaption` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/figcaption\>/g).length === 2); -``` - -There should be a `figure` element right above the second `section` element's closing tag. - -```js -assert($('main > section')[1].lastElementChild.nodeName === 'FIGURE'); -``` - -The last `img` element should be nested in the `figure` element. - -```js -const catsImg = document.querySelectorAll('figure > img')[1]; -assert( - catsImg && - catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg' -); -``` - -Your `figure` element should have an opening tag. Opening tags have the following syntax: ``. - -```js -assert(document.querySelectorAll('figure').length === 2); -``` - -Your `figure` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/figure\>/g).length === 2); -``` - -The `figcaption` element should be nested in the `figure` element. - -```js -assert(document.querySelectorAll('figure > figcaption').length === 2); -``` - -The `figcaption` element nested in the `figure` element should be below the `img` element. You have the `img` element and the `figcaption` element in the wrong order. - -```js -assert( - document.querySelectorAll('figcaption')[1].previousElementSibling.nodeName === - 'IMG' -); -``` - -The `figcaption` element should have the text `Cats hate other cats.` You have omitted a word or have a typo. - -```js -assert( - document - .querySelectorAll('figcaption')[1] - .innerText.toLowerCase() - .match(/Cats hate other cats\.?$/i) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
---fcc-editable-region-- - Five cats looking around a field. ---fcc-editable-region-- -
-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-031.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-031.md deleted file mode 100644 index 4132d77125..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-031.md +++ /dev/null @@ -1,96 +0,0 @@ ---- -id: 5ef9b03c81a63668521804d4 -title: Part 31 -challengeType: 0 -dashedName: part-31 ---- - -# --description-- - -The `strong` element is used to indicate that some text is of strong importance or urgent. - -In the `figcaption` you just added, indicate that `hate` is of strong importance by wrapping it in a `strong` element. - -# --hints-- - -Your `strong` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelector('strong')); -``` - -Your strong element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/strong\>/)); -``` - -Your strong element should surround the word `hate` in the text `Cats hate other cats.` You have either omitted the text or have a typo. - -```js -assert( - document - .querySelectorAll('figcaption')[1] - .querySelector('strong') - .innerText.toLowerCase() === 'hate' -); -``` - -The `figcaption`'s text should be `Cats hate other cats.` Check for typos and that the necessary spaces are present around the `strong` element's opening and closing tags. - -```js -const secondFigCaption = document.querySelectorAll('figcaption')[1]; -assert( - secondFigCaption && - secondFigCaption.innerText - .replace(/\s+/gi, ' ') - .trim() - .match(/cats hate other cats\.?/i) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. ---fcc-editable-region-- -
Cats hate other cats.
---fcc-editable-region-- -
-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-032.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-032.md deleted file mode 100644 index 961dbdaa9f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-032.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 5f07fb1579dc934717801375 -title: Part 32 -challengeType: 0 -dashedName: part-32 ---- - -# --description-- - -It is time to add a new section. Add a third `section` element below the second `section` element. - -# --hints-- - -Your `section` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelectorAll('section').length >= 3); -``` - -You should only add one opening `section` tag. Please remove any extras. - -```js -assert(document.querySelectorAll('section').length === 3); -``` - -Your `section` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/section>/g).length >= 3); -``` - -You should only add one closing `section` tag. Please remove any extras. - -```js -assert(code.match(/<\/section>/g).length === 3); -``` - -All of the `section` elements should be between the opening and closing tags of the `main` element. - -```js -const childrenOfMain = [...document.querySelector('main').children]; -const sectionElemsFound = childrenOfMain.filter((child) => { - return child.nodeName === 'SECTION'; -}); -assert(sectionElemsFound.length === 3); -``` - -The last `section` element should have no content. Remove any HTML elements or text within the `section` element. - -```js -assert($('main > section')[2].children.length === 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
---fcc-editable-region-- -
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
---fcc-editable-region-- -
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-033.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-033.md deleted file mode 100644 index e98e9e1533..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-033.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: 5ef9b03c81a63668521804d5 -title: Part 33 -challengeType: 0 -dashedName: part-33 ---- - -# --description-- - -Inside the third `section` element add an `h2` tag with the text `Cat Form`. - -# --hints-- - -Unable to find the third `section` element. You may have accidentally deleted it or the opening tag or closing tag. - -```js -assert( - document.querySelectorAll('section').length === 3 && - code.match(/<\/section>/g).length === 3 -); -``` - -Your `h2` element should have an opening tag and closing tag. You may be missing one or both of the required tags. - -```js -assert( - document.querySelectorAll('h2').length >= 3 && - code.match(/<\/h2>/g).length >= 3 -); -``` - -You should only add one `h2` element. Please remove any extras. - -```js -assert(document.querySelectorAll('h2').length === 3); -``` - -The new `h2` element should be located right above the third `section` element's closing tag. - -```js -const thirdSection = document.querySelectorAll('section')[2]; -assert(thirdSection.lastElementChild.nodeName === 'H2'); -``` - -Your `h2` element's text should be `Cat Form`. - -```js -const thirdSection = document.querySelectorAll('section')[2]; -assert( - thirdSection - .querySelector('h2') - .innerText.toLowerCase() - .replace(/\s+/g, ' ') === 'cat form' -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
---fcc-editable-region-- -
-
---fcc-editable-region-- -
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-034.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-034.md deleted file mode 100644 index 64177c2516..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-034.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 5ef9b03c81a63668521804d6 -title: Part 34 -challengeType: 0 -dashedName: part-34 ---- - -# --description-- - -Now you will add a web form to collect information from users. - -After the `Cat Form` heading, add a `form` element. - -# --hints-- - -Your `form` element should have an opening tag and closing tag. You may be missing one or both of the required tags, or have them in the wrong order. - -```js -assert(document.querySelector('form') && code.match(/<\/form>/g)); -``` - -Your `form` element tags are not in the correct order. - -```js -const noSpaces = code.replace(/\s/g, ''); -assert(noSpaces.indexOf('
') < noSpaces.indexOf('
')); -``` - -The `form` element nested in the last `section` element should be below the `h2` element. You have the `h2` element and the `form` element in the wrong order. - -```js -assert(document.querySelector('form').previousElementSibling.nodeName === 'H2'); -``` - -The `form` element should have no content. Remove any HTML elements or text between the `form` element's tags. - -```js -assert($('form')[0].innerHTML.trim().length === 0); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
---fcc-editable-region-- -

Cat Form

---fcc-editable-region-- -
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-035.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-035.md deleted file mode 100644 index 48829237a2..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-035.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 5ef9b03c81a63668521804d7 -title: Part 35 -challengeType: 0 -dashedName: part-35 ---- - -# --description-- - -The `action` attribute indicates where form data should be sent. For example, `
` tells the browser that the form data should be sent to the path `/submit-url`. - -Add an `action` attribute with the value `https://freecatphotoapp.com/submit-cat-photo` to the `form` element. - -# --hints-- - -Your `form` element should have an opening tag and closing tag in the correct order. You may be missing one or both of the required tags, or have them in the wrong order. - -```js -const noSpaces = code.replace(/\s/g, ''); -assert( - document.querySelector('form') && - code.match(/<\/form>/g) && - noSpaces.indexOf('') -); -``` - -Your `form` element nested in the last `section` element should be below the `h2` element. You have the `h2` element and the `form` element in the wrong order. - -```js -assert(document.querySelector('form').previousElementSibling.nodeName === 'H2'); -``` - -Your `form` element should have no content. Remove any HTML elements or text between the `form` element's tags. - -```js -assert($('form')[0].innerHTML.trim().length === 0); -``` - -Your `form` element does not have an `action` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -const form = document.querySelector('form'); -assert(form.hasAttribute('action')); -``` - -Your `form` element should have an `action` attribute with the value `https://freecatphotoapp.com/submit-cat-photo`. - -```js -const form = document.querySelector('form'); -assert( - form - .getAttribute('action') - .match(/^https:\/\/freecatphotoapp\.com\/submit-cat-photo$/) -); -``` - -Although you have set the `action` attribute to the correct URL, it is recommended to always surround the value of an attribute with quotation marks. - -```js -assert( - !/\ - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

---fcc-editable-region-- -
-
---fcc-editable-region-- -
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-036.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-036.md deleted file mode 100644 index a5ea3e353e..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-036.md +++ /dev/null @@ -1,109 +0,0 @@ ---- -id: 5ef9b03c81a63668521804d8 -title: Part 36 -challengeType: 0 -dashedName: part-36 ---- - -# --description-- - -The `input` element is allows you several ways to collect data from a web form. Like anchor (`a`) elements, `input` elements are self-closing and do not need closing tags. - -Nest an `input` element in the `form` element. - -# --hints-- - -Your `form` element should have an opening tag and closing tag in the correct order. You may be missing one or both of the required tags, or have them in the wrong order. - -```js -const noSpaces = code.replace(/\s/g, ''); -assert( - document.querySelector('form') && - code.match(/<\/form>/g) && - noSpaces.indexOf('') -); -``` - -Your `form` element's opening tag should only have an `action` attribute. Remove anything else you may have typed in it. - -```js -assert([...document.querySelector('form').attributes].length < 2); -``` - -You should create an input element. Check the syntax. - -```js -assert(document.querySelector('input')); -``` - -Your `input` element should have an opening tag, but not a closing tag. - -```js -assert(document.querySelector('input') && !code.match(/<\/input\>/g)); -``` - -Your `input` element should be nested within the `form` element. - -```js -assert(document.querySelector('form > input')); -``` - -Your `form` should only contain the `input` element. Remove any HTML elements or text between the `form` element's tags. - -```js -assert( - $('form')[0].children.length === 1 && - $('form')[0].innerText.trim().length === 0 -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

---fcc-editable-region-- -
-
---fcc-editable-region-- -
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-037.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-037.md deleted file mode 100644 index 2cfb3ff960..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-037.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: 5efb23e70dc218d6c85f89b1 -title: Part 37 -challengeType: 0 -dashedName: part-37 ---- - -# --description-- - -There are many kinds of inputs you can create using the `type` attribute. You can easily create a password field, reset button, or a control to let users select a file from their computer. - -Create a text field to get text input from a user by adding the `type` attribute with the value `text` to the `input` element. - -# --hints-- - -You have either deleted your `input` element or it has invalid syntax. If you have added an attributes, make sure their values are surrounded by quotation marks. - -```js -assert($('input').length); -``` - -Your `form` element should only contain the `input` element. Remove any extra HTML elements or text between the `form` element's tags. - -```js -assert( - $('form')[0].children.length === 1 && - $('form')[0].innerText.trim().length === 0 -); -``` - -Your `input` element does not have a `type` attribute. with the value `text`. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -assert($('input')[0].hasAttribute('type')); -``` - -Your `input` element should have a `type` attribute with the value `text`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -assert( - $('input')[0] - .getAttribute('type') - .replace(/\s+/g, ' ') - .match(/^text$/i) -); -``` - -Although you have set the `input` element's `type` attribute to the `text`, it is recommended to always surround the value of an attribute with quotation marks. - -```js -assert(!/\ - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- - ---fcc-editable-region-- -
-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-038.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-038.md deleted file mode 100644 index a6520bdd15..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-038.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: 7cf9b03d81a65668421804c3 -title: Part 38 -challengeType: 0 -dashedName: part-38 ---- - -# --description-- - -In order for a form's data to be accessed by the locaton specified in the `action` attribute, you must give the text field a `name` attribute and assign it a value to represent the data being submitted. For example, you could use the following syntax for an email address text field: ``. - -Add the `name` attribute with the value `catphotourl` to your text field. - -# --hints-- - -You have either deleted your `input` element or it has invalid syntax. All attributes' values should be surrounded by quotation marks. - -```js -assert($('input').length); -``` - -Your `form` should only contain the `input` element. Remove any HTML additional elements or text within the `form` element. - -```js -assert( - $('form')[0].children.length === 1 && - $('form')[0].innerText.trim().length === 0 -); -``` - -Your `input` element does not have a `name` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -assert($('input')[0].hasAttribute('name')); -``` - -Your `input` element should have a `name` attribute with the value `catphotourl`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -assert( - $('input')[0] - .getAttribute('name') - .match(/^catphotourl$/i) -); -``` - -Although you have set the `input` element's `name` attribute to `catphotourl`, it is recommended to always surround the value of an attribute with quotation marks. - -```js -assert(!/\<\s*input\s+.*\s*=\s*catphotourl/.test(code)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- - ---fcc-editable-region-- -
-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-039.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-039.md deleted file mode 100644 index 65c031f4b4..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-039.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: 5ef9b03c81a63668521804d9 -title: Part 39 -challengeType: 0 -dashedName: part-39 ---- - -# --description-- - -Placeholder text is used to give people a hint about what kind of information to enter into an input. For example, ``. - -Add the placeholder text `cat photo URL` to your `input` element. - -# --hints-- - -You have either deleted your `input` element or it has invalid syntax. All attributes' values should be surrounded by quotation marks. - -```js -assert($('input').length); -``` - -Your `form` should only contain the `input` element. Remove any HTML additional elements or text within the `form` element. - -```js -assert( - $('form')[0].children.length === 1 && - $('form')[0].innerText.trim().length === 0 -); -``` - -Your `input` element does not have a `placeholder` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -assert($('input')[0].hasAttribute('placeholder')); -``` - -Your `input` element should have a `placeholder` attribute with the value `cat photo URL`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -assert( - $('input')[0] - .getAttribute('placeholder') - .replace(/\s+/g, ' ') - .match(/^cat photo URL$/i) -); -``` - -Although you have set the `input` element's `placeholder` attribute to `cat photo URL`, it is recommended to always surround the value of an attribute with quotation marks. - -```js -assert(!/\<\s*input\s+placeholder\s*=\s*cat\s+photo\s+url/i.test(code)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- - ---fcc-editable-region-- -
-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-040.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-040.md deleted file mode 100644 index 84fdbc4f99..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-040.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 5ef9b03c81a63668521804db -title: Part 40 -challengeType: 0 -dashedName: part-40 ---- - -# --description-- - -To prevent a user from submitting your form when required information is missing, you need to add the `required` attribute to an `input` element. There's no need to set a value to the `required` attribute. Instead, just add the word `required` to the `input` element, making sure there is space between it and other attributes. - -# --hints-- - -You have either deleted your `input` element or it has invalid syntax. All attributes' values should be surrounded by quotation marks. - -```js -assert($('input').length); -``` - -Your `form` should only contain the `input` element. Remove any HTML additional elements or text within the `form` element. - -```js -assert( - $('form')[0].children.length === 1 && - $('form')[0].innerText.trim().length === 0 -); -``` - -Your `input` element should have a `required` attribute. Remember, you just add the word `required` inside the `input` element's tag. - -```js -assert($('input')[0].hasAttribute('required')); -``` - -A value should not be given to the `required` attribute. - -```js -assert($('input')[0].getAttribute('required') === ''); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- - ---fcc-editable-region-- -
-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-041.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-041.md deleted file mode 100644 index de040f58fb..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-041.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 5ef9b03c81a63668521804da -title: Part 41 -challengeType: 0 -dashedName: part-41 ---- - -# --description-- - -Use the `button` element to create a clickable button. For example, `` creates a button with the text `Click Here`. - -Add a `button` element with the text `Submit` below the `input` element. Note the default behavior of clicking a form button with any attributes submits the form to the location specified in the form's `action` attribute. - -# --hints-- - -Your `button` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelector('button')); -``` - -Your `button` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/button\>/)); -``` - -Your `button` element's text should be 'Submit'. You have either omitted the text or have a typo. - -```js -assert(document.querySelector('button').innerText.toLowerCase() === 'submit'); -``` - -Your `button` element should be below the `input` element. You have them in the wrong order. - -```js -const collection = [...document.querySelectorAll('input, button')].map( - (node) => node.nodeName -); -assert(collection.indexOf('INPUT') < collection.indexOf('BUTTON')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- - ---fcc-editable-region-- -
-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-042.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-042.md deleted file mode 100644 index ca95858249..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-042.md +++ /dev/null @@ -1,101 +0,0 @@ ---- -id: 5efb2c990dc218d6c85f89b2 -title: Part 42 -challengeType: 0 -dashedName: part-42 ---- - -# --description-- - -Even through you added your button below the text input, they appear next to each other on the page. That's because both `input` and `button` elements are inline elements, which don't appear on new lines. - -You learned previously that the button submits the form by default, but you can explicitly add the `type` attribute with the value `submit` to it to make it clearer. Go ahead and do this to specify this button should submit the form. - -# --hints-- - -Your `button` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelector('button')); -``` - -Your `button` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/button\>/)); -``` - -Your `button` element does not have a `type` attribute. Check that there is a space after the opening tag's name. - -```js -assert($('button')[0].hasAttribute('type')); -``` - -Your `button` element should have a `type` attribute with the value `submit`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -assert( - $('button')[0] - .getAttribute('type') - .match(/^submit$/i) -); -``` - -Although you have set the `button` element's `type` attribute to `submit`, it is recommended to always surround the value of an attribute with quotation marks. - -```js -assert(!/\<\s*button\s+type\s*=\s*submit/i.test(code)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
- ---fcc-editable-region-- - ---fcc-editable-region-- -
-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-043.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-043.md deleted file mode 100644 index fb70405bc2..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-043.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -id: 5ef9b03c81a63668521804dc -title: Part 43 -challengeType: 0 -dashedName: part-43 ---- - -# --description-- - -You can use radio buttons for questions where you want only one answer out of multiple options. - -Here is an example of a radio button with the option of `cat`: ` cat`. Remember that `input` elements are self-closing. - -Before the text input, add a radio button with the option `Indoor`. - -# --hints-- - -You should create an input element for your radio button. Check the syntax. - -```js -assert($('form > input').length >= 2); -``` - -Your `input` element should have an opening tag, but not a closing tag. - -```js -assert($('form > input') && !code.match(/<\/input\>/g)); -``` - -You should only have added one input element for your radio button. Remove any extras. - -```js -assert($('form > input').length === 2); -``` - -Your new `input` element should be above the existing `input` with `type` attribute set to `text`. You have them in the wrong order. - -```js -const existingInputElem = document.querySelector('form > input[type="text"]'); -assert( - existingInputElem && - existingInputElem.previousElementSibling.nodeName === 'INPUT' -); -``` - -Your new `input` element does not have a `type` attribute. Check that there is a space after the opening tag's name. - -```js -assert($('input')[0].hasAttribute('type')); -``` - -Your new `input` element should have a `type` attribute with the value `radio`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -assert( - $('input')[0] - .getAttribute('type') - .match(/^radio$/i) -); -``` - -Although you have set the new `input` element's `type` attribute to `radio`, it is recommended to always surround the value of an attribute with quotation marks. - -```js -assert(!/\<\s*input\s+type\s*=\s*radio/i.test(code)); -``` - -The `radio` button's ` Indoor` text should be located after it instead of before it. - -```js -const radioInputElem = $('input')[0]; -assert(!radioInputElem.previousSibling.nodeValue.match(/Indoor/i)); -``` - -The text ` Indoor` should be located directly to the right of your `radio` button. Make sure there is a space between the element and the text. You have either omitted the text or have a typo. - -```js -const radioInputElem = $('input')[0]; -assert( - radioInputElem.nextSibling.nodeValue.replace(/\s+/g, ' ').match(/ Indoor/i) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- - ---fcc-editable-region-- - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-044.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-044.md deleted file mode 100644 index 7607dd2aef..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-044.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: 5ef9b03c81a63668521804dd -title: Part 44 -challengeType: 0 -dashedName: part-44 ---- - -# --description-- - -`label` elements are used to help associate the text for an `input` element with the input element itself (especially for assistive technologies like screen readers). For example, `` makes it so clicking the word `cat` also selects the corresponding radio button. - -Nest your `radio` button inside a `label` element. - -# --hints-- - -You should make sure the radio button is still present. - -```js -assert($('input[type="radio"]')[0]); -``` - -The text ` Indoor` should be located directly to the right of your `radio` button. Make sure there is a space between the element and the text. You have either omitted the text or have a typo. - -```js -const radioInputElem = $('input')[0]; -assert( - radioInputElem.nextSibling.nodeValue.replace(/\s+/g, ' ').match(/ Indoor/i) -); -``` - -Your `label` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelector('label')); -``` - -Your `label` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/label\>/)); -``` - -Your radio button and its text should all be located between the opening and closing tags of the `label` element. - -```js -const labelChildNodes = [...$('form > label')[0].childNodes]; -assert( - labelChildNodes.filter((childNode) => childNode.nodeName === 'INPUT').length -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- - Indoor ---fcc-editable-region-- - - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-045.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-045.md deleted file mode 100644 index aaaff265ed..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-045.md +++ /dev/null @@ -1,89 +0,0 @@ ---- -id: 5ef9b03c81a63668521804df -title: Part 45 -challengeType: 0 -dashedName: part-45 ---- - -# --description-- - -The `id` attribute is used to identify specific HTML elements. Each `id` attribute's value must be unique all other `id` values for the entire page. - -Add an `id` attribute with the value `indoor` to the radio button. When elements have multiple attributes, the order of the attributes doesn't matter. - -# --hints-- - -Your radio button should still be located between the opening and closing tags of the `label` element. - -```js -const labelChildNodes = [...$('form > label')[0].childNodes]; -assert( - labelChildNodes.filter((childNode) => childNode.nodeName === 'INPUT').length -); -``` - -Your radio button should have an `id` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -assert($('input')[0].hasAttribute('id')); -``` - -Your radio element should have an `id` attribute with the value `indoor`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -assert($('input')[0].id.match(/^indoor$/)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- - ---fcc-editable-region-- - - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-046.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-046.md deleted file mode 100644 index ac1af3267f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-046.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: 5f05a1d8e233dff4a68508d8 -title: Part 46 -challengeType: 0 -dashedName: part-46 ---- - -# --description-- - -Nest a another radio button with the option `Outdoor` in a new `label` element. The new radio button should be placed after the first one. Also, set its `id` attribute value to `outdoor`. - -# --hints-- - -You will need to add a new `label` element in which to nest your new radio button. Make sure it has both an opening and closing tag. - -```js -assert( - document.querySelectorAll('label').length === 2 && - code.match(/<\/label\>/g).length === 2 -); -``` - -The text ` Outdoor` should be located directly to the right of your new `radio` button. Make sure there is a space between the element and the text. You have either omitted the text or have a typo. - -```js -const radioButtons = [...$('input')]; -assert( - radioButtons.filter((btn) => - btn.nextSibling.nodeValue.replace(/\s+/g, ' ').match(/ Outdoor/i) - ).length -); -``` - -Your new radio button and associated label should be below the first one. You have them in the wrong order. - -```js -const collection = [ - ...document.querySelectorAll('input[type="radio"]') -].map((node) => node.nextSibling.nodeValue.replace(/\s+/g, '')); -assert(collection.indexOf('Indoor') < collection.indexOf('Outdoor')); -``` - -Your new radio button should have an `id` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -assert($('input')[1].hasAttribute('id')); -``` - -Your new radio element should have an `id` attribute with the value `outdoor`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -assert($('input')[1].id.match(/^outdoor$/)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- - ---fcc-editable-region-- - - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-047.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-047.md deleted file mode 100644 index f495512325..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-047.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 5ef9b03c81a63668521804de -title: Part 47 -challengeType: 0 -dashedName: part-47 ---- - -# --description-- - -Notice that both radio buttons can be selected at the same time. To make it so selecting one radio button automatically deselects the other, both buttons must have a `name` attribute with the same value. - -Add the `name` attribute with the value `indoor-outdoor` to both radio buttons. - -# --hints-- - -Both radio buttons should still be located between opening and closing `label` element tags. - -```js -const labelChildNodes = [...document.querySelectorAll('form > label')].map( - (node) => node.childNodes -); -assert( - labelChildNodes.filter((childNode) => childNode[0].nodeName === 'INPUT') - .length === 2 -); -``` - -Both radio buttons should have a `name` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -const radioButtons = [...document.querySelectorAll('input[type="radio"]')]; -assert(radioButtons.every((btn) => btn.hasAttribute('name'))); -``` - -Both radio buttons should have a `name` attribute with the value `indoor-outdoor`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -const radioButtons = [...$('input[type="radio"]')]; -assert( - radioButtons.every((btn) => - btn.getAttribute('name').match(/^indoor-outdoor$/) - ) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- - - ---fcc-editable-region-- - - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-048.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-048.md deleted file mode 100644 index 22a24058ef..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-048.md +++ /dev/null @@ -1,101 +0,0 @@ ---- -id: 5f1a80975fc4bcae0edb3497 -title: Part 48 -challengeType: 0 -dashedName: part-48 ---- - -# --description-- - -If you select the `Indoor` radio button and submit the form, the form data for the button is based on its `name` and `value` attributes. Since your radio buttons do not have a `value` attribute, the form data will include `indoor-outdoor=on`, which is not useful when you have multiple buttons. - -Add a `value` attribute to both radio buttons. For convenience, set the button's `value` attribute to the same value as its `id` attribute. - -# --hints-- - -Both radio buttons should still be located between opening and closing `label` element tags. - -```js -const labelChildNodes = [...document.querySelectorAll('form > label')].map( - (node) => node.childNodes -); -assert( - labelChildNodes.filter((childNode) => childNode[0].nodeName === 'INPUT') - .length === 2 -); -``` - -Both radio buttons should have a `value` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -const radioButtons = [...document.querySelectorAll('input[type="radio"]')]; -assert(radioButtons.every((btn) => btn.hasAttribute('value'))); -``` - -The `Indoor` radio button's `value` attribute should be set to `indoor`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -const indoorRadioButton = document.querySelector('#indoor'); -assert(indoorRadioButton.getAttribute('value').match(/^indoor$/)); -``` - -The `Outdoor` radio button's `value` attribute should be set to `outdoor`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -const outdoorRadioButton = document.querySelector('#outdoor'); -assert(outdoorRadioButton.getAttribute('value').match(/^outdoor$/)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- - - ---fcc-editable-region-- - - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-049.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-049.md deleted file mode 100644 index c66c571a94..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-049.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 5ef9b03c81a63668521804e1 -title: Part 49 -challengeType: 0 -dashedName: part-49 ---- - -# --description-- - -The `fieldset` element is used to group related inputs and labels together in a web form. `fieldset` elements are block-level elements, meaning that they appear on a new line. - -Nest the `Indoor` and `Outdoor` radio buttons within a `fieldset` element, and don't forget to indent the buttons. - -# --hints-- - -Both radio buttons should still be located between opening and closing `label` element tags. - -```js -const labelChildNodes = [...$('label')].map((node) => [...node.childNodes]); -assert( - labelChildNodes.filter((childNode) => childNode[0].nodeName === 'INPUT') - .length === 2 -); -``` - -Your `fieldset` element should have an opening tag. Opening tags have the following syntax: ``. - -```js -assert(document.querySelector('fieldset')); -``` - -Your `fieldset` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/fieldset\>/)); -``` - -Both radio button and associated labels should be between the opening and closing tags of the `fieldset` element. - -```js -const radioButtons = [...$('input[type="radio"]')]; -assert( - radioButtons.every((btn) => btn.parentNode.parentNode.nodeName === 'FIELDSET') -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- - - ---fcc-editable-region-- - - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-050.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-050.md deleted file mode 100644 index 436f12d767..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-050.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 5f0d48e7b435f13ab6550051 -title: Part 50 -challengeType: 0 -dashedName: part-50 ---- - -# --description-- - -The `legend` element acts as a caption for the content in the `fieldset` element. It gives users context about what they should enter into that part of the form. - -Add a `legend` element with the text `Is your cat an indoor or outdoor cat?` above both of the radio buttons. - -# --hints-- - -Your `legend` element should have an opening tag. Opening tags have the following syntax: ``. - -```js -assert(document.querySelector('legend')); -``` - -Your `legend` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/legend\>/)); -``` - -Your `legend` element should be the first element right below `fieldset` element's opening tag and before the first radio button's opening `label` tag. It is not in the correct position. - -```js -const fieldsetElem = document.querySelector('fieldset'); -const fieldsetElemChildren = fieldsetElem.children; -assert( - fieldsetElem.firstElementChild.nodeName === 'LEGEND' && - fieldsetElemChildren[1].nodeName === 'LABEL' && - fieldsetElemChildren[1].children[0].nodeName === 'INPUT' && - fieldsetElemChildren[1].children[0].id === 'indoor' -); -``` - -Your `legend` element's text should be `Is your cat an indoor or outdoor cat?`. You have either omitted the text, have a typo, or it is not between the `legend` element's opening and closing tags. - -```js -const extraSpacesRemoved = document - .querySelector('legend') - .innerText.replace(/\s+/g, ' '); -assert(extraSpacesRemoved.match(/Is your cat an indoor or outdoor cat\??$/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
---fcc-editable-region-- - - ---fcc-editable-region-- -
- - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-051.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-051.md deleted file mode 100644 index 502d59dfb0..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-051.md +++ /dev/null @@ -1,128 +0,0 @@ ---- -id: 5f0d4ab1b435f13ab6550052 -title: Part 51 -challengeType: 0 -dashedName: part-51 ---- - -# --description-- - -Next, you are going to add some new form `input` elements, so add another `fieldset` element directly below the current `fieldset` element. - -# --hints-- - -Your new `fieldset` element should have an opening tag. Opening tags have this syntax: ``. - -```js -assert(document.querySelectorAll('fieldset').length >= 2); -``` - -You should only add one opening `fieldset` tag. Please remove any extras. - -```js -assert(document.querySelectorAll('fieldset').length === 2); -``` - -Your new `fieldset` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/fieldset>/g).length >= 2); -``` - -You should only add one closing `fieldset` tag. Please remove any extras. - -```js -assert(code.match(/<\/fieldset>/g).length === 2); -``` - -The second `fieldset` element should not be nested in the first `fieldset` element. - -```js -const childrenOf1stFieldset = [ - ...document.querySelector('form > fieldset').children -]; -const foundElems = childrenOf1stFieldset.filter((child) => { - return child.nodeName === 'FIELDSET'; -}); -assert(foundElems.length === 0); -``` - -Both `fieldset` elements should be above the text field and its associated `label` element. They are out of order. - -```js -const formChildren = $('form')[0].children; -assert( - formChildren[0].nodeName === 'FIELDSET' && - formChildren[1].nodeName === 'FIELDSET' && - formChildren[2] && - formChildren[2].nodeName === 'INPUT' && - formChildren[2].getAttribute('type') === 'text' -); -``` - -Your new `fieldset` element should be below the existing `fieldset` element. You have them in the wrong order. - -```js -const fieldsetChildren = [...document.querySelectorAll('fieldset')].map( - (elem) => elem.children -); -assert(fieldsetChildren[0].length > fieldsetChildren[1].length); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- -
- Is your cat an indoor or outdoor cat? - - -
- - ---fcc-editable-region-- -
-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-052.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-052.md deleted file mode 100644 index a9c1110688..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-052.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 5f0d4d04b435f13ab6550053 -title: Part 52 -challengeType: 0 -dashedName: part-52 ---- - -# --description-- - -Add a `legend` element with the text `What's your cat's personality?` inside the second `fieldset` element. - -# --hints-- - -You have either deleted the second `fieldset` element or it is missing an opening tag or closing tag." - -```js -assert( - document.querySelectorAll('fieldset').length === 2 && - code.match(/<\/fieldset>/g).length === 2 -); -``` - -Your `legend` element should have an opening tag. Opening tags have this syntax: ``. - -```js -const secondFieldset = $('fieldset')[1]; -assert( - secondFieldset && - [...secondFieldset.children].filter((child) => child.nodeName === 'LEGEND') - .length -); -``` - -Your `legend` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/legend\>/g).length === 2); -``` - -The `legend` element should have the text `What's your cat's personality?`. You have either omitted the text or have a typo. - -```js -const secondFieldset = $('fieldset')[1]; -assert( - secondFieldset && - [...secondFieldset.children].filter((child) => { - const extraSpacesRemoved = child.innerText.replace(/\s+/g, ' '); - return ( - child.nodeName === 'LEGEND' && - extraSpacesRemoved.match(/What's your cat's personality\??$/i) - ); - }).length -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
- Is your cat an indoor or outdoor cat? - - -
---fcc-editable-region-- -
-
---fcc-editable-region-- - - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-053.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-053.md deleted file mode 100644 index c57806ee13..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-053.md +++ /dev/null @@ -1,128 +0,0 @@ ---- -id: 5ef9b03c81a63668521804e2 -title: Part 53 -challengeType: 0 -dashedName: part-53 ---- - -# --description-- - -Forms commonly use checkboxes for questions that may have more than one answer. For example, here's a checkbox with the option of `tacos`: ` tacos`. - -Under the `legend` element you just added, add an `input` with its `type` attribute set to `checkbox` and give it the option of `Loving`. - -# --hints-- - -The `input` element for your checkbox should have an opening tag, but not a closing tag. - -```js -assert($('fieldset > input') && !code.match(/<\/input\>/g)); -``` - -You should only have added one input element for your checkbox. Remove any extras. - -```js -assert($('fieldset > input').length === 1); -``` - -Your new `input` element should be below the `legend` element with the text `What's your cat's personality?`. You have them in the wrong order. - -```js -const existingLegendElem = $('fieldset > legend')[1]; -assert( - existingLegendElem && - existingLegendElem.nextElementSibling.nodeName === 'INPUT' -); -``` - -Your new `input` element does not have a `type` attribute. Check that there is a space after the opening tag's name. - -```js -assert($('fieldset > input')[0].hasAttribute('type')); -``` - -Your new `input` element should have a `type` attribute with the value `checkbox`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -assert( - $('fieldset > input')[0] - .getAttribute('type') - .match(/^checkbox$/i) -); -``` - -Although you have set the new `input` element's `type` attribute to `checkbox`, it is recommended to always surround the value of an attribute with quotation marks. - -```js -assert(!/\<\s*input\s+type\s*=\s*checkbox/i.test(code)); -``` - -The text ` Loving` should be located directly to the right of your checkbox. Make sure there is a space between the element and the text. You have either omitted the text or have a typo. - -```js -const checkboxInputElem = $('input[type="checkbox"]')[0]; -assert( - checkboxInputElem.nextSibling.nodeValue.replace(/\s+/g, ' ').match(/ Loving/i) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
- Is your cat an indoor or outdoor cat? - - -
-
---fcc-editable-region-- - What's your cat's personality? ---fcc-editable-region-- -
- - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-054.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-054.md deleted file mode 100644 index 01a25bf5a8..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-054.md +++ /dev/null @@ -1,86 +0,0 @@ ---- -id: 5efc54138d6a74d05e68af76 -title: Part 54 -challengeType: 0 -dashedName: part-54 ---- - -# --description-- - -Add an `id` attribute with the value `loving` to the checkbox input. - -# --hints-- - -Your checkbox should have an `id` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -assert($('input[type="checkbox"]')[0].hasAttribute('id')); -``` - -Your checkbox should have an `id` attribute with the value `loving`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -assert($('input[type="checkbox"]')[0].id.match(/^loving$/)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
- Is your cat an indoor or outdoor cat? - - -
-
- What's your cat's personality? ---fcc-editable-region-- - Loving ---fcc-editable-region-- -
- - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-055.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-055.md deleted file mode 100644 index 6f328afefa..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-055.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -id: 5efc4f528d6a74d05e68af74 -title: Part 55 -challengeType: 0 -dashedName: part-55 ---- - -# --description-- - -There's another way to associate an `input` element's text with the element itself. You can nest the text within a `label` element and add a `for` attribute with the same value as the `input` element's `id` attribute. - -Associate the text `Loving` with the checkbox by only nesting the text `Loving` in a `label` element and place it to the right side of the checkbox `input` element. - -# --hints-- - -You should make sure the checkbox is still present. - -```js -assert($('input[type="checkbox"]')[0]); -``` - -Your checkbox should still have an `id` attribute with the value `loving`. You may have removed the attribute or changed its value. - -```js -assert($('input[type="checkbox"]')[0].id === 'loving'); -``` - -The text ` Loving` should no longer be located directly to the right of your checkbox. It should be wrapped in a `label` element. - -```js -const checkboxInputElem = $('input[type="checkbox"]')[0]; -assert( - !checkboxInputElem.nextSibling.nodeValue - .replace(/\s+/g, ' ') - .match(/ Loving/i) -); -``` - -You will need to add a new `label` element in which to nest the text `Loving`. Make sure it has both an opening and closing tag. - -```js -assert( - document.querySelectorAll('label').length === 3 && - code.match(/<\/label\>/g).length === 3 -); -``` - -The new `label` element should be located directly to the right of your checkbox. Make sure there is a space between the two elements. - -```js -const checkboxInputElem = $('input[type="checkbox"]')[0]; -assert(checkboxInputElem.nextElementSibling.nodeName === 'LABEL'); -``` - -The new `label` element does not have a `for` attribute. Check that there is a space after the opening tag's name. - -```js -const labelElem = $('input[type="checkbox"]')[0].nextElementSibling; -assert(labelElem.hasAttribute('for')); -``` - -The new `label` element should have a `for` attribute with the value `loving`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -const labelElem = $('input[type="checkbox"]')[0].nextElementSibling; -assert(labelElem.getAttribute('for').match(/^loving$/)); -``` - -The text `Loving` should be nested within the new `label` element. You have either omitted the text or have a typo. - -```js -const labelElem = document.querySelector('label[for="loving"]'); -assert(labelElem.textContent.replace(/\s/g, '').match(/Loving/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
- Is your cat an indoor or outdoor cat? - - -
-
- What's your cat's personality? ---fcc-editable-region-- - Loving ---fcc-editable-region-- -
- - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-056.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-056.md deleted file mode 100644 index ff678b749b..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-056.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 5efc518e8d6a74d05e68af75 -title: Part 56 -challengeType: 0 -dashedName: part-56 ---- - -# --description-- - -Add the `name` attribute with the value `personality` to the checkbox `input` element. - -While you won't notice this in the browser, doing this makes it easier for a server to process your web form, especially when there are multiple checkboxes. - -# --hints-- - -You should make sure the checkbox is still present. - -```js -assert($('input[type="checkbox"]')[0]); -``` - -The checkbox `input` element does not have a `name` attribute. Check that there is a space after the opening tag's name. - -```js -assert($('input[type="checkbox"]')[0].hasAttribute('name')); -``` - -The checkbox `input` element should have a `name` attribute with the value `personality`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -assert( - $('input[type="checkbox"]')[0] - .getAttribute('name') - .match(/^personality$/) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
- Is your cat an indoor or outdoor cat? - - -
-
- What's your cat's personality? ---fcc-editable-region-- - ---fcc-editable-region-- -
- - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-057.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-057.md deleted file mode 100644 index 79d0cde2fc..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-057.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -id: 5ef9b03c81a63668521804e3 -title: Part 57 -challengeType: 0 -dashedName: part-57 ---- - -# --description-- - -Add another checkbox after the one you just added. The `id` attribute value should be `lazy` and the `name` attribute value should be the same as the last checkbox. - -Also add a `label` element to the right of the new checkbox with the text `Lazy`. Make sure to associate the `label` element with the new checkbox using the `for` attribute. - -# --hints-- - -You need to add a new checkbox. - -```js -assert($('input[type="checkbox"]').length === 2); -``` - -Your new checkbox should have an `id` attribute with the value `lazy` and a `name` attribute with the value `personality`. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -const checkboxes = [...$('input[type="checkbox"]')]; -assert( - checkboxes.some( - (checkbox) => - checkbox.id === 'lazy' && checkbox.getAttribute('name') === 'personality' - ) -); -``` - -Your new checkbox should be after the first one. You have them in the wrong order. - -```js -const checkboxes = [...$('input[type="checkbox"]')].map( - (checkbox) => checkbox.id -); -assert(checkboxes.indexOf('loving') < checkboxes.indexOf('lazy')); -``` - -On the right side of your new checkbox, there should be `label` element with the text `Lazy`. - -```js -const nextElementSibling = $('input[type="checkbox"]')[1].nextElementSibling; -assert( - nextElementSibling.nodeName === 'LABEL' && - nextElementSibling.innerText.replace(/\s+/g, '').match(/^Lazy$/i) -); -``` - -The new `label` should have a `for` attribute with the same value as the `id` attribute of the new checkbox. You have either omitted the value or have a typo. - -```js -assert( - $('input[type="checkbox"]')[1].nextElementSibling.getAttribute('for') === - 'lazy' -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
- Is your cat an indoor or outdoor cat? - - -
-
- What's your cat's personality? ---fcc-editable-region-- - ---fcc-editable-region-- -
- - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-058.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-058.md deleted file mode 100644 index e734608381..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-058.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -id: 5efc575c8d6a74d05e68af77 -title: Part 58 -challengeType: 0 -dashedName: part-58 ---- - -# --description-- - -Add a final checkbox after the previous one with an `id` attribute value of `energetic`. The `name` and attribute should be the same as the last checkbox. - -Also add a `label` element to the right of the new checkbox with text `Energetic`. Make sure to associate the `label` element with the new checkbox. - -# --hints-- - -You need to add a new checkbox. - -```js -assert($('input[type="checkbox"]').length === 3); -``` - -Your new checkbox should have an `id` attribute with the value `energetic` and a `name` attribute with the value `personality`. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -const checkboxes = [...$('input[type="checkbox"]')]; -assert( - checkboxes.some( - (checkbox) => - checkbox.id === 'energetic' && - checkbox.getAttribute('name') === 'personality' - ) -); -``` - -Your new checkbox should be after the first one. You have them in the wrong order. - -```js -const checkboxes = [...$('input[type="checkbox"]')].map( - (checkbox) => checkbox.id -); -assert(checkboxes.indexOf('lazy') < checkboxes.indexOf('energetic')); -``` - -On the right side of your new checkbox, there should be `label` element with the text `Energetic`. - -```js -const nextElementSibling = $('input[type="checkbox"]')[2].nextElementSibling; -assert( - nextElementSibling.nodeName === 'LABEL' && - nextElementSibling.innerText.replace(/\s+/g, '').match(/^Energetic$/i) -); -``` - -The new `label` should have a `for` attribute with the same value as the `id` attribute of the new checkbox. You have either omitted the value or have a typo. - -```js -assert( - $('input[type="checkbox"]')[2].nextElementSibling.getAttribute('for') === - 'energetic' -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
- Is your cat an indoor or outdoor cat? - - -
-
- What's your cat's personality? ---fcc-editable-region-- - - ---fcc-editable-region-- -
- - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-059.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-059.md deleted file mode 100644 index ecdac2dea5..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-059.md +++ /dev/null @@ -1,106 +0,0 @@ ---- -id: 5f1a89f1190aff21ae42105a -title: Part 59 -challengeType: 0 -dashedName: part-59 ---- - -# --description-- - -Like radio buttons, form data for selected checkboxes are `name` / `value` attribute pairs. While the `value` attribute is optional, it's best practice to include it with any checkboxes or radio buttons on the page. - -Add a `value` attribute to each checkbox. For convenience, set each checkbox's `value` attribute to the same value as its `id` attribute. - -# --hints-- - -All three checkboxes should have a `value` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. - -```js -const checkboxes = [...document.querySelectorAll('input[type="checkbox"]')]; -assert(checkboxes.every((checkbox) => checkbox.hasAttribute('value'))); -``` - -The `value` attribute of the `Loving` checkbox should be set to `loving`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -const lovingCheckbox = document.querySelector('#loving'); -assert(lovingCheckbox.getAttribute('value').match(/^loving$/)); -``` - -The `value` attribute of the `Lazy` checkbox should be set to `lazy`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -const lazyCheckbox = document.querySelector('#lazy'); -assert(lazyCheckbox.getAttribute('value').match(/^lazy$/)); -``` - -The `value` attribute of the `Energetic` checkbox should be set to `energetic`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. - -```js -const energeticCheckbox = document.querySelector('#energetic'); -assert(energeticCheckbox.getAttribute('value').match(/^energetic$/)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- -
- Is your cat an indoor or outdoor cat? - - -
-
- What's your cat's personality? - - - -
---fcc-editable-region-- - - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-060.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-060.md deleted file mode 100644 index 6f4eb26db1..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-060.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -id: 5ef9b03c81a63668521804e5 -title: Part 60 -challengeType: 0 -dashedName: part-60 ---- - -# --description-- - -In order to make a checkbox checked or radio button selected by default, you need to add the `checked` attribute to it. There's no need to set a value to the `checked` attribute. Instead, just add the word `checked` to the `input` element, making sure there is space between it and other attributes. - -Make the first radio button and the first checkbox selected by default. - -# --hints-- - -Make sure there still are two radio buttons and three checkboxes nested in their respective `fieldset` elements. - -```js -assert( - $('input[type="radio"]').length === 2 && - $('fieldset > input[type="checkbox"]').length === 3 -); -``` - -The first radio button is missing the `checked` attribute. - -```js -assert($('input[type="radio"]')[0].hasAttribute('checked')); -``` - -The second radio button should not have the `checked` attribute. - -```js -assert(!$('input[type="radio"]')[1].hasAttribute('checked')); -``` - -The first checkbox is missing the `checked` attribute. - -```js -assert($('input[type="checkbox"]')[0].hasAttribute('checked')); -``` - -The second checkbox should not have the `checked` attribute. - -```js -assert(!$('input[type="checkbox"]')[1].hasAttribute('checked')); -``` - -The third checkbox should not have the `checked` attribute. - -```js -assert(!$('input[type="checkbox"]')[2].hasAttribute('checked')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
---fcc-editable-region-- -
- Is your cat an indoor or outdoor cat? - - -
-
- What's your cat's personality? - - - -
---fcc-editable-region-- - - -
-
-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-061.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-061.md deleted file mode 100644 index c354c9c6ea..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-061.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 5ef9b03c81a63668521804e7 -title: Part 61 -challengeType: 0 -dashedName: part-61 ---- - -# --description-- - -Now you will add a footer section to the page. - -After the `main` element, add a `footer` element. - -# --hints-- - -You have either deleted the `main` element or it is missing an opening tag or closing tag." - -```js -assert(document.querySelector('main') && code.match(/<\/main>/)); -``` - -Your `footer` element should have an opening tag. Opening tags have the following syntax: ``. - -```js -assert(document.querySelector('footer')); -``` - -Your `footer` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/<\/footer\>/)); -``` - -Your `footer` element should the below the closing `main` element tag. You have it put it somewhere else. - -```js -assert(document.querySelector('main').nextElementSibling.nodeName === 'FOOTER'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
- Is your cat an indoor or outdoor cat? - - -
-
- What's your cat's personality? - - - -
- - -
-
---fcc-editable-region-- -
- - ---fcc-editable-region-- -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-062.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-062.md deleted file mode 100644 index 6e5e3de37b..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-062.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: 5ef9b03c81a63668521804e8 -title: Part 62 -challengeType: 0 -dashedName: part-62 ---- - -# --description-- - -Nest a `p` element with the text `No Copyright - freeCodeCamp.org` within the `footer` element. - -# --hints-- - -You have either deleted the `footer` element or it is missing an opening tag or closing tag." - -```js -assert(document.querySelector('footer') && code.match(/<\/footer>/)); -``` - -Your `footer` element should have a `p` element. Make sure to added an opening tag and closing tag for the `p` element. - -```js -assert(document.querySelector('footer > p')); -``` - -Your `footer` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -const pElemClosingTags = code.match(/<\/p\>/g); -assert(pElemClosingTags && pElemClosingTags.length === 2); -``` - -Your `p` element's text should be `No Copyright - freeCodeCamp.org`. You have either omitted the text, have a typo, or it is not between the `legend` element's opening and closing tags. - -```js -const extraSpacesRemoved = $('footer > p')[0].innerText.replace(/\s+/g, ' '); -assert(extraSpacesRemoved.match(/No Copyright - freeCodeCamp\.org$/i)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
- Is your cat an indoor or outdoor cat? - - -
-
- What's your cat's personality? - - - -
- - -
-
-
---fcc-editable-region-- -
-
---fcc-editable-region-- - - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-063.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-063.md deleted file mode 100644 index b56ac03838..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-063.md +++ /dev/null @@ -1,118 +0,0 @@ ---- -id: 5ef9b03c81a63668521804e9 -title: Part 63 -challengeType: 0 -dashedName: part-63 ---- - -# --description-- - -Make the text `freeCodeCamp.org` into a link by enclosing it in an anchor (`a`) element. The `href` attribute should be set to `https://www.freecodecamp.org`. - -# --hints-- - -Your anchor (`a`) element should be nested within the `footer` element. Make sure to added an opening tag and closing tag for the anchor (`a`) element. - -```js -assert($('footer > p > a').length); -``` - -Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -const aElemClosingTags = code.match(/<\/a\>/g); -assert(aElemClosingTags && aElemClosingTags.length === 3); -``` - -Your anchor (`a`) element should have an `href` attribute with the value `https://www.freecodecamp.org`. You may have omitted the attribute/value, or have a typo. - -```js -const nestedAnchor = $('footer > p > a')[0]; -assert(nestedAnchor.getAttribute('href') === 'https://www.freecodecamp.org'); -``` - -The link's text should be `freeCodeCamp.org`. You have either omitted the text or have a typo. - -```js -const nestedAnchor = $('footer > p > a')[0]; -assert( - nestedAnchor.innerText.toLowerCase().replace(/\s+/g, ' ') === - 'freecodecamp.org' -); -``` - -After nesting the anchor (`a`) element, the only `p` element content visible in the browser should be `No Copyright - freeCodeCamp.org`. Double check the text, spacing, or punctuation of both the `p` and nested anchor element. - -```js -const pText = $('footer > p')[0].innerText.toLowerCase().replace(/\s+/g, ' '); -assert(pText.match(/^no copyright - freecodecamp.org$/)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
- Is your cat an indoor or outdoor cat? - - -
-
- What's your cat's personality? - - - -
- - -
-
-
-
-

---fcc-editable-region-- - No Copyright - freeCodeCamp.org ---fcc-editable-region-- -

-
- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-064.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-064.md deleted file mode 100644 index 85c93cc63e..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-064.md +++ /dev/null @@ -1,108 +0,0 @@ ---- -id: 5ef9b03c81a63668521804ea -title: Part 64 -challengeType: 0 -dashedName: part-64 ---- - -# --description-- - -Notice that everything you've added to the page so far is inside the `body` element. All page content elements that should be rendered to the page go inside the `body` element. However, other important information goes inside the `head` element. - -Add a `head` element just above the `body` element. - -# --hints-- - -You have either deleted the `body` element or it is missing an opening tag or closing tag. - -```js -assert(document.querySelector('body') && code.match(/<\/body>/)); -``` - -Your `head` element should have an opening tag. Opening tags have the following syntax: ``. - -```js -assert(code.match(/\/)); -``` - -Your `head` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/\<\/head\>/)); -``` - -Your `head` element should be above the opening `body` element tag. You have it put it somewhere else. - -```js -const noSpaces = code.replace(/\s/g, ''); -assert(noSpaces.match(/\<\/head\>\/)); -``` - -# --seed-- - -## --seed-contents-- - -```html - ---fcc-editable-region-- - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
- Is your cat an indoor or outdoor cat? - - -
-
- What's your cat's personality? - - - -
- - -
-
-
- - ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-065.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-065.md deleted file mode 100644 index 05ab65d323..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-065.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -id: 5ef9b03c81a63668521804eb -title: Part 65 -challengeType: 0 -dashedName: part-65 ---- - -# --description-- - -The `title` element determines what browsers show in the title bar or tab for the page. - -Add a `title` element within the `head` element. Its text should be `CatPhotoApp`. - -# --hints-- - -You have either deleted the `head` element or it is missing an opening tag or closing tag. - -```js -assert(code.match(/\/) && code.match(/\<\/head\>/)); -``` - -Your `title` element should be nested in the `head` element. Make sure to added an opening tag and closing tag for the `title` element. - -```js -const noSpaces = code.replace(/\s/g, ''); -assert(noSpaces.match(/\\.*\<\/title\>\<\/head\>/)); -``` - -Your `title` element should have a closing tag. Closing tags have a `/` just after the `<` character. - -```js -assert(code.match(/\<\/title\>/)); -``` - -Your `title` element's text should be `CatPhotoApp`. You have either omitted the text or have a typo. - -```js -assert(document.title && document.title.toLowerCase() === 'catphotoapp'); -``` - -# --seed-- - -## --seed-contents-- - -```html - ---fcc-editable-region-- - - ---fcc-editable-region-- - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
- Is your cat an indoor or outdoor cat? - - -
-
- What's your cat's personality? - - - -
- - -
-
-
- - - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-066.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-066.md deleted file mode 100644 index 6492c9b8e2..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-066.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 5ef9b03c81a63668521804ec -title: Part 66 -challengeType: 0 -dashedName: part-66 ---- - -# --description-- - -Notice that the entire contents of the page are nested within an `html` element. All other elements must be descendants of this `html` element. - -Add the `lang` attribute with the value `en` to the opening `html` tag to specify that the language of the page is English. - -# --hints-- - -You have either deleted the `html` element or it is missing an opening tag or closing tag. - -```js -assert(code.match(/\/) && code.match(/\<\/html\>/)); -``` - -Your `html` element should have a `lang` attribute with the value `en`. You may have omitted the attribute/value, or have a typo. - -```js -const extraSpacesRemoved = code.replace(/\s+/g, ' '); -assert(extraSpacesRemoved.match(/\/)); -``` - -Although you have set the `html` element's `lang` attribute to `en`, it is recommended to always surround the value of an attribute with quotation marks. - -```js -assert(!/\<\s*html\s+lang\s*=en/i.test(code)); -``` - -# --seed-- - -## --seed-contents-- - -```html ---fcc-editable-region-- - ---fcc-editable-region-- - - CatPhotoApp - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
- Is your cat an indoor or outdoor cat? - - -
-
- What's your cat's personality? - - - -
- - -
-
-
- - - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-067.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-067.md deleted file mode 100644 index 818f698332..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-067.md +++ /dev/null @@ -1,166 +0,0 @@ ---- -id: 5ef9b03c81a63668521804ee -title: Part 67 -challengeType: 0 -dashedName: part-67 ---- - -# --description-- - -All pages should begin with ``. This special string is known as a declaration and ensures the browser tries to meet industry-wide specifications. - -To complete this project, add this declaration as the first line of the code. - -# --hints-- - -Your code should begin with the declaration ``. You may have omitted the declaration, have a typo, or it is not the first line of code. - -```js -assert(code.match(/\<\s*!DOCTYPE\s+html\s*\>/)); -``` - -Your `` must be located at the top of the document. - -```js -const noSpaces = code.replace(/\s/g, ''); -assert(noSpaces.match(/^\<\!DOCTYPEhtml\>\ - - CatPhotoApp - ---fcc-editable-region-- - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
- Is your cat an indoor or outdoor cat? - - -
-
- What's your cat's personality? - - - -
- - -
-
-
- - - -``` - -# --solutions-- - -```html - - - - CatPhotoApp - - -

CatPhotoApp

-
-
-

Cat Photos

- -

Click here to view more cat photos.

- A cute orange cat lying on its back. -
-
-

Cat Lists

-

Things cats love:

-
    -
  • cat nip
    • -
  • laser pointers
    • -
  • lasagna
    • -
-
- A slice of lasagna on a plate. -
Cats love lasagna.
-
-

Top 3 things cats hate:

-
    -
  1. flea treatment
    2. -
  2. thunder
    3. -
  3. other cats
    4. -
-
- Five cats looking around a field. -
Cats hate other cats.
-
-
-
-

Cat Form

-
-
- Is your cat an indoor or outdoor cat? - - -
-
- What's your cat's personality? - - - -
- - -
-
-
- - - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-001.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-001.md new file mode 100644 index 0000000000..441c5a0cc4 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-001.md @@ -0,0 +1,59 @@ +--- +id: 5dc174fcf86c76b9248c6eb2 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +HTML elements have opening tags like `

` and closing tags like `

`. + +Find the `h1` element and change the text between its opening and closing tags to say `CatPhotoApp`. + +# --hints-- + +The text `CatPhotoApp` should be present in the code. You may want to check your spelling. + +```js +assert(code.match(/catphotoapp/i)); +``` + +Your `h1` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelector('h1')); +``` + +Your `h1` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/h1\>/)); +``` + +You have more than one `h1` element. Remove the extra `h1` element. + +```js +assert(document.querySelectorAll('h1').length === 1); +``` + +Your `h1` element's text should be `CatPhotoApp`. You have either omitted the text, have a typo, or it is not between the `h1` element's opening and closing tags. + +```js +assert(document.querySelector('h1').innerText.toLowerCase() === 'catphotoapp'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- +

Hello World

+--fcc-editable-region-- + + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-002.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-002.md new file mode 100644 index 0000000000..b84ef9f596 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-002.md @@ -0,0 +1,82 @@ +--- +id: 5dc1798ff86c76b9248c6eb3 +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +The `h1` to `h6` heading elements are used to signify the importance of content below them. The lower the number, the higher the importance, so `h2` elements have less importance than `h1` elements. Only use one `h1` element per page and place lower importance headings below higher importance headings. + +Add an `h2` element below the `h1` element that says `Cat Photos`. + +# --hints-- + +Your `h1` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelector('h1')); +``` + +Your `h1` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/h1\>/)); +``` + +You should only have one `h1` element. Remove the extra. + +```js +assert( + document.querySelector('h1') && document.querySelectorAll('h1').length === 1 +); +``` + +Your `h1` element's text should be 'CatPhotoApp'. You have either omitted the text or have a typo. + +```js +assert(document.querySelector('h1').innerText.toLowerCase() === 'catphotoapp'); +``` + +Your `h2` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelector('h2')); +``` + +Your `h2` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/h2\>/)); +``` + +Your `h2` element's text should be 'Cat Photos'. Only place the text `Cat Photos` between the opening and closing `h2` tags. + +```js +assert(document.querySelector('h2').innerText.toLowerCase() === 'cat photos'); +``` + +Your `h2` element should be below the `h1` element. The `h1` element has greater importance and must be above the `h2` element. + +```js +const collection = [...document.querySelectorAll('h1,h2')].map( + (node) => node.nodeName +); +assert(collection.indexOf('H1') < collection.indexOf('H2')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- +

CatPhotoApp

+--fcc-editable-region-- + + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-003.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-003.md new file mode 100644 index 0000000000..647df97ff4 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-003.md @@ -0,0 +1,60 @@ +--- +id: 5dc17d3bf86c76b9248c6eb4 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Paragraph (`p`) elements are used to create paragraph text on websites. + +Create a paragraph (`p`) element below your `h2` element, and give it the text `Click here to view more cat photos.` + +# --hints-- + +Your `p` element should have an opening tag. Opening tags have the following syntax: ``. + +```js +assert(document.querySelector('p')); +``` + +Your `p` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/p\>/)); +``` + +Your `p` element's text should be `Click here to view more cat photos.` You have either omitted the text or have a typo. + +```js +const extraSpacesRemoved = document + .querySelector('p') + .innerText.replace(/\s+/g, ' '); +assert(extraSpacesRemoved.match(/click here to view more cat photos\.?$/i)); +``` + +Your `p` element should be below the `h2` element. You have them in the wrong order. + +```js +const collection = [...document.querySelectorAll('h2,p')].map( + (node) => node.nodeName +); +assert(collection.indexOf('H2') < collection.indexOf('P')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+--fcc-editable-region-- +

Cat Photos

+--fcc-editable-region-- + + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-004.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-004.md new file mode 100644 index 0000000000..4ca8438296 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-004.md @@ -0,0 +1,68 @@ +--- +id: 5dc17dc8f86c76b9248c6eb5 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Commenting allows you to leave messages without affecting the browser display. It also allows you to make code inactive. A comment in HTML starts with ``. For example, the comment `` contains the text `TODO: Remove h1`. + +Add a comment above the `p` element with the text `TODO: Add link to cat photos`. \\ + +# --hints-- + +Your comment should start with ``. You are missing one or more of the characters that define the end of a comment. + +```js +assert(code.match(/-->/)); +``` + +Your code should not have extra opening/closing comment characters. You have an extra `` displaying in the browser. + +```js +const noSpaces = code.replace(/\s/g, ''); +assert(noSpaces.match(//g).length < 2); +``` + +Your comment should contain the text `TODO: Add link to cat photos`. + +```js +assert(code.match(//i)); +``` + +Your comment should be above the `p` element. You have them in the wrong order. + +```js +assert( + code + .replace(/\s/g, '') + .match( + /

clickheretoviewmorecatphotos\.?<\/p>/i + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+

Cat Photos

+--fcc-editable-region-- +

Click here to view more cat photos.

+--fcc-editable-region-- + + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-005.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-005.md new file mode 100644 index 0000000000..78b9d0247b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-005.md @@ -0,0 +1,73 @@ +--- +id: 5dc2385ff86c76b9248c6eb7 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +HTML5 has some elements that identify different content areas. These elements make your HTML easier to read and help with Search Engine Optimization (SEO) and accessibility. + +Identify the main section of this page by adding a `
` opening tag after the `h1` element, and a `
` closing tag after the `p` element. + +# --hints-- + +Your `main` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelector('main')); +``` + +Your `main` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/main\>/)); +``` + +Your `main` element's opening tag should be below the `h1` element. You have them in the wrong order. + +```js +const collection = [...document.querySelectorAll('main,h1')].map( + (node) => node.nodeName +); +assert(collection.indexOf('H1') < collection.indexOf('MAIN')); +``` + +Your `main` element's opening tag should be above the `h2` element. You have them in the wrong order. + +```js +const collection = [...document.querySelectorAll('main,h2')].map( + (node) => node.nodeName +); +assert(collection.indexOf('MAIN') < collection.indexOf('H2')); +``` + +Your `main` element's closing tag should be below the `p` element. You have them in the wrong order. + +```js +const mainNode = document.querySelector('main'); +const pNode = document.querySelector('p'); +assert( + mainNode.contains(pNode) && + pNode.textContent.toLowerCase().match(/click here to view more cat photos/) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- +

CatPhotoApp

+

Cat Photos

+ +

Click here to view more cat photos.

+--fcc-editable-region-- + + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-006.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-006.md new file mode 100644 index 0000000000..e464c8e047 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-006.md @@ -0,0 +1,95 @@ +--- +id: 5dc23991f86c76b9248c6eb8 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +HTML elements are often nested within other HTML elements. In the previous step you nested the `h2` element, comment and `p` element within the `main` element. A nested element is a child of its parent element. + +To make HTML easier to read, indent the `h2` element, the comment, and `p` element exactly two spaces to indicate they are children of the `main` element. + +# --hints-- + +Your should have an `h2` element with text `Cat Photos`. You may have accidentally deleted it, it is missing both opening and closing tags, or the text has changed. + +```js +assert( + document.querySelector('h2') && + code.match(/<\/h2\>/) && + document.querySelector('h2').innerText.toLowerCase() === 'cat photos' +); +``` + +Your `h2` element should below the `main` element's opening tag and its opening tag should start 6 spaces over from the start of the line. + +```js +assert(code.toLowerCase().match(/\n\s{6}

/)); +``` + +Your code should have a comment. You removed the comment from an earlier step. + +```js +assert(code.match(//)); +``` + +The comment's text should be `TODO: Add link to cat photos`. Do not change the text or spacing of the comment. + +```js +assert(code.match(//i)); +``` + +Your comment should be below the `h2` element and start 6 spaces over from the start of the line. + +```js +assert( + code + .toLowerCase() + .match(/<\/h2>\n\s{6}/) +); +``` + +Your code should have a `p` element. You have removed the `p` element from an earlier step. + +```js +assert(document.querySelector('p')); +``` + +The text of the `p` element should be `Click here to view more cat photos.` Do not change the text, spacing, or punctuation of the `p` element. + +```js +assert( + document + .querySelector('p') + .innerText.toLowerCase() + .match(/click\s+here\s+to\s+view\s+more\s+cat\s+photos\.?$/) +); +``` + +Your `p` element should be below the comment and its opening tag should start 6 spaces over from the start of the line. + +```js +assert(code.toLowerCase().match(/-->\n\s{6}

/)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+--fcc-editable-region-- +

Cat Photos

+ +

Click here to view more cat photos.

+--fcc-editable-region-- +
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-007.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-007.md new file mode 100644 index 0000000000..3cb407eeb2 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-007.md @@ -0,0 +1,61 @@ +--- +id: 5dc23f9bf86c76b9248c6eba +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +You can add images to your website by using the `img` element. `img` elements have an opening tag without a closing tag. A tag for an element without a closing tag is known as a self-closing tag. + +Add an `img` element below the `p` element. At this point, no image will show up in the browser. + +# --hints-- + +Your `img` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelector('img')); +``` + +Your `img` element should not have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(!code.match(/<\/img\>/)); +``` + +You should only have one `img` element. Remove any extras. + +```js +assert(document.querySelectorAll('img').length === 1); +``` + +Your `img` element should be below the `p` element. You have them in the wrong order. + +```js +const collection = [...document.querySelectorAll('p,img')].map( + (node) => node.nodeName +); +assert(collection.indexOf('P') < collection.indexOf('IMG')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+

Cat Photos

+ +--fcc-editable-region-- +

Click here to view more cat photos.

+--fcc-editable-region-- +
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-008.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-008.md new file mode 100644 index 0000000000..a18ee569b8 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-008.md @@ -0,0 +1,59 @@ +--- +id: 5dc24073f86c76b9248c6ebb +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +HTML attributes are special words used inside the opening tag of an element to control the element's behavior. The `src` attribute in an `img` element specifies the image's URL (where the image is located). An example of an `img` element using an `src` attribute: ``. + +Add an `src` attribute to the existing `img` element that is set to the following URL: `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. + +# --hints-- + +Your code should have an `img` element. You may have removed the `img` element or you have not surrounded the `src` attribute's value with quotes. + +```js +assert(document.querySelector('img')); +``` + +Your `img` element should have an `src` attribute. You have either omitted the attribute or have a typo. Make sure there is a space between the element name and the attribute name. + +```js +assert(document.querySelector('img').src); +``` + +Your `img` element's `src` attribute should be set to '`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`'. You have either omitted the URL or have a typo. The case of the URL is important. + +```js +assert(document.querySelector('img').src === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg'); +``` + +Although you have set the `img` element's `src` to the correct URL, it is recommended to always surround the value of an attribute with quotation marks. + +```js +assert(!/\ + +

CatPhotoApp

+
+

Cat Photos

+ +

Click here to view more cat photos.

+--fcc-editable-region-- + +--fcc-editable-region-- +
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-009.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-009.md new file mode 100644 index 0000000000..1bb383b366 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-009.md @@ -0,0 +1,57 @@ +--- +id: 5dc24165f86c76b9248c6ebc +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +All `img` elements should have an `alt` attribute. The `alt` attribute's text is used for screen readers to improve accessibility and is displayed if the image fails to load. For example, `A cat` has an `alt` attribute with the text `A cat`. + +Add an `alt` attribute to the `img` element with the text `A cute orange cat lying on its back`. + +# --hints-- + +Your code should have an `img` element. You removed the `img` element from an earlier step. + +```js +assert(document.querySelector('img')); +``` + +Your `img` element does not have an `alt` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +assert(document.querySelector('img').hasAttribute('alt')); +``` + +Your `img` element's `alt` attribute value is set to something other than 'A cute orange cat lying on its back'. Make sure the `alt` attribute's value is surrounded with quotation marks. + +```js +const altText = document + .querySelector('img') + .alt.toLowerCase() + .replace(/\s+/g, ' '); +assert(altText.match(/A cute orange cat lying on its back\.?$/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+

Cat Photos

+ +

Click here to view more cat photos.

+--fcc-editable-region-- + +--fcc-editable-region-- +
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-010.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-010.md new file mode 100644 index 0000000000..06de5480a0 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-010.md @@ -0,0 +1,79 @@ +--- +id: 5dc24614f86c76b9248c6ebd +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +You can link to another page with the anchor (`a`) element. For example, `` would link to `freecodecamp.org`. + +Add an anchor element after the paragraph that links to `https://freecatphotoapp.com`. At this point, the link won’t show up in the preview. + +# --hints-- + +Your anchor (`a`) element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelector('a')); +``` + +Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/a\>/)); +``` + +Your anchor (`a`) element should be below the `p` element. You have them in the wrong order. + +```js +const collection = [...document.querySelectorAll('a, p')].map( + (node) => node.nodeName +); +assert(collection.indexOf('P') < collection.indexOf('A')); +``` + +Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +assert(document.querySelector('a').hasAttribute('href')); +``` + +Your anchor (`a`) element should link to `https://freecatphotoapp.com`. You have either omitted the URL or have a typo. + +```js +assert( + document.querySelector('a').getAttribute('href') === + 'https://freecatphotoapp.com' +); +``` + +Although you have set the anchor ('a') element's `href` attribute to the correct link, it is recommended to always surround the value of an attribute with quotation marks. + +```js +assert( + !/\ + +

CatPhotoApp

+
+

Cat Photos

+ +--fcc-editable-region-- +

Click here to view more cat photos.

+--fcc-editable-region-- + A cute orange cat lying on its back. +
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-011.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-011.md new file mode 100644 index 0000000000..6baf208bb6 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-011.md @@ -0,0 +1,57 @@ +--- +id: 5ddbd81294d8ddc1510a8e56 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +A link's text must be placed between the opening and closing tags of an anchor (`a`) element. For example, `click here to go to freeCodeCamp.org` is a link with the text `click here to go to freeCodeCamp.org`. + +Add the anchor text `cat photos` to the anchor element. This will become the link's text. + +# --hints-- + +Your anchor (`a`) element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelector('a')); +``` + +Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/a\>/)); +``` + +Your anchor (`a`) element's text should be `cat photos`. Make sure to put the link text between the anchor (`a`) element's opening tag and closing tag. + +```js +assert( + document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' ') === + 'cat photos' +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+

Cat Photos

+ +

Click here to view more cat photos.

+--fcc-editable-region-- + +--fcc-editable-region-- + A cute orange cat lying on its back. +
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-012.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-012.md new file mode 100644 index 0000000000..cb1ac93f44 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-012.md @@ -0,0 +1,66 @@ +--- +id: 5dfa22d1b521be39a3de7be0 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Turn the words `cat photos` located inside `p` element into a link by replacing the words with the anchor element added previously. The `p` element should show the same text in the browser, but the words `cat photos` should now be a link. There should only be one link showing in the app. + +# --hints-- + +Your code should only contain one anchor (`a`) element. Remove any extra anchor elements. + +```js +assert(document.querySelectorAll('a').length === 1); +``` + +Your anchor (`a`) element should be nested within the `p` element. + +```js +assert($('p > a').length); +``` + +The link's text should be `cat photos`. You have either omitted the text or have a typo. + +```js +const nestedAnchor = $('p > a')[0]; +assert( + nestedAnchor.getAttribute('href') === 'https://freecatphotoapp.com' && + nestedAnchor.innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos' +); +``` + +After nesting the anchor (`a`) element, the only `p` element content visible in the browser should be `Click here to view more cat photos.` Double check the text, spacing, or punctuation of both the `p` and nested anchor element. + +```js +const pText = document + .querySelector('p') + .innerText.toLowerCase() + .replace(/\s+/g, ' '); +assert(pText.match(/click here to view more cat photos\.?$/)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+

Cat Photos

+ +--fcc-editable-region-- +

Click here to view more cat photos.

+ cat photos +--fcc-editable-region-- + A cute orange cat lying on its back. +
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-013.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-013.md new file mode 100644 index 0000000000..387f158001 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-013.md @@ -0,0 +1,55 @@ +--- +id: 5dfa2407b521be39a3de7be1 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Add a `target` attribute with the value `_blank` to the anchor (`a`) element's opening tag, so that the link opens in a new tab. + +# --hints-- + +Your `p` element should have a nested anchor (`a`) element with the text `cat photos`. You may have deleted it or have a typo. + +```js +const anchor = $('p > a'); +assert( + anchor.length && + anchor[0].innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos' +); +``` + +Your anchor (`a`) element does not have a `target` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +assert(document.querySelector('a').hasAttribute('target')); +``` + +The value of the `target` attribute should '\_blank'. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +assert(document.querySelector('a').getAttribute('target') === '_blank'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+

Cat Photos

+ +--fcc-editable-region-- +

Click here to view more cat photos.

+--fcc-editable-region-- + A cute orange cat lying on its back. +
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-014.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-014.md new file mode 100644 index 0000000000..82836e6ce4 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-014.md @@ -0,0 +1,88 @@ +--- +id: 5dfa30b9eacea3f48c6300ad +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Turn the image into a link by surrounding it with necessary element tags. Use `https://freecatphotoapp.com` as the anchor's `href` attribute value. + +# --hints-- + +You should have an `img` element with an `src` value of `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. You may have accidentally deleted it. + +```js +assert( + document.querySelector('img') && + document.querySelector('img').getAttribute('src') === + 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg' +); +``` + +Your anchor (`a`) element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelectorAll('a').length >= 2); +``` + +You should only add one opening anchor (`a`) tag. Please remove any extras. + +```js +assert(document.querySelectorAll('a').length === 2); +``` + +Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/a>/g).length >= 2); +``` + +You should only add one closing anchor (`a`) tag. Please remove any extras. + +```js +assert(code.match(/<\/a>/g).length === 2); +``` + +Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +assert(document.querySelector('a').hasAttribute('href')); +``` + +Your anchor (`a`) element should link to `https://freecatphotoapp.com`. You have either omitted the URL or have a typo. + +```js +assert( + document.querySelectorAll('a')[1].getAttribute('href') === + 'https://freecatphotoapp.com' +); +``` + +Your `img` element should be nested within the anchor (`a`) element. The entire `img` element should be inside the opening and closing tags of the anchor (`a`) element. + +```js +assert(document.querySelector('img').parentNode.nodeName === 'A'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+

Cat Photos

+ +

Click here to view more cat photos.

+--fcc-editable-region-- + A cute orange cat lying on its back. +--fcc-editable-region-- +
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-015.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-015.md new file mode 100644 index 0000000000..adf4f4c79f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-015.md @@ -0,0 +1,63 @@ +--- +id: 5f07be6ef7412fbad0c5626b +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Before adding any new content, you should make use of a `section` element to separate the cat photos content from the future content. + +Take all the elements currently located within the `main` element and nest them in a `section` element. + +# --hints-- + +Your `section` element should have an opening tag. Opening tags have the following syntax: ``. + +```js +assert(document.querySelector('section')); +``` + +Your `section` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/section\>/)); +``` + +The entire `section` element should be between the opening and closing tags of the `main` element. + +```js +assert(document.querySelector('section').parentNode.nodeName === 'MAIN'); +``` + +The existing `h2`, comment, `p` element, and anchor (`a`) element should be between the opening and closing tags of the `section` element. + +```js +const childrenOfSection = [...document.querySelector('section').childNodes]; +const foundElems = childrenOfSection.filter((child) => { + return ['H2', 'A', 'P'].includes(child.nodeName); +}); +assert(foundElems.length === 3); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+--fcc-editable-region-- +
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+--fcc-editable-region-- + + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-016.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-016.md new file mode 100644 index 0000000000..6be452b82c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-016.md @@ -0,0 +1,81 @@ +--- +id: 5f07c98cdb9413cbd4b16750 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +It is time to add a new section. Add a second `section` element below the existing `section` element. + +# --hints-- + +Your `section` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelectorAll('section').length >= 2); +``` + +You should only add one opening `section` tag. Please remove any extras. + +```js +assert(document.querySelectorAll('section').length === 2); +``` + +Your `section` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/section>/g).length >= 2); +``` + +You should only add one closing `section` tag. Please remove any extras. + +```js +assert(code.match(/<\/section>/g).length === 2); +``` + +The second `section` element should not be nested in the first `section` element. + +```js +const childrenOf1stSection = [ + ...document.querySelector('main > section').children +]; +const foundElems = childrenOf1stSection.filter((child) => { + return child.nodeName === 'SECTION'; +}); +assert(foundElems.length === 0); +``` + +Both `section` elements should be between the opening and closing tags of the `main` element. + +```js +const childrenOfMain = [...document.querySelector('main').children]; +const foundElems = childrenOfMain.filter((child) => { + return child.nodeName === 'SECTION'; +}); +assert(foundElems.length === 2); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+--fcc-editable-region-- +
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+--fcc-editable-region-- +
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-017.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-017.md new file mode 100644 index 0000000000..523a531a91 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-017.md @@ -0,0 +1,75 @@ +--- +id: 5dfa3589eacea3f48c6300ae +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Within the second `section` element, add a new `h2` element with the text `Cat Lists`. + +# --hints-- + +Your `section` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert( + document.querySelectorAll('section').length === 2 && + code.match(/<\/section>/g).length === 2 +); +``` + +Your `h2` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelectorAll('h2').length === 2); +``` + +Your `h2` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/h2\>/g).length === 2); +``` + +Your second `h2` element should be right above the second `section` element's closing tag. It is not in the correct position. + +```js +const secondSection = document.querySelectorAll('section')[1]; +assert(secondSection.lastElementChild.nodeName === 'H2'); +``` + +The second `h2` element should have the text `Cat Lists`. You have either omitted the text or have a typo. + +```js +assert( + document + .querySelectorAll('main > section')[1] + .lastElementChild.innerText.toLowerCase() === 'cat lists' +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+--fcc-editable-region-- +
+
+--fcc-editable-region-- +
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-018.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-018.md new file mode 100644 index 0000000000..d9ed45aaf3 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-018.md @@ -0,0 +1,82 @@ +--- +id: 5dfa371beacea3f48c6300af +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +When you add a lower rank heading element to the page, it's implied that you're starting a new subsection. + +After the last `h2` element of the second `section` element, add an `h3` element with the text `Things cats love:`. + +# --hints-- + +The second `section` element appears to be missing or does not have both an opening and closing tag. + +```js +assert( + document.querySelectorAll('main > section')[1] && + code.match(/\<\/section>/g).length == 2 +); +``` + +There should be an `h3` element right above the second `section` element's closing tag. + +```js +assert( + document.querySelectorAll('main > section')[1].lastElementChild.nodeName === + 'H3' +); +``` + +The `h3` element right above the second `section` element's closing tag should have the text `Things cats love:`. Make sure to include the colon at the end of the text. + +```js +assert( + document + .querySelectorAll('main > section')[1] + .lastElementChild.innerText.toLowerCase() + .replace(/\s+/g, ' ') === 'things cats love:' +); +``` + +There should be an `h2` element with the text `Cat Lists` above the last `h3` element that is nested in the last `section` element'. You may have accidentally deleted the `h2` element. + +```js +const secondSectionLastElemNode = document.querySelectorAll('main > section')[1] + .lastElementChild; +assert( + secondSectionLastElemNode.nodeName === 'H3' && + secondSectionLastElemNode.previousElementSibling.innerText + .toLowerCase() + .replace(/\s+/g, ' ') === 'cat lists' +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+--fcc-editable-region-- +
+

Cat Lists

+
+--fcc-editable-region-- +
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-019.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-019.md new file mode 100644 index 0000000000..67b3b9d484 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-019.md @@ -0,0 +1,58 @@ +--- +id: 5dfa37b9eacea3f48c6300b0 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +After the `h3` element with the `Things cats love:` text, add an unordered list (`ul`) element. Note that nothing will be displayed at this point. + +# --hints-- + +Your `ul` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelector('ul')); +``` + +Your `ul` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/ul>/)); +``` + +The `ul` element should be above the second `section` element's closing tag. + +```js +const secondSectionLastElemNode = $('main > section')[1].lastElementChild; +assert(secondSectionLastElemNode.nodeName === 'UL'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+--fcc-editable-region-- +

Cat Lists

+

Things cats love:

+--fcc-editable-region-- +
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-020.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-020.md new file mode 100644 index 0000000000..e358b81693 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-020.md @@ -0,0 +1,77 @@ +--- +id: 5dfb5ecbeacea3f48c6300b1 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Use list item (`li`) elements to create items in a list. Here is an example of list items in an unordered list: + +```html +
    +
  • milk
    • +
  • cheese
    • +
+``` + +Nest three list items within the `ul` element to display three things cats love: `cat nip`, `laser pointers` and `lasagna`. + +# --hints-- + +You should have three `li` elements. Each `li` element should have its own opening and closing tag. + +```js +assert($('li').length === 3 && code.match(/<\/li\>/g).length === 3); +``` + +You should have three `li` elements with the text `cat nip`, `laser pointers` and `lasagna` in any order. You have either omitted some text or have a typo. + +```js +assert.deepStrictEqual( + [...document.querySelectorAll('li')] + .map((item) => item.innerText.toLowerCase()) + .sort((a, b) => a.localeCompare(b)), + ['cat nip', 'lasagna', 'laser pointers'] +); +``` + +The three `li` elements should be located between the `ul` element's opening and closing tags. + +```js +assert( + [...document.querySelectorAll('li')].filter( + (item) => item.parentNode.nodeName === 'UL' + ).length === 3 +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+--fcc-editable-region-- +
    +
+--fcc-editable-region-- +
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-021.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-021.md new file mode 100644 index 0000000000..37e17cce8c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-021.md @@ -0,0 +1,88 @@ +--- +id: 5dfb6250eacea3f48c6300b2 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +After the unordered list, add a new image with an `src` attribute value set to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg` and an `alt` attribute value set to `A slice of lasagna on a plate.` + +# --hints-- + +There should be an `img` element right above the second `section` element's closing tag. + +```js +assert($('section')[1].lastElementChild.nodeName === 'IMG'); +``` + +The new image either does not have an `alt` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +assert($('section')[1].lastElementChild.hasAttribute('alt')); +``` + +The new image should have an `alt` value of `A slice of lasagna on a plate.` Make sure the `alt` attribute's value is surrounded with quotation marks. + +```js +assert( + $('section')[1] + .lastElementChild.getAttribute('alt') + .replace(/\s+/g, ' ') + .match(/^A slice of lasagna on a plate\.?$/i) +); +``` + +The new image does not have an `src` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +assert($('section')[1].lastElementChild.hasAttribute('src')); +``` + +The new image should have an `src` value of `https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg`. Make sure the `src` attribute's value is surrounded with quotation marks. + +```js +assert( + $('section')[1].lastElementChild.getAttribute('src') === + 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg' +); +``` + +Although you have set the new image's `src` to the correct URL, it is recommended to always surround the value of an attribute with quotation marks. + +```js +assert(!/\ + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+--fcc-editable-region-- +
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+--fcc-editable-region-- +
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-022.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-022.md new file mode 100644 index 0000000000..788633df18 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-022.md @@ -0,0 +1,76 @@ +--- +id: 5dfb655eeacea3f48c6300b3 +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +The `figure` element represents self-contained content and will allow you to associate an image with a caption. + +Nest the image you just added within a `figure` element. + +# --hints-- + +Your `figure` element should have an opening tag. Opening tags have the following syntax: ``. + +```js +assert(document.querySelector('figure')); +``` + +Your `figure` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/figure\>/)); +``` + +There should be an `figure` element right above the second `section` element's closing tag. + +```js +assert($('section')[1].lastElementChild.nodeName === 'FIGURE'); +``` + +The lasagna `img` element should be nested in the `figure` element. + +```js +assert( + document.querySelector('figure > img') && + document.querySelector('figure > img').getAttribute('src').toLowerCase() === + 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg' +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+--fcc-editable-region-- + A slice of lasagna on a plate. +--fcc-editable-region-- +
+
+ + + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-023.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-023.md new file mode 100644 index 0000000000..9c9ba9dc3a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-023.md @@ -0,0 +1,106 @@ +--- +id: 5dfb6a35eacea3f48c6300b4 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +A figure caption (`figcaption`) element is used to add a caption to describe the image contained withing the `figure` element. For example, `
A cute cat
` adds the caption `A cute cat`. + +After the image nested in the `figure` element, add a `figcaption` element with the text `Cats love lasagna.` + +# --hints-- + +The Lasagna `img` element should be nested in the `figure` element. + +```js +assert( + document.querySelector('figure > img') && + document.querySelector('figure > img').getAttribute('src').toLowerCase() === + 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg' +); +``` + +Your `figcaption` element should have an opening tag. Opening tags have the following syntax: ``. + +```js +assert(document.querySelector('figcaption')); +``` + +Your `figcaption` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/figcaption\>/)); +``` + +The `figcaption` element should be nested in the `figure` element. + +```js +assert( + document.querySelector('figure > figcaption') && + document.querySelector('figure > figcaption') +); +``` + +The lasagna `img` element should be nested in the `figure` element. + +```js +assert( + document.querySelector('figure > img') && + document.querySelector('figure > img').getAttribute('src').toLowerCase() === + 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg' +); +``` + +The `figcaption` element nested in the `figure` element should be below the `img` element. You have them in the wrong order. + +```js +assert( + document.querySelector('figcaption').previousElementSibling.nodeName === 'IMG' +); +``` + +Your `figcaption` element's text should be `Cats love lasagna.` You have either omitted the text or have a typo. + +```js +assert( + document.querySelector('figcaption').innerText.match(/Cats love lasagna.?$/i) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+--fcc-editable-region-- + A slice of lasagna on a plate. +--fcc-editable-region-- +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-024.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-024.md new file mode 100644 index 0000000000..4d11acf545 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-024.md @@ -0,0 +1,85 @@ +--- +id: 5ef9b03c81a63668521804d0 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Emphasize the word `love` in the `figcaption` element by wrapping it in an emphasis (`em`) element. + +# --hints-- + +Your emphasis (`em`) element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelector('em')); +``` + +Your emphasis (`em`) element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/em\>/)); +``` + +You have either deleted the `figcaption` element or it is missing an opening or closing tag. + +```js +assert(document.querySelector('figcaption') && code.match(/<\/figcaption\>/)); +``` + +Your emphasis (`em`) element should surround the text `love`. You have either omitted the text or have a typo. + +```js +assert( + document.querySelector('figcaption > em').innerText.toLowerCase() === 'love' +); +``` + +The `figcaption`'s text should be `Cats love lasagna`. Check for typos and that the necessary spaces are present around the `em` element's opening and closing tags. + +```js +assert( + document + .querySelector('figcaption') + .innerText.replace(/\s+/gi, ' ') + .match(/cats love lasagna\.?/i) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +--fcc-editable-region-- +
Cats love lasagna.
+--fcc-editable-region-- +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-025.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-025.md new file mode 100644 index 0000000000..256578403b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-025.md @@ -0,0 +1,79 @@ +--- +id: 5ef9b03c81a63668521804d1 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +After the `figure` element, add another `h3` element with the text `Top 3 things cats hate:`. + +# --hints-- + +There should be an `h3` element right above the second `section` element's closing tag. Make it has an opening and closing tag. + +```js +assert( + document.querySelectorAll('main > section')[1].lastElementChild.nodeName === + 'H3' && code.match(/<\/h3\>/g).length === 2 +); +``` + +The new `h3` element should have the text `Top 3 things cats hate:`. Make sure to include the colon at the end of the text. + +```js +assert( + document + .querySelectorAll('main > section')[1] + .lastElementChild.innerText.toLowerCase() + .replace(/\s+/g, ' ') === 'top 3 things cats hate:' +); +``` + +There should be a `figure` above the new `h3` element. You may have accidentally deleted the `figure` element. + +```js +const secondSectionLastElemNode = document.querySelectorAll('main > section')[1] + .lastElementChild; +assert( + secondSectionLastElemNode.nodeName === 'H3' && + secondSectionLastElemNode.previousElementSibling.nodeName === 'FIGURE' +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+--fcc-editable-region-- +
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+--fcc-editable-region-- +
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-026.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-026.md new file mode 100644 index 0000000000..ce8a1c2952 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-026.md @@ -0,0 +1,92 @@ +--- +id: 5ef9b03c81a63668521804d2 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +The code for an ordered list (`ol`) is similar to an unordered list, but list items in an ordered list are numbered when displayed. + +After the final second section' last `h3` element, add an ordered list with these three list items: `flea treatment`, `thunder` and `other cats`. + +# --hints-- + +Your `ol` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelector('ol')); +``` + +Your `ol` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/ol>/)); +``` + +The `ol` element should be above the second `section` element's closing tag. You have them in the wrong order. + +```js +assert($('main > section')[1].lastElementChild.nodeName === 'OL'); +``` + +The three `li` elements should be nested inside the `ol` element. + +```js +assert( + [...document.querySelectorAll('li')].filter( + (item) => item.parentNode.nodeName === 'OL' + ).length === 3 +); +``` + +You should have three `li` elements with the text `flea treatment`, `thunder` and `other cats` in any order. + +```js +assert.deepStrictEqual( + [...document.querySelectorAll('li')] + .filter((item) => item.parentNode.nodeName === 'OL') + .map((item) => item.innerText.toLowerCase()) + .sort((a, b) => a.localeCompare(b)), + ['flea treatment', 'other cats', 'thunder'] +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+--fcc-editable-region-- +

Top 3 things cats hate:

+--fcc-editable-region-- +
+
+ + + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-027.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-027.md new file mode 100644 index 0000000000..eec907e982 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-027.md @@ -0,0 +1,72 @@ +--- +id: 5ef9b03c81a63668521804d3 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +After the ordered list, add another `figure` element. + +# --hints-- + +Your `figure` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelectorAll('figure').length === 2); +``` + +Your `figure` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/figure>/g).length === 2); +``` + +There should be a `figure` element right above the second `section` element's closing tag. + +```js +assert($('main > section')[1].lastElementChild.nodeName === 'FIGURE'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+--fcc-editable-region-- +
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+--fcc-editable-region-- +
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-028.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-028.md new file mode 100644 index 0000000000..c299c5186b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-028.md @@ -0,0 +1,100 @@ +--- +id: 5efada803cbd2bbdab94e332 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Inside the `figure` element you just added, nest an `img` element with a `src` attribute set to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg`. + +# --hints-- + +Your second `figure` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelectorAll('figure').length === 2); +``` + +Your second `figure` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/figure>/g).length === 2); +``` + +There should be a second `figure` element right above the second `section` element's closing tag. You have them in the wrong order. + +```js +assert($('main > section')[1].lastElementChild.nodeName === 'FIGURE'); +``` + +You should have a third `img` element nested in the `figure` element. + +```js +const catsImg = document.querySelectorAll('figure > img')[1]; +assert( + catsImg && + catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg' +); +``` + +The third image should have an `src` attribute set to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg`. + +```js +const catsImg = document.querySelectorAll('figure > img')[1]; +assert( + catsImg && + catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg' +); +``` + +Although you have set the new image's `src` to the correct URL, it is recommended to always surround the value of an attribute with quotation marks. + +```js +assert(!/\ + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+--fcc-editable-region-- +
+
+--fcc-editable-region-- +
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-029.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-029.md new file mode 100644 index 0000000000..07ab44fc62 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-029.md @@ -0,0 +1,97 @@ +--- +id: 5efae0543cbd2bbdab94e333 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +To improve accessibility of the image you just added, add an `alt` attribute with the text `Five cats looking around a field.` + +# --hints-- + +Your `figure` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelectorAll('figure').length === 2); +``` + +Your `ol` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/figure>/g).length === 2); +``` + +There should be a `figure` element right above the last `section` element's closing tag. + +```js +assert($('main > section')[1].lastElementChild.nodeName === 'FIGURE'); +``` + +The Cats `img` element should be nested in the `figure` element. + +```js +const catsImg = document.querySelectorAll('figure > img')[1]; +assert( + catsImg && + catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg' +); +``` + +The Cats `img` element should have an `alt` attribute with the value `Five cats looking around a field.` + +```js +const catsImg = document.querySelectorAll('figure > img')[1]; +assert( + catsImg + .getAttribute('alt') + .replace(/\s+/g, ' ') + .match(/^Five cats looking around a field\.?$/i) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-030.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-030.md new file mode 100644 index 0000000000..adc349c99b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-030.md @@ -0,0 +1,123 @@ +--- +id: 5efae16e3cbd2bbdab94e334 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +After the last `img` element, add a `figcaption` element with the text `Cats hate other cats.` + +# --hints-- + +Your `figcaption` element should have an opening tag. Opening tags have the following syntax: ``. + +```js +assert(document.querySelectorAll('figcaption').length === 2); +``` + +Your `figcaption` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/figcaption\>/g).length === 2); +``` + +There should be a `figure` element right above the second `section` element's closing tag. + +```js +assert($('main > section')[1].lastElementChild.nodeName === 'FIGURE'); +``` + +The last `img` element should be nested in the `figure` element. + +```js +const catsImg = document.querySelectorAll('figure > img')[1]; +assert( + catsImg && + catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg' +); +``` + +Your `figure` element should have an opening tag. Opening tags have the following syntax: ``. + +```js +assert(document.querySelectorAll('figure').length === 2); +``` + +Your `figure` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/figure\>/g).length === 2); +``` + +The `figcaption` element should be nested in the `figure` element. + +```js +assert(document.querySelectorAll('figure > figcaption').length === 2); +``` + +The `figcaption` element nested in the `figure` element should be below the `img` element. You have the `img` element and the `figcaption` element in the wrong order. + +```js +assert( + document.querySelectorAll('figcaption')[1].previousElementSibling.nodeName === + 'IMG' +); +``` + +The `figcaption` element should have the text `Cats hate other cats.` You have omitted a word or have a typo. + +```js +assert( + document + .querySelectorAll('figcaption')[1] + .innerText.toLowerCase() + .match(/Cats hate other cats\.?$/i) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+--fcc-editable-region-- + Five cats looking around a field. +--fcc-editable-region-- +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-031.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-031.md new file mode 100644 index 0000000000..07f5f38db4 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-031.md @@ -0,0 +1,96 @@ +--- +id: 5ef9b03c81a63668521804d4 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +The `strong` element is used to indicate that some text is of strong importance or urgent. + +In the `figcaption` you just added, indicate that `hate` is of strong importance by wrapping it in a `strong` element. + +# --hints-- + +Your `strong` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelector('strong')); +``` + +Your strong element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/strong\>/)); +``` + +Your strong element should surround the word `hate` in the text `Cats hate other cats.` You have either omitted the text or have a typo. + +```js +assert( + document + .querySelectorAll('figcaption')[1] + .querySelector('strong') + .innerText.toLowerCase() === 'hate' +); +``` + +The `figcaption`'s text should be `Cats hate other cats.` Check for typos and that the necessary spaces are present around the `strong` element's opening and closing tags. + +```js +const secondFigCaption = document.querySelectorAll('figcaption')[1]; +assert( + secondFigCaption && + secondFigCaption.innerText + .replace(/\s+/gi, ' ') + .trim() + .match(/cats hate other cats\.?/i) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +--fcc-editable-region-- +
Cats hate other cats.
+--fcc-editable-region-- +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-032.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-032.md new file mode 100644 index 0000000000..7f620d6f74 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-032.md @@ -0,0 +1,98 @@ +--- +id: 5f07fb1579dc934717801375 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +It is time to add a new section. Add a third `section` element below the second `section` element. + +# --hints-- + +Your `section` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelectorAll('section').length >= 3); +``` + +You should only add one opening `section` tag. Please remove any extras. + +```js +assert(document.querySelectorAll('section').length === 3); +``` + +Your `section` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/section>/g).length >= 3); +``` + +You should only add one closing `section` tag. Please remove any extras. + +```js +assert(code.match(/<\/section>/g).length === 3); +``` + +All of the `section` elements should be between the opening and closing tags of the `main` element. + +```js +const childrenOfMain = [...document.querySelector('main').children]; +const sectionElemsFound = childrenOfMain.filter((child) => { + return child.nodeName === 'SECTION'; +}); +assert(sectionElemsFound.length === 3); +``` + +The last `section` element should have no content. Remove any HTML elements or text within the `section` element. + +```js +assert($('main > section')[2].children.length === 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+--fcc-editable-region-- +
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+--fcc-editable-region-- +
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-033.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-033.md new file mode 100644 index 0000000000..b77207db0b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-033.md @@ -0,0 +1,103 @@ +--- +id: 5ef9b03c81a63668521804d5 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Inside the third `section` element add an `h2` tag with the text `Cat Form`. + +# --hints-- + +Unable to find the third `section` element. You may have accidentally deleted it or the opening tag or closing tag. + +```js +assert( + document.querySelectorAll('section').length === 3 && + code.match(/<\/section>/g).length === 3 +); +``` + +Your `h2` element should have an opening tag and closing tag. You may be missing one or both of the required tags. + +```js +assert( + document.querySelectorAll('h2').length >= 3 && + code.match(/<\/h2>/g).length >= 3 +); +``` + +You should only add one `h2` element. Please remove any extras. + +```js +assert(document.querySelectorAll('h2').length === 3); +``` + +The new `h2` element should be located right above the third `section` element's closing tag. + +```js +const thirdSection = document.querySelectorAll('section')[2]; +assert(thirdSection.lastElementChild.nodeName === 'H2'); +``` + +Your `h2` element's text should be `Cat Form`. + +```js +const thirdSection = document.querySelectorAll('section')[2]; +assert( + thirdSection + .querySelector('h2') + .innerText.toLowerCase() + .replace(/\s+/g, ' ') === 'cat form' +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+--fcc-editable-region-- +
+
+--fcc-editable-region-- +
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-034.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-034.md new file mode 100644 index 0000000000..09a6507b83 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-034.md @@ -0,0 +1,88 @@ +--- +id: 5ef9b03c81a63668521804d6 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Now you will add a web form to collect information from users. + +After the `Cat Form` heading, add a `form` element. + +# --hints-- + +Your `form` element should have an opening tag and closing tag. You may be missing one or both of the required tags, or have them in the wrong order. + +```js +assert(document.querySelector('form') && code.match(/<\/form>/g)); +``` + +Your `form` element tags are not in the correct order. + +```js +const noSpaces = code.replace(/\s/g, ''); +assert(noSpaces.indexOf('
') < noSpaces.indexOf('
')); +``` + +The `form` element nested in the last `section` element should be below the `h2` element. You have the `h2` element and the `form` element in the wrong order. + +```js +assert(document.querySelector('form').previousElementSibling.nodeName === 'H2'); +``` + +The `form` element should have no content. Remove any HTML elements or text between the `form` element's tags. + +```js +assert($('form')[0].innerHTML.trim().length === 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+--fcc-editable-region-- +

Cat Form

+--fcc-editable-region-- +
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-035.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-035.md new file mode 100644 index 0000000000..3407548e86 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-035.md @@ -0,0 +1,116 @@ +--- +id: 5ef9b03c81a63668521804d7 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +The `action` attribute indicates where form data should be sent. For example, `
` tells the browser that the form data should be sent to the path `/submit-url`. + +Add an `action` attribute with the value `https://freecatphotoapp.com/submit-cat-photo` to the `form` element. + +# --hints-- + +Your `form` element should have an opening tag and closing tag in the correct order. You may be missing one or both of the required tags, or have them in the wrong order. + +```js +const noSpaces = code.replace(/\s/g, ''); +assert( + document.querySelector('form') && + code.match(/<\/form>/g) && + noSpaces.indexOf('') +); +``` + +Your `form` element nested in the last `section` element should be below the `h2` element. You have the `h2` element and the `form` element in the wrong order. + +```js +assert(document.querySelector('form').previousElementSibling.nodeName === 'H2'); +``` + +Your `form` element should have no content. Remove any HTML elements or text between the `form` element's tags. + +```js +assert($('form')[0].innerHTML.trim().length === 0); +``` + +Your `form` element does not have an `action` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +const form = document.querySelector('form'); +assert(form.hasAttribute('action')); +``` + +Your `form` element should have an `action` attribute with the value `https://freecatphotoapp.com/submit-cat-photo`. + +```js +const form = document.querySelector('form'); +assert( + form + .getAttribute('action') + .match(/^https:\/\/freecatphotoapp\.com\/submit-cat-photo$/) +); +``` + +Although you have set the `action` attribute to the correct URL, it is recommended to always surround the value of an attribute with quotation marks. + +```js +assert( + !/\ + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+--fcc-editable-region-- +
+
+--fcc-editable-region-- +
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-036.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-036.md new file mode 100644 index 0000000000..13172187b0 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-036.md @@ -0,0 +1,109 @@ +--- +id: 5ef9b03c81a63668521804d8 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +The `input` element is allows you several ways to collect data from a web form. Like anchor (`a`) elements, `input` elements are self-closing and do not need closing tags. + +Nest an `input` element in the `form` element. + +# --hints-- + +Your `form` element should have an opening tag and closing tag in the correct order. You may be missing one or both of the required tags, or have them in the wrong order. + +```js +const noSpaces = code.replace(/\s/g, ''); +assert( + document.querySelector('form') && + code.match(/<\/form>/g) && + noSpaces.indexOf('') +); +``` + +Your `form` element's opening tag should only have an `action` attribute. Remove anything else you may have typed in it. + +```js +assert([...document.querySelector('form').attributes].length < 2); +``` + +You should create an input element. Check the syntax. + +```js +assert(document.querySelector('input')); +``` + +Your `input` element should have an opening tag, but not a closing tag. + +```js +assert(document.querySelector('input') && !code.match(/<\/input\>/g)); +``` + +Your `input` element should be nested within the `form` element. + +```js +assert(document.querySelector('form > input')); +``` + +Your `form` should only contain the `input` element. Remove any HTML elements or text between the `form` element's tags. + +```js +assert( + $('form')[0].children.length === 1 && + $('form')[0].innerText.trim().length === 0 +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+--fcc-editable-region-- +
+
+--fcc-editable-region-- +
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-037.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-037.md new file mode 100644 index 0000000000..af9feb0477 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-037.md @@ -0,0 +1,104 @@ +--- +id: 5efb23e70dc218d6c85f89b1 +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +There are many kinds of inputs you can create using the `type` attribute. You can easily create a password field, reset button, or a control to let users select a file from their computer. + +Create a text field to get text input from a user by adding the `type` attribute with the value `text` to the `input` element. + +# --hints-- + +You have either deleted your `input` element or it has invalid syntax. If you have added an attributes, make sure their values are surrounded by quotation marks. + +```js +assert($('input').length); +``` + +Your `form` element should only contain the `input` element. Remove any extra HTML elements or text between the `form` element's tags. + +```js +assert( + $('form')[0].children.length === 1 && + $('form')[0].innerText.trim().length === 0 +); +``` + +Your `input` element does not have a `type` attribute. with the value `text`. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +assert($('input')[0].hasAttribute('type')); +``` + +Your `input` element should have a `type` attribute with the value `text`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +assert( + $('input')[0] + .getAttribute('type') + .replace(/\s+/g, ' ') + .match(/^text$/i) +); +``` + +Although you have set the `input` element's `type` attribute to the `text`, it is recommended to always surround the value of an attribute with quotation marks. + +```js +assert(!/\ + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-038.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-038.md new file mode 100644 index 0000000000..695f10bd5b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-038.md @@ -0,0 +1,103 @@ +--- +id: 7cf9b03d81a65668421804c3 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +In order for a form's data to be accessed by the locaton specified in the `action` attribute, you must give the text field a `name` attribute and assign it a value to represent the data being submitted. For example, you could use the following syntax for an email address text field: ``. + +Add the `name` attribute with the value `catphotourl` to your text field. + +# --hints-- + +You have either deleted your `input` element or it has invalid syntax. All attributes' values should be surrounded by quotation marks. + +```js +assert($('input').length); +``` + +Your `form` should only contain the `input` element. Remove any HTML additional elements or text within the `form` element. + +```js +assert( + $('form')[0].children.length === 1 && + $('form')[0].innerText.trim().length === 0 +); +``` + +Your `input` element does not have a `name` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +assert($('input')[0].hasAttribute('name')); +``` + +Your `input` element should have a `name` attribute with the value `catphotourl`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +assert( + $('input')[0] + .getAttribute('name') + .match(/^catphotourl$/i) +); +``` + +Although you have set the `input` element's `name` attribute to `catphotourl`, it is recommended to always surround the value of an attribute with quotation marks. + +```js +assert(!/\<\s*input\s+.*\s*=\s*catphotourl/.test(code)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-039.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-039.md new file mode 100644 index 0000000000..28d8e27e87 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-039.md @@ -0,0 +1,104 @@ +--- +id: 5ef9b03c81a63668521804d9 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Placeholder text is used to give people a hint about what kind of information to enter into an input. For example, ``. + +Add the placeholder text `cat photo URL` to your `input` element. + +# --hints-- + +You have either deleted your `input` element or it has invalid syntax. All attributes' values should be surrounded by quotation marks. + +```js +assert($('input').length); +``` + +Your `form` should only contain the `input` element. Remove any HTML additional elements or text within the `form` element. + +```js +assert( + $('form')[0].children.length === 1 && + $('form')[0].innerText.trim().length === 0 +); +``` + +Your `input` element does not have a `placeholder` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +assert($('input')[0].hasAttribute('placeholder')); +``` + +Your `input` element should have a `placeholder` attribute with the value `cat photo URL`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +assert( + $('input')[0] + .getAttribute('placeholder') + .replace(/\s+/g, ' ') + .match(/^cat photo URL$/i) +); +``` + +Although you have set the `input` element's `placeholder` attribute to `cat photo URL`, it is recommended to always surround the value of an attribute with quotation marks. + +```js +assert(!/\<\s*input\s+placeholder\s*=\s*cat\s+photo\s+url/i.test(code)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-040.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-040.md new file mode 100644 index 0000000000..6327c8a4c0 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-040.md @@ -0,0 +1,91 @@ +--- +id: 5ef9b03c81a63668521804db +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +To prevent a user from submitting your form when required information is missing, you need to add the `required` attribute to an `input` element. There's no need to set a value to the `required` attribute. Instead, just add the word `required` to the `input` element, making sure there is space between it and other attributes. + +# --hints-- + +You have either deleted your `input` element or it has invalid syntax. All attributes' values should be surrounded by quotation marks. + +```js +assert($('input').length); +``` + +Your `form` should only contain the `input` element. Remove any HTML additional elements or text within the `form` element. + +```js +assert( + $('form')[0].children.length === 1 && + $('form')[0].innerText.trim().length === 0 +); +``` + +Your `input` element should have a `required` attribute. Remember, you just add the word `required` inside the `input` element's tag. + +```js +assert($('input')[0].hasAttribute('required')); +``` + +A value should not be given to the `required` attribute. + +```js +assert($('input')[0].getAttribute('required') === ''); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-041.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-041.md new file mode 100644 index 0000000000..1f37c8f694 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-041.md @@ -0,0 +1,93 @@ +--- +id: 5ef9b03c81a63668521804da +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Use the `button` element to create a clickable button. For example, `` creates a button with the text `Click Here`. + +Add a `button` element with the text `Submit` below the `input` element. Note the default behavior of clicking a form button with any attributes submits the form to the location specified in the form's `action` attribute. + +# --hints-- + +Your `button` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelector('button')); +``` + +Your `button` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/button\>/)); +``` + +Your `button` element's text should be 'Submit'. You have either omitted the text or have a typo. + +```js +assert(document.querySelector('button').innerText.toLowerCase() === 'submit'); +``` + +Your `button` element should be below the `input` element. You have them in the wrong order. + +```js +const collection = [...document.querySelectorAll('input, button')].map( + (node) => node.nodeName +); +assert(collection.indexOf('INPUT') < collection.indexOf('BUTTON')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-042.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-042.md new file mode 100644 index 0000000000..276348900e --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-042.md @@ -0,0 +1,101 @@ +--- +id: 5efb2c990dc218d6c85f89b2 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Even through you added your button below the text input, they appear next to each other on the page. That's because both `input` and `button` elements are inline elements, which don't appear on new lines. + +You learned previously that the button submits the form by default, but you can explicitly add the `type` attribute with the value `submit` to it to make it clearer. Go ahead and do this to specify this button should submit the form. + +# --hints-- + +Your `button` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelector('button')); +``` + +Your `button` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/button\>/)); +``` + +Your `button` element does not have a `type` attribute. Check that there is a space after the opening tag's name. + +```js +assert($('button')[0].hasAttribute('type')); +``` + +Your `button` element should have a `type` attribute with the value `submit`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +assert( + $('button')[0] + .getAttribute('type') + .match(/^submit$/i) +); +``` + +Although you have set the `button` element's `type` attribute to `submit`, it is recommended to always surround the value of an attribute with quotation marks. + +```js +assert(!/\<\s*button\s+type\s*=\s*submit/i.test(code)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+ +--fcc-editable-region-- + +--fcc-editable-region-- +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-043.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-043.md new file mode 100644 index 0000000000..18539d4809 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-043.md @@ -0,0 +1,135 @@ +--- +id: 5ef9b03c81a63668521804dc +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +You can use radio buttons for questions where you want only one answer out of multiple options. + +Here is an example of a radio button with the option of `cat`: ` cat`. Remember that `input` elements are self-closing. + +Before the text input, add a radio button with the option `Indoor`. + +# --hints-- + +You should create an input element for your radio button. Check the syntax. + +```js +assert($('form > input').length >= 2); +``` + +Your `input` element should have an opening tag, but not a closing tag. + +```js +assert($('form > input') && !code.match(/<\/input\>/g)); +``` + +You should only have added one input element for your radio button. Remove any extras. + +```js +assert($('form > input').length === 2); +``` + +Your new `input` element should be above the existing `input` with `type` attribute set to `text`. You have them in the wrong order. + +```js +const existingInputElem = document.querySelector('form > input[type="text"]'); +assert( + existingInputElem && + existingInputElem.previousElementSibling.nodeName === 'INPUT' +); +``` + +Your new `input` element does not have a `type` attribute. Check that there is a space after the opening tag's name. + +```js +assert($('input')[0].hasAttribute('type')); +``` + +Your new `input` element should have a `type` attribute with the value `radio`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +assert( + $('input')[0] + .getAttribute('type') + .match(/^radio$/i) +); +``` + +Although you have set the new `input` element's `type` attribute to `radio`, it is recommended to always surround the value of an attribute with quotation marks. + +```js +assert(!/\<\s*input\s+type\s*=\s*radio/i.test(code)); +``` + +The `radio` button's ` Indoor` text should be located after it instead of before it. + +```js +const radioInputElem = $('input')[0]; +assert(!radioInputElem.previousSibling.nodeValue.match(/Indoor/i)); +``` + +The text ` Indoor` should be located directly to the right of your `radio` button. Make sure there is a space between the element and the text. You have either omitted the text or have a typo. + +```js +const radioInputElem = $('input')[0]; +assert( + radioInputElem.nextSibling.nodeValue.replace(/\s+/g, ' ').match(/ Indoor/i) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- + +--fcc-editable-region-- + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-044.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-044.md new file mode 100644 index 0000000000..64581e5302 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-044.md @@ -0,0 +1,104 @@ +--- +id: 5ef9b03c81a63668521804dd +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +`label` elements are used to help associate the text for an `input` element with the input element itself (especially for assistive technologies like screen readers). For example, `` makes it so clicking the word `cat` also selects the corresponding radio button. + +Nest your `radio` button inside a `label` element. + +# --hints-- + +You should make sure the radio button is still present. + +```js +assert($('input[type="radio"]')[0]); +``` + +The text ` Indoor` should be located directly to the right of your `radio` button. Make sure there is a space between the element and the text. You have either omitted the text or have a typo. + +```js +const radioInputElem = $('input')[0]; +assert( + radioInputElem.nextSibling.nodeValue.replace(/\s+/g, ' ').match(/ Indoor/i) +); +``` + +Your `label` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelector('label')); +``` + +Your `label` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/label\>/)); +``` + +Your radio button and its text should all be located between the opening and closing tags of the `label` element. + +```js +const labelChildNodes = [...$('form > label')[0].childNodes]; +assert( + labelChildNodes.filter((childNode) => childNode.nodeName === 'INPUT').length +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- + Indoor +--fcc-editable-region-- + + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-045.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-045.md new file mode 100644 index 0000000000..bb22e1e44b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-045.md @@ -0,0 +1,89 @@ +--- +id: 5ef9b03c81a63668521804df +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +The `id` attribute is used to identify specific HTML elements. Each `id` attribute's value must be unique all other `id` values for the entire page. + +Add an `id` attribute with the value `indoor` to the radio button. When elements have multiple attributes, the order of the attributes doesn't matter. + +# --hints-- + +Your radio button should still be located between the opening and closing tags of the `label` element. + +```js +const labelChildNodes = [...$('form > label')[0].childNodes]; +assert( + labelChildNodes.filter((childNode) => childNode.nodeName === 'INPUT').length +); +``` + +Your radio button should have an `id` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +assert($('input')[0].hasAttribute('id')); +``` + +Your radio element should have an `id` attribute with the value `indoor`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +assert($('input')[0].id.match(/^indoor$/)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- + +--fcc-editable-region-- + + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-046.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-046.md new file mode 100644 index 0000000000..1ff7a58a2d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-046.md @@ -0,0 +1,107 @@ +--- +id: 5f05a1d8e233dff4a68508d8 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Nest a another radio button with the option `Outdoor` in a new `label` element. The new radio button should be placed after the first one. Also, set its `id` attribute value to `outdoor`. + +# --hints-- + +You will need to add a new `label` element in which to nest your new radio button. Make sure it has both an opening and closing tag. + +```js +assert( + document.querySelectorAll('label').length === 2 && + code.match(/<\/label\>/g).length === 2 +); +``` + +The text ` Outdoor` should be located directly to the right of your new `radio` button. Make sure there is a space between the element and the text. You have either omitted the text or have a typo. + +```js +const radioButtons = [...$('input')]; +assert( + radioButtons.filter((btn) => + btn.nextSibling.nodeValue.replace(/\s+/g, ' ').match(/ Outdoor/i) + ).length +); +``` + +Your new radio button and associated label should be below the first one. You have them in the wrong order. + +```js +const collection = [ + ...document.querySelectorAll('input[type="radio"]') +].map((node) => node.nextSibling.nodeValue.replace(/\s+/g, '')); +assert(collection.indexOf('Indoor') < collection.indexOf('Outdoor')); +``` + +Your new radio button should have an `id` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +assert($('input')[1].hasAttribute('id')); +``` + +Your new radio element should have an `id` attribute with the value `outdoor`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +assert($('input')[1].id.match(/^outdoor$/)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- + +--fcc-editable-region-- + + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-047.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-047.md new file mode 100644 index 0000000000..ec264414c6 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-047.md @@ -0,0 +1,98 @@ +--- +id: 5ef9b03c81a63668521804de +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Notice that both radio buttons can be selected at the same time. To make it so selecting one radio button automatically deselects the other, both buttons must have a `name` attribute with the same value. + +Add the `name` attribute with the value `indoor-outdoor` to both radio buttons. + +# --hints-- + +Both radio buttons should still be located between opening and closing `label` element tags. + +```js +const labelChildNodes = [...document.querySelectorAll('form > label')].map( + (node) => node.childNodes +); +assert( + labelChildNodes.filter((childNode) => childNode[0].nodeName === 'INPUT') + .length === 2 +); +``` + +Both radio buttons should have a `name` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +const radioButtons = [...document.querySelectorAll('input[type="radio"]')]; +assert(radioButtons.every((btn) => btn.hasAttribute('name'))); +``` + +Both radio buttons should have a `name` attribute with the value `indoor-outdoor`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +const radioButtons = [...$('input[type="radio"]')]; +assert( + radioButtons.every((btn) => + btn.getAttribute('name').match(/^indoor-outdoor$/) + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- + + +--fcc-editable-region-- + + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-048.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-048.md new file mode 100644 index 0000000000..d78f60d765 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-048.md @@ -0,0 +1,101 @@ +--- +id: 5f1a80975fc4bcae0edb3497 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +If you select the `Indoor` radio button and submit the form, the form data for the button is based on its `name` and `value` attributes. Since your radio buttons do not have a `value` attribute, the form data will include `indoor-outdoor=on`, which is not useful when you have multiple buttons. + +Add a `value` attribute to both radio buttons. For convenience, set the button's `value` attribute to the same value as its `id` attribute. + +# --hints-- + +Both radio buttons should still be located between opening and closing `label` element tags. + +```js +const labelChildNodes = [...document.querySelectorAll('form > label')].map( + (node) => node.childNodes +); +assert( + labelChildNodes.filter((childNode) => childNode[0].nodeName === 'INPUT') + .length === 2 +); +``` + +Both radio buttons should have a `value` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +const radioButtons = [...document.querySelectorAll('input[type="radio"]')]; +assert(radioButtons.every((btn) => btn.hasAttribute('value'))); +``` + +The `Indoor` radio button's `value` attribute should be set to `indoor`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +const indoorRadioButton = document.querySelector('#indoor'); +assert(indoorRadioButton.getAttribute('value').match(/^indoor$/)); +``` + +The `Outdoor` radio button's `value` attribute should be set to `outdoor`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +const outdoorRadioButton = document.querySelector('#outdoor'); +assert(outdoorRadioButton.getAttribute('value').match(/^outdoor$/)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- + + +--fcc-editable-region-- + + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-049.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-049.md new file mode 100644 index 0000000000..2f0f4d6aeb --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-049.md @@ -0,0 +1,100 @@ +--- +id: 5ef9b03c81a63668521804e1 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +The `fieldset` element is used to group related inputs and labels together in a web form. `fieldset` elements are block-level elements, meaning that they appear on a new line. + +Nest the `Indoor` and `Outdoor` radio buttons within a `fieldset` element, and don't forget to indent the buttons. + +# --hints-- + +Both radio buttons should still be located between opening and closing `label` element tags. + +```js +const labelChildNodes = [...$('label')].map((node) => [...node.childNodes]); +assert( + labelChildNodes.filter((childNode) => childNode[0].nodeName === 'INPUT') + .length === 2 +); +``` + +Your `fieldset` element should have an opening tag. Opening tags have the following syntax: ``. + +```js +assert(document.querySelector('fieldset')); +``` + +Your `fieldset` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/fieldset\>/)); +``` + +Both radio button and associated labels should be between the opening and closing tags of the `fieldset` element. + +```js +const radioButtons = [...$('input[type="radio"]')]; +assert( + radioButtons.every((btn) => btn.parentNode.parentNode.nodeName === 'FIELDSET') +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- + + +--fcc-editable-region-- + + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-050.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-050.md new file mode 100644 index 0000000000..b7c1eb417b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-050.md @@ -0,0 +1,105 @@ +--- +id: 5f0d48e7b435f13ab6550051 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +The `legend` element acts as a caption for the content in the `fieldset` element. It gives users context about what they should enter into that part of the form. + +Add a `legend` element with the text `Is your cat an indoor or outdoor cat?` above both of the radio buttons. + +# --hints-- + +Your `legend` element should have an opening tag. Opening tags have the following syntax: ``. + +```js +assert(document.querySelector('legend')); +``` + +Your `legend` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/legend\>/)); +``` + +Your `legend` element should be the first element right below `fieldset` element's opening tag and before the first radio button's opening `label` tag. It is not in the correct position. + +```js +const fieldsetElem = document.querySelector('fieldset'); +const fieldsetElemChildren = fieldsetElem.children; +assert( + fieldsetElem.firstElementChild.nodeName === 'LEGEND' && + fieldsetElemChildren[1].nodeName === 'LABEL' && + fieldsetElemChildren[1].children[0].nodeName === 'INPUT' && + fieldsetElemChildren[1].children[0].id === 'indoor' +); +``` + +Your `legend` element's text should be `Is your cat an indoor or outdoor cat?`. You have either omitted the text, have a typo, or it is not between the `legend` element's opening and closing tags. + +```js +const extraSpacesRemoved = document + .querySelector('legend') + .innerText.replace(/\s+/g, ' '); +assert(extraSpacesRemoved.match(/Is your cat an indoor or outdoor cat\??$/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+--fcc-editable-region-- + + +--fcc-editable-region-- +
+ + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-051.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-051.md new file mode 100644 index 0000000000..8e62ddb2a3 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-051.md @@ -0,0 +1,128 @@ +--- +id: 5f0d4ab1b435f13ab6550052 +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Next, you are going to add some new form `input` elements, so add another `fieldset` element directly below the current `fieldset` element. + +# --hints-- + +Your new `fieldset` element should have an opening tag. Opening tags have this syntax: ``. + +```js +assert(document.querySelectorAll('fieldset').length >= 2); +``` + +You should only add one opening `fieldset` tag. Please remove any extras. + +```js +assert(document.querySelectorAll('fieldset').length === 2); +``` + +Your new `fieldset` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/fieldset>/g).length >= 2); +``` + +You should only add one closing `fieldset` tag. Please remove any extras. + +```js +assert(code.match(/<\/fieldset>/g).length === 2); +``` + +The second `fieldset` element should not be nested in the first `fieldset` element. + +```js +const childrenOf1stFieldset = [ + ...document.querySelector('form > fieldset').children +]; +const foundElems = childrenOf1stFieldset.filter((child) => { + return child.nodeName === 'FIELDSET'; +}); +assert(foundElems.length === 0); +``` + +Both `fieldset` elements should be above the text field and its associated `label` element. They are out of order. + +```js +const formChildren = $('form')[0].children; +assert( + formChildren[0].nodeName === 'FIELDSET' && + formChildren[1].nodeName === 'FIELDSET' && + formChildren[2] && + formChildren[2].nodeName === 'INPUT' && + formChildren[2].getAttribute('type') === 'text' +); +``` + +Your new `fieldset` element should be below the existing `fieldset` element. You have them in the wrong order. + +```js +const fieldsetChildren = [...document.querySelectorAll('fieldset')].map( + (elem) => elem.children +); +assert(fieldsetChildren[0].length > fieldsetChildren[1].length); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- +
+ Is your cat an indoor or outdoor cat? + + +
+ + +--fcc-editable-region-- +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-052.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-052.md new file mode 100644 index 0000000000..c1e1d93a03 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-052.md @@ -0,0 +1,114 @@ +--- +id: 5f0d4d04b435f13ab6550053 +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Add a `legend` element with the text `What's your cat's personality?` inside the second `fieldset` element. + +# --hints-- + +You have either deleted the second `fieldset` element or it is missing an opening tag or closing tag." + +```js +assert( + document.querySelectorAll('fieldset').length === 2 && + code.match(/<\/fieldset>/g).length === 2 +); +``` + +Your `legend` element should have an opening tag. Opening tags have this syntax: ``. + +```js +const secondFieldset = $('fieldset')[1]; +assert( + secondFieldset && + [...secondFieldset.children].filter((child) => child.nodeName === 'LEGEND') + .length +); +``` + +Your `legend` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/legend\>/g).length === 2); +``` + +The `legend` element should have the text `What's your cat's personality?`. You have either omitted the text or have a typo. + +```js +const secondFieldset = $('fieldset')[1]; +assert( + secondFieldset && + [...secondFieldset.children].filter((child) => { + const extraSpacesRemoved = child.innerText.replace(/\s+/g, ' '); + return ( + child.nodeName === 'LEGEND' && + extraSpacesRemoved.match(/What's your cat's personality\??$/i) + ); + }).length +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+--fcc-editable-region-- +
+
+--fcc-editable-region-- + + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-053.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-053.md new file mode 100644 index 0000000000..99ca091cba --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-053.md @@ -0,0 +1,128 @@ +--- +id: 5ef9b03c81a63668521804e2 +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Forms commonly use checkboxes for questions that may have more than one answer. For example, here's a checkbox with the option of `tacos`: ` tacos`. + +Under the `legend` element you just added, add an `input` with its `type` attribute set to `checkbox` and give it the option of `Loving`. + +# --hints-- + +The `input` element for your checkbox should have an opening tag, but not a closing tag. + +```js +assert($('fieldset > input') && !code.match(/<\/input\>/g)); +``` + +You should only have added one input element for your checkbox. Remove any extras. + +```js +assert($('fieldset > input').length === 1); +``` + +Your new `input` element should be below the `legend` element with the text `What's your cat's personality?`. You have them in the wrong order. + +```js +const existingLegendElem = $('fieldset > legend')[1]; +assert( + existingLegendElem && + existingLegendElem.nextElementSibling.nodeName === 'INPUT' +); +``` + +Your new `input` element does not have a `type` attribute. Check that there is a space after the opening tag's name. + +```js +assert($('fieldset > input')[0].hasAttribute('type')); +``` + +Your new `input` element should have a `type` attribute with the value `checkbox`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +assert( + $('fieldset > input')[0] + .getAttribute('type') + .match(/^checkbox$/i) +); +``` + +Although you have set the new `input` element's `type` attribute to `checkbox`, it is recommended to always surround the value of an attribute with quotation marks. + +```js +assert(!/\<\s*input\s+type\s*=\s*checkbox/i.test(code)); +``` + +The text ` Loving` should be located directly to the right of your checkbox. Make sure there is a space between the element and the text. You have either omitted the text or have a typo. + +```js +const checkboxInputElem = $('input[type="checkbox"]')[0]; +assert( + checkboxInputElem.nextSibling.nodeValue.replace(/\s+/g, ' ').match(/ Loving/i) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+--fcc-editable-region-- + What's your cat's personality? +--fcc-editable-region-- +
+ + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-054.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-054.md new file mode 100644 index 0000000000..833427a5fc --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-054.md @@ -0,0 +1,86 @@ +--- +id: 5efc54138d6a74d05e68af76 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Add an `id` attribute with the value `loving` to the checkbox input. + +# --hints-- + +Your checkbox should have an `id` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +assert($('input[type="checkbox"]')[0].hasAttribute('id')); +``` + +Your checkbox should have an `id` attribute with the value `loving`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +assert($('input[type="checkbox"]')[0].id.match(/^loving$/)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? +--fcc-editable-region-- + Loving +--fcc-editable-region-- +
+ + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-055.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-055.md new file mode 100644 index 0000000000..0de2ef123c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-055.md @@ -0,0 +1,136 @@ +--- +id: 5efc4f528d6a74d05e68af74 +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +There's another way to associate an `input` element's text with the element itself. You can nest the text within a `label` element and add a `for` attribute with the same value as the `input` element's `id` attribute. + +Associate the text `Loving` with the checkbox by only nesting the text `Loving` in a `label` element and place it to the right side of the checkbox `input` element. + +# --hints-- + +You should make sure the checkbox is still present. + +```js +assert($('input[type="checkbox"]')[0]); +``` + +Your checkbox should still have an `id` attribute with the value `loving`. You may have removed the attribute or changed its value. + +```js +assert($('input[type="checkbox"]')[0].id === 'loving'); +``` + +The text ` Loving` should no longer be located directly to the right of your checkbox. It should be wrapped in a `label` element. + +```js +const checkboxInputElem = $('input[type="checkbox"]')[0]; +assert( + !checkboxInputElem.nextSibling.nodeValue + .replace(/\s+/g, ' ') + .match(/ Loving/i) +); +``` + +You will need to add a new `label` element in which to nest the text `Loving`. Make sure it has both an opening and closing tag. + +```js +assert( + document.querySelectorAll('label').length === 3 && + code.match(/<\/label\>/g).length === 3 +); +``` + +The new `label` element should be located directly to the right of your checkbox. Make sure there is a space between the two elements. + +```js +const checkboxInputElem = $('input[type="checkbox"]')[0]; +assert(checkboxInputElem.nextElementSibling.nodeName === 'LABEL'); +``` + +The new `label` element does not have a `for` attribute. Check that there is a space after the opening tag's name. + +```js +const labelElem = $('input[type="checkbox"]')[0].nextElementSibling; +assert(labelElem.hasAttribute('for')); +``` + +The new `label` element should have a `for` attribute with the value `loving`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +const labelElem = $('input[type="checkbox"]')[0].nextElementSibling; +assert(labelElem.getAttribute('for').match(/^loving$/)); +``` + +The text `Loving` should be nested within the new `label` element. You have either omitted the text or have a typo. + +```js +const labelElem = document.querySelector('label[for="loving"]'); +assert(labelElem.textContent.replace(/\s/g, '').match(/Loving/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? +--fcc-editable-region-- + Loving +--fcc-editable-region-- +
+ + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-056.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-056.md new file mode 100644 index 0000000000..2b47442e63 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-056.md @@ -0,0 +1,98 @@ +--- +id: 5efc518e8d6a74d05e68af75 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Add the `name` attribute with the value `personality` to the checkbox `input` element. + +While you won't notice this in the browser, doing this makes it easier for a server to process your web form, especially when there are multiple checkboxes. + +# --hints-- + +You should make sure the checkbox is still present. + +```js +assert($('input[type="checkbox"]')[0]); +``` + +The checkbox `input` element does not have a `name` attribute. Check that there is a space after the opening tag's name. + +```js +assert($('input[type="checkbox"]')[0].hasAttribute('name')); +``` + +The checkbox `input` element should have a `name` attribute with the value `personality`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +assert( + $('input[type="checkbox"]')[0] + .getAttribute('name') + .match(/^personality$/) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? +--fcc-editable-region-- + +--fcc-editable-region-- +
+ + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-057.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-057.md new file mode 100644 index 0000000000..32afe5dd1a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-057.md @@ -0,0 +1,122 @@ +--- +id: 5ef9b03c81a63668521804e3 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Add another checkbox after the one you just added. The `id` attribute value should be `lazy` and the `name` attribute value should be the same as the last checkbox. + +Also add a `label` element to the right of the new checkbox with the text `Lazy`. Make sure to associate the `label` element with the new checkbox using the `for` attribute. + +# --hints-- + +You need to add a new checkbox. + +```js +assert($('input[type="checkbox"]').length === 2); +``` + +Your new checkbox should have an `id` attribute with the value `lazy` and a `name` attribute with the value `personality`. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +const checkboxes = [...$('input[type="checkbox"]')]; +assert( + checkboxes.some( + (checkbox) => + checkbox.id === 'lazy' && checkbox.getAttribute('name') === 'personality' + ) +); +``` + +Your new checkbox should be after the first one. You have them in the wrong order. + +```js +const checkboxes = [...$('input[type="checkbox"]')].map( + (checkbox) => checkbox.id +); +assert(checkboxes.indexOf('loving') < checkboxes.indexOf('lazy')); +``` + +On the right side of your new checkbox, there should be `label` element with the text `Lazy`. + +```js +const nextElementSibling = $('input[type="checkbox"]')[1].nextElementSibling; +assert( + nextElementSibling.nodeName === 'LABEL' && + nextElementSibling.innerText.replace(/\s+/g, '').match(/^Lazy$/i) +); +``` + +The new `label` should have a `for` attribute with the same value as the `id` attribute of the new checkbox. You have either omitted the value or have a typo. + +```js +assert( + $('input[type="checkbox"]')[1].nextElementSibling.getAttribute('for') === + 'lazy' +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? +--fcc-editable-region-- + +--fcc-editable-region-- +
+ + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-058.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-058.md new file mode 100644 index 0000000000..750e6f11a5 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-058.md @@ -0,0 +1,124 @@ +--- +id: 5efc575c8d6a74d05e68af77 +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Add a final checkbox after the previous one with an `id` attribute value of `energetic`. The `name` and attribute should be the same as the last checkbox. + +Also add a `label` element to the right of the new checkbox with text `Energetic`. Make sure to associate the `label` element with the new checkbox. + +# --hints-- + +You need to add a new checkbox. + +```js +assert($('input[type="checkbox"]').length === 3); +``` + +Your new checkbox should have an `id` attribute with the value `energetic` and a `name` attribute with the value `personality`. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +const checkboxes = [...$('input[type="checkbox"]')]; +assert( + checkboxes.some( + (checkbox) => + checkbox.id === 'energetic' && + checkbox.getAttribute('name') === 'personality' + ) +); +``` + +Your new checkbox should be after the first one. You have them in the wrong order. + +```js +const checkboxes = [...$('input[type="checkbox"]')].map( + (checkbox) => checkbox.id +); +assert(checkboxes.indexOf('lazy') < checkboxes.indexOf('energetic')); +``` + +On the right side of your new checkbox, there should be `label` element with the text `Energetic`. + +```js +const nextElementSibling = $('input[type="checkbox"]')[2].nextElementSibling; +assert( + nextElementSibling.nodeName === 'LABEL' && + nextElementSibling.innerText.replace(/\s+/g, '').match(/^Energetic$/i) +); +``` + +The new `label` should have a `for` attribute with the same value as the `id` attribute of the new checkbox. You have either omitted the value or have a typo. + +```js +assert( + $('input[type="checkbox"]')[2].nextElementSibling.getAttribute('for') === + 'energetic' +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? +--fcc-editable-region-- + + +--fcc-editable-region-- +
+ + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-059.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-059.md new file mode 100644 index 0000000000..38ffcd2935 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-059.md @@ -0,0 +1,106 @@ +--- +id: 5f1a89f1190aff21ae42105a +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +Like radio buttons, form data for selected checkboxes are `name` / `value` attribute pairs. While the `value` attribute is optional, it's best practice to include it with any checkboxes or radio buttons on the page. + +Add a `value` attribute to each checkbox. For convenience, set each checkbox's `value` attribute to the same value as its `id` attribute. + +# --hints-- + +All three checkboxes should have a `value` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. + +```js +const checkboxes = [...document.querySelectorAll('input[type="checkbox"]')]; +assert(checkboxes.every((checkbox) => checkbox.hasAttribute('value'))); +``` + +The `value` attribute of the `Loving` checkbox should be set to `loving`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +const lovingCheckbox = document.querySelector('#loving'); +assert(lovingCheckbox.getAttribute('value').match(/^loving$/)); +``` + +The `value` attribute of the `Lazy` checkbox should be set to `lazy`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +const lazyCheckbox = document.querySelector('#lazy'); +assert(lazyCheckbox.getAttribute('value').match(/^lazy$/)); +``` + +The `value` attribute of the `Energetic` checkbox should be set to `energetic`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks. + +```js +const energeticCheckbox = document.querySelector('#energetic'); +assert(energeticCheckbox.getAttribute('value').match(/^energetic$/)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- +
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? + + + +
+--fcc-editable-region-- + + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-060.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-060.md new file mode 100644 index 0000000000..6ecff52e87 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-060.md @@ -0,0 +1,117 @@ +--- +id: 5ef9b03c81a63668521804e5 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +In order to make a checkbox checked or radio button selected by default, you need to add the `checked` attribute to it. There's no need to set a value to the `checked` attribute. Instead, just add the word `checked` to the `input` element, making sure there is space between it and other attributes. + +Make the first radio button and the first checkbox selected by default. + +# --hints-- + +Make sure there still are two radio buttons and three checkboxes nested in their respective `fieldset` elements. + +```js +assert( + $('input[type="radio"]').length === 2 && + $('fieldset > input[type="checkbox"]').length === 3 +); +``` + +The first radio button is missing the `checked` attribute. + +```js +assert($('input[type="radio"]')[0].hasAttribute('checked')); +``` + +The second radio button should not have the `checked` attribute. + +```js +assert(!$('input[type="radio"]')[1].hasAttribute('checked')); +``` + +The first checkbox is missing the `checked` attribute. + +```js +assert($('input[type="checkbox"]')[0].hasAttribute('checked')); +``` + +The second checkbox should not have the `checked` attribute. + +```js +assert(!$('input[type="checkbox"]')[1].hasAttribute('checked')); +``` + +The third checkbox should not have the `checked` attribute. + +```js +assert(!$('input[type="checkbox"]')[2].hasAttribute('checked')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- +
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? + + + +
+--fcc-editable-region-- + + +
+
+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-061.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-061.md new file mode 100644 index 0000000000..ca63b06807 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-061.md @@ -0,0 +1,102 @@ +--- +id: 5ef9b03c81a63668521804e7 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Now you will add a footer section to the page. + +After the `main` element, add a `footer` element. + +# --hints-- + +You have either deleted the `main` element or it is missing an opening tag or closing tag." + +```js +assert(document.querySelector('main') && code.match(/<\/main>/)); +``` + +Your `footer` element should have an opening tag. Opening tags have the following syntax: ``. + +```js +assert(document.querySelector('footer')); +``` + +Your `footer` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/<\/footer\>/)); +``` + +Your `footer` element should the below the closing `main` element tag. You have it put it somewhere else. + +```js +assert(document.querySelector('main').nextElementSibling.nodeName === 'FOOTER'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? + + + +
+ + +
+
+--fcc-editable-region-- +
+ + +--fcc-editable-region-- +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-062.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-062.md new file mode 100644 index 0000000000..92e06b2814 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-062.md @@ -0,0 +1,104 @@ +--- +id: 5ef9b03c81a63668521804e8 +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Nest a `p` element with the text `No Copyright - freeCodeCamp.org` within the `footer` element. + +# --hints-- + +You have either deleted the `footer` element or it is missing an opening tag or closing tag." + +```js +assert(document.querySelector('footer') && code.match(/<\/footer>/)); +``` + +Your `footer` element should have a `p` element. Make sure to added an opening tag and closing tag for the `p` element. + +```js +assert(document.querySelector('footer > p')); +``` + +Your `footer` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +const pElemClosingTags = code.match(/<\/p\>/g); +assert(pElemClosingTags && pElemClosingTags.length === 2); +``` + +Your `p` element's text should be `No Copyright - freeCodeCamp.org`. You have either omitted the text, have a typo, or it is not between the `legend` element's opening and closing tags. + +```js +const extraSpacesRemoved = $('footer > p')[0].innerText.replace(/\s+/g, ' '); +assert(extraSpacesRemoved.match(/No Copyright - freeCodeCamp\.org$/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? + + + +
+ + +
+
+
+--fcc-editable-region-- +
+
+--fcc-editable-region-- + + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-063.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-063.md new file mode 100644 index 0000000000..7d044f84d7 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-063.md @@ -0,0 +1,118 @@ +--- +id: 5ef9b03c81a63668521804e9 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Make the text `freeCodeCamp.org` into a link by enclosing it in an anchor (`a`) element. The `href` attribute should be set to `https://www.freecodecamp.org`. + +# --hints-- + +Your anchor (`a`) element should be nested within the `footer` element. Make sure to added an opening tag and closing tag for the anchor (`a`) element. + +```js +assert($('footer > p > a').length); +``` + +Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +const aElemClosingTags = code.match(/<\/a\>/g); +assert(aElemClosingTags && aElemClosingTags.length === 3); +``` + +Your anchor (`a`) element should have an `href` attribute with the value `https://www.freecodecamp.org`. You may have omitted the attribute/value, or have a typo. + +```js +const nestedAnchor = $('footer > p > a')[0]; +assert(nestedAnchor.getAttribute('href') === 'https://www.freecodecamp.org'); +``` + +The link's text should be `freeCodeCamp.org`. You have either omitted the text or have a typo. + +```js +const nestedAnchor = $('footer > p > a')[0]; +assert( + nestedAnchor.innerText.toLowerCase().replace(/\s+/g, ' ') === + 'freecodecamp.org' +); +``` + +After nesting the anchor (`a`) element, the only `p` element content visible in the browser should be `No Copyright - freeCodeCamp.org`. Double check the text, spacing, or punctuation of both the `p` and nested anchor element. + +```js +const pText = $('footer > p')[0].innerText.toLowerCase().replace(/\s+/g, ' '); +assert(pText.match(/^no copyright - freecodecamp.org$/)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? + + + +
+ + +
+
+
+
+

+--fcc-editable-region-- + No Copyright - freeCodeCamp.org +--fcc-editable-region-- +

+
+ + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-064.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-064.md new file mode 100644 index 0000000000..d911e6a0f4 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-064.md @@ -0,0 +1,108 @@ +--- +id: 5ef9b03c81a63668521804ea +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Notice that everything you've added to the page so far is inside the `body` element. All page content elements that should be rendered to the page go inside the `body` element. However, other important information goes inside the `head` element. + +Add a `head` element just above the `body` element. + +# --hints-- + +You have either deleted the `body` element or it is missing an opening tag or closing tag. + +```js +assert(document.querySelector('body') && code.match(/<\/body>/)); +``` + +Your `head` element should have an opening tag. Opening tags have the following syntax: ``. + +```js +assert(code.match(/\/)); +``` + +Your `head` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/\<\/head\>/)); +``` + +Your `head` element should be above the opening `body` element tag. You have it put it somewhere else. + +```js +const noSpaces = code.replace(/\s/g, ''); +assert(noSpaces.match(/\<\/head\>\/)); +``` + +# --seed-- + +## --seed-contents-- + +```html + +--fcc-editable-region-- + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? + + + +
+ + +
+
+
+ + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-065.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-065.md new file mode 100644 index 0000000000..84c27bc5a6 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-065.md @@ -0,0 +1,110 @@ +--- +id: 5ef9b03c81a63668521804eb +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +The `title` element determines what browsers show in the title bar or tab for the page. + +Add a `title` element within the `head` element. Its text should be `CatPhotoApp`. + +# --hints-- + +You have either deleted the `head` element or it is missing an opening tag or closing tag. + +```js +assert(code.match(/\/) && code.match(/\<\/head\>/)); +``` + +Your `title` element should be nested in the `head` element. Make sure to added an opening tag and closing tag for the `title` element. + +```js +const noSpaces = code.replace(/\s/g, ''); +assert(noSpaces.match(/\\.*\<\/title\>\<\/head\>/)); +``` + +Your `title` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/\<\/title\>/)); +``` + +Your `title` element's text should be `CatPhotoApp`. You have either omitted the text or have a typo. + +```js +assert(document.title && document.title.toLowerCase() === 'catphotoapp'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +--fcc-editable-region-- + + +--fcc-editable-region-- + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? + + + +
+ + +
+
+
+ + + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-066.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-066.md new file mode 100644 index 0000000000..939eb8e559 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-066.md @@ -0,0 +1,105 @@ +--- +id: 5ef9b03c81a63668521804ec +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Notice that the entire contents of the page are nested within an `html` element. All other elements must be descendants of this `html` element. + +Add the `lang` attribute with the value `en` to the opening `html` tag to specify that the language of the page is English. + +# --hints-- + +You have either deleted the `html` element or it is missing an opening tag or closing tag. + +```js +assert(code.match(/\/) && code.match(/\<\/html\>/)); +``` + +Your `html` element should have a `lang` attribute with the value `en`. You may have omitted the attribute/value, or have a typo. + +```js +const extraSpacesRemoved = code.replace(/\s+/g, ' '); +assert(extraSpacesRemoved.match(/\/)); +``` + +Although you have set the `html` element's `lang` attribute to `en`, it is recommended to always surround the value of an attribute with quotation marks. + +```js +assert(!/\<\s*html\s+lang\s*=en/i.test(code)); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- + + CatPhotoApp + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? + + + +
+ + +
+
+
+ + + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-067.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-067.md new file mode 100644 index 0000000000..c34e9e3f37 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/step-067.md @@ -0,0 +1,166 @@ +--- +id: 5ef9b03c81a63668521804ee +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +All pages should begin with ``. This special string is known as a declaration and ensures the browser tries to meet industry-wide specifications. + +To complete this project, add this declaration as the first line of the code. + +# --hints-- + +Your code should begin with the declaration ``. You may have omitted the declaration, have a typo, or it is not the first line of code. + +```js +assert(code.match(/\<\s*!DOCTYPE\s+html\s*\>/)); +``` + +Your `` must be located at the top of the document. + +```js +const noSpaces = code.replace(/\s/g, ''); +assert(noSpaces.match(/^\<\!DOCTYPEhtml\>\ + + CatPhotoApp + +--fcc-editable-region-- + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? + + + +
+ + +
+
+
+ + + +``` + +# --solutions-- + +```html + + + + CatPhotoApp + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? + + + +
+ + +
+
+
+ + + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-001.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-001.md deleted file mode 100644 index 5ac3212ae2..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-001.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6996a -title: Part 1 -challengeType: 0 -dashedName: part-1 ---- - -# --description-- - -By now, you should be familiar with the basic elements an HTML page should have. - -Set up your code with a `DOCTYPE` declaration, an `html` element, a `head` element, and a `body` element. - -# --hints-- - -Your code should have a `` declaration. - -```js -assert(code.match(//i)); -``` - -Your code should have an `html` element. - -```js -assert(document.querySelectorAll('html').length === 1); -``` - -Your code should have a `head` element within the `html` element. - -```js -assert(document.querySelectorAll('head').length === 1); -``` - -Your code should have a `body` element within the `html` element. - -```js -assert(document.querySelectorAll('body').length === 1); -``` - -Your `head` element should come before your `body` element. - -```js -assert(document.querySelector('body').previousElementSibling.tagName === 'HEAD'); -``` - -# --seed-- - -## --seed-contents-- - -```html ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-002.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-002.md deleted file mode 100644 index 249c87c179..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-002.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6996b -title: Part 2 -challengeType: 0 -dashedName: part-2 ---- - -# --description-- - -Within the `head` element, add a `meta` tag which sets the `charset` to `UTF-8`, and a `title` element with the value `Rothko`. - -Within the `body` element, add an `img` element with a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`. -# --hints-- - -Your code should have a `meta` tag. - -```js -assert(document.querySelectorAll('meta').length === 1); -``` - -The `meta` tag should set the `charset` to `UTF-8`. - -```js -assert(document.querySelector('meta').getAttribute('charset') === 'UTF-8'); -``` - -Your code should have a `title` element. - -```js -assert(document.querySelectorAll('title').length === 1); -``` - -The `title` should be `Rothko`. - -```js -assert(document.querySelector('title').innerText === 'Rothko'); -``` - -Your code should have an `img` element. - -```js -assert(document.querySelectorAll('img').length === 1); -``` - -The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`. - -```js -assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - ---fcc-editable-region-- - - - - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-003.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-003.md deleted file mode 100644 index 52b88eddd5..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-003.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6996c -title: Part 3 -challengeType: 0 -dashedName: part-3 ---- - -# --description-- - -In the CSS box model, every HTML element is treated as a box with four areas. - -Imagine you receive a box from your favorite online retailer -- the content is the item in the box, or in our case, a header, paragraph, or image element. - -Change the `src` attribute in the `` from `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png` to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png`. - -# --hints-- - -The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png` - -```js -assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Rothko - - ---fcc-editable-region-- - ---fcc-editable-region-- - - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-004.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-004.md deleted file mode 100644 index 8d49679d74..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-004.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6996d -title: Part 4 -challengeType: 0 -dashedName: part-4 ---- - -# --description-- - -The content is surrounded by a space called padding, similar to how bubble wrap separates an item from the box around it. - -Think of the border like the cardboard box your item was shipped in. - -Change the `src` attribute to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png` - -# --hints-- - -The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png` - -```js -assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Rothko - - ---fcc-editable-region-- - ---fcc-editable-region-- - - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-005.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-005.md deleted file mode 100644 index 4ae7bb86f6..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-005.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6996e -title: Part 5 -challengeType: 0 -dashedName: part-5 ---- - -# --description-- - -Margin is the area outside of the box, and can be used to control the space between other boxes or elements. - -Here the bottom element has a larger top margin, pushing it further down the page. - -Now that you understand the CSS box model, let's get started on the Rothko painting. - -Remove the `` element. - -# --hints-- - -You should not have an `img` element in your code. - -```js -assert(document.querySelector('img') === null); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Rothko - - ---fcc-editable-region-- - ---fcc-editable-region-- - - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-006.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-006.md deleted file mode 100644 index f9a0d992ee..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-006.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6996f -title: Part 6 -challengeType: 0 -dashedName: part-6 ---- - -# --description-- - -Add a `div` element in the `body`. - -Set the `class` attribute equal to `canvas`. For example, `
`. - -This will act as the canvas for your painting. - -# --hints-- - -Your code should have a `div` element. - -```js -assert(document.querySelectorAll('div').length === 1) -``` - -The `div` element should have a `class` with the value `canvas`. - -```js -assert(document.querySelector('div').className.split(' ').includes('canvas')) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Rothko - - ---fcc-editable-region-- - ---fcc-editable-region-- - - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-007.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-007.md deleted file mode 100644 index d4ad31754d..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-007.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69970 -title: Part 7 -challengeType: 0 -dashedName: part-7 ---- - -# --description-- - -Before you can start styling the `div` you added, you need to link your CSS to your HTML. - -Add a `link` element to link your `styles.css` file. Set the `href` to `./styles.css`, and remember to set the `rel` attribute to `stylesheet`. - -# --hints-- - -Your code should have a `link` element. - -```js -assert(//.test(code)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Rothko ---fcc-editable-region-- - ---fcc-editable-region-- - - -
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-008.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-008.md deleted file mode 100644 index ad33dc7391..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-008.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69971 -title: Part 8 -challengeType: 0 -dashedName: part-8 ---- - -# --description-- - -Time for CSS. - -Even though your `
` has no text, it's still treated as a box with content. -Write a CSS rule that uses the `.canvas` class selector and set its `width` to 500 pixels. -Here's a CSS rule that sets the width of the class `card` to 300 pixels: - -```css -.card { - width: 300px; -} -``` - -# --hints-- - -Your code should have a `.canvas` selector. - -```js -const hasCanvas = new __helpers.CSSHelp(document).getStyle('.canvas'); -assert(hasCanvas) -``` - -You should set the `width` property to `500px`. - -```js -const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '500px') -assert(hasWidth); -``` - -Your `.canvas` element should have a `width` of `500px`. - -```js -const width = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('width'); -assert(width === '500px'); -``` - -# --seed-- - -## --seed-contents-- - -```css ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -```html - - - - - Rothko - - - -
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-009.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-009.md deleted file mode 100644 index 66593f72c1..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-009.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69972 -title: Part 9 -challengeType: 0 -dashedName: part-9 ---- - -# --description-- - -Add the `height` property with the value `600px` to your `.canvas` rule. - -# --hints-- - -You should set the `height` property to `600px`. - -```js -const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '600px'); -assert(hasHeight); -``` - -Your `.canvas` element should have a `height` of `600px`. - -```js -const canvasHeight = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('height'); -assert(canvasHeight === '600px'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko - - - -
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-010.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-010.md deleted file mode 100644 index 5310134a4d..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-010.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69973 -title: Part 10 -challengeType: 0 -dashedName: part-10 ---- - -# --description-- - -Change the `background-color` of the canvas to `#4d0f00`. - -# --hints-- - -You should set the `background-color` property to `#4d0f00`. - -```js -const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(77, 15, 0)'); -// TODO: Why does it still do this? -assert(hasBackground); -``` - -Your `.canvas` element should have a `background-color` of `#4d0f00`. - -```js -const canvasBackground = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('background-color'); -assert(canvasBackground === 'rgb(77, 15, 0)'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko - - - -
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-011.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-011.md deleted file mode 100644 index fe13693d46..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-011.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69974 -title: Part 11 -challengeType: 0 -dashedName: part-11 ---- - -# --description-- - -Every painting needs a frame. - -Wrap the `.canvas` element in another `div`. Give that `div` the `frame` class. -# --hints-- - -You should add a new `div` element. - -```js -assert(document.querySelectorAll('div').length === 2) -``` - -Your `.canvas` element should be nested in the new `div` element. - -```js -assert(document.querySelector('.canvas').parentElement.tagName === 'DIV'); -``` - -Your new `div` should have a `class` with the value `frame`. - -```js -assert(document.querySelector('div').className.split(' ').includes('frame')); -``` - -Your new `div` should be within your `body` element. - -```js -assert(document.querySelector('div').parentElement.tagName === 'BODY'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; -} -``` - -```html - - - - - Rothko - - - ---fcc-editable-region-- - -
-
- ---fcc-editable-region-- - - ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-012.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-012.md deleted file mode 100644 index e7bdf5c3ac..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-012.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69975 -title: Part 12 -challengeType: 0 -dashedName: part-12 ---- - -# --description-- - -Write a new rule using the `.frame` class selector. - -Give the `.frame` a border with the shorthand `border: 50px solid black;` declaration. - -# --hints-- - -Your code should have a `.frame` selector. - -```js -const hasFrame = new __helpers.CSSHelp(document).getStyle('.frame'); -assert(hasFrame); -``` - -You should set the `border` property to `50px solid black`. - -```js -const hasBorder = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.border === '50px solid black'); -assert(hasBorder); -``` - -Your `.frame` element should have a `50px solid black` `border`. - -```js -const frameBorder = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('border'); -assert(frameBorder === '50px solid black'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; -} ---fcc-editable-region-- - ---fcc-editable-region-- -``` - -```html - - - - - Rothko - - - -
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-013.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-013.md deleted file mode 100644 index 17a5db4987..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-013.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69976 -title: Part 13 -challengeType: 0 -dashedName: part-13 ---- - -# --description-- - -The frame is much too wide. - -In `.frame`, set its `width` to 500 pixels. - -# --hints-- - -You should set the `width` property to `500px`. - -```js -const widthFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.width === '500px'); -assert(widthFilter.length === 2); -``` - -Your `.frame` element should have a `width` of `500px`. - -```js -const frameWidth = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('width'); -assert(frameWidth === '500px'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; -} - -.frame { - border: 50px solid black; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko - - - -
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-014.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-014.md deleted file mode 100644 index f76fab81a4..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-014.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69977 -title: Part 14 -challengeType: 0 -dashedName: part-14 ---- - -# --description-- - -Use padding to adjust the spacing within an element. - -In `.frame`, use the shorthand `padding: 50px;` to increase the space between the top, bottom, left, and right of the frame's border and the canvas within. - -# --hints-- - -You should set the `padding` property to `50px`. - -```js -const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '50px'); -assert(hasPadding); -``` - -Your `.frame` element should have a `padding` value of `50px`. - -```js -const framePadding = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('padding'); -assert(framePadding === '50px'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; -} - -.frame { - border: 50px solid black; - width: 500px; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko - - - -
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-015.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-015.md deleted file mode 100644 index 905fb24a02..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-015.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69978 -title: Part 15 -challengeType: 0 -dashedName: part-15 ---- - -# --description-- - -Use margins to adjust the spacing outside of an element. - -Add the `margin` property to `.frame` and set it to `20px auto` to move the frame down 20 pixels and center it horizontally on the page. - -# --hints-- - -You should set the `margin` property to `20px auto`. - -```js -const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '20px auto'); -assert(hasMargin); -``` - -Your `.frame` element should have a `margin` value of `20px auto`. - -```js -const frameMargin = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('margin'); -assert(frameMargin === '20px auto'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko - - - -
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-016.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-016.md deleted file mode 100644 index 58d29e5d30..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-016.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69979 -title: Part 16 -challengeType: 0 -dashedName: part-16 ---- - -# --description-- - -Add a new `div` element inside of your `.canvas` element. - -Give the new `div` the `class` attribute with a value of `one`. This will be your first rectangle. - -# --hints-- - -You should create a new `div` element. - -```js -assert(document.querySelectorAll('div').length === 3); -``` - -You should nest the new `div` element within your `.canvas` element. - -```js -assert(document.querySelector('.canvas').children[0].tagName === 'DIV'); -``` - -Your new `div` should have a `class` attribute with a value `one`. - -```js -assert(document.querySelector('.canvas').children[0].className.split(' ').includes('one')); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} -``` - -```html - - - - - Rothko - - - -
-
---fcc-editable-region-- - ---fcc-editable-region-- -
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-017.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-017.md deleted file mode 100644 index 3dbbd0ddb8..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-017.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6997a -title: Part 17 -challengeType: 0 -dashedName: part-17 ---- - -# --description-- - -Write a new rule that targets `.one` and set its `width` to 425 pixels. - -# --hints-- - -You should have a `.one` selector. - -```js -const hasOne = new __helpers.CSSHelp(document).getStyle('.one'); -assert(hasOne); -``` - -You should set the `width` property to `425px`. - -```js -const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '425px'); -assert(hasWidth); -``` - -Your `.one` element should have a `width` value of `425px`. - -```js -const oneWidth = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('width'); -assert(oneWidth === '425px'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -```html - - - - - Rothko - - - -
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-018.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-018.md deleted file mode 100644 index cd41dcb8e9..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-018.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6997b -title: Part 18 -challengeType: 0 -dashedName: part-18 ---- - -# --description-- - -Now set the `height` for `.one` to 150 pixels. - -# --hints-- - -You should set the `height` property to `150px`. - -```js -const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '150px'); -assert(hasHeight); -``` - -Your `.one` element should have a `height` value of `150px`. - -```js -const oneHeight = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('height'); -assert(oneHeight === '150px'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko - - - -
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-019.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-019.md deleted file mode 100644 index 0a73c802a3..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-019.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6997c -title: Part 19 -challengeType: 0 -dashedName: part-19 ---- - -# --description-- - -Set the `background-color` of `.one` to `#efb762`. - -# --hints-- - -You should set the `background-color` property to `#efb762`. - -```js -const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(239, 183, 98)'); -assert(hasBackground) -``` - -Your `.one` element should have a `background-color` value of `#efb762`. - -```js -const oneBackground = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('background-color'); -assert(oneBackground === 'rgb(239, 183, 98)'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko - - - -
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-020.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-020.md deleted file mode 100644 index fc0de3833a..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-020.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6997d -title: Part 20 -challengeType: 0 -dashedName: part-20 ---- - -# --description-- - -Use margins to position the `.one` element on the canvas. - -Add the shorthand `margin: 20px auto;` to set the top and bottom margins to 20 pixels, and center it horizontally. - -# --hints-- - -You should set the `margin` property to `20px auto`. - -```js -const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === '20px auto'); -assert(marginFilter.length === 2); -``` - -Your `.one` element should have a `margin` value of `20px auto`. - -```js -const oneMargin = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('margin'); -assert(oneMargin === '20px auto'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko - - - -
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-021.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-021.md deleted file mode 100644 index a1e8d427f3..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-021.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6997e -title: Part 21 -challengeType: 0 -dashedName: part-21 ---- - -# --description-- - -Now `.one` is centered horizontally, but its top margin is pushing past the canvas and onto the frame's border, shifting the entire canvas down 20 pixels. - -Add `padding: 1px;` to `.canvas` to give the `.one` element something solid to push off of. - -# --hints-- - -You should set the `padding` property to `1px`. - -```js -const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '1px'); -assert(hasPadding); -``` - -Your `.canvas` element should have a `padding` value of `1px`. - -```js -const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('padding'); -assert(canvasPadding === '1px'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; ---fcc-editable-region-- - ---fcc-editable-region-- -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; -} -``` - -```html - - - - - Rothko - - - -
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-022.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-022.md deleted file mode 100644 index 9f5f449f1f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-022.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6997f -title: Part 22 -challengeType: 0 -dashedName: part-22 ---- - -# --description-- - -Adding 1 pixel of padding to the top, bottom, left, and right of the canvas changed its dimensions to 502 pixels x 602 pixels. - -Replace `padding: 1px;` with `overflow: hidden;` to change the canvas back to its original dimensions. - -# --hints-- - -You should remove the `padding` property from the `.one` selector. - -```js -const onePadding = new __helpers.CSSHelp(document).getStyle('.one').getPropertyValue('padding'); -assert(!onePadding); -``` - -You should set the `overflow` property to `hidden`. - -```js -const hasOverflow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.overflow === 'hidden'); -assert(hasOverflow); -``` - -Your `.canvas` element should have an `overflow` value of `hidden`. - -```js -const canvasOverflow = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('overflow'); -assert(canvasOverflow === 'hidden') -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; ---fcc-editable-region-- - padding: 1px; ---fcc-editable-region-- -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; -} -``` - -```html - - - - - Rothko - - - -
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-023.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-023.md deleted file mode 100644 index a8747ff16d..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-023.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69980 -title: Part 23 -challengeType: 0 -dashedName: part-23 ---- - -# --description-- - -Add another `div` with a `class` value of `two` just below your `one` element. This will be your second rectangle. - -# --hints-- - -You should not change the existing `.one` element. - -```js -assert(document.querySelectorAll('.one').length === 1); -``` - -You should have a second `div` element in your `.canvas` element. - -```js -assert(document.querySelector('.canvas').children[1].tagName === 'DIV'); -``` - -Your second `div` element should have a `class` value of `two`. - -```js -assert(document.querySelector('.canvas').children[1].className.split(' ').includes('two')); -``` - -Your `.two` element should come after your `.one` element. - -```js -assert(document.querySelector('.two').previousElementSibling.className.split(' ').includes('one')); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; -} -``` - -```html - - - - - Rothko - - - -
-
-
---fcc-editable-region-- - ---fcc-editable-region-- -
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-024.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-024.md deleted file mode 100644 index 6d7da6aac4..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-024.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69981 -title: Part 24 -challengeType: 0 -dashedName: part-24 ---- - -# --description-- - -Create a new CSS rule using the `.two` selector and set its `width` to 475 pixels. - -# --hints-- - -You should have a `.two` selector. - -```js -const hasTwo = new __helpers.CSSHelp(document).getStyle('.two'); -assert(hasTwo); -``` - -You should set the `width` property to `475px`. - -```js -const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '475px'); -assert(hasWidth); -``` - -Your `.two` element should have a `width` value of `475px`. - -```js -const twoWidth = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('width'); -assert(twoWidth === '475px'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -```html - - - - - Rothko - - - -
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-025.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-025.md deleted file mode 100644 index f15e8e7a0f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-025.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69982 -title: Part 25 -challengeType: 0 -dashedName: part-25 ---- - -# --description-- - -Set the `height` of the `.two` to 200 pixels. - -# --hints-- - -You should set the `height` property to `200px`. - -```js -const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '200px'); -assert(hasHeight); -``` - -Your `.two` element should have a `height` value of `200px`. - -```js -const twoHeight = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('height'); -assert(twoHeight === '200px'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; -} - -.two { - width: 475px; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko - - - -
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-026.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-026.md deleted file mode 100644 index a723c5efcd..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-026.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69983 -title: Part 26 -challengeType: 0 -dashedName: part-26 ---- - -# --description-- - -Set the `background-color` of the `.two` element to `#8f0401`. - -# --hints-- - -You should set the `background-color` property to `#8f0401`. - -```js -const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(143, 4, 1)'); -assert(hasBackground); -``` - -Your `.two` element should have a `background-color` value of `#8f0401`. - -```js -const twoBackground = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('background-color'); -assert(twoBackground === 'rgb(143, 4, 1)'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; -} - -.two { - width: 475px; - height: 200px; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko - - - -
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-027.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-027.md deleted file mode 100644 index afe025f5d3..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-027.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69984 -title: Part 27 -challengeType: 0 -dashedName: part-27 ---- - -# --description-- - -Center the `.two` element by setting its `margin` to `auto`. - -# --hints-- - -You should set the `margin` property to `auto`. - -```js -const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === 'auto'); -assert(hasMargin); -``` - -Your `.two` element should have a `margin` value of `auto`. - -```js -const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin'); -assert(twoMargin === 'auto'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto; -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko - - - -
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-028.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-028.md deleted file mode 100644 index aae61ba7b7..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-028.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69985 -title: Part 28 -challengeType: 0 -dashedName: part-28 ---- - -# --description-- - -Use margins to adjust the spacing between `one` and `two`. - -Change the `margin` of `.one` to `20px auto 20px` so the top margin is 20 pixels, it's centered horizontally, and the bottom margin is 20 pixels. - -# --hints-- - -You should set the `margin` property to `20px auto 20px`. - -```js -const hasMarginRegex = /20px\s*auto\s*20px/; -// TODO: Why is this stripped? Because margins are the same? -assert(hasMarginRegex.test(code)); -``` - -Your `.one` element should have a `margin` value of `20px auto 20px`. - -```js -const oneMarginRegex = /\.one\s*{[^}]*margin:\s*20px\s*auto\s*20px;?\s*}/ -assert(oneMarginRegex.test(code)); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; ---fcc-editable-region-- - margin: 20px auto; ---fcc-editable-region-- -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: auto; -} -``` - -```html - - - - - Rothko - - - -
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-029.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-029.md deleted file mode 100644 index a5da2fe919..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-029.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69986 -title: Part 29 -challengeType: 0 -dashedName: part-29 ---- - -# --description-- - -Create a new `div` with a `class` value of `three` right under the `.two` element. This will be your third rectangle. - -# --hints-- - -Your existing `.one` and `.two` elements should not be changed. - -```js -assert(document.querySelectorAll('.one').length === 1); -assert(document.querySelectorAll('.two').length === 1); -``` - -Your new `div` should be nested in your `.canvas` element. - -```js -assert(document.querySelector('.canvas').children[2].tagName === 'DIV'); -``` - -Your new `div` should come after your `.two` element. - -```js -assert(document.querySelector('.two').nextElementSibling.tagName === 'DIV'); -``` - -Your new `div` element should have a `class` with the value `three`. - -```js -assert(document.querySelector('.canvas').children[2].className.split(' ').includes('three')); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto 20px; -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: auto; -} -``` - -```html - - - - - Rothko - - - -
-
-
-
---fcc-editable-region-- - ---fcc-editable-region-- -
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-030.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-030.md deleted file mode 100644 index 40da5bd741..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-030.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69987 -title: Part 30 -challengeType: 0 -dashedName: part-30 ---- - -# --description-- - -You don't always have to use pixels when sizing an element. - -Create a new rule, `.three`, and set its `width` to `91%`. - -# --hints-- - -You should use the `.three` selector. - -```js -const hasThree = new __helpers.CSSHelp(document).getStyle('.three'); -assert(hasThree); -``` - -You should set the `width` property to `91%`. - -```js -const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '91%'); -assert(hasWidth); -``` - -Your `.three` element should have a `width` value of `91%`. - -```js -const threeWidth = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('width'); -assert(threeWidth === '91%'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto 20px; -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: auto; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -```html - - - - - Rothko - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-031.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-031.md deleted file mode 100644 index 25c706e373..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-031.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69988 -title: Part 31 -challengeType: 0 -dashedName: part-31 ---- - -# --description-- - -Set the `height` of `.three` to `28%`. - -# --hints-- - -You should set the `height` property to `28%`. - -```js -const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '28%'); -assert(hasHeight); -``` - -Your `.three` element should have a `height` value of `28%`. - -```js -const threeHeight = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('height'); -assert(threeHeight === '28%'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto 20px; -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: auto; -} - -.three { - width: 91%; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-032.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-032.md deleted file mode 100644 index 9b97392a26..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-032.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69989 -title: Part 32 -challengeType: 0 -dashedName: part-32 ---- - -# --description-- - -Change the `background-color` of `.three` to `#b20403`. - -# --hints-- - -You should set the `background-color` property to `#b20403`. - -```js -const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(178, 4, 3)'); -assert(hasBackground); -``` - -Your `.three` element should have a `background-color` value of `#b20403`. - -```js -const threeBackground = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('background-color'); -assert(threeBackground === 'rgb(178, 4, 3)'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto 20px; -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: auto; -} - -.three { - width: 91%; - height: 28%; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-033.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-033.md deleted file mode 100644 index 2a662b684b..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-033.md +++ /dev/null @@ -1,89 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6998a -title: Part 33 -challengeType: 0 -dashedName: part-33 ---- - -# --description-- - -Center the `.three` element on the canvas by setting its `margin` to `auto`. - -# --hints-- - -You should set the `margin` property to `auto`. - -```js -const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === 'auto'); -assert(marginFilter.length === 2); -``` - -Your `.three` element should have a `margin` value of `auto`. - -```js -const threeMargin = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('margin'); -assert(threeMargin === 'auto'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto 20px; -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: auto; -} - -.three { - width: 91%; - height: 28%; - background-color: #b20403; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-034.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-034.md deleted file mode 100644 index 99ad16cf8f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-034.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6998b -title: Part 34 -challengeType: 0 -dashedName: part-34 ---- - -# --description-- - -It's helpful to have your margins push in one direction. - -In this case, the bottom margin of the `.one` element pushes `.two` down 20 pixels. - -In `.two`, add `margin: 0 auto 20px;` to set its top margin to 0, center it horizontally, and set its bottom margin to 20 pixels. - -# --hints-- - -You should set the `margin` property to `0 auto 20px`. - -```js -const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '0px auto 20px'); -assert(hasMargin); -``` - -Your `.two` element should have a `margin` value of `0 auto 20px`. - -```js -const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin'); -assert(twoMargin === '0px auto 20px'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto 20px; -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; ---fcc-editable-region-- - margin: auto; ---fcc-editable-region-- -} - -.three { - width: 91%; - height: 28%; - background-color: #b20403; - margin: auto; -} -``` - -```html - - - - - Rothko - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-035.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-035.md deleted file mode 100644 index b84cdd36ee..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-035.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6998c -title: Part 35 -challengeType: 0 -dashedName: part-35 ---- - -# --description-- - -The colors and shapes of your painting are too sharp to pass as a Rothko. - -Use the `filter` property with the value `blur(2px)` in the `.canvas`. - -# --hints-- - -You should set the `filter` property to `blur(2px)`. - -```js -const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(2px)'); -assert(hasFilter); -``` - -Your `.canvas` element should have a `filter` value of `blur(2px)`. - -```js -const canvasFilter = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('filter'); -assert(canvasFilter === 'blur(2px)'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; ---fcc-editable-region-- - ---fcc-editable-region-- -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto 20px; -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: 0 auto 20px; -} - -.three { - width: 91%; - height: 28%; - background-color: #b20403; - margin: auto; -} -``` - -```html - - - - - Rothko - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-036.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-036.md deleted file mode 100644 index 94b9dc0151..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-036.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6998d -title: Part 36 -challengeType: 0 -dashedName: part-36 ---- - -# --description-- - -Create a rule that targets both `.one` and `.two` and increase their `blur` effect by 1 pixel. - -Here's an example of a rule that increases the `blur` of two elements: - -```css -h1, p { - filter: blur(3px); -} -``` - -# --hints-- - -You should have a `.one, .two` selector. - -```js -const oneTwo = new __helpers.CSSHelp(document).getStyle('.one, .two'); -assert(oneTwo); -``` - -You should set the `filter` property to `blur(1px)`. - -```js -const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(1px)'); -assert(hasFilter) -``` - -Your `.one` element should have a `filter` value of `blur(1px)`. - -```js -const one = document.querySelector('.one'); -const oneFilter = getComputedStyle(one).filter; -assert(oneFilter === 'blur(1px)'); -``` - -Your `.two` element should have a filter value of `blur(1px)`. - -```js -const two = document.querySelector('.two'); -const twoFilter = getComputedStyle(two).filter; -assert(twoFilter === 'blur(1px)'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; - filter: blur(2px); -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto 20px; -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: 0 auto 20px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.three { - width: 91%; - height: 28%; - background-color: #b20403; - margin: auto; -} -``` - -```html - - - - - Rothko - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-037.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-037.md deleted file mode 100644 index c5065bf2c8..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-037.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6998e -title: Part 37 -challengeType: 0 -dashedName: part-37 ---- - -# --description-- - -Increase the `blur` of `.three` by 2 pixels. - -# --hints-- - -You should set the `filter` property to `blur(2px)`. - -```js -const filterFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.filter === 'blur(2px)'); -assert(filterFilter.length === 2); -``` - -Your `.three` element should have a `filter` value of `blur(2px)`. - -```js -const threeFilter = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('filter'); -assert(threeFilter === 'blur(2px)'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; - filter: blur(2px); -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto 20px; -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: 0 auto 20px; -} - -.one, .two { - filter: blur(1px); -} - -.three { - width: 91%; - height: 28%; - background-color: #b20403; - margin: auto; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-038.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-038.md deleted file mode 100644 index 5735877fbf..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-038.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 60a3e3396c7b40068ad6998f -title: Part 38 -challengeType: 0 -dashedName: part-38 ---- - -# --description-- - -The rectangles are too small and their edges don't have the soft quality of a painting. - -Increase the area and soften the edges of `.one` by setting its `box-shadow` to `0 0 3px 3px #efb762`. - -# --hints-- - -You should set the `box-shadow` property to `0 0 3px 3px #efb762`. - -```js -const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(239, 183, 98) 0px 0px 3px 3px'); -assert(hasBoxShadow); -``` - -Your `.one` element should have a `box-shadow` value of `0 0 3px 3px #efb762`. - -```js -const oneShadow = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('box-shadow'); -assert(oneShadow === 'rgb(239, 183, 98) 0px 0px 3px 3px'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; - filter: blur(2px); -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto 20px; ---fcc-editable-region-- - ---fcc-editable-region-- -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: 0 auto 20px; -} - -.one, .two { - filter: blur(1px); -} - -.three { - width: 91%; - height: 28%; - background-color: #b20403; - margin: auto; - filter: blur(2px); -} -``` - -```html - - - - - Rothko - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-039.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-039.md deleted file mode 100644 index 33ac4f6e14..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-039.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69990 -title: Part 39 -challengeType: 0 -dashedName: part-39 ---- - -# --description-- - -Use the same `box-shadow` declaration for `.two`, but change the color from `#efb762` to `#8f0401`. - -# --hints-- - -You should set the `box-shadow` property to `0 0 3px 3px #8f0401`. - -```js -const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(143, 4, 1) 0px 0px 3px 3px'); -assert(hasBoxShadow); -``` - -Your `.two` element should have a `box-shadow` value of `0 0 3px 3px #8f0401`. - -```js -const twoShadow = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('box-shadow'); -assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; - filter: blur(2px); -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto 20px; - box-shadow: 0 0 3px 3px #efb762; -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: 0 auto 20px; ---fcc-editable-region-- - ---fcc-editable-region-- -} - -.one, .two { - filter: blur(1px); -} - -.three { - width: 91%; - height: 28%; - background-color: #b20403; - margin: auto; - filter: blur(2px); -} -``` - -```html - - - - - Rothko - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-040.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-040.md deleted file mode 100644 index debeeac85c..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-040.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69991 -title: Part 40 -challengeType: 0 -dashedName: part-40 ---- - -# --description-- - -Add a `box-shadow` to `.three` with the values `0 0 5px 5px #b20403`. - -# --hints-- - -You should set the `box-shadow` property to `0 0 5px 5px #b20403`. - -```js -const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(178, 4, 3) 0px 0px 5px 5px'); -assert(hasBoxShadow); -``` - -Your `.three` element should have a `box-shadow` value of `0 0 5px 5px #b20403`. - -```js -const threeShadow = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('box-shadow'); -assert(threeShadow === 'rgb(178, 4, 3) 0px 0px 5px 5px'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; - filter: blur(2px); -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto 20px; - box-shadow: 0 0 3px 3px #efb762; -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: 0 auto 20px; - box-shadow: 0 0 3px 3px #8f0401; -} - -.one, .two { - filter: blur(1px); -} - -.three { - width: 91%; - height: 28%; - background-color: #b20403; - margin: auto; - filter: blur(2px); ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-041.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-041.md deleted file mode 100644 index 5b88f5c899..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-041.md +++ /dev/null @@ -1,101 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69992 -title: Part 41 -challengeType: 0 -dashedName: part-41 ---- - -# --description-- - -The corners of each rectangle are still too sharp. - -Round each corner of `.one` by 9 pixels with `border-radius: 9px;`. - -# --hints-- - -You should set the `border-radius` property to `9px`. - -```js -const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '9px'); -assert(hasBorderRadius); -``` - -Your `.one` element should have a `border-radius` value of `9px`. - -```js -const oneBorderRadius =new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('border-radius'); -assert(oneBorderRadius === '9px'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; - filter: blur(2px); -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto 20px; - box-shadow: 0 0 3px 3px #efb762; ---fcc-editable-region-- - ---fcc-editable-region-- -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: 0 auto 20px; - box-shadow: 0 0 3px 3px #8f0401; -} - -.one, .two { - filter: blur(1px); -} - -.three { - width: 91%; - height: 28%; - background-color: #b20403; - margin: auto; - filter: blur(2px); - box-shadow: 0 0 5px 5px #b20403; -} -``` - -```html - - - - - Rothko - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-042.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-042.md deleted file mode 100644 index 9ffd462baa..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-042.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69993 -title: Part 42 -challengeType: 0 -dashedName: part-42 ---- - -# --description-- - -Set the `border-radius` of `.two` to `8px 10px`. This will round its top-left and bottom-right corners by 8 pixels, and top-right and bottom-left corners by 10 pixels. - -# --hints-- - -You should set the `border-radius` property to `8px 10px`. - -```js -const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '8px 10px'); -assert(hasBorderRadius); -``` - -Your `.two` element should have a `border-radius` value of `8px 10px`. - -```js -const twoBorderRadius = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('border-radius'); -assert(twoBorderRadius === '8px 10px'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; - filter: blur(2px); -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto 20px; - box-shadow: 0 0 3px 3px #efb762; - border-radius: 9px; -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: 0 auto 20px; - box-shadow: 0 0 3px 3px #8f0401; ---fcc-editable-region-- - ---fcc-editable-region-- -} - -.one, .two { - filter: blur(1px); -} - -.three { - width: 91%; - height: 28%; - background-color: #b20403; - margin: auto; - filter: blur(2px); - box-shadow: 0 0 5px 5px #b20403; -} -``` - -```html - - - - - Rothko - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-043.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-043.md deleted file mode 100644 index ba79987408..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-043.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69994 -title: Part 43 -challengeType: 0 -dashedName: part-43 ---- - -# --description-- - -The `border-radius` property accepts up to four values to round the round the top-left, top-right, bottom-right, and bottom-left corners. - -Round the top-left corner of `.three` by 30 pixels, the top-right by 25 pixels, the bottom-right by 60 pixels, and bottom-left by 12 pixels. - -# --hints-- - -You should set the `border-radius` property to `30px 25px 60px 12px`. - -```js -const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '30px 25px 60px 12px'); -assert(hasBorderRadius); -``` - -Your `.three` element should have a `border-radius` value of `30px 25px 60px 12px`. - -```js -const threeBorderRadius = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('border-radius'); -assert(threeBorderRadius === '30px 25px 60px 12px'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; - filter: blur(2px); -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto 20px; - box-shadow: 0 0 3px 3px #efb762; - border-radius: 9px; -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: 0 auto 20px; - box-shadow: 0 0 3px 3px #8f0401; - border-radius: 8px 10px; -} - -.one, .two { - filter: blur(1px); -} - -.three { - width: 91%; - height: 28%; - background-color: #b20403; - margin: auto; - filter: blur(2px); - box-shadow: 0 0 5px 5px #b20403; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-044.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-044.md deleted file mode 100644 index 097ad49f9b..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-044.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69995 -title: Part 44 -challengeType: 0 -dashedName: part-44 ---- - -# --description-- - -Rotate each rectangle to give them more of an imperfect, hand-painted look. - -Use the following to rotate `.one` counter clockwise by 0.6 degrees: `transform: rotate(-0.6deg);` - -# --hints-- - -You should set the `transform` property to `rotate(-0.6deg)`. - -```js -const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.6deg)'); -assert(hasTransform); -``` - -Your `.one` element should have a `transform` value of `rotate(-0.6deg)`. - -```js -const oneTransform = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('transform'); -assert(oneTransform === 'rotate(-0.6deg)'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; - filter: blur(2px); -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto 20px; - box-shadow: 0 0 3px 3px #efb762; - border-radius: 9px; ---fcc-editable-region-- - ---fcc-editable-region-- -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: 0 auto 20px; - box-shadow: 0 0 3px 3px #8f0401; - border-radius: 8px 10px; -} - -.one, .two { - filter: blur(1px); -} - -.three { - width: 91%; - height: 28%; - background-color: #b20403; - margin: auto; - filter: blur(2px); - box-shadow: 0 0 5px 5px #b20403; - border-radius: 30px 25px 60px 12px; -} -``` - -```html - - - - - Rothko - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-045.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-045.md deleted file mode 100644 index 1cbf7b948f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-045.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69996 -title: Part 45 -challengeType: 0 -dashedName: part-45 ---- - -# --description-- - -Rotate `.two` clockwise slightly by adding the `transform` property with the value `rotate(0.4deg)`. - -# --hints-- - -You should set the `transform` property to `rotate(0.4deg)`. - -```js -const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(0.4deg)'); -assert(hasTransform); -``` - -Your `.two` element should have a `transform` value of `rotate(0.4deg)`. - -```js -const twoTransform = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('transform'); -assert(twoTransform === 'rotate(0.4deg)'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; - filter: blur(2px); -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto 20px; - box-shadow: 0 0 3px 3px #efb762; - border-radius: 9px; - transform: rotate(-0.6deg); -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: 0 auto 20px; - box-shadow: 0 0 3px 3px #8f0401; - border-radius: 8px 10px; ---fcc-editable-region-- - ---fcc-editable-region-- -} - -.one, .two { - filter: blur(1px); -} - -.three { - width: 91%; - height: 28%; - background-color: #b20403; - margin: auto; - filter: blur(2px); - box-shadow: 0 0 5px 5px #b20403; - border-radius: 30px 25px 60px 12px; -} -``` - -```html - - - - - Rothko - - - -
-
-
-
-
-
-
- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-046.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-046.md deleted file mode 100644 index 8b1c18ed1e..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-box-model/part-046.md +++ /dev/null @@ -1,180 +0,0 @@ ---- -id: 60a3e3396c7b40068ad69997 -title: Part 46 -challengeType: 0 -dashedName: part-46 ---- - -# --description-- - -Rotate `.three` counter clockwise by 0.2 degrees. - -With this final step, your Rothko painting is now complete. - -# --hints-- - -You should set the `transform` property to `rotate(-0.2deg)`. - -```js -const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.2deg)'); -assert(hasTransform); -``` - -Your `.three` element should have a `transform` value of `rotate(-0.2deg)`. - -```js -const threeTransform = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('transform'); -assert(threeTransform === 'rotate(-0.2deg)'); -``` - -# --seed-- - -## --seed-contents-- - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; - filter: blur(2px); -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto 20px; - box-shadow: 0 0 3px 3px #efb762; - border-radius: 9px; - transform: rotate(-0.6deg); -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: 0 auto 20px; - box-shadow: 0 0 3px 3px #8f0401; - border-radius: 8px 10px; - transform: rotate(0.4deg); -} - -.one, .two { - filter: blur(1px); -} - -.three { - width: 91%; - height: 28%; - background-color: #b20403; - margin: auto; - filter: blur(2px); - box-shadow: 0 0 5px 5px #b20403; - border-radius: 30px 25px 60px 12px; ---fcc-editable-region-- - ---fcc-editable-region-- -} -``` - -```html - - - - - Rothko - - - -
-
-
-
-
-
-
- - -``` - -## --solutions-- - -```html - - - - - Rothko - - - -
-
-
-
-
-
-
- - -``` - -```css -.canvas { - width: 500px; - height: 600px; - background-color: #4d0f00; - overflow: hidden; - filter: blur(2px); -} - -.frame { - border: 50px solid black; - width: 500px; - padding: 50px; - margin: 20px auto; -} - -.one { - width: 425px; - height: 150px; - background-color: #efb762; - margin: 20px auto 20px; - box-shadow: 0 0 3px 3px #efb762; - border-radius: 9px; - transform: rotate(-0.6deg); -} - -.two { - width: 475px; - height: 200px; - background-color: #8f0401; - margin: 0 auto 20px; - box-shadow: 0 0 3px 3px #8f0401; - border-radius: 8px 10px; - transform: rotate(0.4deg); -} - -.one, .two { - filter: blur(1px); -} - -.three { - width: 91%; - height: 28%; - background-color: #b20403; - margin: auto; - filter: blur(2px); - box-shadow: 0 0 5px 5px #b20403; - border-radius: 30px 25px 60px 12px; - transform: rotate(-0.2deg); -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-001.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-001.md new file mode 100644 index 0000000000..0354bd888a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-001.md @@ -0,0 +1,55 @@ +--- +id: 60a3e3396c7b40068ad6996a +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +By now, you should be familiar with the basic elements an HTML page should have. + +Set up your code with a `DOCTYPE` declaration, an `html` element, a `head` element, and a `body` element. + +# --hints-- + +Your code should have a `` declaration. + +```js +assert(code.match(//i)); +``` + +Your code should have an `html` element. + +```js +assert(document.querySelectorAll('html').length === 1); +``` + +Your code should have a `head` element within the `html` element. + +```js +assert(document.querySelectorAll('head').length === 1); +``` + +Your code should have a `body` element within the `html` element. + +```js +assert(document.querySelectorAll('body').length === 1); +``` + +Your `head` element should come before your `body` element. + +```js +assert(document.querySelector('body').previousElementSibling.tagName === 'HEAD'); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-002.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-002.md new file mode 100644 index 0000000000..dee7e1ce44 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-002.md @@ -0,0 +1,65 @@ +--- +id: 60a3e3396c7b40068ad6996b +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Within the `head` element, add a `meta` tag which sets the `charset` to `UTF-8`, and a `title` element with the value `Rothko`. + +Within the `body` element, add an `img` element with a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`. +# --hints-- + +Your code should have a `meta` tag. + +```js +assert(document.querySelectorAll('meta').length === 1); +``` + +The `meta` tag should set the `charset` to `UTF-8`. + +```js +assert(document.querySelector('meta').getAttribute('charset') === 'UTF-8'); +``` + +Your code should have a `title` element. + +```js +assert(document.querySelectorAll('title').length === 1); +``` + +The `title` should be `Rothko`. + +```js +assert(document.querySelector('title').innerText === 'Rothko'); +``` + +Your code should have an `img` element. + +```js +assert(document.querySelectorAll('img').length === 1); +``` + +The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`. + +```js +assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-003.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-003.md new file mode 100644 index 0000000000..2e30aeee4e --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-003.md @@ -0,0 +1,42 @@ +--- +id: 60a3e3396c7b40068ad6996c +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +In the CSS box model, every HTML element is treated as a box with four areas. + +Imagine you receive a box from your favorite online retailer -- the content is the item in the box, or in our case, a header, paragraph, or image element. + +Change the `src` attribute in the `` from `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png` to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png`. + +# --hints-- + +The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png` + +```js +assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Rothko + + +--fcc-editable-region-- + +--fcc-editable-region-- + + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-004.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-004.md new file mode 100644 index 0000000000..5f5177320f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-004.md @@ -0,0 +1,41 @@ +--- +id: 60a3e3396c7b40068ad6996d +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +The content is surrounded by a space called padding, similar to how bubble wrap separates an item from the box around it. + +Think of the border like the cardboard box your item was shipped in. + +Change the `src` attribute to `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png` + +# --hints-- + +The `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png` + +```js +assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Rothko + + +--fcc-editable-region-- + +--fcc-editable-region-- + + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-005.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-005.md new file mode 100644 index 0000000000..d3849383b9 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-005.md @@ -0,0 +1,43 @@ +--- +id: 60a3e3396c7b40068ad6996e +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Margin is the area outside of the box, and can be used to control the space between other boxes or elements. + +Here the bottom element has a larger top margin, pushing it further down the page. + +Now that you understand the CSS box model, let's get started on the Rothko painting. + +Remove the `` element. + +# --hints-- + +You should not have an `img` element in your code. + +```js +assert(document.querySelector('img') === null); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Rothko + + +--fcc-editable-region-- + +--fcc-editable-region-- + + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-006.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-006.md new file mode 100644 index 0000000000..a92759725d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-006.md @@ -0,0 +1,47 @@ +--- +id: 60a3e3396c7b40068ad6996f +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Add a `div` element in the `body`. + +Set the `class` attribute equal to `canvas`. For example, `
`. + +This will act as the canvas for your painting. + +# --hints-- + +Your code should have a `div` element. + +```js +assert(document.querySelectorAll('div').length === 1) +``` + +The `div` element should have a `class` with the value `canvas`. + +```js +assert(document.querySelector('div').className.split(' ').includes('canvas')) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Rothko + + +--fcc-editable-region-- + +--fcc-editable-region-- + + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-007.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-007.md new file mode 100644 index 0000000000..e2ca9790d6 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-007.md @@ -0,0 +1,59 @@ +--- +id: 60a3e3396c7b40068ad69970 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Before you can start styling the `div` you added, you need to link your CSS to your HTML. + +Add a `link` element to link your `styles.css` file. Set the `href` to `./styles.css`, and remember to set the `rel` attribute to `stylesheet`. + +# --hints-- + +Your code should have a `link` element. + +```js +assert(//.test(code)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Rothko +--fcc-editable-region-- + +--fcc-editable-region-- + + +
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-008.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-008.md new file mode 100644 index 0000000000..48853951ab --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-008.md @@ -0,0 +1,69 @@ +--- +id: 60a3e3396c7b40068ad69971 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Time for CSS. + +Even though your `
` has no text, it's still treated as a box with content. +Write a CSS rule that uses the `.canvas` class selector and set its `width` to 500 pixels. +Here's a CSS rule that sets the width of the class `card` to 300 pixels: + +```css +.card { + width: 300px; +} +``` + +# --hints-- + +Your code should have a `.canvas` selector. + +```js +const hasCanvas = new __helpers.CSSHelp(document).getStyle('.canvas'); +assert(hasCanvas) +``` + +You should set the `width` property to `500px`. + +```js +const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '500px') +assert(hasWidth); +``` + +Your `.canvas` element should have a `width` of `500px`. + +```js +const width = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('width'); +assert(width === '500px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + +```html + + + + + Rothko + + + +
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-009.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-009.md new file mode 100644 index 0000000000..f281842a3c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-009.md @@ -0,0 +1,54 @@ +--- +id: 60a3e3396c7b40068ad69972 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Add the `height` property with the value `600px` to your `.canvas` rule. + +# --hints-- + +You should set the `height` property to `600px`. + +```js +const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '600px'); +assert(hasHeight); +``` + +Your `.canvas` element should have a `height` of `600px`. + +```js +const canvasHeight = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('height'); +assert(canvasHeight === '600px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-010.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-010.md new file mode 100644 index 0000000000..6c967cdbee --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-010.md @@ -0,0 +1,56 @@ +--- +id: 60a3e3396c7b40068ad69973 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Change the `background-color` of the canvas to `#4d0f00`. + +# --hints-- + +You should set the `background-color` property to `#4d0f00`. + +```js +const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(77, 15, 0)'); +// TODO: Why does it still do this? +assert(hasBackground); +``` + +Your `.canvas` element should have a `background-color` of `#4d0f00`. + +```js +const canvasBackground = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('background-color'); +assert(canvasBackground === 'rgb(77, 15, 0)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-011.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-011.md new file mode 100644 index 0000000000..484d6586ee --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-011.md @@ -0,0 +1,67 @@ +--- +id: 60a3e3396c7b40068ad69974 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Every painting needs a frame. + +Wrap the `.canvas` element in another `div`. Give that `div` the `frame` class. +# --hints-- + +You should add a new `div` element. + +```js +assert(document.querySelectorAll('div').length === 2) +``` + +Your `.canvas` element should be nested in the new `div` element. + +```js +assert(document.querySelector('.canvas').parentElement.tagName === 'DIV'); +``` + +Your new `div` should have a `class` with the value `frame`. + +```js +assert(document.querySelector('div').className.split(' ').includes('frame')); +``` + +Your new `div` should be within your `body` element. + +```js +assert(document.querySelector('div').parentElement.tagName === 'BODY'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} +``` + +```html + + + + + Rothko + + + +--fcc-editable-region-- + +
+
+ +--fcc-editable-region-- + + ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-012.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-012.md new file mode 100644 index 0000000000..45b63d13fa --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-012.md @@ -0,0 +1,67 @@ +--- +id: 60a3e3396c7b40068ad69975 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Write a new rule using the `.frame` class selector. + +Give the `.frame` a border with the shorthand `border: 50px solid black;` declaration. + +# --hints-- + +Your code should have a `.frame` selector. + +```js +const hasFrame = new __helpers.CSSHelp(document).getStyle('.frame'); +assert(hasFrame); +``` + +You should set the `border` property to `50px solid black`. + +```js +const hasBorder = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.border === '50px solid black'); +assert(hasBorder); +``` + +Your `.frame` element should have a `50px solid black` `border`. + +```js +const frameBorder = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('border'); +assert(frameBorder === '50px solid black'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} +--fcc-editable-region-- + +--fcc-editable-region-- +``` + +```html + + + + + Rothko + + + +
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-013.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-013.md new file mode 100644 index 0000000000..623943457b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-013.md @@ -0,0 +1,64 @@ +--- +id: 60a3e3396c7b40068ad69976 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +The frame is much too wide. + +In `.frame`, set its `width` to 500 pixels. + +# --hints-- + +You should set the `width` property to `500px`. + +```js +const widthFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.width === '500px'); +assert(widthFilter.length === 2); +``` + +Your `.frame` element should have a `width` of `500px`. + +```js +const frameWidth = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('width'); +assert(frameWidth === '500px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-014.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-014.md new file mode 100644 index 0000000000..c956f4f1dc --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-014.md @@ -0,0 +1,65 @@ +--- +id: 60a3e3396c7b40068ad69977 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Use padding to adjust the spacing within an element. + +In `.frame`, use the shorthand `padding: 50px;` to increase the space between the top, bottom, left, and right of the frame's border and the canvas within. + +# --hints-- + +You should set the `padding` property to `50px`. + +```js +const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '50px'); +assert(hasPadding); +``` + +Your `.frame` element should have a `padding` value of `50px`. + +```js +const framePadding = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('padding'); +assert(framePadding === '50px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; + width: 500px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-015.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-015.md new file mode 100644 index 0000000000..3095dac6d3 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-015.md @@ -0,0 +1,66 @@ +--- +id: 60a3e3396c7b40068ad69978 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Use margins to adjust the spacing outside of an element. + +Add the `margin` property to `.frame` and set it to `20px auto` to move the frame down 20 pixels and center it horizontally on the page. + +# --hints-- + +You should set the `margin` property to `20px auto`. + +```js +const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '20px auto'); +assert(hasMargin); +``` + +Your `.frame` element should have a `margin` value of `20px auto`. + +```js +const frameMargin = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('margin'); +assert(frameMargin === '20px auto'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-016.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-016.md new file mode 100644 index 0000000000..215ddedcde --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-016.md @@ -0,0 +1,71 @@ +--- +id: 60a3e3396c7b40068ad69979 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Add a new `div` element inside of your `.canvas` element. + +Give the new `div` the `class` attribute with a value of `one`. This will be your first rectangle. + +# --hints-- + +You should create a new `div` element. + +```js +assert(document.querySelectorAll('div').length === 3); +``` + +You should nest the new `div` element within your `.canvas` element. + +```js +assert(document.querySelector('.canvas').children[0].tagName === 'DIV'); +``` + +Your new `div` should have a `class` attribute with a value `one`. + +```js +assert(document.querySelector('.canvas').children[0].className.split(' ').includes('one')); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} +``` + +```html + + + + + Rothko + + + +
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-017.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-017.md new file mode 100644 index 0000000000..ee9aace47f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-017.md @@ -0,0 +1,74 @@ +--- +id: 60a3e3396c7b40068ad6997a +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Write a new rule that targets `.one` and set its `width` to 425 pixels. + +# --hints-- + +You should have a `.one` selector. + +```js +const hasOne = new __helpers.CSSHelp(document).getStyle('.one'); +assert(hasOne); +``` + +You should set the `width` property to `425px`. + +```js +const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '425px'); +assert(hasWidth); +``` + +Your `.one` element should have a `width` value of `425px`. + +```js +const oneWidth = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('width'); +assert(oneWidth === '425px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-018.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-018.md new file mode 100644 index 0000000000..319007c79f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-018.md @@ -0,0 +1,70 @@ +--- +id: 60a3e3396c7b40068ad6997b +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Now set the `height` for `.one` to 150 pixels. + +# --hints-- + +You should set the `height` property to `150px`. + +```js +const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '150px'); +assert(hasHeight); +``` + +Your `.one` element should have a `height` value of `150px`. + +```js +const oneHeight = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('height'); +assert(oneHeight === '150px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-019.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-019.md new file mode 100644 index 0000000000..ca11b3ac10 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-019.md @@ -0,0 +1,71 @@ +--- +id: 60a3e3396c7b40068ad6997c +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Set the `background-color` of `.one` to `#efb762`. + +# --hints-- + +You should set the `background-color` property to `#efb762`. + +```js +const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(239, 183, 98)'); +assert(hasBackground) +``` + +Your `.one` element should have a `background-color` value of `#efb762`. + +```js +const oneBackground = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('background-color'); +assert(oneBackground === 'rgb(239, 183, 98)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-020.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-020.md new file mode 100644 index 0000000000..d5f8a2372c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-020.md @@ -0,0 +1,74 @@ +--- +id: 60a3e3396c7b40068ad6997d +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Use margins to position the `.one` element on the canvas. + +Add the shorthand `margin: 20px auto;` to set the top and bottom margins to 20 pixels, and center it horizontally. + +# --hints-- + +You should set the `margin` property to `20px auto`. + +```js +const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === '20px auto'); +assert(marginFilter.length === 2); +``` + +Your `.one` element should have a `margin` value of `20px auto`. + +```js +const oneMargin = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('margin'); +assert(oneMargin === '20px auto'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-021.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-021.md new file mode 100644 index 0000000000..56937eb96f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-021.md @@ -0,0 +1,75 @@ +--- +id: 60a3e3396c7b40068ad6997e +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Now `.one` is centered horizontally, but its top margin is pushing past the canvas and onto the frame's border, shifting the entire canvas down 20 pixels. + +Add `padding: 1px;` to `.canvas` to give the `.one` element something solid to push off of. + +# --hints-- + +You should set the `padding` property to `1px`. + +```js +const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '1px'); +assert(hasPadding); +``` + +Your `.canvas` element should have a `padding` value of `1px`. + +```js +const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('padding'); +assert(canvasPadding === '1px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-022.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-022.md new file mode 100644 index 0000000000..0868a267f5 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-022.md @@ -0,0 +1,82 @@ +--- +id: 60a3e3396c7b40068ad6997f +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Adding 1 pixel of padding to the top, bottom, left, and right of the canvas changed its dimensions to 502 pixels x 602 pixels. + +Replace `padding: 1px;` with `overflow: hidden;` to change the canvas back to its original dimensions. + +# --hints-- + +You should remove the `padding` property from the `.one` selector. + +```js +const onePadding = new __helpers.CSSHelp(document).getStyle('.one').getPropertyValue('padding'); +assert(!onePadding); +``` + +You should set the `overflow` property to `hidden`. + +```js +const hasOverflow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.overflow === 'hidden'); +assert(hasOverflow); +``` + +Your `.canvas` element should have an `overflow` value of `hidden`. + +```js +const canvasOverflow = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('overflow'); +assert(canvasOverflow === 'hidden') +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; +--fcc-editable-region-- + padding: 1px; +--fcc-editable-region-- +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-023.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-023.md new file mode 100644 index 0000000000..2347ff15ef --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-023.md @@ -0,0 +1,84 @@ +--- +id: 60a3e3396c7b40068ad69980 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Add another `div` with a `class` value of `two` just below your `one` element. This will be your second rectangle. + +# --hints-- + +You should not change the existing `.one` element. + +```js +assert(document.querySelectorAll('.one').length === 1); +``` + +You should have a second `div` element in your `.canvas` element. + +```js +assert(document.querySelector('.canvas').children[1].tagName === 'DIV'); +``` + +Your second `div` element should have a `class` value of `two`. + +```js +assert(document.querySelector('.canvas').children[1].className.split(' ').includes('two')); +``` + +Your `.two` element should come after your `.one` element. + +```js +assert(document.querySelector('.two').previousElementSibling.className.split(' ').includes('one')); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} +``` + +```html + + + + + Rothko + + + +
+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-024.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-024.md new file mode 100644 index 0000000000..fd7744ef86 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-024.md @@ -0,0 +1,84 @@ +--- +id: 60a3e3396c7b40068ad69981 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Create a new CSS rule using the `.two` selector and set its `width` to 475 pixels. + +# --hints-- + +You should have a `.two` selector. + +```js +const hasTwo = new __helpers.CSSHelp(document).getStyle('.two'); +assert(hasTwo); +``` + +You should set the `width` property to `475px`. + +```js +const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '475px'); +assert(hasWidth); +``` + +Your `.two` element should have a `width` value of `475px`. + +```js +const twoWidth = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('width'); +assert(twoWidth === '475px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-025.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-025.md new file mode 100644 index 0000000000..581d7bce7f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-025.md @@ -0,0 +1,79 @@ +--- +id: 60a3e3396c7b40068ad69982 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Set the `height` of the `.two` to 200 pixels. + +# --hints-- + +You should set the `height` property to `200px`. + +```js +const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '200px'); +assert(hasHeight); +``` + +Your `.two` element should have a `height` value of `200px`. + +```js +const twoHeight = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('height'); +assert(twoHeight === '200px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-026.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-026.md new file mode 100644 index 0000000000..78d35f8e46 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-026.md @@ -0,0 +1,80 @@ +--- +id: 60a3e3396c7b40068ad69983 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Set the `background-color` of the `.two` element to `#8f0401`. + +# --hints-- + +You should set the `background-color` property to `#8f0401`. + +```js +const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(143, 4, 1)'); +assert(hasBackground); +``` + +Your `.two` element should have a `background-color` value of `#8f0401`. + +```js +const twoBackground = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('background-color'); +assert(twoBackground === 'rgb(143, 4, 1)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; + height: 200px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-027.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-027.md new file mode 100644 index 0000000000..35a70162c5 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-027.md @@ -0,0 +1,81 @@ +--- +id: 60a3e3396c7b40068ad69984 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Center the `.two` element by setting its `margin` to `auto`. + +# --hints-- + +You should set the `margin` property to `auto`. + +```js +const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === 'auto'); +assert(hasMargin); +``` + +Your `.two` element should have a `margin` value of `auto`. + +```js +const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin'); +assert(twoMargin === 'auto'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-028.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-028.md new file mode 100644 index 0000000000..e14a703d4a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-028.md @@ -0,0 +1,84 @@ +--- +id: 60a3e3396c7b40068ad69985 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Use margins to adjust the spacing between `one` and `two`. + +Change the `margin` of `.one` to `20px auto 20px` so the top margin is 20 pixels, it's centered horizontally, and the bottom margin is 20 pixels. + +# --hints-- + +You should set the `margin` property to `20px auto 20px`. + +```js +const hasMarginRegex = /20px\s*auto\s*20px/; +// TODO: Why is this stripped? Because margins are the same? +assert(hasMarginRegex.test(code)); +``` + +Your `.one` element should have a `margin` value of `20px auto 20px`. + +```js +const oneMarginRegex = /\.one\s*{[^}]*margin:\s*20px\s*auto\s*20px;?\s*}/ +assert(oneMarginRegex.test(code)); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; +--fcc-editable-region-- + margin: 20px auto; +--fcc-editable-region-- +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: auto; +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-029.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-029.md new file mode 100644 index 0000000000..2a2a4e7a2a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-029.md @@ -0,0 +1,93 @@ +--- +id: 60a3e3396c7b40068ad69986 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Create a new `div` with a `class` value of `three` right under the `.two` element. This will be your third rectangle. + +# --hints-- + +Your existing `.one` and `.two` elements should not be changed. + +```js +assert(document.querySelectorAll('.one').length === 1); +assert(document.querySelectorAll('.two').length === 1); +``` + +Your new `div` should be nested in your `.canvas` element. + +```js +assert(document.querySelector('.canvas').children[2].tagName === 'DIV'); +``` + +Your new `div` should come after your `.two` element. + +```js +assert(document.querySelector('.two').nextElementSibling.tagName === 'DIV'); +``` + +Your new `div` element should have a `class` with the value `three`. + +```js +assert(document.querySelector('.canvas').children[2].className.split(' ').includes('three')); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: auto; +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-030.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-030.md new file mode 100644 index 0000000000..f2cee52066 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-030.md @@ -0,0 +1,94 @@ +--- +id: 60a3e3396c7b40068ad69987 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +You don't always have to use pixels when sizing an element. + +Create a new rule, `.three`, and set its `width` to `91%`. + +# --hints-- + +You should use the `.three` selector. + +```js +const hasThree = new __helpers.CSSHelp(document).getStyle('.three'); +assert(hasThree); +``` + +You should set the `width` property to `91%`. + +```js +const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '91%'); +assert(hasWidth); +``` + +Your `.three` element should have a `width` value of `91%`. + +```js +const threeWidth = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('width'); +assert(threeWidth === '91%'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: auto; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-031.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-031.md new file mode 100644 index 0000000000..8003e02796 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-031.md @@ -0,0 +1,87 @@ +--- +id: 60a3e3396c7b40068ad69988 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +Set the `height` of `.three` to `28%`. + +# --hints-- + +You should set the `height` property to `28%`. + +```js +const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '28%'); +assert(hasHeight); +``` + +Your `.three` element should have a `height` value of `28%`. + +```js +const threeHeight = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('height'); +assert(threeHeight === '28%'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: auto; +} + +.three { + width: 91%; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-032.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-032.md new file mode 100644 index 0000000000..1d70eb5842 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-032.md @@ -0,0 +1,88 @@ +--- +id: 60a3e3396c7b40068ad69989 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Change the `background-color` of `.three` to `#b20403`. + +# --hints-- + +You should set the `background-color` property to `#b20403`. + +```js +const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(178, 4, 3)'); +assert(hasBackground); +``` + +Your `.three` element should have a `background-color` value of `#b20403`. + +```js +const threeBackground = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('background-color'); +assert(threeBackground === 'rgb(178, 4, 3)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: auto; +} + +.three { + width: 91%; + height: 28%; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-033.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-033.md new file mode 100644 index 0000000000..9d1784b812 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-033.md @@ -0,0 +1,89 @@ +--- +id: 60a3e3396c7b40068ad6998a +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Center the `.three` element on the canvas by setting its `margin` to `auto`. + +# --hints-- + +You should set the `margin` property to `auto`. + +```js +const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === 'auto'); +assert(marginFilter.length === 2); +``` + +Your `.three` element should have a `margin` value of `auto`. + +```js +const threeMargin = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('margin'); +assert(threeMargin === 'auto'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: auto; +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-034.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-034.md new file mode 100644 index 0000000000..7d50cd91a1 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-034.md @@ -0,0 +1,93 @@ +--- +id: 60a3e3396c7b40068ad6998b +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +It's helpful to have your margins push in one direction. + +In this case, the bottom margin of the `.one` element pushes `.two` down 20 pixels. + +In `.two`, add `margin: 0 auto 20px;` to set its top margin to 0, center it horizontally, and set its bottom margin to 20 pixels. + +# --hints-- + +You should set the `margin` property to `0 auto 20px`. + +```js +const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '0px auto 20px'); +assert(hasMargin); +``` + +Your `.two` element should have a `margin` value of `0 auto 20px`. + +```js +const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin'); +assert(twoMargin === '0px auto 20px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; +--fcc-editable-region-- + margin: auto; +--fcc-editable-region-- +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-035.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-035.md new file mode 100644 index 0000000000..022f6b99f7 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-035.md @@ -0,0 +1,92 @@ +--- +id: 60a3e3396c7b40068ad6998c +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +The colors and shapes of your painting are too sharp to pass as a Rothko. + +Use the `filter` property with the value `blur(2px)` in the `.canvas`. + +# --hints-- + +You should set the `filter` property to `blur(2px)`. + +```js +const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(2px)'); +assert(hasFilter); +``` + +Your `.canvas` element should have a `filter` value of `blur(2px)`. + +```js +const canvasFilter = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('filter'); +assert(canvasFilter === 'blur(2px)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-036.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-036.md new file mode 100644 index 0000000000..b8fe44285d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-036.md @@ -0,0 +1,116 @@ +--- +id: 60a3e3396c7b40068ad6998d +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Create a rule that targets both `.one` and `.two` and increase their `blur` effect by 1 pixel. + +Here's an example of a rule that increases the `blur` of two elements: + +```css +h1, p { + filter: blur(3px); +} +``` + +# --hints-- + +You should have a `.one, .two` selector. + +```js +const oneTwo = new __helpers.CSSHelp(document).getStyle('.one, .two'); +assert(oneTwo); +``` + +You should set the `filter` property to `blur(1px)`. + +```js +const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(1px)'); +assert(hasFilter) +``` + +Your `.one` element should have a `filter` value of `blur(1px)`. + +```js +const one = document.querySelector('.one'); +const oneFilter = getComputedStyle(one).filter; +assert(oneFilter === 'blur(1px)'); +``` + +Your `.two` element should have a filter value of `blur(1px)`. + +```js +const two = document.querySelector('.two'); +const twoFilter = getComputedStyle(two).filter; +assert(twoFilter === 'blur(1px)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-037.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-037.md new file mode 100644 index 0000000000..7d13899e41 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-037.md @@ -0,0 +1,95 @@ +--- +id: 60a3e3396c7b40068ad6998e +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +Increase the `blur` of `.three` by 2 pixels. + +# --hints-- + +You should set the `filter` property to `blur(2px)`. + +```js +const filterFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.filter === 'blur(2px)'); +assert(filterFilter.length === 2); +``` + +Your `.three` element should have a `filter` value of `blur(2px)`. + +```js +const threeFilter = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('filter'); +assert(threeFilter === 'blur(2px)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-038.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-038.md new file mode 100644 index 0000000000..44be152c9c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-038.md @@ -0,0 +1,98 @@ +--- +id: 60a3e3396c7b40068ad6998f +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +The rectangles are too small and their edges don't have the soft quality of a painting. + +Increase the area and soften the edges of `.one` by setting its `box-shadow` to `0 0 3px 3px #efb762`. + +# --hints-- + +You should set the `box-shadow` property to `0 0 3px 3px #efb762`. + +```js +const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(239, 183, 98) 0px 0px 3px 3px'); +assert(hasBoxShadow); +``` + +Your `.one` element should have a `box-shadow` value of `0 0 3px 3px #efb762`. + +```js +const oneShadow = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('box-shadow'); +assert(oneShadow === 'rgb(239, 183, 98) 0px 0px 3px 3px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-039.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-039.md new file mode 100644 index 0000000000..a579d3f207 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-039.md @@ -0,0 +1,97 @@ +--- +id: 60a3e3396c7b40068ad69990 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Use the same `box-shadow` declaration for `.two`, but change the color from `#efb762` to `#8f0401`. + +# --hints-- + +You should set the `box-shadow` property to `0 0 3px 3px #8f0401`. + +```js +const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(143, 4, 1) 0px 0px 3px 3px'); +assert(hasBoxShadow); +``` + +Your `.two` element should have a `box-shadow` value of `0 0 3px 3px #8f0401`. + +```js +const twoShadow = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('box-shadow'); +assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; + box-shadow: 0 0 3px 3px #efb762; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-040.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-040.md new file mode 100644 index 0000000000..e5fa40d1e0 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-040.md @@ -0,0 +1,98 @@ +--- +id: 60a3e3396c7b40068ad69991 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +Add a `box-shadow` to `.three` with the values `0 0 5px 5px #b20403`. + +# --hints-- + +You should set the `box-shadow` property to `0 0 5px 5px #b20403`. + +```js +const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(178, 4, 3) 0px 0px 5px 5px'); +assert(hasBoxShadow); +``` + +Your `.three` element should have a `box-shadow` value of `0 0 5px 5px #b20403`. + +```js +const threeShadow = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('box-shadow'); +assert(threeShadow === 'rgb(178, 4, 3) 0px 0px 5px 5px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; + box-shadow: 0 0 3px 3px #efb762; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-041.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-041.md new file mode 100644 index 0000000000..8043191b4f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-041.md @@ -0,0 +1,101 @@ +--- +id: 60a3e3396c7b40068ad69992 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +The corners of each rectangle are still too sharp. + +Round each corner of `.one` by 9 pixels with `border-radius: 9px;`. + +# --hints-- + +You should set the `border-radius` property to `9px`. + +```js +const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '9px'); +assert(hasBorderRadius); +``` + +Your `.one` element should have a `border-radius` value of `9px`. + +```js +const oneBorderRadius =new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('border-radius'); +assert(oneBorderRadius === '9px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; + box-shadow: 0 0 3px 3px #efb762; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); + box-shadow: 0 0 5px 5px #b20403; +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-042.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-042.md new file mode 100644 index 0000000000..baf2dfce6f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-042.md @@ -0,0 +1,100 @@ +--- +id: 60a3e3396c7b40068ad69993 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Set the `border-radius` of `.two` to `8px 10px`. This will round its top-left and bottom-right corners by 8 pixels, and top-right and bottom-left corners by 10 pixels. + +# --hints-- + +You should set the `border-radius` property to `8px 10px`. + +```js +const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '8px 10px'); +assert(hasBorderRadius); +``` + +Your `.two` element should have a `border-radius` value of `8px 10px`. + +```js +const twoBorderRadius = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('border-radius'); +assert(twoBorderRadius === '8px 10px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; + box-shadow: 0 0 3px 3px #efb762; + border-radius: 9px; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); + box-shadow: 0 0 5px 5px #b20403; +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-043.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-043.md new file mode 100644 index 0000000000..f86cafd603 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-043.md @@ -0,0 +1,103 @@ +--- +id: 60a3e3396c7b40068ad69994 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +The `border-radius` property accepts up to four values to round the round the top-left, top-right, bottom-right, and bottom-left corners. + +Round the top-left corner of `.three` by 30 pixels, the top-right by 25 pixels, the bottom-right by 60 pixels, and bottom-left by 12 pixels. + +# --hints-- + +You should set the `border-radius` property to `30px 25px 60px 12px`. + +```js +const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '30px 25px 60px 12px'); +assert(hasBorderRadius); +``` + +Your `.three` element should have a `border-radius` value of `30px 25px 60px 12px`. + +```js +const threeBorderRadius = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('border-radius'); +assert(threeBorderRadius === '30px 25px 60px 12px'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; + box-shadow: 0 0 3px 3px #efb762; + border-radius: 9px; +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; + border-radius: 8px 10px; +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); + box-shadow: 0 0 5px 5px #b20403; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-044.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-044.md new file mode 100644 index 0000000000..6c80c36ae1 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-044.md @@ -0,0 +1,104 @@ +--- +id: 60a3e3396c7b40068ad69995 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Rotate each rectangle to give them more of an imperfect, hand-painted look. + +Use the following to rotate `.one` counter clockwise by 0.6 degrees: `transform: rotate(-0.6deg);` + +# --hints-- + +You should set the `transform` property to `rotate(-0.6deg)`. + +```js +const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.6deg)'); +assert(hasTransform); +``` + +Your `.one` element should have a `transform` value of `rotate(-0.6deg)`. + +```js +const oneTransform = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('transform'); +assert(oneTransform === 'rotate(-0.6deg)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; + box-shadow: 0 0 3px 3px #efb762; + border-radius: 9px; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; + border-radius: 8px 10px; +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); + box-shadow: 0 0 5px 5px #b20403; + border-radius: 30px 25px 60px 12px; +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-045.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-045.md new file mode 100644 index 0000000000..05c4fde62c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-045.md @@ -0,0 +1,103 @@ +--- +id: 60a3e3396c7b40068ad69996 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Rotate `.two` clockwise slightly by adding the `transform` property with the value `rotate(0.4deg)`. + +# --hints-- + +You should set the `transform` property to `rotate(0.4deg)`. + +```js +const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(0.4deg)'); +assert(hasTransform); +``` + +Your `.two` element should have a `transform` value of `rotate(0.4deg)`. + +```js +const twoTransform = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('transform'); +assert(twoTransform === 'rotate(0.4deg)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; + box-shadow: 0 0 3px 3px #efb762; + border-radius: 9px; + transform: rotate(-0.6deg); +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; + border-radius: 8px 10px; +--fcc-editable-region-- + +--fcc-editable-region-- +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); + box-shadow: 0 0 5px 5px #b20403; + border-radius: 30px 25px 60px 12px; +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-046.md b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-046.md new file mode 100644 index 0000000000..6ede70221f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-box-model/step-046.md @@ -0,0 +1,180 @@ +--- +id: 60a3e3396c7b40068ad69997 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Rotate `.three` counter clockwise by 0.2 degrees. + +With this final step, your Rothko painting is now complete. + +# --hints-- + +You should set the `transform` property to `rotate(-0.2deg)`. + +```js +const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.2deg)'); +assert(hasTransform); +``` + +Your `.three` element should have a `transform` value of `rotate(-0.2deg)`. + +```js +const threeTransform = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('transform'); +assert(threeTransform === 'rotate(-0.2deg)'); +``` + +# --seed-- + +## --seed-contents-- + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; + box-shadow: 0 0 3px 3px #efb762; + border-radius: 9px; + transform: rotate(-0.6deg); +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; + border-radius: 8px 10px; + transform: rotate(0.4deg); +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); + box-shadow: 0 0 5px 5px #b20403; + border-radius: 30px 25px 60px 12px; +--fcc-editable-region-- + +--fcc-editable-region-- +} +``` + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` + +## --solutions-- + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` + +```css +.canvas { + width: 500px; + height: 600px; + background-color: #4d0f00; + overflow: hidden; + filter: blur(2px); +} + +.frame { + border: 50px solid black; + width: 500px; + padding: 50px; + margin: 20px auto; +} + +.one { + width: 425px; + height: 150px; + background-color: #efb762; + margin: 20px auto 20px; + box-shadow: 0 0 3px 3px #efb762; + border-radius: 9px; + transform: rotate(-0.6deg); +} + +.two { + width: 475px; + height: 200px; + background-color: #8f0401; + margin: 0 auto 20px; + box-shadow: 0 0 3px 3px #8f0401; + border-radius: 8px 10px; + transform: rotate(0.4deg); +} + +.one, .two { + filter: blur(1px); +} + +.three { + width: 91%; + height: 28%; + background-color: #b20403; + margin: auto; + filter: blur(2px); + box-shadow: 0 0 5px 5px #b20403; + border-radius: 30px 25px 60px 12px; + transform: rotate(-0.2deg); +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-001.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-001.md deleted file mode 100644 index 1f35ebd9df..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-001.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -id: 612e6afc009b450a437940a1 -title: Part 1 -challengeType: 0 -dashedName: part-1 ---- - -# --description-- - -Begin with the basic HTML structure. Add a `DOCTYPE` declaration and `html`, `head`, `body`, and `title` elements. Set the `title` to `Responsive Web Design Piano`. - -# --hints-- - -Your code should contain the `DOCTYPE` reference. - -```js -assert(code.match(/` after the type. - -```js -assert(code.match(//gi)); -``` - -Your `html` element should have an opening tag. - -```js -assert(code.match(//gi)); -``` - -Your `html` element should have a closing tag. - -```js -assert(code.match(/<\/html\s*>/)); -``` - -Your `html` element should be below the `DOCTYPE` declaration. - -```js -assert(code.match(/(?)/gi)); -``` - -You should have an opening `head` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `head` tag. - -```js -assert(code.match(/<\/head\s*>/i)); -``` - -You should have an opening `body` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `body` tag. - -```js -assert(code.match(/<\/body\s*>/i)); -``` - -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 `title` element. - -```js -const title = document.querySelector('title'); -assert.exists(title); -``` - -Your project should have a title of `Responsive Web Design Piano`. - -```js -const title = document.querySelector('title'); -assert.equal(title?.text?.trim()?.toLowerCase(), 'responsive web design piano') -``` - -Remember, the casing and spelling matter for the title. - -```js -const title = document.querySelector('title'); -assert.equal(title?.text?.trim(), 'Responsive Web Design Piano'); -``` - -# --seed-- - -## --seed-contents-- - -```html ---fcc-editable-region-- - ---fcc-editable-region-- -``` - -```css - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-002.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-002.md deleted file mode 100644 index 5ff7f56cd8..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-002.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -id: 612e77aba7ca691f598feb02 -title: Part 2 -challengeType: 0 -dashedName: part-2 ---- - -# --description-- - -Add two `meta` tags, one to optimize your page for mobile devices, and one to specify an accepted `charset` for the page. - -# --hints-- - -You should add two `meta` elements to your page. - -```js -const meta = document.querySelector('meta'); -assert.exists(meta); -``` - -You should have two `meta` elements. - -```js -const meta = document.querySelectorAll('meta'); -assert(meta?.length === 2); -``` - -One `meta` element should have a `name` set to `viewport`, and `content` set to `width=device-width, initial-scale=1.0`. - -```js -const meta = [...document.querySelectorAll('meta')]; -const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0' && !m?.getAttribute('charset')); -assert.exists(target); -``` - -The other `meta` element should have the `charset` attribute set to `UTF-8`. - -```js -const meta = [...document.querySelectorAll('meta')]; -const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset') === 'UTF-8'); -assert.exists(target); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - Responsive Web Design Piano - --fcc-editable-region-- - - --fcc-editable-region-- - - - -``` - -```css - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-003.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-003.md deleted file mode 100644 index 9940e56653..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-003.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -id: 612e78af05201622d4bab8aa -title: Part 3 -challengeType: 0 -dashedName: part-3 ---- - -# --description-- - -Time to start working on the piano. Create a `div` element within your `body` element with the `id` set to `piano`. - -# --hints-- - -You should create a new `div` element. - -```js -const div = document.querySelector('div'); -assert.exists(div); -``` - -Your `div` should be within your `body` element. - -```js -const div = document.querySelector('div'); -assert(div?.parentElement?.localName === 'body'); -``` - -Your `div` should have the `id` set to `piano`. - -```js -const div = document.querySelector('div'); -assert(div?.getAttribute('id') === 'piano'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Responsive Web Design Piano - - - - --fcc-editable-region-- - - --fcc-editable-region-- - - -``` - -```css - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-004.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-004.md deleted file mode 100644 index 0f8349f356..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-004.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 612e7d1c29fb872d6384379c -title: Part 4 -challengeType: 0 -dashedName: part-4 ---- - -# --description-- - -Nest a second `div` within your existing `div`, and set the `class` to be `keys`. - -# --hints-- - -You should create a second `div` element. - -```js -const divDiv = document.querySelectorAll('div'); -assert(divDiv?.length === 2); -``` - -Your new `div` element should be within your existing `div` element. - -```js -const div = document.querySelector('div'); -assert(div?.children?.length === 1); -assert(div?.children?.[0]?.localName === 'div'); -``` - -Your new `div` element should have the `class` set to `keys`. - -```js -const div = document.querySelector('div'); -assert(div?.children?.[0]?.className === 'keys'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Responsive Web Design Piano - - - -
- --fcc-editable-region-- - - --fcc-editable-region-- -
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-005.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-005.md deleted file mode 100644 index 3d4eb1684b..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-005.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 612e804c54d5e7308d7ebe56 -title: Part 5 -challengeType: 0 -dashedName: part-5 ---- - -# --description-- - -Within your `.keys` element, add seven `div` elements. Give them all the class `key`. - -# --hints-- - -You should create seven new `div` elements. - -```js -const divDivDiv = document.querySelectorAll('div'); -assert(divDivDiv?.length === 9); -``` - -Your seven new `div` elements should be within your `.keys` element. - -```js -const keys = document.querySelector('.keys'); -assert([...keys?.children].length === 7); -assert([...keys?.children].every(child => child?.tagName === 'DIV')); -``` - -Your seven new `div` elements should all have the `class` set to `key`. - -```js -const keys = document.querySelector('.keys'); -assert([...keys?.children].every(child => child?.classList?.contains('key'))); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Responsive Web Design Piano - - - - --fcc-editable-region-- -
-
-
- --fcc-editable-region-- - - -``` - -```css - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-006.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-006.md deleted file mode 100644 index 26d1485ed8..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-006.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -id: 612e813b3ba67633222cbe54 -title: Part 6 -challengeType: 0 -dashedName: part-6 ---- - -# --description-- - -Remember that a `class` attribute can have multiple values. To separate your white keys from your black keys, you'll add a second `class` value of `black--key`. Add this to your second, third, fifth, sixth, and seventh `.key` elements. - -# --hints-- - -Your second `.key` element should also have a `class` of `black--key`. - -```js -const key = document.querySelectorAll('.key')?.[1]; -assert(key?.className?.includes('black--key')); -``` - -Your third `.key` should have `black--key` in the `class`. - -```js -const third = document.querySelectorAll('.key')?.[2]; -assert(third?.classList?.contains('black--key')); -``` - -Your fifth `.key` should have `black--key` in the `class`. - -```js -const fifth = document.querySelectorAll('.key')?.[4]; -assert(fifth?.classList?.contains('black--key')); -``` - -Your sixth `.key` should have `black--key` in the `class`. - -```js -const sixth = document.querySelectorAll('.key')?.[5]; -assert(sixth?.classList?.contains('black--key')); -``` - -Your seventh `.key` should have `black--key` in the `class`. - -```js -const seventh = document.querySelectorAll('.key')?.[6]; -assert(seventh?.classList?.contains('black--key')); -``` - -You should have five `.black--key` elements. - -```js -const blackKeys = document.querySelectorAll('.black--key'); -assert(blackKeys?.length === 5); -``` - -You should have seven `.key` elements. - -```js -const keys = document.querySelectorAll('.key'); -assert(keys?.length === 7); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Responsive Web Design Piano - - - - --fcc-editable-region-- -
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - -``` - -```css - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-007.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-007.md deleted file mode 100644 index aec9d36c58..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-007.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: 612e8279827a28352ce83a72 -title: Part 7 -challengeType: 0 -dashedName: part-7 ---- - -# --description-- - -Now copy the set of seven `.key` elements, and paste two more sets into the `.keys` div. - -# --hints-- - -You should have 21 `.key` elements. - -```js -const keys = document.querySelectorAll('.key'); -assert(keys?.length === 21); -``` - -You should have 15 `.black--key` elements. - -```js -const blackKeys = document.querySelectorAll('.black--key'); -assert(blackKeys?.length === 15); -``` - -All `.key` elements should be within your `.keys` element. - -```js -const keys = document.querySelector('.keys'); -assert(keys?.querySelectorAll('.key')?.length === 21); -``` - -All `.black--key` elements should be within your `.keys` element. - -```js -const keys = document.querySelector('.keys'); -assert(keys?.querySelectorAll('.black--key')?.length === 15); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Responsive Web Design Piano - - - - --fcc-editable-region-- -
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - -``` - -```css - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-008.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-008.md deleted file mode 100644 index 5f0ed3a6c3..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-008.md +++ /dev/null @@ -1,99 +0,0 @@ ---- -id: 612e83ec2eca1e370f830511 -title: Part 8 -challengeType: 0 -dashedName: part-8 ---- - -# --description-- - -Add a `link` element within your `head` element. For that `link` element, set the `rel` attribute to `stylesheet` and the `href` to `./styles.css`. - -# --hints-- - -Your code should have a `link` element. - -```js -assert.match(code, //i)); -``` - -Your `link` element should be within your `head` element. - -```js -assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)) -``` - -Your `link` element should have a `rel` attribute with the value `stylesheet`. - -```js -assert.match(code, / - - - --fcc-editable-region-- - - Responsive Web Design Piano - - --fcc-editable-region-- - - -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-009.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-009.md deleted file mode 100644 index 515becab1d..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-009.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -id: 612e89562043183c86df287c -title: Part 9 -challengeType: 0 -dashedName: part-9 ---- - -# --description-- - -Browsers can apply default margin and padding values to specific elements. To make sure your piano looks correct, you need to reset the box model. - -Add an `html` rule selector to your CSS file, and set the `box-sizing` property to `border-box`. - -# --hints-- - -You should have an `html` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('html')); -``` - -Your `html` selector should have the `box-sizing` property set to `border-box`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing === 'border-box'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Responsive Web Design Piano - - - - -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-010.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-010.md deleted file mode 100644 index 7983760962..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-010.md +++ /dev/null @@ -1,83 +0,0 @@ ---- -id: 612e89d254fe5d3df7d6693d -title: Part 10 -challengeType: 0 -dashedName: part-10 ---- - -# --description-- - -Now that you have reset the `html` box model, you need to pass that on to the elements within as well. To do this, you can set the `box-sizing` property to `inherit`, which will tell the targeted elements to use the same value as the parent element. - -You will also need to target the pseudo-elements, which are special keywords that follow a selector. The two pseudo-elements you will be using are the `::before` and `::after` pseudo-elements. - -The `::before` selector creates a pseudo-element which is the first child of the selected element, while the `::after` selector creates a pseudo-element which is the last child of the selected element. These pseudo-elements are often used to create cosmetic content, which you will see later in this project. - -For now, create a CSS selector to target all elements with `*`, and include the pseudo-elements with `::before` and `::after`. Set the `box-sizing` property to `inherit`. - -# --hints-- - -You should have a `*, ::before, ::after` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')); -``` - -Your `*, ::before, ::after` selector should have the `box-sizing` property set to `inherit`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.boxSizing === 'inherit'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Responsive Web Design Piano - - - - -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css ---fcc-editable-region-- -html { - box-sizing: border-box; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-011.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-011.md deleted file mode 100644 index b807dc603b..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-011.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -id: 612e8eebe3a6dc3fcc33a66f -title: Part 11 -challengeType: 0 -dashedName: part-11 ---- - -# --description-- - -Now target your `#piano` element with an `id` selector. Set `background-color` property to `#00471b`, the `width` property to `992px` and the `height` property to `290px`. - -# --hints-- - -You should have a `#piano` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#piano')); -``` - -Your `#piano` selector should have the `background-color` property set to `#00471b`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#piano')?.backgroundColor === 'rgb(0, 71, 27)'); -``` - -Your `#piano` selector should have a `width` property set to `992px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#piano')?.width === '992px'); -``` - -Your `#piano` selector should have the `height` set to `290px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#piano')?.height === '290px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Responsive Web Design Piano - - - - -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-012.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-012.md deleted file mode 100644 index 65700f1269..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-012.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -id: 612e95ef2e4bdf41f69067f9 -title: Part 12 -challengeType: 0 -dashedName: part-12 ---- - -# --description-- - -Set the `margin` of the `#piano` to `80px auto`. - -# --hints-- - -Your `#piano` selector should have the `margin` property set to `80px auto`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#piano')?.margin === '80px auto'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Responsive Web Design Piano - - - - -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - ---fcc-editable-region-- -#piano { - background-color: #00471b; - width: 992px; - height: 290px; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-013.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-013.md deleted file mode 100644 index ee8bf8e481..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-013.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 612e96fc87fe8e44f69f7ec5 -title: Part 13 -challengeType: 0 -dashedName: part-13 ---- - -# --description-- - -Time to style the keys. Below the `#piano` rule, target the `.keys` with a `class` selector. Give the new rule a `background-color` property of `#040404`, a `width` property of `949px` and a `height` property of `180px`. - -# --hints-- - -You should have a `.keys` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.keys')); -``` - -Your `.keys` selector should have a `background-color` property set to `#040404`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.keys')?.backgroundColor === 'rgb(4, 4, 4)'); -``` - -Your `.keys` selector should have the `width` property set to `949px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.keys')?.width === '949px'); -``` - -Your `.keys` selector should have a `height` property set to `180px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.keys')?.height === '180px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Responsive Web Design Piano - - - - -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-014.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-014.md deleted file mode 100644 index f427db6059..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-014.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 612e98f3245c98475e49cfc6 -title: Part 14 -challengeType: 0 -dashedName: part-14 ---- - -# --description-- - -Give the `.keys` a `padding-left` of `2px`. - -# --hints-- - -Your `.keys` selector should have a `padding-left` property set to `2px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.keys')?.paddingLeft === '2px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Responsive Web Design Piano - - - - -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; -} - ---fcc-editable-region-- -.keys { - background-color: #040404; - width: 949px; - height: 180px; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-015.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-015.md deleted file mode 100644 index 1c96eea7d9..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-015.md +++ /dev/null @@ -1,89 +0,0 @@ ---- -id: 612e9a21381a1949327512e6 -title: Part 15 -challengeType: 0 -dashedName: part-15 ---- - -# --description-- - -Move the keys into position by adjusting the `#piano` selector. Set the `padding` property to `90px 20px 0 20px`. - -# --hints-- - -Your `#piano` selector should have the `padding` property set to `90px 20px 0 20px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#piano')?.padding === '90px 20px 0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Responsive Web Design Piano - - - - -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - ---fcc-editable-region-- -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; -} ---fcc-editable-region-- - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-016.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-016.md deleted file mode 100644 index 2421f53caa..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-016.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -id: 612e9d142affc44a453655db -title: Part 16 -challengeType: 0 -dashedName: part-16 ---- - -# --description-- - -Time to style the keys themselves. Create a `class` selector for the `.key` elements. Set the `background-color` set to the value `#ffffff`, the `position` property to `relative`, the `width` property to `41px`, and the `height` property to `175px`. - -# --hints-- - -You should have a `.key` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key')); -``` - -Your `.key` selector should have a `background-color` property set to `#ffffff`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key')?.backgroundColor === 'rgb(255, 255, 255)'); -``` - -Your `.key` selector should have the `position` property set to `relative`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key')?.position === 'relative'); -``` - -Your `.key` selector should have a `width` property set to `41px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key')?.width === '41px'); -``` - -Your `.key` selector should have a `height` property set to `175px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key')?.height === '175px'); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - Responsive Web Design Piano - - - - -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-017.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-017.md deleted file mode 100644 index 277191cef9..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-017.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: 612e9f1e7e5ccd4fa9ada0be -title: Part 17 -challengeType: 0 -dashedName: part-17 ---- - -# --description-- - -Give the `.key` a `margin` of `2px` and a `float` property set to `left`. - -# --hints-- - -Your `.key` selector should have a `margin` property set to `2px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key')?.margin === '2px'); -``` - -Your `.key` selector should have a `float` property set to `left`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key')?.float === 'left'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Responsive Web Design Piano - - - - -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} - ---fcc-editable-region-- -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-018.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-018.md deleted file mode 100644 index 75e2a6416f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-018.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -id: 612ea4c4993aba52ab4aa32e -title: Part 18 -challengeType: 0 -dashedName: part-18 ---- - -# --description-- - -Now it is time to use the pseudo-selectors you prepared for earlier. To create the black keys, add a new `.key.black--key::after` selector. This will target the elements with the class `key black--key`, and select the pseudo-element after these elements in the HTML. - -In the new selector, set the `background-color` to `#1d1e22`. Also set the `content` property to `""`. This will make the pseudo-elements empty. - -The `content` property is used to set or override the content of the element. By default, the psuedo-elements created by the `::before` and `::after` pseudo-selectors are empty, and the elements will not be rendered to the page. Setting the `content` property to an empty string `""` will ensure the element is rendered to the page while still being empty. - -If you would like to experiment, try removing the `background-color` property and setting different values for the `content` property, such as `"♥"`. Remember to undo these changes when you are done so the tests pass. - -# --hints-- - -You should have a `.key.black--key::after` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')); -``` - -Your `.key.black--key::after` selector should have a `background-color` property set to `#1d1e22`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.backgroundColor === 'rgb(29, 30, 34)'); -``` - -Your `.key.black--key::after` selector should have a `content` property set to `""`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.content === '""'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Responsive Web Design Piano - - - - -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-019.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-019.md deleted file mode 100644 index 6de71e0b35..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-019.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -id: 612ea97df5742154772f312e -title: Part 19 -challengeType: 0 -dashedName: part-19 ---- - -# --description-- - -Give the `.key.black--key::after` a `position` property set to `absolute` and a `left` property set to `-18px`. - -# --hints-- - -Your `.key.black--key::after` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.position === 'absolute'); -``` - -Your `.key.black--key::after` selector should have a `left` property set to `-18px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.left === '-18px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Responsive Web Design Piano - - - - -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; -} - ---fcc-editable-region-- -.key.black--key::after { - background-color: #1d1e22; - content: ""; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-020.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-020.md deleted file mode 100644 index 219ca6145d..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-020.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 612ead8788d28655ef8db056 -title: Part 20 -challengeType: 0 -dashedName: part-20 ---- - -# --description-- - -For the `.key.black--key::after`, set the `width` to `32px` and the `height` to `100px`. - -# --hints-- - -Your `.key.black--key::after` should have a `width` property set to `32px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.width === '32px'); -``` - -Your `.key.black--key::after` should have a `height` property set to `100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.height === '100px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Responsive Web Design Piano - - - - -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; -} - ---fcc-editable-region-- -.key.black--key::after { - background-color: #1d1e22; - content: ""; - position: absolute; - left: -18px; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-021.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-021.md deleted file mode 100644 index 2601095949..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-021.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -id: 612eaf56b7ba3257fdbfb0db -title: Part 21 -challengeType: 0 -dashedName: part-21 ---- - -# --description-- - -The piano needs the freeCodeCamp logo to make it official. - -Add an `img` element before your `.keys` element. Give the `img` a `class` of `logo`, and set the `src` to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`. Give it an `alt` text of `freeCodeCamp Logo`. - -# --hints-- - -You should add a new `img` element. - -```js -assert(document.querySelectorAll('img')?.length === 1); -``` - -Your `img` element should come before your first `.key` element. - -```js -const img = document.querySelector('img'); -assert(img?.nextElementSibling?.className === 'keys'); -assert(img?.previousElementSibling === null); -``` - -Your `img` element should have a `class` set to logo. - -```js -const img = document.querySelector('img'); -assert(img?.className === 'logo'); -``` - -Your `img` element should have a `src` set to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`. - -```js -const img = document.querySelector('img'); -assert(img?.getAttribute('src') === 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg'); -``` - -Your `img` element should have an `alt` attribute set to `freeCodeCamp Logo`. - -```js -assert(document.querySelector('img')?.getAttribute('alt')?.toLowerCase() === 'freecodecamp logo'); -``` - -Remember that casing and spelling matter. - -```js -assert(document.querySelector('img')?.getAttribute('alt') === 'freeCodeCamp Logo'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Responsive Web Design Piano - - - - - --fcc-editable-region-- -
-
- --fcc-editable-region-- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; -} - -.key.black--key::after { - background-color: #1d1e22; - content: ""; - position: absolute; - left: -18px; - width: 32px; - height: 100px; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-022.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-022.md deleted file mode 100644 index 4392e19d48..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-022.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -id: 612eb4893b63c75bb9251ddf -title: Part 22 -challengeType: 0 -dashedName: part-22 ---- - -# --description-- - -Start styling the logo by creating a `.logo` selector. Set the `width` to `200px`, a `position` of `absolute` and a `top` set to `23px`. - -# --hints-- - -You should have a `.logo` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.logo')); -``` - -Your `.logo` selector should have a `width` property set to `200px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.logo')?.width === '200px'); -``` - -Your `.logo` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.logo')?.position === 'absolute'); -``` - -Your `.logo` selector should have a `top` property set to `23px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.logo')?.top === '23px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Responsive Web Design Piano - - - - -
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; -} - -.key.black--key::after { - background-color: #1d1e22; - content: ""; - position: absolute; - left: -18px; - width: 32px; - height: 100px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-023.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-023.md deleted file mode 100644 index 078ce6b478..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-023.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -id: 612eb75153591b5e3b1ab65e -title: Part 23 -challengeType: 0 -dashedName: part-23 ---- - -# --description-- - -The `img` element needs its parent to have a `position` set as a point of reference. Set the `position` of the `#piano` selector to `relative`. - -# --hints-- - -Your `#piano` selector should have a `position` property set to `relative`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#piano')?.position === 'relative'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Responsive Web Design Piano - - - - -
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - ---fcc-editable-region-- -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; -} ---fcc-editable-region-- - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; -} - -.key.black--key::after { - background-color: #1d1e22; - content: ""; - position: absolute; - left: -18px; - width: 32px; - height: 100px; -} - -.logo { - width: 200px; - position: absolute; - top: 23px; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-024.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-024.md deleted file mode 100644 index 694763a787..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-024.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 612eb7ca8c275d5f89c73333 -title: Part 24 -challengeType: 0 -dashedName: part-24 ---- - -# --description-- - -To smooth the sharp edges of the piano and keys, start by giving the `#piano` a `border-radius` of `10px`. - -# --hints-- - -Your `#piano` selector should have a `border-radius` property set to `10px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#piano')?.borderRadius === '10px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Responsive Web Design Piano - - - - -
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - ---fcc-editable-region-- -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; - position: relative; -} ---fcc-editable-region-- - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; -} - -.key.black--key::after { - background-color: #1d1e22; - content: ""; - position: absolute; - left: -18px; - width: 32px; - height: 100px; -} - -.logo { - width: 200px; - position: absolute; - top: 23px; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-025.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-025.md deleted file mode 100644 index f735683ed6..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-025.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -id: 612eb8e984cd73677a92b7e9 -title: Part 25 -challengeType: 0 -dashedName: part-25 ---- - -# --description-- - -Give the `.key` selector a `border-radius` value of `0 0 3px 3px`. - -# --hints-- - -Your `.key` selector should have a `border-radius` property set to `0 0 3px 3px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key')?.borderRadius === '0px 0px 3px 3px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Responsive Web Design Piano - - - - -
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; - position: relative; - border-radius: 10px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} - ---fcc-editable-region-- -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; -} ---fcc-editable-region-- - -.key.black--key::after { - background-color: #1d1e22; - content: ""; - position: absolute; - left: -18px; - width: 32px; - height: 100px; -} - -.logo { - width: 200px; - position: absolute; - top: 23px; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-026.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-026.md deleted file mode 100644 index 8fbf0f194c..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-026.md +++ /dev/null @@ -1,118 +0,0 @@ ---- -id: 612eb934f64a4d6890a45518 -title: Part 26 -challengeType: 0 -dashedName: part-26 ---- - -# --description-- - -Give the `.key.black--key::after` selector a `border-radius` of `0 0 3px 3px` to match the keys. - -# --hints-- - -Your `.key.black--key::after` selector should have a `border-radius` property set to `0 0 3px 3px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.borderRadius === '0px 0px 3px 3px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Responsive Web Design Piano - - - - -
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; - position: relative; - border-radius: 10px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; - border-radius: 0 0 3px 3px; -} - ---fcc-editable-region-- -.key.black--key::after { - background-color: #1d1e22; - content: ""; - position: absolute; - left: -18px; - width: 32px; - height: 100px; -} ---fcc-editable-region-- - -.logo { - width: 200px; - position: absolute; - top: 23px; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-027.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-027.md deleted file mode 100644 index ab85fd6e5c..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-027.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -id: 612ebcba99bfa46a15370b11 -title: Part 27 -challengeType: 0 -dashedName: part-27 ---- - -# --description-- - -Now you need to make it responsive. Add a `@media` query with a `max-width` of `768px`. - -# --hints-- - -You should add a new `@media` query. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 1); -``` - -Your `@media` query should have a `max-width` of `768px`. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('media')[0]?.media?.mediaText === '(max-width: 768px)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Responsive Web Design Piano - - - - -
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; - position: relative; - border-radius: 10px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; - border-radius: 0 0 3px 3px; -} - -.key.black--key::after { - background-color: #1d1e22; - content: ""; - position: absolute; - left: -18px; - width: 32px; - height: 100px; - border-radius: 0 0 3px 3px; -} - -.logo { - width: 200px; - position: absolute; - top: 23px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-028.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-028.md deleted file mode 100644 index f74be0b731..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-028.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -id: 612ebe7fe6d07e6b76d1cae2 -title: Part 28 -challengeType: 0 -dashedName: part-28 ---- - -# --description-- - -Add a new `#piano` selector within your `@media` query, and set the `width` to `335px`. - -# --hints-- - -Your `@media` rule should have a `#piano` selector. - -```js -const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)'); -const piano = rules?.find(rule => rule.selectorText === '#piano'); -assert(piano); -``` - -Your new `#piano` selector should have a `width` of `335px`. - -```js -const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)'); -const piano = rules?.find(rule => rule.selectorText === '#piano'); -assert(piano?.style.width === '335px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Responsive Web Design Piano - - - - -
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; - position: relative; - border-radius: 10px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; - border-radius: 0 0 3px 3px; -} - -.key.black--key::after { - background-color: #1d1e22; - content: ""; - position: absolute; - left: -18px; - width: 32px; - height: 100px; - border-radius: 0 0 3px 3px; -} - -.logo { - width: 200px; - position: absolute; - top: 23px; -} - ---fcc-editable-region-- -@media (max-width: 768px) { - -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-029.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-029.md deleted file mode 100644 index 52185846eb..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-029.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -id: 612ebedec97e096c8bf64999 -title: Part 29 -challengeType: 0 -dashedName: part-29 ---- - -# --description-- - -Within the `@media` query, add a `.keys` selector and set the `width` to `318px`. - -# --hints-- - - -Your `@media` rule should have a `.keys` selector. - -```js -const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)'); -const keys = rules?.find(rule => rule.selectorText === '.keys'); -assert(keys); -``` - -Your new `.keys` selector should have a `width` of `318px`. - -```js -const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)'); -const keys = rules?.find(rule => rule.selectorText === '.keys'); -assert(keys?.style.width === '318px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Responsive Web Design Piano - - - - -
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; - position: relative; - border-radius: 10px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; - border-radius: 0 0 3px 3px; -} - -.key.black--key::after { - background-color: #1d1e22; - content: ""; - position: absolute; - left: -18px; - width: 32px; - height: 100px; - border-radius: 0 0 3px 3px; -} - -.logo { - width: 200px; - position: absolute; - top: 23px; -} - ---fcc-editable-region-- -@media (max-width: 768px) { - #piano { - width: 335px; - } -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-030.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-030.md deleted file mode 100644 index 477fc06ad8..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-030.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 612ebf9a210f2b6d77001e68 -title: Part 30 -challengeType: 0 -dashedName: part-30 ---- - -# --description-- - -Now add a `.logo` selector to the `@media` query, and set the `width` property to `150px`. - -# --hints-- - -Your `@media` rule should have a `.logo` selector. - -```js -const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)'); -const logo = rules?.find(rule => rule.selectorText === '.logo'); -assert(logo); -``` - -Your new `.logo` selector should have a `width` of `150px`. - -```js -const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)'); -const logo = rules?.find(rule => rule.selectorText === '.logo'); -assert(logo?.style.width === '150px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Responsive Web Design Piano - - - - -
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; - position: relative; - border-radius: 10px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; - border-radius: 0 0 3px 3px; -} - -.key.black--key::after { - background-color: #1d1e22; - content: ""; - position: absolute; - left: -18px; - width: 32px; - height: 100px; - border-radius: 0 0 3px 3px; -} - -.logo { - width: 200px; - position: absolute; - top: 23px; -} - ---fcc-editable-region-- -@media (max-width: 768px) { - #piano { - width: 335px; - } - - .keys { - width: 318px; - } -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-031.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-031.md deleted file mode 100644 index 9fe39107a0..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-031.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -id: 612ec0490ae8626e9adf82e4 -title: Part 31 -challengeType: 0 -dashedName: part-31 ---- - -# --description-- - -You might have noticed the keys collapse when the browser window is smaller than `768px`. Set `overflow` to `hidden` in the first `.keys` selector, to take care of this issue. This property will hide any element that is pushed outside the set `width` value of `.keys`. - -# --hints-- - -Your original `.keys` selector should have the `overflow` property set to `hidden`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.keys')?.overflow === 'hidden'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Responsive Web Design Piano - - - - -
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; - position: relative; - border-radius: 10px; -} - ---fcc-editable-region-- -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; -} ---fcc-editable-region-- - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; - border-radius: 0 0 3px 3px; -} - -.key.black--key::after { - background-color: #1d1e22; - content: ""; - position: absolute; - left: -18px; - width: 32px; - height: 100px; - border-radius: 0 0 3px 3px; -} - -.logo { - width: 200px; - position: absolute; - top: 23px; -} - -@media (max-width: 768px) { - #piano { - width: 335px; - } - - .keys { - width: 318px; - } - - .logo { - width: 150px; - } -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-032.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-032.md deleted file mode 100644 index 55882ff41b..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-032.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -id: 612ec19d5268da7074941f84 -title: Part 32 -challengeType: 0 -dashedName: part-32 ---- - -# --description-- - -Add another `@media` rule to apply if the browser window is bigger than `769px` but smaller than `1199px`. - -# --hints-- - -You should add a new `@media` query. - -```js -assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 2); -``` - -Your `@media` query should have a `min-width` of `769px` and a `max-width` of `1199px`. - -```js -const mediaText = new __helpers.CSSHelp(document).getCSSRules('media')[1]?.media?.mediaText; -assert(mediaText === '(max-width: 1199px) and (min-width: 769px)' || mediaText === '(min-width: 769px) and (max-width: 1199px)'); -``` - - -# --seed-- - -## --seed-contents-- - -```html - - - - - Responsive Web Design Piano - - - - -
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; - position: relative; - border-radius: 10px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; - overflow: hidden; -} - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; - border-radius: 0 0 3px 3px; -} - -.key.black--key::after { - background-color: #1d1e22; - content: ""; - position: absolute; - left: -18px; - width: 32px; - height: 100px; - border-radius: 0 0 3px 3px; -} - -.logo { - width: 200px; - position: absolute; - top: 23px; -} - -@media (max-width: 768px) { - #piano { - width: 335px; - } - - .keys { - width: 318px; - } - - .logo { - width: 150px; - } -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-033.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/part-033.md deleted file mode 100644 index 2fe73bf72e..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-piano/part-033.md +++ /dev/null @@ -1,166 +0,0 @@ ---- -id: 612ec29c84b9a6718b1f5cec -title: Part 33 -challengeType: 0 -dashedName: part-33 ---- - -# --description-- - -For the new `@media` rule, set the `width` of the `#piano` to `675px` and the `width` of the `.keys` to `633px`. - -With that, your piano is complete! - -# --hints-- - -Your second `@media` rule should have a `#piano` selector. - -```js -const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)'); -const piano = rules?.find(rule => rule.selectorText === '#piano'); -assert(piano); -``` - -Your new `#piano` selector should have a `width` of `675px`. - -```js -const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)'); -const piano = rules?.find(rule => rule.selectorText === '#piano'); -assert(piano?.style.width === '675px'); -``` - -Your second `@media` rule should have a `.keys` selector. - -```js -const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)'); -const keys = rules?.find(rule => rule.selectorText === '.keys'); -assert(keys); -``` - -Your new `.keys` selector should have a `width` of `633px`. - -```js -const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)'); -const keys = rules?.find(rule => rule.selectorText === '.keys'); -assert(keys?.style.width === '633px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - Responsive Web Design Piano - - - - -
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- - -``` - -```css -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -#piano { - background-color: #00471b; - width: 992px; - height: 290px; - margin: 80px auto; - padding: 90px 20px 0 20px; - position: relative; - border-radius: 10px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; - overflow: hidden; -} - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; - border-radius: 0 0 3px 3px; -} - -.key.black--key::after { - background-color: #1d1e22; - content: ""; - position: absolute; - left: -18px; - width: 32px; - height: 100px; - border-radius: 0 0 3px 3px; -} - -.logo { - width: 200px; - position: absolute; - top: 23px; -} - -@media (max-width: 768px) { - #piano { - width: 335px; - } - - .keys { - width: 318px; - } - - .logo { - width: 150px; - } -} - ---fcc-editable-region-- -@media (max-width: 1199px) and (min-width: 769px) { - -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-001.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-001.md new file mode 100644 index 0000000000..9b86935fa0 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-001.md @@ -0,0 +1,131 @@ +--- +id: 612e6afc009b450a437940a1 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +Begin with the basic HTML structure. Add a `DOCTYPE` declaration and `html`, `head`, `body`, and `title` elements. Set the `title` to `Responsive Web Design Piano`. + +# --hints-- + +Your code should contain the `DOCTYPE` reference. + +```js +assert(code.match(/` after the type. + +```js +assert(code.match(//gi)); +``` + +Your `html` element should have an opening tag. + +```js +assert(code.match(//gi)); +``` + +Your `html` element should have a closing tag. + +```js +assert(code.match(/<\/html\s*>/)); +``` + +Your `html` element should be below the `DOCTYPE` declaration. + +```js +assert(code.match(/(?)/gi)); +``` + +You should have an opening `head` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `head` tag. + +```js +assert(code.match(/<\/head\s*>/i)); +``` + +You should have an opening `body` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `body` tag. + +```js +assert(code.match(/<\/body\s*>/i)); +``` + +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 `title` element. + +```js +const title = document.querySelector('title'); +assert.exists(title); +``` + +Your project should have a title of `Responsive Web Design Piano`. + +```js +const title = document.querySelector('title'); +assert.equal(title?.text?.trim()?.toLowerCase(), 'responsive web design piano') +``` + +Remember, the casing and spelling matter for the title. + +```js +const title = document.querySelector('title'); +assert.equal(title?.text?.trim(), 'Responsive Web Design Piano'); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-002.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-002.md new file mode 100644 index 0000000000..2479297821 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-002.md @@ -0,0 +1,64 @@ +--- +id: 612e77aba7ca691f598feb02 +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Add two `meta` tags, one to optimize your page for mobile devices, and one to specify an accepted `charset` for the page. + +# --hints-- + +You should add two `meta` elements to your page. + +```js +const meta = document.querySelector('meta'); +assert.exists(meta); +``` + +You should have two `meta` elements. + +```js +const meta = document.querySelectorAll('meta'); +assert(meta?.length === 2); +``` + +One `meta` element should have a `name` set to `viewport`, and `content` set to `width=device-width, initial-scale=1.0`. + +```js +const meta = [...document.querySelectorAll('meta')]; +const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0' && !m?.getAttribute('charset')); +assert.exists(target); +``` + +The other `meta` element should have the `charset` attribute set to `UTF-8`. + +```js +const meta = [...document.querySelectorAll('meta')]; +const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset') === 'UTF-8'); +assert.exists(target); +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + Responsive Web Design Piano + --fcc-editable-region-- + + --fcc-editable-region-- + + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-003.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-003.md new file mode 100644 index 0000000000..57d8e579ca --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-003.md @@ -0,0 +1,57 @@ +--- +id: 612e78af05201622d4bab8aa +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Time to start working on the piano. Create a `div` element within your `body` element with the `id` set to `piano`. + +# --hints-- + +You should create a new `div` element. + +```js +const div = document.querySelector('div'); +assert.exists(div); +``` + +Your `div` should be within your `body` element. + +```js +const div = document.querySelector('div'); +assert(div?.parentElement?.localName === 'body'); +``` + +Your `div` should have the `id` set to `piano`. + +```js +const div = document.querySelector('div'); +assert(div?.getAttribute('id') === 'piano'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Responsive Web Design Piano + + + + --fcc-editable-region-- + + --fcc-editable-region-- + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-004.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-004.md new file mode 100644 index 0000000000..50b4ec56af --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-004.md @@ -0,0 +1,60 @@ +--- +id: 612e7d1c29fb872d6384379c +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Nest a second `div` within your existing `div`, and set the `class` to be `keys`. + +# --hints-- + +You should create a second `div` element. + +```js +const divDiv = document.querySelectorAll('div'); +assert(divDiv?.length === 2); +``` + +Your new `div` element should be within your existing `div` element. + +```js +const div = document.querySelector('div'); +assert(div?.children?.length === 1); +assert(div?.children?.[0]?.localName === 'div'); +``` + +Your new `div` element should have the `class` set to `keys`. + +```js +const div = document.querySelector('div'); +assert(div?.children?.[0]?.className === 'keys'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Responsive Web Design Piano + + + +
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-005.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-005.md new file mode 100644 index 0000000000..20c4ceb5aa --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-005.md @@ -0,0 +1,60 @@ +--- +id: 612e804c54d5e7308d7ebe56 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Within your `.keys` element, add seven `div` elements. Give them all the class `key`. + +# --hints-- + +You should create seven new `div` elements. + +```js +const divDivDiv = document.querySelectorAll('div'); +assert(divDivDiv?.length === 9); +``` + +Your seven new `div` elements should be within your `.keys` element. + +```js +const keys = document.querySelector('.keys'); +assert([...keys?.children].length === 7); +assert([...keys?.children].every(child => child?.tagName === 'DIV')); +``` + +Your seven new `div` elements should all have the `class` set to `key`. + +```js +const keys = document.querySelector('.keys'); +assert([...keys?.children].every(child => child?.classList?.contains('key'))); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Responsive Web Design Piano + + + + --fcc-editable-region-- +
+
+
+ --fcc-editable-region-- + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-006.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-006.md new file mode 100644 index 0000000000..b7791815c3 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-006.md @@ -0,0 +1,95 @@ +--- +id: 612e813b3ba67633222cbe54 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Remember that a `class` attribute can have multiple values. To separate your white keys from your black keys, you'll add a second `class` value of `black--key`. Add this to your second, third, fifth, sixth, and seventh `.key` elements. + +# --hints-- + +Your second `.key` element should also have a `class` of `black--key`. + +```js +const key = document.querySelectorAll('.key')?.[1]; +assert(key?.className?.includes('black--key')); +``` + +Your third `.key` should have `black--key` in the `class`. + +```js +const third = document.querySelectorAll('.key')?.[2]; +assert(third?.classList?.contains('black--key')); +``` + +Your fifth `.key` should have `black--key` in the `class`. + +```js +const fifth = document.querySelectorAll('.key')?.[4]; +assert(fifth?.classList?.contains('black--key')); +``` + +Your sixth `.key` should have `black--key` in the `class`. + +```js +const sixth = document.querySelectorAll('.key')?.[5]; +assert(sixth?.classList?.contains('black--key')); +``` + +Your seventh `.key` should have `black--key` in the `class`. + +```js +const seventh = document.querySelectorAll('.key')?.[6]; +assert(seventh?.classList?.contains('black--key')); +``` + +You should have five `.black--key` elements. + +```js +const blackKeys = document.querySelectorAll('.black--key'); +assert(blackKeys?.length === 5); +``` + +You should have seven `.key` elements. + +```js +const keys = document.querySelectorAll('.key'); +assert(keys?.length === 7); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Responsive Web Design Piano + + + + --fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-007.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-007.md new file mode 100644 index 0000000000..093577419d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-007.md @@ -0,0 +1,74 @@ +--- +id: 612e8279827a28352ce83a72 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Now copy the set of seven `.key` elements, and paste two more sets into the `.keys` div. + +# --hints-- + +You should have 21 `.key` elements. + +```js +const keys = document.querySelectorAll('.key'); +assert(keys?.length === 21); +``` + +You should have 15 `.black--key` elements. + +```js +const blackKeys = document.querySelectorAll('.black--key'); +assert(blackKeys?.length === 15); +``` + +All `.key` elements should be within your `.keys` element. + +```js +const keys = document.querySelector('.keys'); +assert(keys?.querySelectorAll('.key')?.length === 21); +``` + +All `.black--key` elements should be within your `.keys` element. + +```js +const keys = document.querySelector('.keys'); +assert(keys?.querySelectorAll('.black--key')?.length === 15); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Responsive Web Design Piano + + + + --fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-008.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-008.md new file mode 100644 index 0000000000..d1cb11e90f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-008.md @@ -0,0 +1,99 @@ +--- +id: 612e83ec2eca1e370f830511 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Add a `link` element within your `head` element. For that `link` element, set the `rel` attribute to `stylesheet` and the `href` to `./styles.css`. + +# --hints-- + +Your code should have a `link` element. + +```js +assert.match(code, //i)); +``` + +Your `link` element should be within your `head` element. + +```js +assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)) +``` + +Your `link` element should have a `rel` attribute with the value `stylesheet`. + +```js +assert.match(code, / + + + --fcc-editable-region-- + + Responsive Web Design Piano + + --fcc-editable-region-- + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-009.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-009.md new file mode 100644 index 0000000000..f18542f941 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-009.md @@ -0,0 +1,77 @@ +--- +id: 612e89562043183c86df287c +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Browsers can apply default margin and padding values to specific elements. To make sure your piano looks correct, you need to reset the box model. + +Add an `html` rule selector to your CSS file, and set the `box-sizing` property to `border-box`. + +# --hints-- + +You should have an `html` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('html')); +``` + +Your `html` selector should have the `box-sizing` property set to `border-box`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing === 'border-box'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Responsive Web Design Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-010.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-010.md new file mode 100644 index 0000000000..e14565669f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-010.md @@ -0,0 +1,83 @@ +--- +id: 612e89d254fe5d3df7d6693d +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Now that you have reset the `html` box model, you need to pass that on to the elements within as well. To do this, you can set the `box-sizing` property to `inherit`, which will tell the targeted elements to use the same value as the parent element. + +You will also need to target the pseudo-elements, which are special keywords that follow a selector. The two pseudo-elements you will be using are the `::before` and `::after` pseudo-elements. + +The `::before` selector creates a pseudo-element which is the first child of the selected element, while the `::after` selector creates a pseudo-element which is the last child of the selected element. These pseudo-elements are often used to create cosmetic content, which you will see later in this project. + +For now, create a CSS selector to target all elements with `*`, and include the pseudo-elements with `::before` and `::after`. Set the `box-sizing` property to `inherit`. + +# --hints-- + +You should have a `*, ::before, ::after` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')); +``` + +Your `*, ::before, ::after` selector should have the `box-sizing` property set to `inherit`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.boxSizing === 'inherit'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Responsive Web Design Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +html { + box-sizing: border-box; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-011.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-011.md new file mode 100644 index 0000000000..342f077016 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-011.md @@ -0,0 +1,95 @@ +--- +id: 612e8eebe3a6dc3fcc33a66f +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Now target your `#piano` element with an `id` selector. Set `background-color` property to `#00471b`, the `width` property to `992px` and the `height` property to `290px`. + +# --hints-- + +You should have a `#piano` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#piano')); +``` + +Your `#piano` selector should have the `background-color` property set to `#00471b`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#piano')?.backgroundColor === 'rgb(0, 71, 27)'); +``` + +Your `#piano` selector should have a `width` property set to `992px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#piano')?.width === '992px'); +``` + +Your `#piano` selector should have the `height` set to `290px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#piano')?.height === '290px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Responsive Web Design Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-012.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-012.md new file mode 100644 index 0000000000..d83c5e9cb2 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-012.md @@ -0,0 +1,81 @@ +--- +id: 612e95ef2e4bdf41f69067f9 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Set the `margin` of the `#piano` to `80px auto`. + +# --hints-- + +Your `#piano` selector should have the `margin` property set to `80px auto`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#piano')?.margin === '80px auto'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Responsive Web Design Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +--fcc-editable-region-- +#piano { + background-color: #00471b; + width: 992px; + height: 290px; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-013.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-013.md new file mode 100644 index 0000000000..af6c06e473 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-013.md @@ -0,0 +1,102 @@ +--- +id: 612e96fc87fe8e44f69f7ec5 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Time to style the keys. Below the `#piano` rule, target the `.keys` with a `class` selector. Give the new rule a `background-color` property of `#040404`, a `width` property of `949px` and a `height` property of `180px`. + +# --hints-- + +You should have a `.keys` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.keys')); +``` + +Your `.keys` selector should have a `background-color` property set to `#040404`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.keys')?.backgroundColor === 'rgb(4, 4, 4)'); +``` + +Your `.keys` selector should have the `width` property set to `949px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.keys')?.width === '949px'); +``` + +Your `.keys` selector should have a `height` property set to `180px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.keys')?.height === '180px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Responsive Web Design Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-014.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-014.md new file mode 100644 index 0000000000..da26b4eb07 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-014.md @@ -0,0 +1,88 @@ +--- +id: 612e98f3245c98475e49cfc6 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Give the `.keys` a `padding-left` of `2px`. + +# --hints-- + +Your `.keys` selector should have a `padding-left` property set to `2px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.keys')?.paddingLeft === '2px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Responsive Web Design Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; +} + +--fcc-editable-region-- +.keys { + background-color: #040404; + width: 949px; + height: 180px; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-015.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-015.md new file mode 100644 index 0000000000..765fe93a5f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-015.md @@ -0,0 +1,89 @@ +--- +id: 612e9a21381a1949327512e6 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Move the keys into position by adjusting the `#piano` selector. Set the `padding` property to `90px 20px 0 20px`. + +# --hints-- + +Your `#piano` selector should have the `padding` property set to `90px 20px 0 20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#piano')?.padding === '90px 20px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Responsive Web Design Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +--fcc-editable-region-- +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; +} +--fcc-editable-region-- + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-016.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-016.md new file mode 100644 index 0000000000..1205627f99 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-016.md @@ -0,0 +1,117 @@ +--- +id: 612e9d142affc44a453655db +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Time to style the keys themselves. Create a `class` selector for the `.key` elements. Set the `background-color` set to the value `#ffffff`, the `position` property to `relative`, the `width` property to `41px`, and the `height` property to `175px`. + +# --hints-- + +You should have a `.key` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key')); +``` + +Your `.key` selector should have a `background-color` property set to `#ffffff`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key')?.backgroundColor === 'rgb(255, 255, 255)'); +``` + +Your `.key` selector should have the `position` property set to `relative`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key')?.position === 'relative'); +``` + +Your `.key` selector should have a `width` property set to `41px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key')?.width === '41px'); +``` + +Your `.key` selector should have a `height` property set to `175px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key')?.height === '175px'); +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + + Responsive Web Design Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-017.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-017.md new file mode 100644 index 0000000000..a5ef080b21 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-017.md @@ -0,0 +1,103 @@ +--- +id: 612e9f1e7e5ccd4fa9ada0be +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Give the `.key` a `margin` of `2px` and a `float` property set to `left`. + +# --hints-- + +Your `.key` selector should have a `margin` property set to `2px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key')?.margin === '2px'); +``` + +Your `.key` selector should have a `float` property set to `left`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key')?.float === 'left'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Responsive Web Design Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +--fcc-editable-region-- +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-018.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-018.md new file mode 100644 index 0000000000..960251692e --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-018.md @@ -0,0 +1,119 @@ +--- +id: 612ea4c4993aba52ab4aa32e +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Now it is time to use the pseudo-selectors you prepared for earlier. To create the black keys, add a new `.key.black--key::after` selector. This will target the elements with the class `key black--key`, and select the pseudo-element after these elements in the HTML. + +In the new selector, set the `background-color` to `#1d1e22`. Also set the `content` property to `""`. This will make the pseudo-elements empty. + +The `content` property is used to set or override the content of the element. By default, the psuedo-elements created by the `::before` and `::after` pseudo-selectors are empty, and the elements will not be rendered to the page. Setting the `content` property to an empty string `""` will ensure the element is rendered to the page while still being empty. + +If you would like to experiment, try removing the `background-color` property and setting different values for the `content` property, such as `"♥"`. Remember to undo these changes when you are done so the tests pass. + +# --hints-- + +You should have a `.key.black--key::after` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')); +``` + +Your `.key.black--key::after` selector should have a `background-color` property set to `#1d1e22`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.backgroundColor === 'rgb(29, 30, 34)'); +``` + +Your `.key.black--key::after` selector should have a `content` property set to `""`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.content === '""'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Responsive Web Design Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-019.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-019.md new file mode 100644 index 0000000000..b7e3599968 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-019.md @@ -0,0 +1,110 @@ +--- +id: 612ea97df5742154772f312e +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Give the `.key.black--key::after` a `position` property set to `absolute` and a `left` property set to `-18px`. + +# --hints-- + +Your `.key.black--key::after` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.position === 'absolute'); +``` + +Your `.key.black--key::after` selector should have a `left` property set to `-18px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.left === '-18px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Responsive Web Design Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; +} + +--fcc-editable-region-- +.key.black--key::after { + background-color: #1d1e22; + content: ""; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-020.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-020.md new file mode 100644 index 0000000000..cf52a800cb --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-020.md @@ -0,0 +1,112 @@ +--- +id: 612ead8788d28655ef8db056 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +For the `.key.black--key::after`, set the `width` to `32px` and the `height` to `100px`. + +# --hints-- + +Your `.key.black--key::after` should have a `width` property set to `32px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.width === '32px'); +``` + +Your `.key.black--key::after` should have a `height` property set to `100px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.height === '100px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Responsive Web Design Piano + + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; +} + +--fcc-editable-region-- +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-021.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-021.md new file mode 100644 index 0000000000..1ff3e13285 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-021.md @@ -0,0 +1,144 @@ +--- +id: 612eaf56b7ba3257fdbfb0db +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +The piano needs the freeCodeCamp logo to make it official. + +Add an `img` element before your `.keys` element. Give the `img` a `class` of `logo`, and set the `src` to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`. Give it an `alt` text of `freeCodeCamp Logo`. + +# --hints-- + +You should add a new `img` element. + +```js +assert(document.querySelectorAll('img')?.length === 1); +``` + +Your `img` element should come before your first `.key` element. + +```js +const img = document.querySelector('img'); +assert(img?.nextElementSibling?.className === 'keys'); +assert(img?.previousElementSibling === null); +``` + +Your `img` element should have a `class` set to logo. + +```js +const img = document.querySelector('img'); +assert(img?.className === 'logo'); +``` + +Your `img` element should have a `src` set to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`. + +```js +const img = document.querySelector('img'); +assert(img?.getAttribute('src') === 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg'); +``` + +Your `img` element should have an `alt` attribute set to `freeCodeCamp Logo`. + +```js +assert(document.querySelector('img')?.getAttribute('alt')?.toLowerCase() === 'freecodecamp logo'); +``` + +Remember that casing and spelling matter. + +```js +assert(document.querySelector('img')?.getAttribute('alt') === 'freeCodeCamp Logo'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Responsive Web Design Piano + + + + + --fcc-editable-region-- +
+
+ --fcc-editable-region-- +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; +} + +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; + width: 32px; + height: 100px; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-022.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-022.md new file mode 100644 index 0000000000..30ba3cfa0d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-022.md @@ -0,0 +1,129 @@ +--- +id: 612eb4893b63c75bb9251ddf +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Start styling the logo by creating a `.logo` selector. Set the `width` to `200px`, a `position` of `absolute` and a `top` set to `23px`. + +# --hints-- + +You should have a `.logo` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.logo')); +``` + +Your `.logo` selector should have a `width` property set to `200px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.logo')?.width === '200px'); +``` + +Your `.logo` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.logo')?.position === 'absolute'); +``` + +Your `.logo` selector should have a `top` property set to `23px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.logo')?.top === '23px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Responsive Web Design Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; +} + +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; + width: 32px; + height: 100px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-023.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-023.md new file mode 100644 index 0000000000..0893fb545d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-023.md @@ -0,0 +1,115 @@ +--- +id: 612eb75153591b5e3b1ab65e +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +The `img` element needs its parent to have a `position` set as a point of reference. Set the `position` of the `#piano` selector to `relative`. + +# --hints-- + +Your `#piano` selector should have a `position` property set to `relative`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#piano')?.position === 'relative'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Responsive Web Design Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +--fcc-editable-region-- +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; +} +--fcc-editable-region-- + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; +} + +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; + width: 32px; + height: 100px; +} + +.logo { + width: 200px; + position: absolute; + top: 23px; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-024.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-024.md new file mode 100644 index 0000000000..89033cb693 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-024.md @@ -0,0 +1,116 @@ +--- +id: 612eb7ca8c275d5f89c73333 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +To smooth the sharp edges of the piano and keys, start by giving the `#piano` a `border-radius` of `10px`. + +# --hints-- + +Your `#piano` selector should have a `border-radius` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#piano')?.borderRadius === '10px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Responsive Web Design Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +--fcc-editable-region-- +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; + position: relative; +} +--fcc-editable-region-- + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; +} + +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; + width: 32px; + height: 100px; +} + +.logo { + width: 200px; + position: absolute; + top: 23px; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-025.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-025.md new file mode 100644 index 0000000000..205d099895 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-025.md @@ -0,0 +1,117 @@ +--- +id: 612eb8e984cd73677a92b7e9 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Give the `.key` selector a `border-radius` value of `0 0 3px 3px`. + +# --hints-- + +Your `.key` selector should have a `border-radius` property set to `0 0 3px 3px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key')?.borderRadius === '0px 0px 3px 3px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Responsive Web Design Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; + position: relative; + border-radius: 10px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +--fcc-editable-region-- +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; +} +--fcc-editable-region-- + +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; + width: 32px; + height: 100px; +} + +.logo { + width: 200px; + position: absolute; + top: 23px; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-026.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-026.md new file mode 100644 index 0000000000..6badf8f0a8 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-026.md @@ -0,0 +1,118 @@ +--- +id: 612eb934f64a4d6890a45518 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Give the `.key.black--key::after` selector a `border-radius` of `0 0 3px 3px` to match the keys. + +# --hints-- + +Your `.key.black--key::after` selector should have a `border-radius` property set to `0 0 3px 3px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.borderRadius === '0px 0px 3px 3px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Responsive Web Design Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; + position: relative; + border-radius: 10px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; + border-radius: 0 0 3px 3px; +} + +--fcc-editable-region-- +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; + width: 32px; + height: 100px; +} +--fcc-editable-region-- + +.logo { + width: 200px; + position: absolute; + top: 23px; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-027.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-027.md new file mode 100644 index 0000000000..caf3532a84 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-027.md @@ -0,0 +1,127 @@ +--- +id: 612ebcba99bfa46a15370b11 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Now you need to make it responsive. Add a `@media` query with a `max-width` of `768px`. + +# --hints-- + +You should add a new `@media` query. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 1); +``` + +Your `@media` query should have a `max-width` of `768px`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')[0]?.media?.mediaText === '(max-width: 768px)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Responsive Web Design Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; + position: relative; + border-radius: 10px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; + border-radius: 0 0 3px 3px; +} + +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; + width: 32px; + height: 100px; + border-radius: 0 0 3px 3px; +} + +.logo { + width: 200px; + position: absolute; + top: 23px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-028.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-028.md new file mode 100644 index 0000000000..cac054be62 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-028.md @@ -0,0 +1,133 @@ +--- +id: 612ebe7fe6d07e6b76d1cae2 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Add a new `#piano` selector within your `@media` query, and set the `width` to `335px`. + +# --hints-- + +Your `@media` rule should have a `#piano` selector. + +```js +const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)'); +const piano = rules?.find(rule => rule.selectorText === '#piano'); +assert(piano); +``` + +Your new `#piano` selector should have a `width` of `335px`. + +```js +const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)'); +const piano = rules?.find(rule => rule.selectorText === '#piano'); +assert(piano?.style.width === '335px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Responsive Web Design Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; + position: relative; + border-radius: 10px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; + border-radius: 0 0 3px 3px; +} + +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; + width: 32px; + height: 100px; + border-radius: 0 0 3px 3px; +} + +.logo { + width: 200px; + position: absolute; + top: 23px; +} + +--fcc-editable-region-- +@media (max-width: 768px) { + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-029.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-029.md new file mode 100644 index 0000000000..e5bd3cb1be --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-029.md @@ -0,0 +1,136 @@ +--- +id: 612ebedec97e096c8bf64999 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Within the `@media` query, add a `.keys` selector and set the `width` to `318px`. + +# --hints-- + + +Your `@media` rule should have a `.keys` selector. + +```js +const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)'); +const keys = rules?.find(rule => rule.selectorText === '.keys'); +assert(keys); +``` + +Your new `.keys` selector should have a `width` of `318px`. + +```js +const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)'); +const keys = rules?.find(rule => rule.selectorText === '.keys'); +assert(keys?.style.width === '318px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Responsive Web Design Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; + position: relative; + border-radius: 10px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; + border-radius: 0 0 3px 3px; +} + +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; + width: 32px; + height: 100px; + border-radius: 0 0 3px 3px; +} + +.logo { + width: 200px; + position: absolute; + top: 23px; +} + +--fcc-editable-region-- +@media (max-width: 768px) { + #piano { + width: 335px; + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-030.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-030.md new file mode 100644 index 0000000000..e7fe3b8148 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-030.md @@ -0,0 +1,139 @@ +--- +id: 612ebf9a210f2b6d77001e68 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Now add a `.logo` selector to the `@media` query, and set the `width` property to `150px`. + +# --hints-- + +Your `@media` rule should have a `.logo` selector. + +```js +const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)'); +const logo = rules?.find(rule => rule.selectorText === '.logo'); +assert(logo); +``` + +Your new `.logo` selector should have a `width` of `150px`. + +```js +const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)'); +const logo = rules?.find(rule => rule.selectorText === '.logo'); +assert(logo?.style.width === '150px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Responsive Web Design Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; + position: relative; + border-radius: 10px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; + border-radius: 0 0 3px 3px; +} + +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; + width: 32px; + height: 100px; + border-radius: 0 0 3px 3px; +} + +.logo { + width: 200px; + position: absolute; + top: 23px; +} + +--fcc-editable-region-- +@media (max-width: 768px) { + #piano { + width: 335px; + } + + .keys { + width: 318px; + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-031.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-031.md new file mode 100644 index 0000000000..b5a733a5d5 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-031.md @@ -0,0 +1,133 @@ +--- +id: 612ec0490ae8626e9adf82e4 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +You might have noticed the keys collapse when the browser window is smaller than `768px`. Set `overflow` to `hidden` in the first `.keys` selector, to take care of this issue. This property will hide any element that is pushed outside the set `width` value of `.keys`. + +# --hints-- + +Your original `.keys` selector should have the `overflow` property set to `hidden`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.keys')?.overflow === 'hidden'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Responsive Web Design Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; + position: relative; + border-radius: 10px; +} + +--fcc-editable-region-- +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; +} +--fcc-editable-region-- + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; + border-radius: 0 0 3px 3px; +} + +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; + width: 32px; + height: 100px; + border-radius: 0 0 3px 3px; +} + +.logo { + width: 200px; + position: absolute; + top: 23px; +} + +@media (max-width: 768px) { + #piano { + width: 335px; + } + + .keys { + width: 318px; + } + + .logo { + width: 150px; + } +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-032.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-032.md new file mode 100644 index 0000000000..6a5ba8ec24 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-032.md @@ -0,0 +1,144 @@ +--- +id: 612ec19d5268da7074941f84 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Add another `@media` rule to apply if the browser window is bigger than `769px` but smaller than `1199px`. + +# --hints-- + +You should add a new `@media` query. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 2); +``` + +Your `@media` query should have a `min-width` of `769px` and a `max-width` of `1199px`. + +```js +const mediaText = new __helpers.CSSHelp(document).getCSSRules('media')[1]?.media?.mediaText; +assert(mediaText === '(max-width: 1199px) and (min-width: 769px)' || mediaText === '(min-width: 769px) and (max-width: 1199px)'); +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + + Responsive Web Design Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; + position: relative; + border-radius: 10px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; + overflow: hidden; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; + border-radius: 0 0 3px 3px; +} + +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; + width: 32px; + height: 100px; + border-radius: 0 0 3px 3px; +} + +.logo { + width: 200px; + position: absolute; + top: 23px; +} + +@media (max-width: 768px) { + #piano { + width: 335px; + } + + .keys { + width: 318px; + } + + .logo { + width: 150px; + } +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-piano/step-033.md b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-033.md new file mode 100644 index 0000000000..3baf33eae9 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-piano/step-033.md @@ -0,0 +1,166 @@ +--- +id: 612ec29c84b9a6718b1f5cec +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +For the new `@media` rule, set the `width` of the `#piano` to `675px` and the `width` of the `.keys` to `633px`. + +With that, your piano is complete! + +# --hints-- + +Your second `@media` rule should have a `#piano` selector. + +```js +const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)'); +const piano = rules?.find(rule => rule.selectorText === '#piano'); +assert(piano); +``` + +Your new `#piano` selector should have a `width` of `675px`. + +```js +const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)'); +const piano = rules?.find(rule => rule.selectorText === '#piano'); +assert(piano?.style.width === '675px'); +``` + +Your second `@media` rule should have a `.keys` selector. + +```js +const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)'); +const keys = rules?.find(rule => rule.selectorText === '.keys'); +assert(keys); +``` + +Your new `.keys` selector should have a `width` of `633px`. + +```js +const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)'); +const keys = rules?.find(rule => rule.selectorText === '.keys'); +assert(keys?.style.width === '633px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Responsive Web Design Piano + + + + +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +``` + +```css +html { + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +#piano { + background-color: #00471b; + width: 992px; + height: 290px; + margin: 80px auto; + padding: 90px 20px 0 20px; + position: relative; + border-radius: 10px; +} + +.keys { + background-color: #040404; + width: 949px; + height: 180px; + padding-left: 2px; + overflow: hidden; +} + +.key { + background-color: #ffffff; + position: relative; + width: 41px; + height: 175px; + margin: 2px; + float: left; + border-radius: 0 0 3px 3px; +} + +.key.black--key::after { + background-color: #1d1e22; + content: ""; + position: absolute; + left: -18px; + width: 32px; + height: 100px; + border-radius: 0 0 3px 3px; +} + +.logo { + width: 200px; + position: absolute; + top: 23px; +} + +@media (max-width: 768px) { + #piano { + width: 335px; + } + + .keys { + width: 318px; + } + + .logo { + width: 150px; + } +} + +--fcc-editable-region-- +@media (max-width: 1199px) and (min-width: 769px) { + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-001.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-001.md deleted file mode 100644 index d4e89b2a77..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-001.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51578 -title: Part 1 -challengeType: 0 -dashedName: part-1 ---- - -# --description-- - -Start by setting up your HTML structure. Add a `` declaration and an `html` element. Within the `html` element, add a `head` element and a `body` element. - -# --hints-- - -Your code should contain the `DOCTYPE` reference. - -```js -assert(code.match(/` after the type. - -```js -assert(code.match(/html\s*>/gi)); -``` - -Your `html` element should be below the `DOCTYPE` declaration. - -```js -assert(code.match(/(?)/gi)); -``` - -Your `html` element should have an opening tag. - -```js -assert(code.match(//gi)); -``` - -Your `html` element should have a closing tag. - -```js -assert(code.match(/<\/html\s*>/)); -``` - -You should have an opening `head` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `head` tag. - -```js -assert(code.match(/<\/head\s*>/i)); -``` - -You should have an opening `body` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `body` tag. - -```js -assert(code.match(/<\/body\s*>/i)); -``` - -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')); -``` - -# --seed-- - -## --seed-contents-- - -```html - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - -```css - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-002.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-002.md deleted file mode 100644 index 5615a81448..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-002.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51579 -title: Part 2 -challengeType: 0 -dashedName: part-2 ---- - -# --description-- - -Within your `head` element, add a `meta` tag with the `charset` attribute set to `utf-8`. Also add a `title` element with the text `freeCodeCamp Picasso Painting`. - -# --hints-- - -You should add exactly one `meta` element. - -```js -assert(document.querySelectorAll('meta').length === 1); -``` - -Your `meta` element should have a `charset` attribute. - -```js -assert(document.querySelector('meta')?.getAttribute('charset')); -``` - -Your `charset` attribute should be set to `utf-8`. - -```js -assert(document.querySelector('meta')?.getAttribute('charset') === 'utf-8'); -``` - -You should add exactly one `title` element. - -```js -assert(document.querySelectorAll('title').length === 1); -``` - -Your `title` element should have the text `freeCodeCamp Picasso Painting`. Note that spelling and casing matter. - -```js -assert(document.querySelector('title')?.innerText === 'freeCodeCamp Picasso Painting'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-003.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-003.md deleted file mode 100644 index 246da2c083..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-003.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: 60b80da8676fb3227967a731 -title: Part 3 -challengeType: 0 -dashedName: part-3 ---- - -# --description-- - -Go ahead and link your CSS file now, even though you have not written any CSS yet. - -Add a `link` element with a `rel` of `stylesheet`, a `type` of `text/css`, and an `href` of `styles.css`. - -# --hints-- - - -Your code should have a `link` element. - -```js -assert.match(code, //i)); -``` - -Your `link` element should be within your `head` element. - -```js -assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)) -``` - -Your `link` element should have a `rel` attribute with the value `stylesheet`. - -```js -assert.match(code, / - - - - freeCodeCamp Picasso Painting - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-004.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-004.md deleted file mode 100644 index 175675f297..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-004.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157a -title: Part 4 -challengeType: 0 -dashedName: part-4 ---- - -# --description-- - -FontAwesome is a library of SVG-powered icons, many of which are freely available to use. You will be using some of these icons in this project, so you will need to link the external stylesheet to your HTML. - -Add a `link` element with a `rel` of `stylesheet` and an `href` of `https://use.fontawesome.com/releases/v5.8.2/css/all.css`. - -# --hints-- - -You should add another `link` element. - -```js -// We set this to 1 because the CSS link is stripped from the code by our parser. -assert(document.querySelectorAll('link').length === 2); -``` - -Your `link` element should have a `rel` of `stylesheet`. - -```js -assert(document.querySelector('link')?.getAttribute('rel') === 'stylesheet'); -``` - -Your `link` element should have an `href` of -`https://use.fontawesome.com/releases/v5.8.2/css/all.css`. - -```js -assert(document.querySelectorAll('link')?.[1]?.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css') -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - --fcc-editable-region-- - - --fcc-editable-region-- - - - - -``` - -```css - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-005.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-005.md deleted file mode 100644 index 5a6b3bd887..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-005.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157b -title: Part 5 -challengeType: 0 -dashedName: part-5 ---- - -# --description-- - -To get your painting started, give your `body` element a `background-color` of `rgb(184, 132, 46)`. - -# --hints-- - -You should use the `body` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')); -``` - -Your `body` element should have the `background-color` property set to `rgb (184, 132, 46)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(184, 132, 46)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - - - -``` - -```css - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-006.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-006.md deleted file mode 100644 index 13ee11f9f3..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-006.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157c -title: Part 6 -challengeType: 0 -dashedName: part-6 ---- - -# --description-- - -Within your body tag, add a `div` element. Give it an `id` of `back-wall`. - -# --hints-- - -You should add exactly 1 `div` element. - -```js -assert(document.querySelectorAll('div').length === 1); -``` - -Your `div` element should have the `id` value of `back-wall`. - -```js -assert(document.querySelector('div')?.getAttribute('id') === 'back-wall'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - - --fcc-editable-region-- - - --fcc-editable-region-- - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-007.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-007.md deleted file mode 100644 index 2ae851270b..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-007.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157d -title: Part 7 -challengeType: 0 -dashedName: part-7 ---- - -# --description-- - -Use an id selector to give the `back-wall` element a `background-color` of `#8B4513`. - -# --hints-- - -You should use a `#back-wall` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')); -``` - -Your `#back-wall` selector should have a `background-color` of `#8B4513`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.backgroundColor === 'rgb(139, 69, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-008.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-008.md deleted file mode 100644 index 9ca7d4c9be..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-008.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157e -title: Part 8 -challengeType: 0 -dashedName: part-8 ---- - -# --description-- - -Give the `back-wall` element a `width` of `100%` and a `height` of `60%`. - -# --hints-- - -You should set the `width` of the `#back-wall` selector to `100%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.width === '100%'); -``` - -You should set the `height` of the `#back-wall` selector to `60%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.height === '60%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-009.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-009.md deleted file mode 100644 index 6a9ac11aa7..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-009.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5157f -title: Part 9 -challengeType: 0 -dashedName: part-9 ---- - -# --description-- - -Typically, HTML is rendered in a top-down manner. Elements at the top of the code are positioned at the top of the page. However, many times you may want to move the elements to different positions. You can do this with the `position` attribute. - -Set the `position` attribute for the `back-wall` element to `absolute`. An `absolute` position takes the element out of that top-down document flow and allows you to adjust it relative to its container. - -When an element is manually positioned, you can shift its layout with `top`, `left`, `right`, and `bottom`. Set the `back-wall` to have a `top` value of `0`, and a `left` value of `0`. - - -# --hints-- - -Your `#back-wall` selector should have the `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.position === 'absolute'); -``` - -Your `#back-wall` selector should have the `top` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.top === '0px'); -``` - -Your `#back-wall` selector should have the `left` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-010.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-010.md deleted file mode 100644 index b48deb5331..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-010.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51580 -title: Part 10 -challengeType: 0 -dashedName: part-10 ---- - -# --description-- - -The `z-index` property is used to create "layers" for your HTML elements. If you are familiar with image editing tools, you may have worked with layers before. This is a similar concept. - -Elements with a higher `z-index` value will appear to be layered on top of elements with a lower `z-index` value. This can be combined with the positioning in the previous lesson to create unique effects. - -Since the `back-wall` element will need to appear "behind" the other elements you will be creating, give the `back-wall` element a `z-index` of `-1`. - -# --hints-- - -Your `#back-wall` selector should have the `z-index` property set to `-1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.zIndex === '-1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-011.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-011.md deleted file mode 100644 index 857b63223f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-011.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51581 -title: Part 11 -challengeType: 0 -dashedName: part-11 ---- - -# --description-- - -Below your `back-wall` element, create a `div` with a `class` of `characters`. This is where you will be creating your painting's characters. - -# --hints-- - -You should only add one new `div` element. - -```js -assert(document.querySelectorAll('div').length === 2); -``` - -Your new `div` element should come after your `#back-wall` element. - -```js -assert(document.querySelector('#back-wall')?.nextElementSibling?.localName === 'div'); -``` - -Your new `div` element should have the `class` set to `characters`. - -```js -assert(document.querySelectorAll('div')?.[1]?.classList?.contains('characters')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
- --fcc-editable-region-- - - --fcc-editable-region-- - - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-012.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-012.md deleted file mode 100644 index a6361af93a..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-012.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51582 -title: Part 12 -challengeType: 0 -dashedName: part-12 ---- - -# --description-- - -Inside that `characters` element, create another `div` with an `id` of `offwhite-character`. - -# --hints-- - -You should only create 1 additional `div` element. - -```js -assert(document.querySelectorAll('div').length === 3); -``` - -Your new `div` element should be nested in your `.characters` element. - -```js -assert(document.querySelector('.characters div')); -``` - -Your new `div` element should have an `id` of `offwhite-character`. - -```js -assert(document.querySelector('.characters div')?.getAttribute('id') === 'offwhite-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-013.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-013.md deleted file mode 100644 index 33e9cd8ace..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-013.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51583 -title: Part 13 -challengeType: 0 -dashedName: part-13 ---- - -# --description-- - -Create four `div` elements inside your `offwhite-character` element. Give those `div` elements the following `id` values, in order: `white-hat`, `black-mask`, `gray-instrument`, `tan-table`. - -# --hints-- - -You should add four `div` elements within your `.offwhite-character` element. - -```js -assert(document.querySelectorAll('#offwhite-character div').length === 4); -``` - -Your first new `div` element should have the `id` of `white-hat`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[0]?.getAttribute('id') === 'white-hat'); -``` - -Your second new `div` element should have the `id` of `black-mask`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[1]?.getAttribute('id') === 'black-mask'); -``` - -Your third new `div` element should have the `id` of `gray-instrument`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[2]?.getAttribute('id') === 'gray-instrument'); -``` - -Your fourth new `div` element should have the `id` of `tan-table`. - -```js -assert(document.querySelectorAll('#offwhite-character div')[3]?.getAttribute('id') === 'tan-table'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-014.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-014.md deleted file mode 100644 index 676c69cd9d..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-014.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51584 -title: Part 14 -challengeType: 0 -dashedName: part-14 ---- - -# --description-- - -This character needs eyes. Create two `div` elements in the `black-mask` element. Give them the classes `eyes left` and `eyes right`, in that order. - -# --hints-- - -You should create 2 `div` elements within your `#black-mask` element. - -```js -assert(document.querySelectorAll('#black-mask div').length === 2); -``` - -Your first new `div` should have the classes `eyes` and `left`. - -```js -assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('eyes')); -assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('left')); -``` - -Your second new `div` should have the classes `eyes` and `right`. - -```js -assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('eyes')); -assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-015.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-015.md deleted file mode 100644 index 83bff96868..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-015.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51585 -title: Part 15 -challengeType: 0 -dashedName: part-15 ---- - -# --description-- - -Create some "dots" for the instrument. Add five `div` elements within your `gray-instrument` element. Set the `class` of each to `black-dot`. - -# --hints-- - -You should have five new `div` elements within your `#gray-instrument` element. - -```js -assert(document.querySelectorAll('#gray-instrument div').length === 5); -``` - -Your five `div` elements should all have the class `black-dot`. - -```js -assert(document.querySelectorAll('#gray-instrument .black-dot').length === 5); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-016.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-016.md deleted file mode 100644 index e095c56183..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-016.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51586 -title: Part 16 -challengeType: 0 -dashedName: part-16 ---- - -# --description-- - -Using an `id` selector, create a rule for your `offwhite-character` element. Give it a `width` of `300px`, a `height` of `550px`, and a `background-color` of `GhostWhite`. - -# --hints-- - -You should use the `#offwhite-character` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')); -``` - -Your `#offwhite-character` should have a `width` property set to `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.width === '300px'); -``` - -Your `#offwhite-character` should have a `height` property set to `550px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.height === '550px'); -``` - -Your `#offwhite-character` should have a `background-color` property set to `GhostWhite`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.backgroundColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-017.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-017.md deleted file mode 100644 index 1c39dfa6fb..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-017.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51587 -title: Part 17 -challengeType: 0 -dashedName: part-17 ---- - -# --description-- - -Move the `offwhite-character` into place by giving it a `position` of `absolute`, a `top` value of `20%`, and a `left` value of `17.5%`. - -# --hints-- - -Your `#offwhite-character` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.position === 'absolute'); -``` - -Your `#offwhite-character` selector should have a `top` property set to `20%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.top === '20%'); -``` - -Your `#offwhite-character` selector should have a `left` property set to `17.5%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.left === '17.5%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-018.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-018.md deleted file mode 100644 index 70fae6c5b2..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-018.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51588 -title: Part 18 -challengeType: 0 -dashedName: part-18 ---- - -# --description-- - -Using an `id` selector, style your `white-hat` element. Give it a `width` and `height` of `0`, and a `border-style` of `solid`. - -# --hints-- - -You should use a `#white-hat` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')); -``` - -Your `#white-hat` selector should have a `width` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.width === '0px'); -``` - -Your `#white-hat` selector should have a `height` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.height === '0px'); -``` - -Your `#white-hat` selector should have a `border-style` property set to `solid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderStyle === 'solid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-019.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-019.md deleted file mode 100644 index 2cc098835a..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-019.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51589 -title: Part 19 -challengeType: 0 -dashedName: part-19 ---- - -# --description-- - -That does not look quite right. Set a `border-width` of `0 120px 140px 180px` to size the hat properly. - -# --hints-- - -Your `#white-hat` selector should have a `border-width` property set to `0 120px 140px 180px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderWidth === '0px 120px 140px 180px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-020.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-020.md deleted file mode 100644 index f63476b418..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-020.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158a -title: Part 20 -challengeType: 0 -dashedName: part-20 ---- - -# --description-- - -Now you have a large box. Give it a `border-top-color`, `border-right-color`, and `border-left-color` of `transparent`. Set the `border-bottom-color` to `GhostWhite`. This will make it look more like a hat. - -# --hints-- - -Your `#white-hat` selector should have a `border-top-color` property set to `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderTopColor === 'transparent'); -``` - -Your `#white-hat` selector should have a `border-right-color` property set to `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderRightColor === 'transparent'); -``` - -Your `#white-hat` selector should have a `border-left-color` property set to `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderLeftColor === 'transparent'); -``` - -Your `#white-hat` selector should have a `border-bottom-color` property set to `GhostWhite`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderBottomColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-021.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-021.md deleted file mode 100644 index b1eef3805b..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-021.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158b -title: Part 21 -challengeType: 0 -dashedName: part-21 ---- - -# --description-- - -Give the hat a `position` of `absolute`, a `top` value of `-140px`, and a `left` value of `0`. - -# --hints-- - -Your `#white-hat` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.position === 'absolute'); -``` - -Your `#white-hat` selector should have a `top` property set to `-140px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.top === '-140px'); -``` - -Your `#white-hat` selector should have a `left` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-022.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-022.md deleted file mode 100644 index d1ca2b5ec6..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-022.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158c -title: Part 22 -challengeType: 0 -dashedName: part-22 ---- - -# --description-- - -Using an `id` selector, create a rule for your `black-mask` element. Give it a `width` of `100%`, a `height` of `50px`, and a `background-color` of `rgb(45, 31, 19)`. - -# --hints-- - -You should have a `#black-mask` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')); -``` - -Your `#black-mask` selector should have a `width` property set to `100%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.width === '100%'); -``` - -Your `#black-mask` selector should have a `height` property set to `50px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.height === '50px'); -``` - -Your `#black-mask` selector should have a `background-color` property set to `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-023.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-023.md deleted file mode 100644 index 17c1689ba9..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-023.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158d -title: Part 23 -challengeType: 0 -dashedName: part-23 ---- - -# --description-- - -Give the mask a `position` of `absolute`, and a `top` and `left` value of `0`. - -# --hints-- - -Your `#black-mask` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.position === 'absolute'); -``` - -Your `#black-mask` selector should have a `top` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.top === '0px'); -``` - -Your `#black-mask` selector should have a `left` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-024.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-024.md deleted file mode 100644 index 1cbbf152c2..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-024.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158e -title: Part 24 -challengeType: 0 -dashedName: part-24 ---- - -# --description-- - -To ensure you can see the mask, give it a `z-index` of `1`. - -# --hints-- - -Your `#black-mask` selector should have a `z-index` property set to `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-025.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-025.md deleted file mode 100644 index aa07c7af6d..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-025.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5158f -title: Part 25 -challengeType: 0 -dashedName: part-25 ---- - -# --description-- - -Using an `id` selector, give your `gray-instrument` element a `width` of `15%`, a `height` of `40%`, and a `background-color` of `rgb(167, 162, 117)`. - -# --hints-- - -You should have a `#gray-instrument` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')); -``` - -Your `#gray-instrument` selector should have a `width` property set to `15%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.width === '15%'); -``` - -Your `#gray-instrument` selector should have a `height` property set to `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.height === '40%'); -``` - -Your `#gray-instrument` selector should have a `background-color` property set to `rgb(167, 162, 117)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.backgroundColor === 'rgb(167, 162, 117)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-026.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-026.md deleted file mode 100644 index 28fee5cc0f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-026.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51590 -title: Part 26 -challengeType: 0 -dashedName: part-26 ---- - -# --description-- - -Now move it into place with a `position` of `absolute`, a `top` value of `50px`, and a `left` value of `125px`. - -# --hints-- - -Your `#gray-instrument` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.position === 'absolute'); -``` - -Your `#gray-instrument` selector should have a `top` value set to `50px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.top === '50px'); -``` - -Your `#gray-instrument` selector should have a `left` value set to `125px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.left === '125px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-027.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-027.md deleted file mode 100644 index 65d17f2b21..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-027.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51591 -title: Part 27 -challengeType: 0 -dashedName: part-27 ---- - -# --description-- - -Set the `z-index` to `1`. - -# --hints-- - -Your `#gray-instrument` selector should have a `z-index` property set to `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-028.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-028.md deleted file mode 100644 index 17bc50eabc..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-028.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51592 -title: Part 28 -challengeType: 0 -dashedName: part-28 ---- - -# --description-- - -Use a class selector to create a rule for the `black-dot` elements. Set the `width` to `10px`, the `height` to `10px`, and the `background-color` to `rgb(45, 31, 19)`. - -# --hints-- - -You should have a `.black-dot` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')); -``` - -Your `.black-dot` selector should have a `width` property set to `10px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.width === '10px'); -``` - -Your `.black-dot` selector should have a `height` property set to `10px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.height === '10px'); -``` - -Your `.black-dot` selector should have a `background-color` property set to `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-029.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-029.md deleted file mode 100644 index 4216ad0b92..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-029.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51593 -title: Part 29 -challengeType: 0 -dashedName: part-29 ---- - -# --description-- - -These dots are just a little too square. Give the `black-dot` class a `border-radius` of `50%` to fix it. - -# --hints-- - -Your `.black-dot` selector should have a `border-radius` property set to `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderRadius === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-030.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-030.md deleted file mode 100644 index 361cf652df..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-030.md +++ /dev/null @@ -1,134 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51594 -title: Part 30 -challengeType: 0 -dashedName: part-30 ---- - -# --description-- - -Move the dots into place by setting the `display` to `block`, the `margin` to `auto`, and the `margin-top` to `65%`. - -# --hints-- - -Your `.black-dot` selector should have a `display` property set to `block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.display === 'block'); -``` - -Your `.black-dot` selector should have a `margin` property set to `auto`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.margin?.includes('auto')); -``` - -Your `.black-dot` selector should have a `margin-top` property set to `65%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.marginTop === '65%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-031.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-031.md deleted file mode 100644 index 762256ceff..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-031.md +++ /dev/null @@ -1,145 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51595 -title: Part 31 -challengeType: 0 -dashedName: part-31 ---- - -# --description-- - -Use an id selector to style your `tan-table` element. Give it a `width` of `450px`, a `height` of `140px`, and a `background-color` of `#D2691E`. - -# --hints-- - -You should have a `#tan-table` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')); -``` - -Your `#tan-table` selector should have a `width` property set to `450px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.width === '450px'); -``` - -Your `#tan-table` selector should have a `height` property set to `140px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.height === '140px'); -``` - -Your `#tan-table` selector should have a `background-color` property set to `#D2691E`. - -```js -assert (new __helpers.CSSHelp(document).getStyle('#tan-table')?.backgroundColor === 'rgb(210, 105, 30)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - - --fcc-editable-region-- - - --fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-032.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-032.md deleted file mode 100644 index e3668b199e..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-032.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51596 -title: Part 32 -challengeType: 0 -dashedName: part-32 ---- - -# --description-- - -Move the table into place by giving it a `position` of `absolute`, a `top` value of `275px`, and a `left` value of `15px`. - -# --hints-- - -Your `#tan-table` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.position === 'absolute'); -``` - -Your `#tan-table` selector should have a `top` property set to `275px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.top === '275px'); -``` - -Your `#tan-table` selector should have a `left` property set to `15px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.left === '15px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-033.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-033.md deleted file mode 100644 index c1254059f0..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-033.md +++ /dev/null @@ -1,134 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51597 -title: Part 33 -challengeType: 0 -dashedName: part-33 ---- - -# --description-- - -Give the table a `z-index` of `1`. - -# --hints-- - -Your `#tan-table` selector should have a `z-index` property set to `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-034.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-034.md deleted file mode 100644 index d3b7037d52..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-034.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51598 -title: Part 34 -challengeType: 0 -dashedName: part-34 ---- - -# --description-- - -After your `div#offwhite-character` element, add a `div` with the `id` of `black-character`. - -# --hints-- - -You should add a new `div` element within the `.characters` element. - -```js -assert(document.querySelectorAll('.characters > div')?.length === 2); -``` - -Your new `div` element should have the `id` set to `black-character`. - -```js -assert(document.querySelectorAll('.characters > div')?.[1]?.getAttribute('id') === 'black-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-035.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-035.md deleted file mode 100644 index 8f3dc6c523..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-035.md +++ /dev/null @@ -1,155 +0,0 @@ ---- -id: 60b69a66b6ddb80858c51599 -title: Part 35 -challengeType: 0 -dashedName: part-35 ---- - -# --description-- - -Within your new `black-character` element, add three `div` elements with the following `id` values, in order: `black-hat`, `gray-mask`, `white-paper`. - -# --hints-- - -You should have three `div` elements within your `#black-character` element. - -```js -assert(document.querySelectorAll('#black-character > div')?.length === 3); -``` - -Your first new `div` element should have the `id` set to `black-hat`. - -```js -assert(document.querySelectorAll('#black-character > div')?.[0]?.getAttribute('id') === 'black-hat'); -``` - -Your second new `div` element should have the `id` set to `gray-mask`. - -```js -assert(document.querySelectorAll('#black-character > div')?.[1]?.getAttribute('id') === 'gray-mask'); -``` - -Your third new `div` element should have the `id` set to `white-paper`. - -```js -assert(document.querySelectorAll('#black-character > div')?.[2]?.getAttribute('id') === 'white-paper'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-036.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-036.md deleted file mode 100644 index 2d78098274..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-036.md +++ /dev/null @@ -1,157 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159a -title: Part 36 -challengeType: 0 -dashedName: part-36 ---- - -# --description-- - -The mask needs eyes. Within your `gray-mask` element, add two `div` elements. The first should have the `class` set to `eyes left`, and the second should have the `class` set to `eyes right`. - -# --hints-- - -You should have two `div` elements within your `#gray-mask` element. - -```js -assert(document.querySelectorAll('#gray-mask > div')?.length === 2); -``` - -Your first new `div` element should have the `class` set to `eyes left`. - -```js -const first = document.querySelectorAll('#gray-mask > div')?.[0]; -assert(first?.classList?.contains('eyes')); -assert(first?.classList?.contains('left')); -``` - -Your second new `div` element should have the `class` set to `eyes right`. - -```js -const second = document.querySelectorAll('#gray-mask > div')?.[1]; -assert(second?.classList?.contains('eyes')); -assert(second?.classList?.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-037.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-037.md deleted file mode 100644 index 317622a4a4..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-037.md +++ /dev/null @@ -1,160 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159b -title: Part 37 -challengeType: 0 -dashedName: part-37 ---- - -# --description-- - -Time to use some FontAwesome icons. - -The `i` element is used for idiomatic text, or text that is separate from the "normal" text content. This could be for _italic_ text, such as scientific terms, or for icons like those provided by FontAwesome. - -Within your `white-paper` element, add four `i` elements. Give them all a `class` value of `fas fa-music`. - -This special class is how FontAwesome determines which icon to load. `fas` indicates the category of icons (FontAwesome Solid, here), while `fa-music` selects the specific icon. - -# --hints-- - -You should have four new `i` elements within your `#white-paper` element. - -```js -assert(document.querySelectorAll('#white-paper > i')?.length === 4); -``` - -All of your `i` elements should have the `class` set to `fas fa-music`. - -```js -const icons = document.querySelectorAll('#white-paper > i'); -for (const icon of icons) { - assert(icon.classList?.contains('fas')); - assert(icon.classList?.contains('fa-music')); -}; -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-038.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-038.md deleted file mode 100644 index bea0e08805..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-038.md +++ /dev/null @@ -1,168 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159c -title: Part 38 -challengeType: 0 -dashedName: part-38 ---- - -# --description-- - -Use an `id` selector to create a rule for your `black-character` element. Set the `width` to `300px`, the `height` to `500px`, and the `background-color` to `rgb(45, 31, 19)`. - -# --hints-- - -You should use a `#black-character` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')); -``` - -Your `#black-character` selector should have a `width` property set to `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.width === '300px'); -``` - -Your `#black-character` selector should have a `height` property set to `500px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.height === '500px'); -``` - -Your `#black-character` selector should have a `background-color` property to `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-039.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-039.md deleted file mode 100644 index 9b4b4080b4..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-039.md +++ /dev/null @@ -1,166 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159d -title: Part 39 -challengeType: 0 -dashedName: part-39 ---- - -# --description-- - -Move the `black-character` element into place by setting the `position` to `absolute`, the `top` to `30%`, and the `left` to `59%`. - -# --hints-- - -Your `#black-character` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.position === 'absolute'); -``` - -Your `#black-character` selector should have a `top` property set to `30%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.top === '30%'); -``` - -Your `#black-character` selector should have a `left` property set to `59%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.left === '59%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-040.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-040.md deleted file mode 100644 index 6c6d4cc64f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-040.md +++ /dev/null @@ -1,177 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159e -title: Part 40 -challengeType: 0 -dashedName: part-40 ---- - -# --description-- - -Use an `id` selector to create a rule for your `black-hat` element. Give it a `width` of `0`, a `height` of `0`, and a `border-style` of `solid`. - -# --hints-- - -You should have a `#black-hat` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')); -``` - -Your `#black-hat` selector should have a `width` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.width === '0px'); -``` - -Your `#black-hat` selector should have a `height` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.height === '0px'); -``` - -Your `#black-hat` selector should have a `border-style` property set to `solid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderStyle === 'solid'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-041.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-041.md deleted file mode 100644 index 6d2cb718c4..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-041.md +++ /dev/null @@ -1,163 +0,0 @@ ---- -id: 60bad32219ebcb4a8810ac6a -title: Part 41 -challengeType: 0 -dashedName: part-41 ---- - -# --description-- - -Set the `border-width` of the `black-hat` to `150px 0 0 300px`. - -# --hints-- - -Your `#black-hat` selector should have a `border-width` property set to `150px 0 0 300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderWidth === '150px 0px 0px 300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-042.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-042.md deleted file mode 100644 index 3e56ee194c..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-042.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 60b69a66b6ddb80858c5159f -title: Part 42 -challengeType: 0 -dashedName: part-42 ---- - -# --description-- - -Just like with your `white-hat`, you should style the border for the `black-hat` element. Give it a `border-top-color`, `border-right-color`, and `border-bottom-color` of `transparent`. Set the `border-left-color` to `rgb(45, 31, 19)`. - -# --hints-- - -Your `#black-hat` selector should have a `border-top-color` property set to `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderTopColor === 'transparent'); -``` - -Your `#black-hat` selector should have a `border-right-color` property set to `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderRightColor === 'transparent'); -``` - -Your `#black-hat` selector should have a `border-bottom-color` property set to `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderBottomColor === 'transparent'); -``` - -Your `#black-hat` selector should have a `border-left-color` property set to `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderLeftColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-043.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-043.md deleted file mode 100644 index c63503d37b..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-043.md +++ /dev/null @@ -1,180 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a0 -title: Part 43 -challengeType: 0 -dashedName: part-43 ---- - -# --description-- - -Now position the `black-hat` element. Give it a `position` of `absolute`, with a `top` of `-150px` and a `left` of `0`. - -# --hints-- - -Your `#black-hat` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.position === 'absolute'); -``` - -Your `#black-hat` selector should have a `top` property set to `-150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.top === '-150px'); -``` - -Your `#black-hat` selector should have a `left` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-044.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-044.md deleted file mode 100644 index 98f7180490..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-044.md +++ /dev/null @@ -1,191 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a1 -title: Part 44 -challengeType: 0 -dashedName: part-44 ---- - -# --description-- - -Using an `id` selector, style the `gray-mask` element. Give it a `width` of `150px`, a `height` of `150px`, and a `background-color` of `rgb(167, 162, 117)`. - -# --hints-- - -You should have a `#gray-mask` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')); -``` - -Your `#gray-mask` selector should have a `width` property set to `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px'); -``` - -Your `#gray-mask` selector should have a `height` property set to `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px') -``` - -Your `#gray-mask` selector should have a `background-color` property set to `rgb(167, 162, 117)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.backgroundColor === 'rgb(167, 162, 117)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-045.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-045.md deleted file mode 100644 index 5dadbba896..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-045.md +++ /dev/null @@ -1,189 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a2 -title: Part 45 -challengeType: 0 -dashedName: part-45 ---- - -# --description-- - -Position the `gray-mask` by setting `position` to `absolute`, the `top` to `-10px`, and the `left` to `70px`. - -# --hints-- - -Your `#gray-mask` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.position === 'absolute'); -``` - -Your `#gray-mask` selector should have a `top` property set to `-10px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.top === '-10px'); -``` - -Your `#gray-mask` selector should have a `left` property set to `70px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.left === '70px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-046.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-046.md deleted file mode 100644 index d8273fbbcd..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-046.md +++ /dev/null @@ -1,200 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a3 -title: Part 46 -challengeType: 0 -dashedName: part-46 ---- - -# --description-- - -Using an `id` selector, create a rule for the `white-paper` element. Set the `width` to `400px`, the `height` to `100px`, and the `background-color` to `GhostWhite`. - -# --hints-- - -You should have a `#white-paper` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')); -``` - -Your `#white-paper` selector should have a `width` property set to `400px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.width === '400px'); -``` - -Your `#white-paper` selector should have a `height` property set to `100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.height === '100px'); -``` - -Your `#white-paper` selector should have a `background-color` property set to `GhostWhite`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.backgroundColor === 'ghostwhite'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-047.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-047.md deleted file mode 100644 index 7cb24c2d2f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-047.md +++ /dev/null @@ -1,198 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a4 -title: Part 47 -challengeType: 0 -dashedName: part-47 ---- - -# --description-- - -Give the `white-paper` a `position` of `absolute`, a `top` of `250px`, and a `left` of `-150px` to move it into place. - -# --hints-- - -Your `#white-paper` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.position === 'absolute'); -``` - -Your `#white-paper` selector should have a `top` property set to `250px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.top === '250px'); -``` - -Your `#white-paper` selector should have a `left` property set to `-150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.left === '-150px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-048.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-048.md deleted file mode 100644 index 4993a44cc0..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-048.md +++ /dev/null @@ -1,189 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a5 -title: Part 48 -challengeType: 0 -dashedName: part-48 ---- - -# --description-- - -Set the `z-index` of the `white-paper` to `1`. - -# --hints-- - -Your `#white-paper` selector should have a `z-index` property set to `1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.zIndex === '1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-049.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-049.md deleted file mode 100644 index 758c92cf8b..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-049.md +++ /dev/null @@ -1,210 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a6 -title: Part 49 -challengeType: 0 -dashedName: part-49 ---- - -# --description-- - -FontAwesome icons come with their own styling to define the icon. However, you can still set the styling yourself as well, to change things like the color and size. For now, use a `class` selector to target your `fa-music` icons. Set the `display` to `inline-block`, the `margin-top` to `8%`, and the `margin-left` to `13%`. - -# --hints-- - -You should have a `.fa-music` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')); -``` - -Your `.fa-music` selector should have a `display` property set to `inline-block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.display === 'inline-block'); -``` - -Your `.fa-music` selector should have a `margin-top` property set to `8%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginTop === '8%'); -``` - -Your `.fa-music` selector should have a `margin-left` property set to `13%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginLeft === '13%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-050.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-050.md deleted file mode 100644 index c18a5d29a2..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-050.md +++ /dev/null @@ -1,216 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a7 -title: Part 50 -challengeType: 0 -dashedName: part-50 ---- - -# --description-- - -Below your `black-character` element, add two new `div` elements. These will be the shawl. Give both of them a `class` of `blue`. Then give the first one an `id` of `blue-left`, and the second an `id` of `blue-right`. - -# --hints-- - -You should have two new `div` elements within your `.characters` element. - -```js -assert(document.querySelectorAll('.characters > div')?.length === 4); -``` - -Your two new `div` elemnts should have the `class` set to `blue`. - -```js -const divs = document.querySelectorAll('.characters > div'); -assert(divs?.[2]?.classList?.contains('blue')) -assert(divs?.[3]?.classList?.contains('blue')) -``` - -Your first new `div` should have an `id` of `blue-left`. - -```js -assert(document.querySelectorAll('.characters > div')?.[2]?.getAttribute('id') === 'blue-left'); -``` - -Your second new `div` should have an `id` of `blue-right`. - -```js -assert(document.querySelectorAll('.characters > div')?.[3]?.getAttribute('id') === 'blue-right'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-051.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-051.md deleted file mode 100644 index 685b288b2f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-051.md +++ /dev/null @@ -1,206 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a8 -title: Part 51 -challengeType: 0 -dashedName: part-51 ---- - -# --description-- - -Use a `class` selector to target your new `blue` elements. Set the `background-color` to `#1E90FF`. - -# --hints-- - -You should have a `.blue` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')); -``` - -Your `.blue` selector should have a `background-color` property set to `#1E90FF`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(30, 144, 255)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-052.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-052.md deleted file mode 100644 index 654f9e507b..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-052.md +++ /dev/null @@ -1,216 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515a9 -title: Part 52 -challengeType: 0 -dashedName: part-52 ---- - -# --description-- - -Select the `blue-left` element with an `id` selector. Give it a `width` of `500px` and a `height` of `300px`. - -# --hints-- - -You should have a `#blue-left` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')); -``` - -Your `#blue-left` selector should have a `width` property set to `500px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.width === '500px'); -``` - -Your `#blue-left` selector should have a `height` property set to `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.height === '300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-053.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-053.md deleted file mode 100644 index cbfac73ec2..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-053.md +++ /dev/null @@ -1,219 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515aa -title: Part 53 -challengeType: 0 -dashedName: part-53 ---- - -# --description-- - -Now set the `position` to `absolute`, the `top` to `20%`, and the `left` to `20%`. - -# --hints-- - -Your `#blue-left` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.position === 'absolute'); -``` - -Your `#blue-left` selector should have a `top` property set to `20%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.top === '20%'); -``` - -Your `#blue-left` selector should have a `left` property set to `20%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.left === '20%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-054.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-054.md deleted file mode 100644 index 3a5175998d..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-054.md +++ /dev/null @@ -1,224 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ab -title: Part 54 -challengeType: 0 -dashedName: part-54 ---- - -# --description-- - -Next, target your `blue-right` element with an `id` selector. Set the `width` to `400px` and the `height` to `300px`. - -# --hints-- - -You should have a `#blue-right` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')); -``` - -Your `#blue-right` selector should have a `width` property set to `400px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.width === '400px'); -``` - -Your `#blue-right` selector should have a `height` property set to `300px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.height === '300px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-055.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-055.md deleted file mode 100644 index 157a8b37c4..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-055.md +++ /dev/null @@ -1,227 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ac -title: Part 55 -challengeType: 0 -dashedName: part-55 ---- - -# --description-- - -Give the `blue-right` the correct positioning with `position` set to `absolute`, `top` set to `50%`, and `left` set to `40%`. - -# --hints-- - -Your `#blue-right` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.position === 'absolute'); -``` - -Your `#blue-right` selector should have a `top` property set to `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.top === '50%'); -``` - -Your `#blue-right` selector should have a `left` property set to `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.left === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-056.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-056.md deleted file mode 100644 index 08b02dbc78..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-056.md +++ /dev/null @@ -1,224 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ad -title: Part 56 -challengeType: 0 -dashedName: part-56 ---- - -# --description-- - -Below your `blue` elements, add another `div`. Give it the `id` value of `orange-character`. - -# --hints-- - -You should have a new `div` element within your `characters` element. - -```js -assert(document.querySelectorAll('.characters > div')?.length === 5); -``` - -Your new `div` element should have the `id` set to `orange-character`. - -```js -assert(document.querySelectorAll('.characters > div')?.[4]?.getAttribute('id') === 'orange-character'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-057.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-057.md deleted file mode 100644 index 95032c15f9..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-057.md +++ /dev/null @@ -1,244 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ae -title: Part 57 -challengeType: 0 -dashedName: part-57 ---- - -# --description-- - -Within that `orange-character` element, add four `div` elements. Give them the `id` values of `black-round-hat`, `eyes-div`, `triangles`, and `guitar`, in order. - -# --hints-- - -You should have four new `div` elements within your `orange-character` element. - -```js -assert(document.querySelectorAll('#orange-character > div')?.length === 4); -``` - -Your first new `div` element should have an `id` set to `black-round-hat`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[0]?.getAttribute('id') === 'black-round-hat'); -``` - -Your second new `div` element should have an `id` set to `eyes-div`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[1]?.getAttribute('id') === 'eyes-div'); -``` - -Your third new `div` element should have an `id` set to `triangles`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[2]?.getAttribute('id') === 'triangles'); -``` - -Your fourth new `div` element should have an `id` set to `guitar`. - -```js -assert(document.querySelectorAll('#orange-character > div')?.[3]?.getAttribute('id') === 'guitar'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-058.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-058.md deleted file mode 100644 index 94e76035b7..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-058.md +++ /dev/null @@ -1,239 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515af -title: Part 58 -challengeType: 0 -dashedName: part-58 ---- - -# --description-- - -The `eyes-div` element should hold some eyes. Add two `div` elements inside. Give the first a `class` of `eyes left`, and give the second a `class` of `eyes right`. - -# --hints-- - -You should have two `div` elements nested in your `eyes-div`. - -```js -assert(document.querySelectorAll('#eyes-div > div')?.length === 2); -``` - -The first new `div` should have the `class` set to `eyes left`. - -```js -assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('eyes')); -assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('left')); -``` - -The second new `div` should have the `class` set to `eyes right`. - -```js -assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('eyes')); -assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('right')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-059.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-059.md deleted file mode 100644 index 92dc0e9d25..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-059.md +++ /dev/null @@ -1,237 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b0 -title: Part 59 -challengeType: 0 -dashedName: part-59 ---- - -# --description-- - -Within the `triangles` div, you will need to add the elements that will become your triangles. Create thirty `div` elements and give each of them the class `triangle`. - -# --hints-- - -You should have 30 `div` elements within your `triangles` element. - -```js -assert(document.querySelectorAll('#triangles > div')?.length === 30); -``` - -All 30 of your new `div` elements should have the `class` set to `triangle`. - -```js -const divDivDiv = document.querySelectorAll('#triangles > div'); -for (const div of divDivDiv) { - assert(div?.classList?.contains('triangle')); -} -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-060.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-060.md deleted file mode 100644 index 9bf57228e9..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-060.md +++ /dev/null @@ -1,297 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b1 -title: Part 60 -challengeType: 0 -dashedName: part-60 ---- - -# --description-- - -Within the `guitar` element, create three `div` elements. Give the first two a `class` value of `guitar`. Then give the first an `id` of `guitar-left`, and the second an `id` of `guitar-right`. Add an `id` to the third `div` with the value `guitar-neck`. - -The third `div` should not have the `guitar` class. - -# --hints-- - -You should have three new `div` elements within your `guitar` element. - -```js -assert(document.querySelectorAll('#guitar > div')?.length === 3); -``` - -Your first new `div` should have a `class` set to `guitar`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[0]?.classList?.contains('guitar')); -``` - -Your first new `div` should have an `id` set to `guitar-left`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[0]?.getAttribute('id') === 'guitar-left'); -``` - -Your second new `div` should have a `class` set to `guitar`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[1]?.classList?.contains('guitar')); -``` - -Your second new `div` should have an `id` set to `guitar-right`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[1]?.getAttribute('id') === 'guitar-right'); -``` - -Your third new `div` should have an `id` set to `guitar-neck`. - -```js -assert(document.querySelectorAll('#guitar > div')?.[2]?.getAttribute('id') === 'guitar-neck'); -``` - -You should not give the third new `div` a `class` of `guitar`. - -```js -assert.notExists(document.querySelector('#guitar > #guitar-neck.guitar')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- - - --fcc-editable-region-- -
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-061.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-061.md deleted file mode 100644 index 45ce76fe92..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-061.md +++ /dev/null @@ -1,280 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b2 -title: Part 61 -challengeType: 0 -dashedName: part-61 ---- - -# --description-- - -Use another FontAwesome icon for your `guitar`. Inside both the `guitar-left` and `guitar-right` elements, add an `i` element and give it a `class` of `fas fa-bars`. - -# --hints-- - -Within your `guitar-left` element, you should add an `i` element. - -```js -assert(document.querySelectorAll('#guitar-left > i')?.length === 1); -``` - -Within your `guitar-right` element, you should add an `i` element. - -```js -assert(document.querySelectorAll('#guitar-right > i')?.length === 1); -``` - -Your two new `i` elements should have the `class` set to `fas fa-bars`. - -```js -assert(document.querySelector('#guitar-left > i')?.classList?.contains('fas')); -assert(document.querySelector('#guitar-left > i')?.classList?.contains('fa-bars')); -assert(document.querySelector('#guitar-right > i')?.classList?.contains('fas')); -assert(document.querySelector('#guitar-right > i')?.classList?.contains('fa-bars')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- --fcc-editable-region-- -
- -
-
- -
- --fcc-editable-region-- -
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-062.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-062.md deleted file mode 100644 index d22f0462ff..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-062.md +++ /dev/null @@ -1,286 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b3 -title: Part 62 -challengeType: 0 -dashedName: part-62 ---- - -# --description-- - -Select your `orange-character` element with an `id` selector. Give it a `width` of `250px`, a `height` of `550px`, and a `background-color` of `rgb(240, 78, 42)`. - -# --hints-- - -You should have an `#orange-character` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')); -``` - -Your `#orange-character` selector should have a `width` property set to `250px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.width === '250px'); -``` - -Your `#orange-character` selector should have a `height` property set to `550px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.height === '550px'); -``` - -Your `#orange-character` selector should have a `background-color` property set to `rgb(240, 78, 42)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.backgroundColor === 'rgb(240, 78, 42)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-063.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-063.md deleted file mode 100644 index df34bfacc5..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-063.md +++ /dev/null @@ -1,284 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b4 -title: Part 63 -challengeType: 0 -dashedName: part-63 ---- - -# --description-- - -Give the `orange-character` a `position` of `absolute`, a `top` of `25%`, and a `left` of `40%`. - -# --hints-- - -Your `#orange-character` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.position === 'absolute'); -``` - -Your `#orange-character` selector should have a `top` property set to `25%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.top === '25%'); -``` - -Your `#orange-character` selector should have a `left` property set to `40%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.left === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-064.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-064.md deleted file mode 100644 index 3eeb00d55c..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-064.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b5 -title: Part 64 -challengeType: 0 -dashedName: part-64 ---- - -# --description-- - -Style your `black-round-hat` element with an `id` selector. Set the `width` to `180px`, the `height` to `150px`, and the `background-color` to `rgb(45, 31, 19)`. - -# --hints-- - -You should have a `#black-round-hat` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')); -``` - -Your `#black-round-hat` selector should have a `width` property set to `180px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.width === '180px'); -``` - -Your `#black-round-hat` selector should have a `height` property set to `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.height === '150px'); -``` - -Your `#black-round-hat` selector should have a `background-color` property set to `rgb(45, 31, 19)`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.backgroundColor === 'rgb(45, 31, 19)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-065.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-065.md deleted file mode 100644 index e4c98cf8a7..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-065.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b6 -title: Part 65 -challengeType: 0 -dashedName: part-65 ---- - -# --description-- - -The `black-round-hat` should probably be round. Give it a `border-radius` of `50%` to fix this. - -# --hints-- - -Your `#black-round-hat` selector should have a `border-radius` property set to `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.borderRadius === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-066.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-066.md deleted file mode 100644 index fc852d480e..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-066.md +++ /dev/null @@ -1,294 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b7 -title: Part 66 -challengeType: 0 -dashedName: part-66 ---- - -# --description-- - -Move the `black-round-hat` into place with a `position` of `absolute`, a `top` of `-100px`, and a `left` of `5px`. - -# --hints-- - -Your `#black-round-hat` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.position === 'absolute'); -``` - -Your `#black-round-hat` selector should have a `top` property set to `-100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.top === '-100px'); -``` - -Your `#black-round-hat` selector should have a `left` property set to `5px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.left === '5px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-067.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-067.md deleted file mode 100644 index 16ccd0691f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-067.md +++ /dev/null @@ -1,285 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b8 -title: Part 67 -challengeType: 0 -dashedName: part-67 ---- - -# --description-- - -Put the `black-round-hat` on the correct layer with a `z-index` of `-1`. - -# --hints-- - -Your `#black-round-hat` selector should have a `z-index` property set to `-1`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.zIndex === '-1'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-068.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-068.md deleted file mode 100644 index 55827430f5..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-068.md +++ /dev/null @@ -1,300 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515b9 -title: Part 68 -challengeType: 0 -dashedName: part-68 ---- - -# --description-- - -Use an `id` selector to create a rule for your `eyes-div` element. Set the `width` to `180px` and the `height` to `50px`. - -# --hints-- - -You should create an `#eyes-div` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')); -``` - -Your `#eyes-div` selector should have a `width` property set to `180px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.width === '180px'); -``` - -Your `#eyes-div` selector should have a `height` property set to `50px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.height === '50px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-069.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-069.md deleted file mode 100644 index a339ffdd2c..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-069.md +++ /dev/null @@ -1,303 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515ba -title: Part 69 -challengeType: 0 -dashedName: part-69 ---- - -# --description-- - -Now move the `eyes-div` into position with `position` set to `absolute`, `top` set to `-40px`, and `left` set to `20px`. - -# --hints-- - -Your `#eyes-div` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.position === 'absolute'); -``` - -Your `#eyes-div` selector should have a `top` property set to `-40px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.top === '-40px'); -``` - -Your `#eyes-div` selector should have a `left` property set to `20px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.left === '20px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-070.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-070.md deleted file mode 100644 index b2aac5a9fe..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-070.md +++ /dev/null @@ -1,294 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bc -title: Part 70 -challengeType: 0 -dashedName: part-70 ---- - -# --description-- - -Give the `eyes-div` a `z-index` of `3`. - -# --hints-- - -Your `#eyes-div` selector should have a `z-index` property set to `3`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-071.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-071.md deleted file mode 100644 index 21beeb8a5a..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-071.md +++ /dev/null @@ -1,308 +0,0 @@ ---- -id: 60ba8914bab51f0fb8228e9c -title: Part 71 -challengeType: 0 -dashedName: part-71 ---- - -# --description-- - -Target your `triangles` element with an `id` selector. Set the `width` to `250px` and the `height` to `550px`. - -# --hints-- - -You should add a `#triangles` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')); -``` - -Your `#triangles` selector should have a `width` property set to `250px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.width === '250px'); -``` - -Your `#triangles` selector should have a `height` property set to `550px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.height === '550px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-072.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-072.md deleted file mode 100644 index 649b89ef43..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-072.md +++ /dev/null @@ -1,313 +0,0 @@ ---- -id: 60ba89146b25080f99ab54ad -title: Part 72 -challengeType: 0 -dashedName: part-72 ---- - -# --description-- - -Create a `class` selector for your `triangle` elements. Set the `width` to `0` and the `height` to `0`. - -# --hints-- - -You should create a `.triangle` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')); -``` - -Your `.triangle` selector should have a `width` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.width === '0px'); -``` - -Your `.triangle` selector should have a `height` property set to `0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.height === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; -} - -#triangles { - width: 250px; - height: 550px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-073.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-073.md deleted file mode 100644 index 3106289438..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-073.md +++ /dev/null @@ -1,310 +0,0 @@ ---- -id: 60ba8913f1704c0f7a8906b8 -title: Part 73 -challengeType: 0 -dashedName: part-73 ---- - -# --description-- - -Style the border of your `triangle` elements. Set the `border-style` to `solid` and the `border-width` to `42px 45px 45px 0`. - -# --hints-- - -Your `.triangle` selector should have a `border-style` property set to `solid`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderStyle === 'solid'); -``` - -Your `.triangle` selector should have a `border-width` property set to `42px 45px 45px 0`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderWidth === '42px 45px 45px 0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-074.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-074.md deleted file mode 100644 index 7aa986a00c..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-074.md +++ /dev/null @@ -1,324 +0,0 @@ ---- -id: 60ba89123a445e0f5c9e4022 -title: Part 74 -challengeType: 0 -dashedName: part-74 ---- - -# --description-- - -Give your `triangle` elements the correct color. Set the `border-top-color`, `border-bottom-color`, and `border-left-color` to `transparent`. Set the `border-right-color` to `Gold`. - -# --hints-- - -Your `.triangle` selector should have a `border-top-color` property set to `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderTopColor === 'transparent'); -``` - -Your `.triangle` selector should have a `border-bottom-color` property set to `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderBottomColor === 'transparent'); -``` - -Your `.triangle` selector should have a `border-left-color` property set to `transparent`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderLeftColor === 'transparent'); -``` - -Your `.triangle` selector should have a `border-right-color` property set to `Gold`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderRightColor === 'gold'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-075.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-075.md deleted file mode 100644 index e97b9b71c5..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-075.md +++ /dev/null @@ -1,310 +0,0 @@ ---- -id: 60ba890832b4940f24d1936b -title: Part 75 -challengeType: 0 -dashedName: part-75 ---- - -# --description-- - -Adjust the layout of the `triangle` elements with a `display` of `inline-block`. - -# --hints-- - -Your `.triangle` selector should have a `display` property set to `inline-block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.display === 'inline-block'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-076.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-076.md deleted file mode 100644 index 9d60bbef9d..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-076.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: 60ba929345ab0714a3743655 -title: Part 76 -challengeType: 0 -dashedName: part-76 ---- - -# --description-- - -Now use an `id` selector for `guitar`. Set the `width` to `100%`, and the `height` to `100px`. - -# --hints-- - -You should create a `#guitar` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')); -``` - -Your `#guitar` selector should have a `width` property set to `100%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.width === '100%'); -``` - -Your `#guitar` selector should have a `height` property set to `100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.height === '100px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-077.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-077.md deleted file mode 100644 index bec26fd053..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-077.md +++ /dev/null @@ -1,328 +0,0 @@ ---- -id: 60ba9296d4d6b414c1b10995 -title: Part 77 -challengeType: 0 -dashedName: part-77 ---- - -# --description-- - -In the same `#guitar` selector, set the `position` to `absolute`, the `top` to `120px`, and the `left` to `0px`. - -# --hints-- - -Your `#guitar` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.position === 'absolute'); -``` - -Your `#guitar` selector should have a `top` property set to `120px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.top === '120px'); -``` - -Your `#guitar` selector should have a `left` property set to `0px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.left === '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-078.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-078.md deleted file mode 100644 index 32cd540164..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-078.md +++ /dev/null @@ -1,319 +0,0 @@ ---- -id: 60ba92987c1e4914dfa7a0b9 -title: Part 78 -challengeType: 0 -dashedName: part-78 ---- - -# --description-- - -Give the `#guitar` rule a `z-index` of `3`. - -# --hints-- - -Your `#guitar` selector should have a `z-index` property set to `3`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-079.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-079.md deleted file mode 100644 index 28050f472d..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-079.md +++ /dev/null @@ -1,347 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bd -title: Part 79 -challengeType: 0 -dashedName: part-79 ---- - -# --description-- - -Now use a `class` selector to target `guitar`. This will style the two "halves" of your guitar. Set the `width` to `150px`, the `height` to `120px`, the `background-color` to `Goldenrod`, and the `border-radius` to `50%`. - -# --hints-- - -You should create a `.guitar` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')); -``` - -Your `.guitar` selector should have a `width` property set to `150px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.width === '150px'); -``` - -Your `.guitar` selector should have a `height` property set to `120px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.height === '120px'); -``` - -Your `.guitar` selector should have a `background-color` property set to `Goldenrod`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.backgroundColor === 'goldenrod'); -``` - -Your `.guitar` selector should have a `border-radius` property set to `50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.borderRadius === '50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-080.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-080.md deleted file mode 100644 index ae48915065..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-080.md +++ /dev/null @@ -1,336 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515be -title: Part 80 -challengeType: 0 -dashedName: part-80 ---- - -# --description-- - -Select the `id` with value `guitar-left`, and set the `position` to `absolute` and the `left` to `0px`. - -# --hints-- - -You should create a new `#guitar-left` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')); -``` - -Your `#guitar-left` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')?.position === 'absolute'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-081.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-081.md deleted file mode 100644 index c1a87442e6..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-081.md +++ /dev/null @@ -1,347 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515bf -title: Part 81 -challengeType: 0 -dashedName: part-81 ---- - -# --description-- - -Select the `id` with value `guitar-right`, and also set `position` to `absolute`. This time, set `left` to `100px`. - -# --hints-- - -You should create a new `#guitar-right` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')); -``` - -Your `#guitar-right` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.position === 'absolute'); -``` - -Your `#guitar-right` selector should have a `left` property set to `100px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.left === '100px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-082.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-082.md deleted file mode 100644 index 94fc7ad4b9..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-082.md +++ /dev/null @@ -1,358 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c0 -title: Part 82 -challengeType: 0 -dashedName: part-82 ---- - -# --description-- - -Now you need to move the bar icons into place. Create a `class` selector for the `fa-bars` class. Set the `display` to `block`, the `margin-top` to `30%`, and the `margin-left` to `40%`. - -# --hints-- - -You should create a `.fa-bars` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')); -``` - -Your `.fa-bars` selector should have a `display` property set to `block`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.display === 'block'); -``` - -Your `.fa-bars` selector should have a `margin-top` property set to `30%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginTop === '30%'); -``` - -Your `.fa-bars` selector should have a `margin-left` property set to `30%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginLeft === '40%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-083.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-083.md deleted file mode 100644 index 57186ae4c7..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-083.md +++ /dev/null @@ -1,364 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c1 -title: Part 83 -challengeType: 0 -dashedName: part-83 ---- - -# --description-- - -Use an `id` selector to create a `guitar-neck` rule. Set the `width` to `200px`, the `height` to `30px`, and the `background-color` to `#D2691E`. - -# --hints-- - -You should create a `#guitar-neck` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')); -``` - -Your `#guitar-neck` selector should have a `width` property set to `200px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.width === '200px'); -``` - -Your `#guitar-neck` selector should have a `height` property set to `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.height === '30px'); -``` - -Your `#guitar-neck` selector should have a `background-color` property set to `#D2691E`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.backgroundColor === 'rgb(210, 105, 30)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-084.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-084.md deleted file mode 100644 index 00f60b0854..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-084.md +++ /dev/null @@ -1,362 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c2 -title: Part 84 -challengeType: 0 -dashedName: part-84 ---- - -# --description-- - -Now move the `guitar-neck` with a `position` of `absolute`, a `top` value of `45px`, and a `left` value of `200px`. - -# --hints-- - -Your `#guitar-neck` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.position === 'absolute'); -``` - -Your `#guitar-neck` selector should have a `top` property set to `45px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.top === '45px'); -``` - -Your `#guitar-neck` selector should have a `left` property set to `200px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.left === '200px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-085.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-085.md deleted file mode 100644 index b322789b8f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-085.md +++ /dev/null @@ -1,353 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c3 -title: Part 85 -challengeType: 0 -dashedName: part-85 ---- - -# --description-- - -Give the `guitar-neck` a `z-index` of `3`. - -# --hints-- - -Your `#guitar-neck` selector should have a `z-index` property set to `3`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.zIndex === '3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - --fcc-editable-region-- - - --fcc-editable-region-- -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-086.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-086.md deleted file mode 100644 index 5aada7850a..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-086.md +++ /dev/null @@ -1,380 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c4 -title: Part 86 -challengeType: 0 -dashedName: part-86 ---- - -# --description-- - -Time to style your `eyes` elements. Use a `class` selector to set the `width` to `35px`, the `height` to `20px`, the `background-color` to `#8B4513`, and the `border-radius` to `20px 50%`. - -# --hints-- - -You should create a `.eyes` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')); -``` - -Your `.eyes` selector should have a `width` property set to `35px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.width === '35px'); -``` - -Your `.eyes` selector should have a `height` property set to `20px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.height === '20px'); -``` - -Your `.eyes` selector should have a `background-color` property set to `#8B4513`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.backgroundColor === 'rgb(139, 69, 19)'); -``` - -Your `.eyes` selector should have a `border-radius` property set to `20px 50%`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.borderRadius === '20px 50%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-087.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-087.md deleted file mode 100644 index a4e87d2f77..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-087.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c5 -title: Part 87 -challengeType: 0 -dashedName: part-87 ---- - -# --description-- - -Target the `class` with value `right` and set the `position` to `absolute`, `top` to `15px`, and `right` to `30px`. - -# --hints-- - -You should create a `.right` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')); -``` - -Your `.right` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.position === 'absolute'); -``` - -Your `.right` selector should have a `top` property set to `15px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.top === '15px'); -``` - -Your `.right` selector should have a `right` property set to `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.right')?.right === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-088.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-088.md deleted file mode 100644 index a12fbea43a..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-088.md +++ /dev/null @@ -1,387 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c6 -title: Part 88 -challengeType: 0 -dashedName: part-88 ---- - -# --description-- - -For the `class` with value `left`, create the selector and set the `position` to `absolute`, the `top` to `15px`, and the `left` to `30px`. - -# --hints-- - -You should create a new `.left` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')); -``` - -Your `.left` selector should have a `position` property set to `absolute`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.position === 'absolute'); -``` - -Your `.left` selector should have a `top` property set to `15px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.top === '15px'); -``` - -Your `.left` selector should have a `left` property set to `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.left')?.left === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { -width: 150px; -height: 120px; -background-color: Goldenrod; -border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-089.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-089.md deleted file mode 100644 index d249db7341..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/part-089.md +++ /dev/null @@ -1,383 +0,0 @@ ---- -id: 60b69a66b6ddb80858c515c7 -title: Part 89 -challengeType: 0 -dashedName: part-89 ---- - -# --description-- - -One last step. The FontAwesome icons are a little too small. Target all of them with a `class` selector for `fas`, and set the `font-size` to `30px`. - -With that, your Picasso painting is complete! - -# --hints-- - -You should create a `.fas` selector. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fas')); -``` - -Your `.fas` selector should have a `font-size` property set to `30px`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.fas')?.fontSize === '30px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - freeCodeCamp Picasso Painting - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
-
-
-
-
- - -``` - -```css -body { - background-color: rgb(184, 132, 46); -} - -#back-wall { - background-color: #8B4513; - width: 100%; - height: 60%; - position: absolute; - top: 0; - left: 0; - z-index: -1; -} - -#offwhite-character { - width: 300px; - height: 550px; - background-color: GhostWhite; - position: absolute; - top: 20%; - left: 17.5%; -} - -#white-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 0 120px 140px 180px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: GhostWhite; - border-left-color: transparent; - position: absolute; - top: -140px; - left: 0; -} - -#black-mask { - width: 100%; - height: 50px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 0; - left: 0; - z-index: 1; -} - -#gray-instrument { - width: 15%; - height: 40%; - background-color: rgb(167, 162, 117); - position: absolute; - top: 50px; - left: 125px; - z-index: 1; -} - -.black-dot { - width: 10px; - height: 10px; - background-color: rgb(45, 31, 19); - display: block; - margin: auto; - margin-top: 65%; -} - -#tan-table { - width: 450px; - height: 140px; - background-color: #D2691E; - position: absolute; - top: 275px; - left: 15px; - z-index: 1; -} - -#black-character { - width: 300px; - height: 500px; - background-color: rgb(45, 31, 19); - position: absolute; - top: 30%; - left: 59%; -} - -#black-hat { - width: 0; - height: 0; - border-style: solid; - border-width: 150px 0 0 300px; - border-top-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - border-left-color: rgb(45, 31, 19); - position: absolute; - top: -150px; - left: 0; -} - -#gray-mask { - width: 150px; - height: 150px; - background-color: rgb(167, 162, 117); - position: absolute; - top: -10px; - left: 70px; -} - -#white-paper { - width: 400px; - height: 100px; - background-color: GhostWhite; - position: absolute; - top: 250px; - left: -150px; - z-index: 1; -} - -.fa-music { - display: inline-block; - margin-top: 8%; - margin-left: 13%; -} - -.blue { - background-color: #1E90FF; -} - -#blue-left { - width: 500px; - height: 300px; - position: absolute; - top: 20%; - left: 20%; -} - -#blue-right { - width: 400px; - height: 300px; - position: absolute; - top: 50%; - left: 40%; -} - -#orange-character { - width: 250px; - height: 550px; - background-color: rgb(240, 78, 42); - position: absolute; - top: 25%; - left: 40%; -} - -#black-round-hat { - width: 180px; - height: 150px; - background-color: rgb(45, 31, 19); - border-radius: 50%; - position: absolute; - top: -100px; - left: 5px; - z-index: -1; -} - -#eyes-div { - width: 180px; - height: 50px; - position: absolute; - top: -40px; - left: 20px; - z-index: 3; -} - -#triangles { - width: 250px; - height: 550px; -} - -.triangle { - width: 0; - height: 0; - border-style: solid; - border-width: 42px 45px 45px 0; - border-top-color: transparent; - border-right-color: Gold; /* yellow */ - border-bottom-color: transparent; - border-left-color: transparent; - display: inline-block; -} - -#guitar { - width: 100%; - height: 100px; - position: absolute; - top: 120px; - left: 0px; - z-index: 3; -} - -.guitar { - width: 150px; - height: 120px; - background-color: Goldenrod; - border-radius: 50%; -} - -#guitar-left { - position: absolute; - left: 0px; -} - -#guitar-right { - position: absolute; - left: 100px; -} - -.fa-bars { - display: block; - margin-top: 30%; - margin-left: 40%; -} - -#guitar-neck { - width: 200px; - height: 30px; - background-color: #D2691E; - position: absolute; - top: 45px; - left: 200px; - z-index: 3; -} - -.eyes { - width: 35px; - height: 20px; - background-color: #8B4513; - border-radius: 20px 50%; -} - -.right { - position: absolute; - top: 15px; - right: 30px; -} - -.left { - position: absolute; - top: 15px; - left: 30px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-001.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-001.md new file mode 100644 index 0000000000..2af84caa2b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-001.md @@ -0,0 +1,112 @@ +--- +id: 60b69a66b6ddb80858c51578 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +Start by setting up your HTML structure. Add a `` declaration and an `html` element. Within the `html` element, add a `head` element and a `body` element. + +# --hints-- + +Your code should contain the `DOCTYPE` reference. + +```js +assert(code.match(/` after the type. + +```js +assert(code.match(/html\s*>/gi)); +``` + +Your `html` element should be below the `DOCTYPE` declaration. + +```js +assert(code.match(/(?)/gi)); +``` + +Your `html` element should have an opening tag. + +```js +assert(code.match(//gi)); +``` + +Your `html` element should have a closing tag. + +```js +assert(code.match(/<\/html\s*>/)); +``` + +You should have an opening `head` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `head` tag. + +```js +assert(code.match(/<\/head\s*>/i)); +``` + +You should have an opening `body` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `body` tag. + +```js +assert(code.match(/<\/body\s*>/i)); +``` + +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')); +``` + +# --seed-- + +## --seed-contents-- + +```html + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-002.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-002.md new file mode 100644 index 0000000000..cb162775ca --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-002.md @@ -0,0 +1,63 @@ +--- +id: 60b69a66b6ddb80858c51579 +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Within your `head` element, add a `meta` tag with the `charset` attribute set to `utf-8`. Also add a `title` element with the text `freeCodeCamp Picasso Painting`. + +# --hints-- + +You should add exactly one `meta` element. + +```js +assert(document.querySelectorAll('meta').length === 1); +``` + +Your `meta` element should have a `charset` attribute. + +```js +assert(document.querySelector('meta')?.getAttribute('charset')); +``` + +Your `charset` attribute should be set to `utf-8`. + +```js +assert(document.querySelector('meta')?.getAttribute('charset') === 'utf-8'); +``` + +You should add exactly one `title` element. + +```js +assert(document.querySelectorAll('title').length === 1); +``` + +Your `title` element should have the text `freeCodeCamp Picasso Painting`. Note that spelling and casing matter. + +```js +assert(document.querySelector('title')?.innerText === 'freeCodeCamp Picasso Painting'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + --fcc-editable-region-- + + --fcc-editable-region-- + + + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-003.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-003.md new file mode 100644 index 0000000000..b4165f7816 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-003.md @@ -0,0 +1,74 @@ +--- +id: 60b80da8676fb3227967a731 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Go ahead and link your CSS file now, even though you have not written any CSS yet. + +Add a `link` element with a `rel` of `stylesheet`, a `type` of `text/css`, and an `href` of `styles.css`. + +# --hints-- + + +Your code should have a `link` element. + +```js +assert.match(code, //i)); +``` + +Your `link` element should be within your `head` element. + +```js +assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)) +``` + +Your `link` element should have a `rel` attribute with the value `stylesheet`. + +```js +assert.match(code, / + + + + freeCodeCamp Picasso Painting + --fcc-editable-region-- + + --fcc-editable-region-- + + + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-004.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-004.md new file mode 100644 index 0000000000..4fb3e3611a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-004.md @@ -0,0 +1,58 @@ +--- +id: 60b69a66b6ddb80858c5157a +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +FontAwesome is a library of SVG-powered icons, many of which are freely available to use. You will be using some of these icons in this project, so you will need to link the external stylesheet to your HTML. + +Add a `link` element with a `rel` of `stylesheet` and an `href` of `https://use.fontawesome.com/releases/v5.8.2/css/all.css`. + +# --hints-- + +You should add another `link` element. + +```js +// We set this to 1 because the CSS link is stripped from the code by our parser. +assert(document.querySelectorAll('link').length === 2); +``` + +Your `link` element should have a `rel` of `stylesheet`. + +```js +assert(document.querySelector('link')?.getAttribute('rel') === 'stylesheet'); +``` + +Your `link` element should have an `href` of +`https://use.fontawesome.com/releases/v5.8.2/css/all.css`. + +```js +assert(document.querySelectorAll('link')?.[1]?.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css') +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + --fcc-editable-region-- + + --fcc-editable-region-- + + + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-005.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-005.md new file mode 100644 index 0000000000..86506dfd0b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-005.md @@ -0,0 +1,50 @@ +--- +id: 60b69a66b6ddb80858c5157b +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +To get your painting started, give your `body` element a `background-color` of `rgb(184, 132, 46)`. + +# --hints-- + +You should use the `body` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')); +``` + +Your `body` element should have the `background-color` property set to `rgb (184, 132, 46)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(184, 132, 46)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + + + +``` + +```css + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-006.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-006.md new file mode 100644 index 0000000000..df8218ea5d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-006.md @@ -0,0 +1,51 @@ +--- +id: 60b69a66b6ddb80858c5157c +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Within your body tag, add a `div` element. Give it an `id` of `back-wall`. + +# --hints-- + +You should add exactly 1 `div` element. + +```js +assert(document.querySelectorAll('div').length === 1); +``` + +Your `div` element should have the `id` value of `back-wall`. + +```js +assert(document.querySelector('div')?.getAttribute('id') === 'back-wall'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + + --fcc-editable-region-- + + --fcc-editable-region-- + + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-007.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-007.md new file mode 100644 index 0000000000..fbec083f50 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-007.md @@ -0,0 +1,54 @@ +--- +id: 60b69a66b6ddb80858c5157d +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Use an id selector to give the `back-wall` element a `background-color` of `#8B4513`. + +# --hints-- + +You should use a `#back-wall` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')); +``` + +Your `#back-wall` selector should have a `background-color` of `#8B4513`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.backgroundColor === 'rgb(139, 69, 19)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-008.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-008.md new file mode 100644 index 0000000000..4862e1a233 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-008.md @@ -0,0 +1,56 @@ +--- +id: 60b69a66b6ddb80858c5157e +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Give the `back-wall` element a `width` of `100%` and a `height` of `60%`. + +# --hints-- + +You should set the `width` of the `#back-wall` selector to `100%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.width === '100%'); +``` + +You should set the `height` of the `#back-wall` selector to `60%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.height === '60%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-009.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-009.md new file mode 100644 index 0000000000..cb83d756e1 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-009.md @@ -0,0 +1,69 @@ +--- +id: 60b69a66b6ddb80858c5157f +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Typically, HTML is rendered in a top-down manner. Elements at the top of the code are positioned at the top of the page. However, many times you may want to move the elements to different positions. You can do this with the `position` attribute. + +Set the `position` attribute for the `back-wall` element to `absolute`. An `absolute` position takes the element out of that top-down document flow and allows you to adjust it relative to its container. + +When an element is manually positioned, you can shift its layout with `top`, `left`, `right`, and `bottom`. Set the `back-wall` to have a `top` value of `0`, and a `left` value of `0`. + + +# --hints-- + +Your `#back-wall` selector should have the `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.position === 'absolute'); +``` + +Your `#back-wall` selector should have the `top` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.top === '0px'); +``` + +Your `#back-wall` selector should have the `left` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.left === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-010.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-010.md new file mode 100644 index 0000000000..0d7cfd0742 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-010.md @@ -0,0 +1,59 @@ +--- +id: 60b69a66b6ddb80858c51580 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +The `z-index` property is used to create "layers" for your HTML elements. If you are familiar with image editing tools, you may have worked with layers before. This is a similar concept. + +Elements with a higher `z-index` value will appear to be layered on top of elements with a lower `z-index` value. This can be combined with the positioning in the previous lesson to create unique effects. + +Since the `back-wall` element will need to appear "behind" the other elements you will be creating, give the `back-wall` element a `z-index` of `-1`. + +# --hints-- + +Your `#back-wall` selector should have the `z-index` property set to `-1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.zIndex === '-1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-011.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-011.md new file mode 100644 index 0000000000..597cee5e68 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-011.md @@ -0,0 +1,68 @@ +--- +id: 60b69a66b6ddb80858c51581 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Below your `back-wall` element, create a `div` with a `class` of `characters`. This is where you will be creating your painting's characters. + +# --hints-- + +You should only add one new `div` element. + +```js +assert(document.querySelectorAll('div').length === 2); +``` + +Your new `div` element should come after your `#back-wall` element. + +```js +assert(document.querySelector('#back-wall')?.nextElementSibling?.localName === 'div'); +``` + +Your new `div` element should have the `class` set to `characters`. + +```js +assert(document.querySelectorAll('div')?.[1]?.classList?.contains('characters')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+ --fcc-editable-region-- + + --fcc-editable-region-- + + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-012.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-012.md new file mode 100644 index 0000000000..35452b3b45 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-012.md @@ -0,0 +1,70 @@ +--- +id: 60b69a66b6ddb80858c51582 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Inside that `characters` element, create another `div` with an `id` of `offwhite-character`. + +# --hints-- + +You should only create 1 additional `div` element. + +```js +assert(document.querySelectorAll('div').length === 3); +``` + +Your new `div` element should be nested in your `.characters` element. + +```js +assert(document.querySelector('.characters div')); +``` + +Your new `div` element should have an `id` of `offwhite-character`. + +```js +assert(document.querySelector('.characters div')?.getAttribute('id') === 'offwhite-character'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-013.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-013.md new file mode 100644 index 0000000000..03c39873b3 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-013.md @@ -0,0 +1,84 @@ +--- +id: 60b69a66b6ddb80858c51583 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Create four `div` elements inside your `offwhite-character` element. Give those `div` elements the following `id` values, in order: `white-hat`, `black-mask`, `gray-instrument`, `tan-table`. + +# --hints-- + +You should add four `div` elements within your `.offwhite-character` element. + +```js +assert(document.querySelectorAll('#offwhite-character div').length === 4); +``` + +Your first new `div` element should have the `id` of `white-hat`. + +```js +assert(document.querySelectorAll('#offwhite-character div')[0]?.getAttribute('id') === 'white-hat'); +``` + +Your second new `div` element should have the `id` of `black-mask`. + +```js +assert(document.querySelectorAll('#offwhite-character div')[1]?.getAttribute('id') === 'black-mask'); +``` + +Your third new `div` element should have the `id` of `gray-instrument`. + +```js +assert(document.querySelectorAll('#offwhite-character div')[2]?.getAttribute('id') === 'gray-instrument'); +``` + +Your fourth new `div` element should have the `id` of `tan-table`. + +```js +assert(document.querySelectorAll('#offwhite-character div')[3]?.getAttribute('id') === 'tan-table'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-014.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-014.md new file mode 100644 index 0000000000..b4951153a2 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-014.md @@ -0,0 +1,79 @@ +--- +id: 60b69a66b6ddb80858c51584 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +This character needs eyes. Create two `div` elements in the `black-mask` element. Give them the classes `eyes left` and `eyes right`, in that order. + +# --hints-- + +You should create 2 `div` elements within your `#black-mask` element. + +```js +assert(document.querySelectorAll('#black-mask div').length === 2); +``` + +Your first new `div` should have the classes `eyes` and `left`. + +```js +assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('eyes')); +assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('left')); +``` + +Your second new `div` should have the classes `eyes` and `right`. + +```js +assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('eyes')); +assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('right')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-015.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-015.md new file mode 100644 index 0000000000..3a31dbb160 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-015.md @@ -0,0 +1,74 @@ +--- +id: 60b69a66b6ddb80858c51585 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Create some "dots" for the instrument. Add five `div` elements within your `gray-instrument` element. Set the `class` of each to `black-dot`. + +# --hints-- + +You should have five new `div` elements within your `#gray-instrument` element. + +```js +assert(document.querySelectorAll('#gray-instrument div').length === 5); +``` + +Your five `div` elements should all have the class `black-dot`. + +```js +assert(document.querySelectorAll('#gray-instrument .black-dot').length === 5); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-016.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-016.md new file mode 100644 index 0000000000..cc82b74aef --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-016.md @@ -0,0 +1,93 @@ +--- +id: 60b69a66b6ddb80858c51586 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Using an `id` selector, create a rule for your `offwhite-character` element. Give it a `width` of `300px`, a `height` of `550px`, and a `background-color` of `GhostWhite`. + +# --hints-- + +You should use the `#offwhite-character` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')); +``` + +Your `#offwhite-character` should have a `width` property set to `300px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.width === '300px'); +``` + +Your `#offwhite-character` should have a `height` property set to `550px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.height === '550px'); +``` + +Your `#offwhite-character` should have a `background-color` property set to `GhostWhite`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.backgroundColor === 'ghostwhite'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-017.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-017.md new file mode 100644 index 0000000000..d2e2bbf9bc --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-017.md @@ -0,0 +1,91 @@ +--- +id: 60b69a66b6ddb80858c51587 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Move the `offwhite-character` into place by giving it a `position` of `absolute`, a `top` value of `20%`, and a `left` value of `17.5%`. + +# --hints-- + +Your `#offwhite-character` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.position === 'absolute'); +``` + +Your `#offwhite-character` selector should have a `top` property set to `20%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.top === '20%'); +``` + +Your `#offwhite-character` selector should have a `left` property set to `17.5%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.left === '17.5%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-018.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-018.md new file mode 100644 index 0000000000..a35dbc3959 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-018.md @@ -0,0 +1,102 @@ +--- +id: 60b69a66b6ddb80858c51588 +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Using an `id` selector, style your `white-hat` element. Give it a `width` and `height` of `0`, and a `border-style` of `solid`. + +# --hints-- + +You should use a `#white-hat` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')); +``` + +Your `#white-hat` selector should have a `width` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.width === '0px'); +``` + +Your `#white-hat` selector should have a `height` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.height === '0px'); +``` + +Your `#white-hat` selector should have a `border-style` property set to `solid`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderStyle === 'solid'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-019.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-019.md new file mode 100644 index 0000000000..0bc34dc11b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-019.md @@ -0,0 +1,88 @@ +--- +id: 60b69a66b6ddb80858c51589 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +That does not look quite right. Set a `border-width` of `0 120px 140px 180px` to size the hat properly. + +# --hints-- + +Your `#white-hat` selector should have a `border-width` property set to `0 120px 140px 180px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderWidth === '0px 120px 140px 180px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-020.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-020.md new file mode 100644 index 0000000000..ee55011a85 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-020.md @@ -0,0 +1,107 @@ +--- +id: 60b69a66b6ddb80858c5158a +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Now you have a large box. Give it a `border-top-color`, `border-right-color`, and `border-left-color` of `transparent`. Set the `border-bottom-color` to `GhostWhite`. This will make it look more like a hat. + +# --hints-- + +Your `#white-hat` selector should have a `border-top-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderTopColor === 'transparent'); +``` + +Your `#white-hat` selector should have a `border-right-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderRightColor === 'transparent'); +``` + +Your `#white-hat` selector should have a `border-left-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderLeftColor === 'transparent'); +``` + +Your `#white-hat` selector should have a `border-bottom-color` property set to `GhostWhite`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderBottomColor === 'ghostwhite'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-021.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-021.md new file mode 100644 index 0000000000..14696b7ee3 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-021.md @@ -0,0 +1,105 @@ +--- +id: 60b69a66b6ddb80858c5158b +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Give the hat a `position` of `absolute`, a `top` value of `-140px`, and a `left` value of `0`. + +# --hints-- + +Your `#white-hat` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.position === 'absolute'); +``` + +Your `#white-hat` selector should have a `top` property set to `-140px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.top === '-140px'); +``` + +Your `#white-hat` selector should have a `left` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.left === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-022.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-022.md new file mode 100644 index 0000000000..b612e742f2 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-022.md @@ -0,0 +1,116 @@ +--- +id: 60b69a66b6ddb80858c5158c +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Using an `id` selector, create a rule for your `black-mask` element. Give it a `width` of `100%`, a `height` of `50px`, and a `background-color` of `rgb(45, 31, 19)`. + +# --hints-- + +You should have a `#black-mask` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')); +``` + +Your `#black-mask` selector should have a `width` property set to `100%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.width === '100%'); +``` + +Your `#black-mask` selector should have a `height` property set to `50px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.height === '50px'); +``` + +Your `#black-mask` selector should have a `background-color` property set to `rgb(45, 31, 19)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.backgroundColor === 'rgb(45, 31, 19)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-023.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-023.md new file mode 100644 index 0000000000..5610a7a5f6 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-023.md @@ -0,0 +1,114 @@ +--- +id: 60b69a66b6ddb80858c5158d +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Give the mask a `position` of `absolute`, and a `top` and `left` value of `0`. + +# --hints-- + +Your `#black-mask` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.position === 'absolute'); +``` + +Your `#black-mask` selector should have a `top` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.top === '0px'); +``` + +Your `#black-mask` selector should have a `left` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.left === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-024.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-024.md new file mode 100644 index 0000000000..a5e8a52697 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-024.md @@ -0,0 +1,105 @@ +--- +id: 60b69a66b6ddb80858c5158e +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +To ensure you can see the mask, give it a `z-index` of `1`. + +# --hints-- + +Your `#black-mask` selector should have a `z-index` property set to `1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.zIndex === '1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-025.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-025.md new file mode 100644 index 0000000000..c703e2d809 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-025.md @@ -0,0 +1,126 @@ +--- +id: 60b69a66b6ddb80858c5158f +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Using an `id` selector, give your `gray-instrument` element a `width` of `15%`, a `height` of `40%`, and a `background-color` of `rgb(167, 162, 117)`. + +# --hints-- + +You should have a `#gray-instrument` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')); +``` + +Your `#gray-instrument` selector should have a `width` property set to `15%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.width === '15%'); +``` + +Your `#gray-instrument` selector should have a `height` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.height === '40%'); +``` + +Your `#gray-instrument` selector should have a `background-color` property set to `rgb(167, 162, 117)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.backgroundColor === 'rgb(167, 162, 117)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-026.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-026.md new file mode 100644 index 0000000000..28735d04f3 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-026.md @@ -0,0 +1,124 @@ +--- +id: 60b69a66b6ddb80858c51590 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Now move it into place with a `position` of `absolute`, a `top` value of `50px`, and a `left` value of `125px`. + +# --hints-- + +Your `#gray-instrument` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.position === 'absolute'); +``` + +Your `#gray-instrument` selector should have a `top` value set to `50px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.top === '50px'); +``` + +Your `#gray-instrument` selector should have a `left` value set to `125px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.left === '125px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-027.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-027.md new file mode 100644 index 0000000000..034cfe97df --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-027.md @@ -0,0 +1,115 @@ +--- +id: 60b69a66b6ddb80858c51591 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Set the `z-index` to `1`. + +# --hints-- + +Your `#gray-instrument` selector should have a `z-index` property set to `1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.zIndex === '1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-028.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-028.md new file mode 100644 index 0000000000..8bc19bd303 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-028.md @@ -0,0 +1,136 @@ +--- +id: 60b69a66b6ddb80858c51592 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Use a class selector to create a rule for the `black-dot` elements. Set the `width` to `10px`, the `height` to `10px`, and the `background-color` to `rgb(45, 31, 19)`. + +# --hints-- + +You should have a `.black-dot` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.black-dot')); +``` + +Your `.black-dot` selector should have a `width` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.width === '10px'); +``` + +Your `.black-dot` selector should have a `height` property set to `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.height === '10px'); +``` + +Your `.black-dot` selector should have a `background-color` property set to `rgb(45, 31, 19)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.backgroundColor === 'rgb(45, 31, 19)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-029.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-029.md new file mode 100644 index 0000000000..3dd04846f2 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-029.md @@ -0,0 +1,122 @@ +--- +id: 60b69a66b6ddb80858c51593 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +These dots are just a little too square. Give the `black-dot` class a `border-radius` of `50%` to fix it. + +# --hints-- + +Your `.black-dot` selector should have a `border-radius` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderRadius === '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-030.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-030.md new file mode 100644 index 0000000000..ccc2dc7ed8 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-030.md @@ -0,0 +1,134 @@ +--- +id: 60b69a66b6ddb80858c51594 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Move the dots into place by setting the `display` to `block`, the `margin` to `auto`, and the `margin-top` to `65%`. + +# --hints-- + +Your `.black-dot` selector should have a `display` property set to `block`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.display === 'block'); +``` + +Your `.black-dot` selector should have a `margin` property set to `auto`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.margin?.includes('auto')); +``` + +Your `.black-dot` selector should have a `margin-top` property set to `65%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.marginTop === '65%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-031.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-031.md new file mode 100644 index 0000000000..995e5e15e3 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-031.md @@ -0,0 +1,145 @@ +--- +id: 60b69a66b6ddb80858c51595 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +Use an id selector to style your `tan-table` element. Give it a `width` of `450px`, a `height` of `140px`, and a `background-color` of `#D2691E`. + +# --hints-- + +You should have a `#tan-table` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#tan-table')); +``` + +Your `#tan-table` selector should have a `width` property set to `450px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.width === '450px'); +``` + +Your `#tan-table` selector should have a `height` property set to `140px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.height === '140px'); +``` + +Your `#tan-table` selector should have a `background-color` property set to `#D2691E`. + +```js +assert (new __helpers.CSSHelp(document).getStyle('#tan-table')?.backgroundColor === 'rgb(210, 105, 30)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + + --fcc-editable-region-- + + --fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-032.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-032.md new file mode 100644 index 0000000000..d58458074b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-032.md @@ -0,0 +1,143 @@ +--- +id: 60b69a66b6ddb80858c51596 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Move the table into place by giving it a `position` of `absolute`, a `top` value of `275px`, and a `left` value of `15px`. + +# --hints-- + +Your `#tan-table` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.position === 'absolute'); +``` + +Your `#tan-table` selector should have a `top` property set to `275px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.top === '275px'); +``` + +Your `#tan-table` selector should have a `left` property set to `15px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.left === '15px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-033.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-033.md new file mode 100644 index 0000000000..d3c91aebe8 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-033.md @@ -0,0 +1,134 @@ +--- +id: 60b69a66b6ddb80858c51597 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Give the table a `z-index` of `1`. + +# --hints-- + +Your `#tan-table` selector should have a `z-index` property set to `1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.zIndex === '1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-034.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-034.md new file mode 100644 index 0000000000..3abda64b07 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-034.md @@ -0,0 +1,141 @@ +--- +id: 60b69a66b6ddb80858c51598 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +After your `div#offwhite-character` element, add a `div` with the `id` of `black-character`. + +# --hints-- + +You should add a new `div` element within the `.characters` element. + +```js +assert(document.querySelectorAll('.characters > div')?.length === 2); +``` + +Your new `div` element should have the `id` set to `black-character`. + +```js +assert(document.querySelectorAll('.characters > div')?.[1]?.getAttribute('id') === 'black-character'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-035.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-035.md new file mode 100644 index 0000000000..61cf806cfa --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-035.md @@ -0,0 +1,155 @@ +--- +id: 60b69a66b6ddb80858c51599 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Within your new `black-character` element, add three `div` elements with the following `id` values, in order: `black-hat`, `gray-mask`, `white-paper`. + +# --hints-- + +You should have three `div` elements within your `#black-character` element. + +```js +assert(document.querySelectorAll('#black-character > div')?.length === 3); +``` + +Your first new `div` element should have the `id` set to `black-hat`. + +```js +assert(document.querySelectorAll('#black-character > div')?.[0]?.getAttribute('id') === 'black-hat'); +``` + +Your second new `div` element should have the `id` set to `gray-mask`. + +```js +assert(document.querySelectorAll('#black-character > div')?.[1]?.getAttribute('id') === 'gray-mask'); +``` + +Your third new `div` element should have the `id` set to `white-paper`. + +```js +assert(document.querySelectorAll('#black-character > div')?.[2]?.getAttribute('id') === 'white-paper'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-036.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-036.md new file mode 100644 index 0000000000..5f1a79dc88 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-036.md @@ -0,0 +1,157 @@ +--- +id: 60b69a66b6ddb80858c5159a +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +The mask needs eyes. Within your `gray-mask` element, add two `div` elements. The first should have the `class` set to `eyes left`, and the second should have the `class` set to `eyes right`. + +# --hints-- + +You should have two `div` elements within your `#gray-mask` element. + +```js +assert(document.querySelectorAll('#gray-mask > div')?.length === 2); +``` + +Your first new `div` element should have the `class` set to `eyes left`. + +```js +const first = document.querySelectorAll('#gray-mask > div')?.[0]; +assert(first?.classList?.contains('eyes')); +assert(first?.classList?.contains('left')); +``` + +Your second new `div` element should have the `class` set to `eyes right`. + +```js +const second = document.querySelectorAll('#gray-mask > div')?.[1]; +assert(second?.classList?.contains('eyes')); +assert(second?.classList?.contains('right')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-037.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-037.md new file mode 100644 index 0000000000..84199fdc63 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-037.md @@ -0,0 +1,160 @@ +--- +id: 60b69a66b6ddb80858c5159b +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +Time to use some FontAwesome icons. + +The `i` element is used for idiomatic text, or text that is separate from the "normal" text content. This could be for _italic_ text, such as scientific terms, or for icons like those provided by FontAwesome. + +Within your `white-paper` element, add four `i` elements. Give them all a `class` value of `fas fa-music`. + +This special class is how FontAwesome determines which icon to load. `fas` indicates the category of icons (FontAwesome Solid, here), while `fa-music` selects the specific icon. + +# --hints-- + +You should have four new `i` elements within your `#white-paper` element. + +```js +assert(document.querySelectorAll('#white-paper > i')?.length === 4); +``` + +All of your `i` elements should have the `class` set to `fas fa-music`. + +```js +const icons = document.querySelectorAll('#white-paper > i'); +for (const icon of icons) { + assert(icon.classList?.contains('fas')); + assert(icon.classList?.contains('fa-music')); +}; +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-038.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-038.md new file mode 100644 index 0000000000..41aa8ee517 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-038.md @@ -0,0 +1,168 @@ +--- +id: 60b69a66b6ddb80858c5159c +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Use an `id` selector to create a rule for your `black-character` element. Set the `width` to `300px`, the `height` to `500px`, and the `background-color` to `rgb(45, 31, 19)`. + +# --hints-- + +You should use a `#black-character` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-character')); +``` + +Your `#black-character` selector should have a `width` property set to `300px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.width === '300px'); +``` + +Your `#black-character` selector should have a `height` property set to `500px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.height === '500px'); +``` + +Your `#black-character` selector should have a `background-color` property to `rgb(45, 31, 19)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.backgroundColor === 'rgb(45, 31, 19)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-039.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-039.md new file mode 100644 index 0000000000..3d728dbc5f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-039.md @@ -0,0 +1,166 @@ +--- +id: 60b69a66b6ddb80858c5159d +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Move the `black-character` element into place by setting the `position` to `absolute`, the `top` to `30%`, and the `left` to `59%`. + +# --hints-- + +Your `#black-character` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.position === 'absolute'); +``` + +Your `#black-character` selector should have a `top` property set to `30%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.top === '30%'); +``` + +Your `#black-character` selector should have a `left` property set to `59%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.left === '59%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-040.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-040.md new file mode 100644 index 0000000000..62d59eb7b2 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-040.md @@ -0,0 +1,177 @@ +--- +id: 60b69a66b6ddb80858c5159e +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +Use an `id` selector to create a rule for your `black-hat` element. Give it a `width` of `0`, a `height` of `0`, and a `border-style` of `solid`. + +# --hints-- + +You should have a `#black-hat` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')); +``` + +Your `#black-hat` selector should have a `width` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.width === '0px'); +``` + +Your `#black-hat` selector should have a `height` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.height === '0px'); +``` + +Your `#black-hat` selector should have a `border-style` property set to `solid`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderStyle === 'solid'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-041.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-041.md new file mode 100644 index 0000000000..a489f29792 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-041.md @@ -0,0 +1,163 @@ +--- +id: 60bad32219ebcb4a8810ac6a +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Set the `border-width` of the `black-hat` to `150px 0 0 300px`. + +# --hints-- + +Your `#black-hat` selector should have a `border-width` property set to `150px 0 0 300px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderWidth === '150px 0px 0px 300px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-042.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-042.md new file mode 100644 index 0000000000..02ed4acb72 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-042.md @@ -0,0 +1,182 @@ +--- +id: 60b69a66b6ddb80858c5159f +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Just like with your `white-hat`, you should style the border for the `black-hat` element. Give it a `border-top-color`, `border-right-color`, and `border-bottom-color` of `transparent`. Set the `border-left-color` to `rgb(45, 31, 19)`. + +# --hints-- + +Your `#black-hat` selector should have a `border-top-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderTopColor === 'transparent'); +``` + +Your `#black-hat` selector should have a `border-right-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderRightColor === 'transparent'); +``` + +Your `#black-hat` selector should have a `border-bottom-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderBottomColor === 'transparent'); +``` + +Your `#black-hat` selector should have a `border-left-color` property set to `rgb(45, 31, 19)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderLeftColor === 'rgb(45, 31, 19)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-043.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-043.md new file mode 100644 index 0000000000..306be4fed8 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-043.md @@ -0,0 +1,180 @@ +--- +id: 60b69a66b6ddb80858c515a0 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Now position the `black-hat` element. Give it a `position` of `absolute`, with a `top` of `-150px` and a `left` of `0`. + +# --hints-- + +Your `#black-hat` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.position === 'absolute'); +``` + +Your `#black-hat` selector should have a `top` property set to `-150px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.top === '-150px'); +``` + +Your `#black-hat` selector should have a `left` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.left === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-044.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-044.md new file mode 100644 index 0000000000..28e210a534 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-044.md @@ -0,0 +1,191 @@ +--- +id: 60b69a66b6ddb80858c515a1 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Using an `id` selector, style the `gray-mask` element. Give it a `width` of `150px`, a `height` of `150px`, and a `background-color` of `rgb(167, 162, 117)`. + +# --hints-- + +You should have a `#gray-mask` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')); +``` + +Your `#gray-mask` selector should have a `width` property set to `150px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px'); +``` + +Your `#gray-mask` selector should have a `height` property set to `150px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px') +``` + +Your `#gray-mask` selector should have a `background-color` property set to `rgb(167, 162, 117)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.backgroundColor === 'rgb(167, 162, 117)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-045.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-045.md new file mode 100644 index 0000000000..8f53442a5d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-045.md @@ -0,0 +1,189 @@ +--- +id: 60b69a66b6ddb80858c515a2 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Position the `gray-mask` by setting `position` to `absolute`, the `top` to `-10px`, and the `left` to `70px`. + +# --hints-- + +Your `#gray-mask` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.position === 'absolute'); +``` + +Your `#gray-mask` selector should have a `top` property set to `-10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.top === '-10px'); +``` + +Your `#gray-mask` selector should have a `left` property set to `70px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.left === '70px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-046.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-046.md new file mode 100644 index 0000000000..4b92821bcd --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-046.md @@ -0,0 +1,200 @@ +--- +id: 60b69a66b6ddb80858c515a3 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Using an `id` selector, create a rule for the `white-paper` element. Set the `width` to `400px`, the `height` to `100px`, and the `background-color` to `GhostWhite`. + +# --hints-- + +You should have a `#white-paper` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')); +``` + +Your `#white-paper` selector should have a `width` property set to `400px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.width === '400px'); +``` + +Your `#white-paper` selector should have a `height` property set to `100px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.height === '100px'); +``` + +Your `#white-paper` selector should have a `background-color` property set to `GhostWhite`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.backgroundColor === 'ghostwhite'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-047.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-047.md new file mode 100644 index 0000000000..44d48ed7ca --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-047.md @@ -0,0 +1,198 @@ +--- +id: 60b69a66b6ddb80858c515a4 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Give the `white-paper` a `position` of `absolute`, a `top` of `250px`, and a `left` of `-150px` to move it into place. + +# --hints-- + +Your `#white-paper` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.position === 'absolute'); +``` + +Your `#white-paper` selector should have a `top` property set to `250px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.top === '250px'); +``` + +Your `#white-paper` selector should have a `left` property set to `-150px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.left === '-150px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-048.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-048.md new file mode 100644 index 0000000000..dca4b6055a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-048.md @@ -0,0 +1,189 @@ +--- +id: 60b69a66b6ddb80858c515a5 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Set the `z-index` of the `white-paper` to `1`. + +# --hints-- + +Your `#white-paper` selector should have a `z-index` property set to `1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.zIndex === '1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-049.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-049.md new file mode 100644 index 0000000000..80fea71377 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-049.md @@ -0,0 +1,210 @@ +--- +id: 60b69a66b6ddb80858c515a6 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +FontAwesome icons come with their own styling to define the icon. However, you can still set the styling yourself as well, to change things like the color and size. For now, use a `class` selector to target your `fa-music` icons. Set the `display` to `inline-block`, the `margin-top` to `8%`, and the `margin-left` to `13%`. + +# --hints-- + +You should have a `.fa-music` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-music')); +``` + +Your `.fa-music` selector should have a `display` property set to `inline-block`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.display === 'inline-block'); +``` + +Your `.fa-music` selector should have a `margin-top` property set to `8%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginTop === '8%'); +``` + +Your `.fa-music` selector should have a `margin-left` property set to `13%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginLeft === '13%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-050.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-050.md new file mode 100644 index 0000000000..58ba4591e7 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-050.md @@ -0,0 +1,216 @@ +--- +id: 60b69a66b6ddb80858c515a7 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Below your `black-character` element, add two new `div` elements. These will be the shawl. Give both of them a `class` of `blue`. Then give the first one an `id` of `blue-left`, and the second an `id` of `blue-right`. + +# --hints-- + +You should have two new `div` elements within your `.characters` element. + +```js +assert(document.querySelectorAll('.characters > div')?.length === 4); +``` + +Your two new `div` elemnts should have the `class` set to `blue`. + +```js +const divs = document.querySelectorAll('.characters > div'); +assert(divs?.[2]?.classList?.contains('blue')) +assert(divs?.[3]?.classList?.contains('blue')) +``` + +Your first new `div` should have an `id` of `blue-left`. + +```js +assert(document.querySelectorAll('.characters > div')?.[2]?.getAttribute('id') === 'blue-left'); +``` + +Your second new `div` should have an `id` of `blue-right`. + +```js +assert(document.querySelectorAll('.characters > div')?.[3]?.getAttribute('id') === 'blue-right'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-051.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-051.md new file mode 100644 index 0000000000..afe872fc57 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-051.md @@ -0,0 +1,206 @@ +--- +id: 60b69a66b6ddb80858c515a8 +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Use a `class` selector to target your new `blue` elements. Set the `background-color` to `#1E90FF`. + +# --hints-- + +You should have a `.blue` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')); +``` + +Your `.blue` selector should have a `background-color` property set to `#1E90FF`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(30, 144, 255)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-052.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-052.md new file mode 100644 index 0000000000..612c6058c3 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-052.md @@ -0,0 +1,216 @@ +--- +id: 60b69a66b6ddb80858c515a9 +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Select the `blue-left` element with an `id` selector. Give it a `width` of `500px` and a `height` of `300px`. + +# --hints-- + +You should have a `#blue-left` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-left')); +``` + +Your `#blue-left` selector should have a `width` property set to `500px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.width === '500px'); +``` + +Your `#blue-left` selector should have a `height` property set to `300px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.height === '300px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-053.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-053.md new file mode 100644 index 0000000000..db244d2252 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-053.md @@ -0,0 +1,219 @@ +--- +id: 60b69a66b6ddb80858c515aa +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Now set the `position` to `absolute`, the `top` to `20%`, and the `left` to `20%`. + +# --hints-- + +Your `#blue-left` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.position === 'absolute'); +``` + +Your `#blue-left` selector should have a `top` property set to `20%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.top === '20%'); +``` + +Your `#blue-left` selector should have a `left` property set to `20%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.left === '20%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-054.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-054.md new file mode 100644 index 0000000000..3fcef42c18 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-054.md @@ -0,0 +1,224 @@ +--- +id: 60b69a66b6ddb80858c515ab +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Next, target your `blue-right` element with an `id` selector. Set the `width` to `400px` and the `height` to `300px`. + +# --hints-- + +You should have a `#blue-right` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-right')); +``` + +Your `#blue-right` selector should have a `width` property set to `400px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.width === '400px'); +``` + +Your `#blue-right` selector should have a `height` property set to `300px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.height === '300px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-055.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-055.md new file mode 100644 index 0000000000..9cc21e84b1 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-055.md @@ -0,0 +1,227 @@ +--- +id: 60b69a66b6ddb80858c515ac +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Give the `blue-right` the correct positioning with `position` set to `absolute`, `top` set to `50%`, and `left` set to `40%`. + +# --hints-- + +Your `#blue-right` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.position === 'absolute'); +``` + +Your `#blue-right` selector should have a `top` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.top === '50%'); +``` + +Your `#blue-right` selector should have a `left` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.left === '40%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-056.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-056.md new file mode 100644 index 0000000000..20ad0731bf --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-056.md @@ -0,0 +1,224 @@ +--- +id: 60b69a66b6ddb80858c515ad +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Below your `blue` elements, add another `div`. Give it the `id` value of `orange-character`. + +# --hints-- + +You should have a new `div` element within your `characters` element. + +```js +assert(document.querySelectorAll('.characters > div')?.length === 5); +``` + +Your new `div` element should have the `id` set to `orange-character`. + +```js +assert(document.querySelectorAll('.characters > div')?.[4]?.getAttribute('id') === 'orange-character'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-057.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-057.md new file mode 100644 index 0000000000..9459e9f9ce --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-057.md @@ -0,0 +1,244 @@ +--- +id: 60b69a66b6ddb80858c515ae +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Within that `orange-character` element, add four `div` elements. Give them the `id` values of `black-round-hat`, `eyes-div`, `triangles`, and `guitar`, in order. + +# --hints-- + +You should have four new `div` elements within your `orange-character` element. + +```js +assert(document.querySelectorAll('#orange-character > div')?.length === 4); +``` + +Your first new `div` element should have an `id` set to `black-round-hat`. + +```js +assert(document.querySelectorAll('#orange-character > div')?.[0]?.getAttribute('id') === 'black-round-hat'); +``` + +Your second new `div` element should have an `id` set to `eyes-div`. + +```js +assert(document.querySelectorAll('#orange-character > div')?.[1]?.getAttribute('id') === 'eyes-div'); +``` + +Your third new `div` element should have an `id` set to `triangles`. + +```js +assert(document.querySelectorAll('#orange-character > div')?.[2]?.getAttribute('id') === 'triangles'); +``` + +Your fourth new `div` element should have an `id` set to `guitar`. + +```js +assert(document.querySelectorAll('#orange-character > div')?.[3]?.getAttribute('id') === 'guitar'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-058.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-058.md new file mode 100644 index 0000000000..adddf9475d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-058.md @@ -0,0 +1,239 @@ +--- +id: 60b69a66b6ddb80858c515af +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +The `eyes-div` element should hold some eyes. Add two `div` elements inside. Give the first a `class` of `eyes left`, and give the second a `class` of `eyes right`. + +# --hints-- + +You should have two `div` elements nested in your `eyes-div`. + +```js +assert(document.querySelectorAll('#eyes-div > div')?.length === 2); +``` + +The first new `div` should have the `class` set to `eyes left`. + +```js +assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('eyes')); +assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('left')); +``` + +The second new `div` should have the `class` set to `eyes right`. + +```js +assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('eyes')); +assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('right')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-059.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-059.md new file mode 100644 index 0000000000..74da2a1925 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-059.md @@ -0,0 +1,237 @@ +--- +id: 60b69a66b6ddb80858c515b0 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +Within the `triangles` div, you will need to add the elements that will become your triangles. Create thirty `div` elements and give each of them the class `triangle`. + +# --hints-- + +You should have 30 `div` elements within your `triangles` element. + +```js +assert(document.querySelectorAll('#triangles > div')?.length === 30); +``` + +All 30 of your new `div` elements should have the `class` set to `triangle`. + +```js +const divDivDiv = document.querySelectorAll('#triangles > div'); +for (const div of divDivDiv) { + assert(div?.classList?.contains('triangle')); +} +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-060.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-060.md new file mode 100644 index 0000000000..b21328e96e --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-060.md @@ -0,0 +1,297 @@ +--- +id: 60b69a66b6ddb80858c515b1 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Within the `guitar` element, create three `div` elements. Give the first two a `class` value of `guitar`. Then give the first an `id` of `guitar-left`, and the second an `id` of `guitar-right`. Add an `id` to the third `div` with the value `guitar-neck`. + +The third `div` should not have the `guitar` class. + +# --hints-- + +You should have three new `div` elements within your `guitar` element. + +```js +assert(document.querySelectorAll('#guitar > div')?.length === 3); +``` + +Your first new `div` should have a `class` set to `guitar`. + +```js +assert(document.querySelectorAll('#guitar > div')?.[0]?.classList?.contains('guitar')); +``` + +Your first new `div` should have an `id` set to `guitar-left`. + +```js +assert(document.querySelectorAll('#guitar > div')?.[0]?.getAttribute('id') === 'guitar-left'); +``` + +Your second new `div` should have a `class` set to `guitar`. + +```js +assert(document.querySelectorAll('#guitar > div')?.[1]?.classList?.contains('guitar')); +``` + +Your second new `div` should have an `id` set to `guitar-right`. + +```js +assert(document.querySelectorAll('#guitar > div')?.[1]?.getAttribute('id') === 'guitar-right'); +``` + +Your third new `div` should have an `id` set to `guitar-neck`. + +```js +assert(document.querySelectorAll('#guitar > div')?.[2]?.getAttribute('id') === 'guitar-neck'); +``` + +You should not give the third new `div` a `class` of `guitar`. + +```js +assert.notExists(document.querySelector('#guitar > #guitar-neck.guitar')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- + + --fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-061.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-061.md new file mode 100644 index 0000000000..53c49edb40 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-061.md @@ -0,0 +1,280 @@ +--- +id: 60b69a66b6ddb80858c515b2 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Use another FontAwesome icon for your `guitar`. Inside both the `guitar-left` and `guitar-right` elements, add an `i` element and give it a `class` of `fas fa-bars`. + +# --hints-- + +Within your `guitar-left` element, you should add an `i` element. + +```js +assert(document.querySelectorAll('#guitar-left > i')?.length === 1); +``` + +Within your `guitar-right` element, you should add an `i` element. + +```js +assert(document.querySelectorAll('#guitar-right > i')?.length === 1); +``` + +Your two new `i` elements should have the `class` set to `fas fa-bars`. + +```js +assert(document.querySelector('#guitar-left > i')?.classList?.contains('fas')); +assert(document.querySelector('#guitar-left > i')?.classList?.contains('fa-bars')); +assert(document.querySelector('#guitar-right > i')?.classList?.contains('fas')); +assert(document.querySelector('#guitar-right > i')?.classList?.contains('fa-bars')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ --fcc-editable-region-- +
+ +
+
+ +
+ --fcc-editable-region-- +
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-062.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-062.md new file mode 100644 index 0000000000..30a96d26e0 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-062.md @@ -0,0 +1,286 @@ +--- +id: 60b69a66b6ddb80858c515b3 +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Select your `orange-character` element with an `id` selector. Give it a `width` of `250px`, a `height` of `550px`, and a `background-color` of `rgb(240, 78, 42)`. + +# --hints-- + +You should have an `#orange-character` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#orange-character')); +``` + +Your `#orange-character` selector should have a `width` property set to `250px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.width === '250px'); +``` + +Your `#orange-character` selector should have a `height` property set to `550px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.height === '550px'); +``` + +Your `#orange-character` selector should have a `background-color` property set to `rgb(240, 78, 42)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.backgroundColor === 'rgb(240, 78, 42)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-063.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-063.md new file mode 100644 index 0000000000..0eb3fc3cd7 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-063.md @@ -0,0 +1,284 @@ +--- +id: 60b69a66b6ddb80858c515b4 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Give the `orange-character` a `position` of `absolute`, a `top` of `25%`, and a `left` of `40%`. + +# --hints-- + +Your `#orange-character` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.position === 'absolute'); +``` + +Your `#orange-character` selector should have a `top` property set to `25%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.top === '25%'); +``` + +Your `#orange-character` selector should have a `left` property set to `40%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.left === '40%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-064.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-064.md new file mode 100644 index 0000000000..eb398533bd --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-064.md @@ -0,0 +1,295 @@ +--- +id: 60b69a66b6ddb80858c515b5 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Style your `black-round-hat` element with an `id` selector. Set the `width` to `180px`, the `height` to `150px`, and the `background-color` to `rgb(45, 31, 19)`. + +# --hints-- + +You should have a `#black-round-hat` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')); +``` + +Your `#black-round-hat` selector should have a `width` property set to `180px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.width === '180px'); +``` + +Your `#black-round-hat` selector should have a `height` property set to `150px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.height === '150px'); +``` + +Your `#black-round-hat` selector should have a `background-color` property set to `rgb(45, 31, 19)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.backgroundColor === 'rgb(45, 31, 19)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-065.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-065.md new file mode 100644 index 0000000000..80057066de --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-065.md @@ -0,0 +1,281 @@ +--- +id: 60b69a66b6ddb80858c515b6 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +The `black-round-hat` should probably be round. Give it a `border-radius` of `50%` to fix this. + +# --hints-- + +Your `#black-round-hat` selector should have a `border-radius` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.borderRadius === '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-066.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-066.md new file mode 100644 index 0000000000..5deb4f7402 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-066.md @@ -0,0 +1,294 @@ +--- +id: 60b69a66b6ddb80858c515b7 +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Move the `black-round-hat` into place with a `position` of `absolute`, a `top` of `-100px`, and a `left` of `5px`. + +# --hints-- + +Your `#black-round-hat` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.position === 'absolute'); +``` + +Your `#black-round-hat` selector should have a `top` property set to `-100px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.top === '-100px'); +``` + +Your `#black-round-hat` selector should have a `left` property set to `5px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.left === '5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-067.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-067.md new file mode 100644 index 0000000000..04afca7bdd --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-067.md @@ -0,0 +1,285 @@ +--- +id: 60b69a66b6ddb80858c515b8 +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Put the `black-round-hat` on the correct layer with a `z-index` of `-1`. + +# --hints-- + +Your `#black-round-hat` selector should have a `z-index` property set to `-1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.zIndex === '-1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-068.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-068.md new file mode 100644 index 0000000000..a11243ce31 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-068.md @@ -0,0 +1,300 @@ +--- +id: 60b69a66b6ddb80858c515b9 +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +Use an `id` selector to create a rule for your `eyes-div` element. Set the `width` to `180px` and the `height` to `50px`. + +# --hints-- + +You should create an `#eyes-div` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')); +``` + +Your `#eyes-div` selector should have a `width` property set to `180px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.width === '180px'); +``` + +Your `#eyes-div` selector should have a `height` property set to `50px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.height === '50px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-069.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-069.md new file mode 100644 index 0000000000..bd9701769b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-069.md @@ -0,0 +1,303 @@ +--- +id: 60b69a66b6ddb80858c515ba +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Now move the `eyes-div` into position with `position` set to `absolute`, `top` set to `-40px`, and `left` set to `20px`. + +# --hints-- + +Your `#eyes-div` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.position === 'absolute'); +``` + +Your `#eyes-div` selector should have a `top` property set to `-40px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.top === '-40px'); +``` + +Your `#eyes-div` selector should have a `left` property set to `20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.left === '20px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-070.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-070.md new file mode 100644 index 0000000000..dc708c6feb --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-070.md @@ -0,0 +1,294 @@ +--- +id: 60b69a66b6ddb80858c515bc +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Give the `eyes-div` a `z-index` of `3`. + +# --hints-- + +Your `#eyes-div` selector should have a `z-index` property set to `3`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.zIndex === '3'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-071.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-071.md new file mode 100644 index 0000000000..bcffe7f2d6 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-071.md @@ -0,0 +1,308 @@ +--- +id: 60ba8914bab51f0fb8228e9c +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +Target your `triangles` element with an `id` selector. Set the `width` to `250px` and the `height` to `550px`. + +# --hints-- + +You should add a `#triangles` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#triangles')); +``` + +Your `#triangles` selector should have a `width` property set to `250px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.width === '250px'); +``` + +Your `#triangles` selector should have a `height` property set to `550px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.height === '550px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-072.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-072.md new file mode 100644 index 0000000000..eb90a031f3 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-072.md @@ -0,0 +1,313 @@ +--- +id: 60ba89146b25080f99ab54ad +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Create a `class` selector for your `triangle` elements. Set the `width` to `0` and the `height` to `0`. + +# --hints-- + +You should create a `.triangle` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')); +``` + +Your `.triangle` selector should have a `width` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.width === '0px'); +``` + +Your `.triangle` selector should have a `height` property set to `0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.height === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; +} + +#triangles { + width: 250px; + height: 550px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-073.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-073.md new file mode 100644 index 0000000000..08facc9c1d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-073.md @@ -0,0 +1,310 @@ +--- +id: 60ba8913f1704c0f7a8906b8 +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +Style the border of your `triangle` elements. Set the `border-style` to `solid` and the `border-width` to `42px 45px 45px 0`. + +# --hints-- + +Your `.triangle` selector should have a `border-style` property set to `solid`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderStyle === 'solid'); +``` + +Your `.triangle` selector should have a `border-width` property set to `42px 45px 45px 0`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderWidth === '42px 45px 45px 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-074.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-074.md new file mode 100644 index 0000000000..483ee68839 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-074.md @@ -0,0 +1,324 @@ +--- +id: 60ba89123a445e0f5c9e4022 +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Give your `triangle` elements the correct color. Set the `border-top-color`, `border-bottom-color`, and `border-left-color` to `transparent`. Set the `border-right-color` to `Gold`. + +# --hints-- + +Your `.triangle` selector should have a `border-top-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderTopColor === 'transparent'); +``` + +Your `.triangle` selector should have a `border-bottom-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderBottomColor === 'transparent'); +``` + +Your `.triangle` selector should have a `border-left-color` property set to `transparent`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderLeftColor === 'transparent'); +``` + +Your `.triangle` selector should have a `border-right-color` property set to `Gold`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderRightColor === 'gold'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-075.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-075.md new file mode 100644 index 0000000000..a44f48be59 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-075.md @@ -0,0 +1,310 @@ +--- +id: 60ba890832b4940f24d1936b +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Adjust the layout of the `triangle` elements with a `display` of `inline-block`. + +# --hints-- + +Your `.triangle` selector should have a `display` property set to `inline-block`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.display === 'inline-block'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; + border-bottom-color: transparent; + border-left-color: transparent; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-076.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-076.md new file mode 100644 index 0000000000..0c8c213a90 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-076.md @@ -0,0 +1,325 @@ +--- +id: 60ba929345ab0714a3743655 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Now use an `id` selector for `guitar`. Set the `width` to `100%`, and the `height` to `100px`. + +# --hints-- + +You should create a `#guitar` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')); +``` + +Your `#guitar` selector should have a `width` property set to `100%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.width === '100%'); +``` + +Your `#guitar` selector should have a `height` property set to `100px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.height === '100px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-077.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-077.md new file mode 100644 index 0000000000..a1ab3d2d5d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-077.md @@ -0,0 +1,328 @@ +--- +id: 60ba9296d4d6b414c1b10995 +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +In the same `#guitar` selector, set the `position` to `absolute`, the `top` to `120px`, and the `left` to `0px`. + +# --hints-- + +Your `#guitar` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.position === 'absolute'); +``` + +Your `#guitar` selector should have a `top` property set to `120px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.top === '120px'); +``` + +Your `#guitar` selector should have a `left` property set to `0px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.left === '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-078.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-078.md new file mode 100644 index 0000000000..184233da45 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-078.md @@ -0,0 +1,319 @@ +--- +id: 60ba92987c1e4914dfa7a0b9 +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +Give the `#guitar` rule a `z-index` of `3`. + +# --hints-- + +Your `#guitar` selector should have a `z-index` property set to `3`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.zIndex === '3'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-079.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-079.md new file mode 100644 index 0000000000..24865ae91d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-079.md @@ -0,0 +1,347 @@ +--- +id: 60b69a66b6ddb80858c515bd +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +Now use a `class` selector to target `guitar`. This will style the two "halves" of your guitar. Set the `width` to `150px`, the `height` to `120px`, the `background-color` to `Goldenrod`, and the `border-radius` to `50%`. + +# --hints-- + +You should create a `.guitar` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.guitar')); +``` + +Your `.guitar` selector should have a `width` property set to `150px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.width === '150px'); +``` + +Your `.guitar` selector should have a `height` property set to `120px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.height === '120px'); +``` + +Your `.guitar` selector should have a `background-color` property set to `Goldenrod`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.backgroundColor === 'goldenrod'); +``` + +Your `.guitar` selector should have a `border-radius` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.borderRadius === '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-080.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-080.md new file mode 100644 index 0000000000..f18d6f32e6 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-080.md @@ -0,0 +1,336 @@ +--- +id: 60b69a66b6ddb80858c515be +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Select the `id` with value `guitar-left`, and set the `position` to `absolute` and the `left` to `0px`. + +# --hints-- + +You should create a new `#guitar-left` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')); +``` + +Your `#guitar-left` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')?.position === 'absolute'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-081.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-081.md new file mode 100644 index 0000000000..33d2ad0cd1 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-081.md @@ -0,0 +1,347 @@ +--- +id: 60b69a66b6ddb80858c515bf +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +Select the `id` with value `guitar-right`, and also set `position` to `absolute`. This time, set `left` to `100px`. + +# --hints-- + +You should create a new `#guitar-right` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')); +``` + +Your `#guitar-right` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.position === 'absolute'); +``` + +Your `#guitar-right` selector should have a `left` property set to `100px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.left === '100px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-082.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-082.md new file mode 100644 index 0000000000..b34b39be7a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-082.md @@ -0,0 +1,358 @@ +--- +id: 60b69a66b6ddb80858c515c0 +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +Now you need to move the bar icons into place. Create a `class` selector for the `fa-bars` class. Set the `display` to `block`, the `margin-top` to `30%`, and the `margin-left` to `40%`. + +# --hints-- + +You should create a `.fa-bars` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')); +``` + +Your `.fa-bars` selector should have a `display` property set to `block`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.display === 'block'); +``` + +Your `.fa-bars` selector should have a `margin-top` property set to `30%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginTop === '30%'); +``` + +Your `.fa-bars` selector should have a `margin-left` property set to `30%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginLeft === '40%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-083.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-083.md new file mode 100644 index 0000000000..5cf9596566 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-083.md @@ -0,0 +1,364 @@ +--- +id: 60b69a66b6ddb80858c515c1 +title: Step 83 +challengeType: 0 +dashedName: step-83 +--- + +# --description-- + +Use an `id` selector to create a `guitar-neck` rule. Set the `width` to `200px`, the `height` to `30px`, and the `background-color` to `#D2691E`. + +# --hints-- + +You should create a `#guitar-neck` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')); +``` + +Your `#guitar-neck` selector should have a `width` property set to `200px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.width === '200px'); +``` + +Your `#guitar-neck` selector should have a `height` property set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.height === '30px'); +``` + +Your `#guitar-neck` selector should have a `background-color` property set to `#D2691E`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.backgroundColor === 'rgb(210, 105, 30)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +.fa-bars { + display: block; + margin-top: 30%; + margin-left: 40%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-084.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-084.md new file mode 100644 index 0000000000..322e1f2fbd --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-084.md @@ -0,0 +1,362 @@ +--- +id: 60b69a66b6ddb80858c515c2 +title: Step 84 +challengeType: 0 +dashedName: step-84 +--- + +# --description-- + +Now move the `guitar-neck` with a `position` of `absolute`, a `top` value of `45px`, and a `left` value of `200px`. + +# --hints-- + +Your `#guitar-neck` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.position === 'absolute'); +``` + +Your `#guitar-neck` selector should have a `top` property set to `45px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.top === '45px'); +``` + +Your `#guitar-neck` selector should have a `left` property set to `200px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.left === '200px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +.fa-bars { + display: block; + margin-top: 30%; + margin-left: 40%; +} + +#guitar-neck { + width: 200px; + height: 30px; + background-color: #D2691E; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-085.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-085.md new file mode 100644 index 0000000000..bb2b1c4947 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-085.md @@ -0,0 +1,353 @@ +--- +id: 60b69a66b6ddb80858c515c3 +title: Step 85 +challengeType: 0 +dashedName: step-85 +--- + +# --description-- + +Give the `guitar-neck` a `z-index` of `3`. + +# --hints-- + +Your `#guitar-neck` selector should have a `z-index` property set to `3`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.zIndex === '3'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +.fa-bars { + display: block; + margin-top: 30%; + margin-left: 40%; +} + +#guitar-neck { + width: 200px; + height: 30px; + background-color: #D2691E; + position: absolute; + top: 45px; + left: 200px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-086.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-086.md new file mode 100644 index 0000000000..cabdc58c65 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-086.md @@ -0,0 +1,380 @@ +--- +id: 60b69a66b6ddb80858c515c4 +title: Step 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +Time to style your `eyes` elements. Use a `class` selector to set the `width` to `35px`, the `height` to `20px`, the `background-color` to `#8B4513`, and the `border-radius` to `20px 50%`. + +# --hints-- + +You should create a `.eyes` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.eyes')); +``` + +Your `.eyes` selector should have a `width` property set to `35px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.width === '35px'); +``` + +Your `.eyes` selector should have a `height` property set to `20px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.height === '20px'); +``` + +Your `.eyes` selector should have a `background-color` property set to `#8B4513`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.backgroundColor === 'rgb(139, 69, 19)'); +``` + +Your `.eyes` selector should have a `border-radius` property set to `20px 50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.borderRadius === '20px 50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +.fa-bars { + display: block; + margin-top: 30%; + margin-left: 40%; +} + +#guitar-neck { + width: 200px; + height: 30px; + background-color: #D2691E; + position: absolute; + top: 45px; + left: 200px; + z-index: 3; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-087.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-087.md new file mode 100644 index 0000000000..99fd7492e4 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-087.md @@ -0,0 +1,381 @@ +--- +id: 60b69a66b6ddb80858c515c5 +title: Step 87 +challengeType: 0 +dashedName: step-87 +--- + +# --description-- + +Target the `class` with value `right` and set the `position` to `absolute`, `top` to `15px`, and `right` to `30px`. + +# --hints-- + +You should create a `.right` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.right')); +``` + +Your `.right` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.right')?.position === 'absolute'); +``` + +Your `.right` selector should have a `top` property set to `15px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.right')?.top === '15px'); +``` + +Your `.right` selector should have a `right` property set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.right')?.right === '30px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +.fa-bars { + display: block; + margin-top: 30%; + margin-left: 40%; +} + +#guitar-neck { + width: 200px; + height: 30px; + background-color: #D2691E; + position: absolute; + top: 45px; + left: 200px; + z-index: 3; +} + +.eyes { + width: 35px; + height: 20px; + background-color: #8B4513; + border-radius: 20px 50%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-088.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-088.md new file mode 100644 index 0000000000..7cc3b3d167 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-088.md @@ -0,0 +1,387 @@ +--- +id: 60b69a66b6ddb80858c515c6 +title: Step 88 +challengeType: 0 +dashedName: step-88 +--- + +# --description-- + +For the `class` with value `left`, create the selector and set the `position` to `absolute`, the `top` to `15px`, and the `left` to `30px`. + +# --hints-- + +You should create a new `.left` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.left')); +``` + +Your `.left` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.left')?.position === 'absolute'); +``` + +Your `.left` selector should have a `top` property set to `15px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.left')?.top === '15px'); +``` + +Your `.left` selector should have a `left` property set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.left')?.left === '30px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { +width: 150px; +height: 120px; +background-color: Goldenrod; +border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +.fa-bars { + display: block; + margin-top: 30%; + margin-left: 40%; +} + +#guitar-neck { + width: 200px; + height: 30px; + background-color: #D2691E; + position: absolute; + top: 45px; + left: 200px; + z-index: 3; +} + +.eyes { + width: 35px; + height: 20px; + background-color: #8B4513; + border-radius: 20px 50%; +} + +.right { + position: absolute; + top: 15px; + right: 30px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-089.md b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-089.md new file mode 100644 index 0000000000..4ffe75cb72 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-picasso-painting/step-089.md @@ -0,0 +1,383 @@ +--- +id: 60b69a66b6ddb80858c515c7 +title: Step 89 +challengeType: 0 +dashedName: step-89 +--- + +# --description-- + +One last step. The FontAwesome icons are a little too small. Target all of them with a `class` selector for `fas`, and set the `font-size` to `30px`. + +With that, your Picasso painting is complete! + +# --hints-- + +You should create a `.fas` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fas')); +``` + +Your `.fas` selector should have a `font-size` property set to `30px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.fas')?.fontSize === '30px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + freeCodeCamp Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + z-index: 1; +} + +.fa-music { + display: inline-block; + margin-top: 8%; + margin-left: 13%; +} + +.blue { + background-color: #1E90FF; +} + +#blue-left { + width: 500px; + height: 300px; + position: absolute; + top: 20%; + left: 20%; +} + +#blue-right { + width: 400px; + height: 300px; + position: absolute; + top: 50%; + left: 40%; +} + +#orange-character { + width: 250px; + height: 550px; + background-color: rgb(240, 78, 42); + position: absolute; + top: 25%; + left: 40%; +} + +#black-round-hat { + width: 180px; + height: 150px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + position: absolute; + top: -100px; + left: 5px; + z-index: -1; +} + +#eyes-div { + width: 180px; + height: 50px; + position: absolute; + top: -40px; + left: 20px; + z-index: 3; +} + +#triangles { + width: 250px; + height: 550px; +} + +.triangle { + width: 0; + height: 0; + border-style: solid; + border-width: 42px 45px 45px 0; + border-top-color: transparent; + border-right-color: Gold; /* yellow */ + border-bottom-color: transparent; + border-left-color: transparent; + display: inline-block; +} + +#guitar { + width: 100%; + height: 100px; + position: absolute; + top: 120px; + left: 0px; + z-index: 3; +} + +.guitar { + width: 150px; + height: 120px; + background-color: Goldenrod; + border-radius: 50%; +} + +#guitar-left { + position: absolute; + left: 0px; +} + +#guitar-right { + position: absolute; + left: 100px; +} + +.fa-bars { + display: block; + margin-top: 30%; + margin-left: 40%; +} + +#guitar-neck { + width: 200px; + height: 30px; + background-color: #D2691E; + position: absolute; + top: 45px; + left: 200px; + z-index: 3; +} + +.eyes { + width: 35px; + height: 20px; + background-color: #8B4513; + border-radius: 20px 50%; +} + +.right { + position: absolute; + top: 15px; + right: 30px; +} + +.left { + position: absolute; + top: 15px; + left: 30px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-001.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-001.md deleted file mode 100644 index af6e2dcd83..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-001.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -id: 5d822fd413a79914d39e98c9 -title: Part 1 -challengeType: 0 -dashedName: part-1 ---- - -# --description-- - -Welcome to the CSS Variables Skyline project! Start by adding the `!DOCTYPE html` declaration at the top of the document so the browser knows what type of document it's reading. - -# --hints-- - -Your code should contain the `DOCTYPE` reference. - -```js -assert(code.match(/` after the type. - -```js -assert(code.match(/html\s*>/gi)); -``` - -# --seed-- - -## --seed-contents-- - -```html ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-002.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-002.md deleted file mode 100644 index cad8fbec1d..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-002.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 5d822fd413a79914d39e98ca -title: Part 2 -challengeType: 0 -dashedName: part-2 ---- - -# --description-- - -Add opening and closing `html` tags below the `DOCTYPE` so you have a place to start putting some code. - -# --hints-- - -Your `html` element should be below the `DOCTYPE` declaration. - -```js -assert(code.match(/(?)/gi)); -``` - -Your `html` element should have an opening tag. - -```js -assert(code.match(//gi)); -``` - -Your `html` element should have a closing tag. - -```js -assert(code.match(/<\/html\s*>/)); -``` - -Your `html` tags should be in the correct order. - -```js -assert(code.match(/\s*<\/html\s*>/)); -``` - -You should only have one `html` element. - -```js -assert(document.querySelectorAll('html').length === 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-003.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-003.md deleted file mode 100644 index c3e4334e9d..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-003.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -id: 5d822fd413a79914d39e98cb -title: Part 3 -challengeType: 0 -dashedName: part-3 ---- - -# --description-- - -Next, add opening and closing `head` and `body` tags within the `html` element. - -# --hints-- - -You should have an opening `head` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `head` tag. - -```js -assert(code.match(/<\/head\s*>/i)); -``` - -You should have an opening `body` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `body` tag. - -```js -assert(code.match(/<\/body\s*>/i)); -``` - -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')); -``` - -# --seed-- - -## --seed-contents-- - -```html - ---fcc-editable-region-- - - - ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-004.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-004.md deleted file mode 100644 index 8a0da90828..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-004.md +++ /dev/null @@ -1,101 +0,0 @@ ---- -id: 5d822fd413a79914d39e98cc -title: Part 4 -challengeType: 0 -dashedName: part-4 ---- - -# --description-- - -Add a `title` element to the `head`, and give your project a title of `freeCodeCamp Skyline Project`. Also, nest a self-closing `link` element in the `head` element. Give it a `rel` attribute value of `stylesheet`, a `type` attribute value of `text/css`, and an `href` attribute value of `styles.css`. - -# --hints-- - -Your code should have a `title` element. - -```js -const title = document.querySelector('title'); -assert.exists(title); -``` - -The `title` element should be within the `head` element. - -```js -const head = document.querySelector('head'); -// TODO: head does not contain title...body contains title -``` - -Your project should have a title of `freeCodeCamp Skyline Project`. - -```js -const title = document.querySelector('title'); -assert.equal(title.text.toLowerCase(), 'freecodecamp skyline project') -``` - -Remember, the casing and spelling matters for the title. - -```js -const title = document.querySelector('title'); -assert.equal(title.text, 'freeCodeCamp Skyline Project'); -``` - -Your code should have a `link` element. - -```js -assert.match(code, //i)); -``` - -Your `link` element should be within your `head` element. - -```js -assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)) -``` - -Your `link` element should have a `rel` attribute with the value `stylesheet`. - -```js -assert.match(code, / - ---fcc-editable-region-- - - - ---fcc-editable-region-- - - - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-005.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-005.md deleted file mode 100644 index 82be89d35b..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-005.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 5d822fd413a79914d39e98cd -title: Part 5 -challengeType: 0 -dashedName: part-5 ---- - -# --description-- - -In CSS, you can target everything with an asterisk. Add a border to everything by using the `*` selector, and giving it a `border` of `1px solid black`. This is a trick I like to use to help visualize where elements are and their size. You will remove this later. - -# --hints-- - -You should use the `*` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('*')); -``` - -You should use the `border` property to style all the elements. - -```js -assert(new __helpers.CSSHelp(document).isPropertyUsed('border')); -``` - -All elements should have a `1px solid black` border. - -```js -const astStyles = new __helpers.CSSHelp(document).getStyle('*'); -assert.equal(astStyles?.border, '1px solid black'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - - - -``` - -```css ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-006.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-006.md deleted file mode 100644 index 9dfcb82d0f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-006.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -id: 5d822fd413a79914d39e98ce -title: Part 6 -challengeType: 0 -dashedName: part-6 ---- - -# --description-- - -Also add a `box-sizing` of `border-box` to everything. This will make it so the border you added doesn't add any size to your elements. - -# --hints-- - -You should use the `box-sizing` property. - -```js -assert(new __helpers.CSSHelp(document).isPropertyUsed('box-sizing')); -``` - -You should make use of the existing `*` selector. - -```js -// Two selectors create two CSSStyleRule objects -assert.equal(new __helpers.CSSHelp(document).getStyleDeclarations('*').length, 1); -``` - -All elements should have a `box-sizing` of `border-box`. - -```js -const astStyles = new __helpers.CSSHelp(document).getStyle('*'); -assert.equal(astStyles.boxSizing, 'border-box'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - - - -``` - -```css ---fcc-editable-region-- -* { - border: 1px solid black; -} - ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-007.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-007.md deleted file mode 100644 index 5dcb394b32..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-007.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -id: 5d822fd413a79914d39e98cf -title: Part 7 -challengeType: 0 -dashedName: part-7 ---- - -# --description-- - -You can see the `body` (it's the inner-most box on your page); the box around it is the `html` element. Make your `body` fill the whole viewport by giving it a `height` of `100vh`. Remove the default `margin` from the `body` by setting the `margin` to `0`. Finally, set the `overflow` property to `hidden` to hide any scroll bars that appear when something extends past the viewport. - -# --hints-- - -You should use the `body` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('body')); -``` - -Your `body` should have a `height` of `100vh`. - -```js -const bodyStyles = new __helpers.CSSHelp(document).getStyle('body'); -assert.equal(bodyStyles?.height, '100vh'); -``` - -Your `body` should have a `margin` of `0`. - -```js -// TODO: Editor adds margin as preferential style - 8px is always added. -assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px'); -``` - -Your `body` should have the `overflow` property set to `hidden`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - - - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - ---fcc-editable-region-- - - ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-008.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-008.md deleted file mode 100644 index 6cfcd45102..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-008.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -id: 5d822fd413a79914d39e98d0 -title: Part 8 -challengeType: 0 -dashedName: part-8 ---- - -# --description-- - -It's tough to see now, but there's a border at the edge of your preview, that's the `body`. Create a `div` element in the `body` with a class of `background-buildings`. This will be a container for a group of buildings. - -# --hints-- - -You should create a `div` element. - -```js -assert.exists(document.querySelector('div')); -``` - -Your `div` element should be within the `body`. - -```js -assert(document.querySelector('div')?.parentElement?.localName === 'body'); -``` - -Your `div` element should have a class of `background-buildings` - -```js -assert([...document.querySelector('div')?.classList]?.includes('background-buildings')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - ---fcc-editable-region-- - - - ---fcc-editable-region-- - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-009.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-009.md deleted file mode 100644 index e8766f2a96..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-009.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -id: 5d822fd413a79914d39e98d1 -title: Part 9 -challengeType: 0 -dashedName: part-9 ---- - -# --description-- - -Give your background buildings element a `width` and `height` of `100%` to make it the full width and height of its parent, the `body`. - -# --hints-- - -You should use the `background-buildings` class to select the correct element. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.background-buildings')); -``` - -Your `.background-buildings` element should have a `width` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.width, '100%'); -``` - -Your `.background-buildings` element should have a `height` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.height, '100%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
- - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} ---fcc-editable-region-- - - ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-010.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-010.md deleted file mode 100644 index 21c3069422..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-010.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: 5d822fd413a79914d39e98d2 -title: Part 10 -challengeType: 0 -dashedName: part-10 ---- - -# --description-- - -Nest a `div` with a class of `bb1` in the background buildings container. Give it a `width` of `10%` and `height` of `70%`. "bb" stands for "background building", this will be your first building. - -# --hints-- - -You should create a new `div` element. - -```js -assert.equal(document.querySelectorAll('div').length, 2); -``` - -You should give the new `div` a class of `bb1`. - -```js -assert.exists(document.querySelector('div.bb1')); -``` - -You should use a `.bb1` class selector to style the element. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1')); -``` - -You should give the `.bb1` element a `width` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.width, '10%'); -``` - -You should give the `.bb1` element a `height` of `70%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.height, '70%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - ---fcc-editable-region-- -
---fcc-editable-region-- - - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-011.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-011.md deleted file mode 100644 index 1ebfa1024d..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-011.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: 5d822fd413a79914d39e98d3 -title: Part 11 -challengeType: 0 -dashedName: part-11 ---- - -# --description-- - -Nest four `div` elements in the `.bb1` container. Give them the classes `bb1a`, `bb1b`, `bb1c`, and `bb1d` in that order. This building will have four sections. - -# --hints-- - -You should create four new `div` elements. - -```js -assert.equal(document.querySelectorAll('div')?.length, 6); -``` - -You should give one of the new `div` elements a class of `bb1a`. - -```js -assert.exists(document.querySelector('div.bb1a')); -``` - -You should give one of the new `div` elements a class of `bb1b`. - -```js -assert.exists(document.querySelector('div.bb1b')); -``` - -You should give one of the new `div` elements a class of `bb1c`. - -```js -assert.exists(document.querySelector('div.bb1c')); -``` - -You should give one of the new `div` elements a class of `bb1d`. - -```js -assert.exists(document.querySelector('div.bb1d')); -``` - -You should place the new `div` elements in the correct order. - -```js -function __t(a, b) { - return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b); -} -assert(__t('div.bb1a','bb1b') && __t('div.bb1b','bb1c') && __t('div.bb1c','bb1d')); -``` - -You should place the new `div` elements within the `.bb1` element. - -```js -assert.equal(document.querySelectorAll('div.bb1 > div')?.length, 4); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
---fcc-editable-region-- -
---fcc-editable-region-- -
- - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; -} - -.bb1 { - width: 10%; - height: 70%; -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-012.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-012.md deleted file mode 100644 index 380ebf8154..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-012.md +++ /dev/null @@ -1,137 +0,0 @@ ---- -id: 5d822fd413a79914d39e98d4 -title: Part 12 -challengeType: 0 -dashedName: part-12 ---- - -# --description-- - -Give the parts of your building `width` and `height` properties with these values: `70%` and `10%` to `.bb1a`, `80%` and `10%` to `.bb1b`, `90%` and `10%` to `.bb1c`, and `100%` and `70%` to `.bb1d`. Remember that these percentages are relative to the parent and note that the heights will add up to 100% - vertically filling the container. - -# --hints-- - -You should use a class selector to style `.bb1a`. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')); -``` - -You should give `.bb1a` a `width` of `70%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width, '70%'); -``` - -You should give `.bb1a` a `height` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height, '10%'); -``` - -You should use a class selector to style `.bb1b`. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')); -``` - -You should give `.bb1b` a `width` of `80%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.width, '80%'); -``` - -You should give `.bb1b` a `height` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height, '10%'); -``` - -You should use a class selector to style `.bb1c`. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')); -``` - -You should give `.bb1c` a `width` of `90%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.width, '90%'); -``` - -You should give `.bb1c` a `height` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height, '10%'); -``` - -You should use a class selector to style `.bb1d`. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')); -``` - -You should give `.bb1d` a `width` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.width, '100%'); -``` - -You should give `.bb1d` a `height` of `70%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.height, '70%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
- - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; -} - -.bb1 { - width: 10%; - height: 70%; -} ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-013.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-013.md deleted file mode 100644 index 7850695cd7..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-013.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -id: 5d822fd413a79914d39e98d5 -title: Part 13 -challengeType: 0 -dashedName: part-13 ---- - -# --description-- - -Give your `.bb1` element these style properties: `display: flex;`, `flex-direction: column;`, and `align-items: center;`. This will center the parts of the building using "flex" or "flexbox". You will learn about it in more detail on another project. - -# --hints-- - -You should not change the `.bb1` `width` or `height` properties. - -```js -const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); -assert.equal(bb1Style?.width, '10%'); -assert.equal(bb1Style?.height, '70%'); -``` - -You should give the `.bb1` element a `display` of `flex`. - -```js -const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); -assert.equal(bb1Style?.display, 'flex'); -``` - -You should give the `.bb1` element a `flex-direction` of `column`. - -```js -const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); -assert.equal(bb1Style?.flexDirection, 'column'); -``` - -You should give the `.bb1` element a `align-items` of `center`. - -```js -const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); -assert.equal(bb1Style?.alignItems, 'center'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
- - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; -} ---fcc-editable-region-- -.bb1 { - width: 10%; - height: 70%; -} ---fcc-editable-region-- -.bb1a { - width: 70%; - height: 10%; -} - -.bb1b { - width: 80%; - height: 10%; -} - -.bb1c { - width: 90%; - height: 10%; -} - -.bb1d { - width: 100%; - height: 70%; -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-014.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-014.md deleted file mode 100644 index cb9fbb36dd..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-014.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 5d822fd413a79914d39e98d6 -title: Part 14 -challengeType: 0 -dashedName: part-14 ---- - -# --description-- - -Now you have something that is starting to resemble a building. Let's get into your first variable. Variable declarations begin with two dashes (`-`) and are given a name and a value like this: `--variable-name: value;`. In the `.bb1` class, create a variable named `--building-color1` and give it a value of `#999`. - -# --hints-- - -You should create a new variable named `--building-color1`. - -```js -assert(new __helpers.CSSHelp(document).isPropertyUsed('--building-color1')); -``` - -You should define the `--building-color1` variable within `.bb1`. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1')); -``` - -You should give `--building-color1` a value of `#999`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#999'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
- - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; -} ---fcc-editable-region-- -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} ---fcc-editable-region-- -.bb1a { - width: 70%; - height: 10%; -} - -.bb1b { - width: 80%; - height: 10%; -} - -.bb1c { - width: 90%; - height: 10%; -} - -.bb1d { - width: 100%; - height: 70%; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-015.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-015.md deleted file mode 100644 index 409a632063..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-015.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -id: 5d822fd413a79914d39e98d7 -title: Part 15 -challengeType: 0 -dashedName: part-15 ---- - -# --description-- - -To use a variable, put the variable name in parentheses with `var` in front of them like this: `var(--variable-name)`. Add your variable as the value of the `background-color` property of the `.bb1a` class. Whatever value you gave the variable will be applied to whatever property you use it on. In this case, your variable has the value of `#999`. So `#999` will be used as the value for the `background-color` property. - -# --hints-- - -The `background-color` of the `bb1a` element should be set. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor) -``` - -You should use `var(--building-color1)` to set the `background-color` of the `.bb1a` element. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor.trim(), 'var(--building-color1)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
- - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; - --building-color1: #999; -} ---fcc-editable-region-- -.bb1a { - width: 70%; - height: 10%; -} ---fcc-editable-region-- -.bb1b { - width: 80%; - height: 10%; -} - -.bb1c { - width: 90%; - height: 10%; -} - -.bb1d { - width: 100%; - height: 70%; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-016.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-016.md deleted file mode 100644 index 1fa9350bd3..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-016.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 5d822fd413a79914d39e98d8 -title: Part 16 -challengeType: 0 -dashedName: part-16 ---- - -# --description-- - -Use the same variable as the `background-color` of the `.bb1b`, `.bb1c`, and `.bb1d` classes to fill in the rest of the building. - -# --hints-- - -The `background-color` of the `bb1b` element should be set. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor) -``` - -You should use `var(--building-color1)` to set the `background-color` of the `.bb1b` element. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor.trim(), 'var(--building-color1)'); -``` - -The `background-color` of the `bb1c` element should be set. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor) -``` - -You should use `var(--building-color1)` to set the `background-color` of the `.bb1c` element. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor.trim(), 'var(--building-color1)'); -``` - -The `background-color` of the `bb1d` element should be set. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor) -``` - -You should use `var(--building-color1)` to set the `background-color` of the `.bb1d` element. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor.trim(), 'var(--building-color1)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
- - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; - --building-color1: #999; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} ---fcc-editable-region-- -.bb1b { - width: 80%; - height: 10%; -} - -.bb1c { - width: 90%; - height: 10%; -} - -.bb1d { - width: 100%; - height: 70%; -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-017.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-017.md deleted file mode 100644 index 9fa4d4961f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-017.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 5d822fd413a79914d39e98d9 -title: Part 17 -challengeType: 0 -dashedName: part-17 ---- - -# --description-- - -I don't really like that color. Change the value of your variable from `#999` to `#aa80ff` and you can see how it gets applied everywhere you used the variable. This is the main advantage of using variables, being able to quickly change many values in your stylesheet by just changing the value of a variable. - -# --hints-- - -You should change the value of the `--building-color1` property variable from `#999` to `#aa80ff`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#aa80ff'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
- - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; ---fcc-editable-region-- - --building-color1: #999; ---fcc-editable-region-- -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-018.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-018.md deleted file mode 100644 index 9e662570ca..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-018.md +++ /dev/null @@ -1,132 +0,0 @@ ---- -id: 5d822fd413a79914d39e98da -title: Part 18 -challengeType: 0 -dashedName: part-18 ---- - -# --description-- - -Your first building looks pretty good now. Let's make some more! Nest three new `div` elements in the `background-buildings` container and give them the classes of `bb2`, `bb3`, and `bb4` in that order. These will be three more buildings for the background. - -# --hints-- - -You should create a `div` with a class of `bb2`. - -```js -assert.exists(document.querySelector('div.bb2')); -``` - -You should create a `div` with a class of `bb3`. - -```js -assert.exists(document.querySelector('div.bb3')); -``` - -You should create a `div` with a class of `bb4`. - -```js -assert.exists(document.querySelector('div.bb4')); -``` - -You should create 3 new `div` elements. - -```js -assert.equal(document.querySelectorAll('div')?.length, 9); -``` - -You should place these `div` elements within the `.background-buildings` element. - -```js -assert.equal(document.querySelector('div.background-buildings')?.children?.length, 4); -``` - -You should place the elements in the correct order. - -```js -function __t(a, b) { - return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b); -} -assert(__t('div.bb1','bb2') && __t('div.bb2','bb3') && __t('div.bb3','bb4')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
---fcc-editable-region-- - ---fcc-editable-region-- -
- - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; - --building-color1: #aa80ff; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-019.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-019.md deleted file mode 100644 index 4b2a3d2c55..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-019.md +++ /dev/null @@ -1,132 +0,0 @@ ---- -id: 5d822fd413a79914d39e98db -title: Part 19 -challengeType: 0 -dashedName: part-19 ---- - -# --description-- - -Give the new buildings `width` and `height` properties of: `10%` and `50%` for `.bb2`, `10%` and `55%` for `.bb3`, and `11%` and `58%` for `.bb4`. You will be using almost all percent based units and some flexbox for this project, so everything will be completely responsive. - -# --hints-- - -You should give `.bb2` a `width` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.width, '10%'); -``` - -You should give `.bb2` a `height` of `50%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.height, '50%'); -``` - -You should give `.bb3` a `width` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.width, '10%'); -``` - -You should give `.bb3` a `height` of `55%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.height, '55%'); -``` - -You should give `.bb4` a `width` of `11%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.width, '11%'); -``` - -You should give `.bb4` a `height` of `58%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.height, '58%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; - --building-color1: #aa80ff; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-020.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-020.md deleted file mode 100644 index e30b9780d2..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-020.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -id: 5d822fd413a79914d39e98dc -title: Part 20 -challengeType: 0 -dashedName: part-20 ---- - -# --description-- - -The buildings are stacked on top of each other and running off the screen. Let's fix that. Add the properties `display: flex;`, `align-items: flex-end;`, and `justify-content: space-evenly;` to the `background-buildings` class. This will use flexbox again to evenly space the buildings across the bottom of the element. - -# --hints-- - -You should add a `display` of `flex` to the `background-buildings` class. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.display, 'flex'); -``` - -You should add an `align-items` of `flex-end` to the `background-buildings` class. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.alignItems, 'flex-end'); -``` - -You should add a `justify-content` of `space-evenly` to the `background-buildings` class. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.justifyContent, 'space-evenly'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} ---fcc-editable-region-- -.background-buildings { - width: 100%; - height: 100%; -} ---fcc-editable-region-- -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; - --building-color1: #aa80ff; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb3 { - width: 10%; - height: 55%; -} - -.bb4 { - width: 11%; - height: 58%; -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-021.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-021.md deleted file mode 100644 index dece02c0f7..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-021.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 5d822fd413a79914d39e98dd -title: Part 21 -challengeType: 0 -dashedName: part-21 ---- - -# --description-- - -I don't like how spaced out the buildings are. Squeeze them together by adding two empty `div` elements to the top of the `background-buildings` element, two more at the bottom of it, and one more in between `.bb3` and `.bb4`. These will be added as evenly-spaced elements across the container, effectively moving the buildings closer to the center. - -# --hints-- - -You should add two new `div` elements before the `.bb1` element. - -```js -const bBuildings = document.querySelector('.background-buildings')?.children; -assert(![...bBuildings?.[0]?.classList]?.includes('bb1')); -assert(![...bBuildings?.[1]?.classList]?.includes('bb1')); -``` - -You should add one new `div` element between the `.bb3` and `.bb4` element. - -```js -assert(document.querySelector('.bb3')?.nextElementSibling === document.querySelector('.bb4')?.previousElementSibling); -``` - -You should add two new `div` elements after the `.bb4` element. - -```js -const bb4 = document.querySelector('.bb4'); -assert.exists(bb4?.nextElementSibling); -assert.exists(bb4?.nextElementSibling?.nextElementSibling); -``` - -You should add 5 new `div` elements. - -```js -assert.equal(document.querySelectorAll('div')?.length, 14); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - ---fcc-editable-region-- -
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- - - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; - --building-color1: #aa80ff; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb3 { - width: 10%; - height: 55%; -} - -.bb4 { - width: 11%; - height: 58%; -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-022.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-022.md deleted file mode 100644 index 516d968a8a..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-022.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5d822fd413a79914d39e98de -title: Part 22 -challengeType: 0 -dashedName: part-22 ---- - -# --description-- - -Create a new variable by the other one called `--building-color2` and give it a value of `#66cc99`. Then set it as the `background-color` of `.bb2`. - -# --hints-- - -You should define a new property variable called `--building-color2`. - -```js -assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color2')); -``` - -You should give `--building-color2` a value of `#66cc99`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2').trim(), '#66cc99'); -``` - -You should set the `background-color` of `.bb2`. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor); -``` - -You should set the `background-color` using the `--building-color2` variable. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor.trim(), 'var(--building-color2)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; -} ---fcc-editable-region-- -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; - --building-color1: #aa80ff; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; -} ---fcc-editable-region-- -.bb3 { - width: 10%; - height: 55%; -} - -.bb4 { - width: 11%; - height: 58%; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-023.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-023.md deleted file mode 100644 index 91519e234c..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-023.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 5d822fd413a79914d39e98df -title: Part 23 -challengeType: 0 -dashedName: part-23 ---- - -# --description-- - -Hmm, I'm not sure why that didn't work. You can add a fallback value to a variable by putting it as the second value of where you use the variable like this: `var(--variable-name, fallback-value)`. The property will use the fallback value when there's a problem with the variable. Add a fallback value of `green` to the `background-color` of `.bb2`. - -# --hints-- - -You should add a fallback value of `green` to the `background-color` property. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor.trim(), 'var(--building-color2, green)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; - --building-color1: #aa80ff; - --building-color2: #66cc99; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} ---fcc-editable-region-- -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} ---fcc-editable-region-- -.bb3 { - width: 10%; - height: 55%; -} - -.bb4 { - width: 11%; - height: 58%; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-024.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-024.md deleted file mode 100644 index e4eb0c91a4..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-024.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -id: 5d822fd413a79914d39e98e0 -title: Part 24 -challengeType: 0 -dashedName: part-24 ---- - -# --description-- - -Create a new variable by the other ones named `--building-color3` and give it a value of `#cc6699`. Then use it as the `background-color` of the `.bb3` class and give it a fallback value of `pink`. - -# --hints-- - -You should define a new property variable called `--building-color3`. - -```js -assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color3')); -``` - -You should give `--building-color3` a value of `#66cc99`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3')?.trim(), '#cc6699'); -``` - -You should set the `background-color` of `.bb3`. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor); -``` - -You should set the `background-color` using the `--building-color3` variable with a fallback of `pink`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor.trim(), 'var(--building-color3, pink)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; -} ---fcc-editable-region-- -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; - --building-color1: #aa80ff; - --building-color2: #66cc99; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2, green); -} - -.bb3 { - width: 10%; - height: 55%; -} ---fcc-editable-region-- -.bb4 { - width: 11%; - height: 58%; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-025.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-025.md deleted file mode 100644 index 1404f2b90c..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-025.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5d822fd413a79914d39e98e1 -title: Part 25 -challengeType: 0 -dashedName: part-25 ---- - -# --description-- - -That one used the fallback value as well? I see the problem now! The variables you declared in `.bb1` do not cascade to the `.bb2` and `.bb3` sibling elements. That's just how CSS works. Because of this, variables are often declared in the `:root` selector. This is the highest level selector in CSS; putting your variables there will make them usable everywhere. Add the `:root` selector to the top of your stylesheet, and move all your variable declarations there. - -# --hints-- - -You should declare a `:root` selector at the top of the stylesheet. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle(':root')); -``` - -You should define `--building-color1` with a value of `#aa80ff` in the `:root` selector. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color1')?.trim(), '#aa80ff'); -``` - -You should define `--building-color2` with a value of `#66cc99` in the `:root` selector. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color2')?.trim(), '#66cc99'); -``` - -You should define `--building-color3` with a value of `#cc6699` in the `:root` selector. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color3')?.trim(), '#cc6699'); -``` - -You should remove the custom property variables from `.bb1`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1')); -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2')); -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css ---fcc-editable-region-- - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; -} ---fcc-editable-region-- -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2, green); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3, pink); -} - -.bb4 { - width: 11%; - height: 58%; -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-026.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-026.md deleted file mode 100644 index 71c0fd57f1..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-026.md +++ /dev/null @@ -1,134 +0,0 @@ ---- -id: 5d822fd413a79914d39e98e2 -title: Part 26 -challengeType: 0 -dashedName: part-26 ---- - -# --description-- - -Now that you've worked the bugs out and the buildings are the right colors, you can remove the fallback values in the two places they were used. Go ahead and do that now. - -# --hints-- - -You should remove the fallback in the `background-color` from `.bb2`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor, 'var(--building-color2)'); -``` - -You should remove the fallback in the `background-color` from `.bb3`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor.trim(), 'var(--building-color3)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} ---fcc-editable-region-- -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2, green); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3, pink); -} ---fcc-editable-region-- -.bb4 { - width: 11%; - height: 58%; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-027.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-027.md deleted file mode 100644 index dd2a089728..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-027.md +++ /dev/null @@ -1,137 +0,0 @@ ---- -id: 5d822fd413a79914d39e98e3 -title: Part 27 -challengeType: 0 -dashedName: part-27 ---- - -# --description-- - -Create another variable named `--building-color4` and give it a value of `#538cc6`. Make sure it's in the `:root` selector this time. Then use it to fill in the last building. - -# --hints-- - -You should define a new property variable called `--building-color4`. - -```js -assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color4')); -``` - -You should give `--building-color4` a value of `#538cc6` in the `:root` selector. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color4').trim(), '#538cc6'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css ---fcc-editable-region-- -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; -} ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-028.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-028.md deleted file mode 100644 index 7eb6a89aaa..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-028.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -id: 5d822fd413a79914d39e98e4 -title: Part 28 -challengeType: 0 -dashedName: part-28 ---- - -# --description-- - -The background buildings are starting to look pretty good. Create a new `div` below the `background-buildings` element and give it a class of `foreground-buildings`. This will be another container for more buildings. - -# --hints-- - -You should create a new `div` element. - -```js -assert.equal(document.querySelectorAll('div')?.length, 15); -``` - -The new `div` should come after the `div.background-buildings` element. - -```js -assert.exists(document.querySelector('div.background-buildings + div')); -``` - -Your new `div` should have a class of `foreground-buildings`. - -```js -assert.exists(document.querySelector('div.foreground-buildings')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- - ---fcc-editable-region-- - - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-029.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-029.md deleted file mode 100644 index fe23e03684..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-029.md +++ /dev/null @@ -1,160 +0,0 @@ ---- -id: 5d822fd413a79914d39e98e5 -title: Part 29 -challengeType: 0 -dashedName: part-29 ---- - -# --description-- - -You want the foreground buildings container to sit directly on top of the background buildings element. Give it a `width` and `height` of `100%`, set the `position` to `absolute`, and the `top` to `0`. This will make it the same size as the body and move the start of it to the top left corner. - -# --hints-- - -You should use a `.foreground-buildings` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')); -``` - -You should give the `.foreground-buildings` element a `width` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.width, '100%'); -``` - -You should give the `.foreground-buildings` element a `height` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.height, '100%'); -``` - -You should give the `.foreground-buildings` element a `position` of `absolute`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position, 'absolute'); -``` - -You should give the `.foreground-buildings` element a `top` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top, '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-030.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-030.md deleted file mode 100644 index 454b97cd7d..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-030.md +++ /dev/null @@ -1,191 +0,0 @@ ---- -id: 5d822fd413a79914d39e98e6 -title: Part 30 -challengeType: 0 -dashedName: part-30 ---- - -# --description-- - -Nest six `div` elements within `.foreground-buildings` and give them the classes of `fb1` through `fb6` in that order. "fb" stands for "foreground building". These will be six more buildings for the foreground. - -# --hints-- - -You should create a new `div` with a class of `fb1`. - -```js -assert.exists(document.querySelector('div.fb1')); -``` - -You should create a new `div` with a class of `fb2`. - -```js -assert.exists(document.querySelector('div.fb2')); -``` - -You should create a new `div` with a class of `fb3`. - -```js -assert.exists(document.querySelector('div.fb3')); -``` - -You should create a new `div` with a class of `fb4`. - -```js -assert.exists(document.querySelector('div.fb4')); -``` - -You should create a new `div` with a class of `fb5`. - -```js -assert.exists(document.querySelector('div.fb5')); -``` - -You should create a new `div` with a class of `fb6`. - -```js -assert.exists(document.querySelector('div.fb6')); -``` - -You should place these new `div` elements within the `.foreground-buildings` element. - -```js -assert.exists(document.querySelector('div.foreground-buildings > div.fb1')); -assert.exists(document.querySelector('div.foreground-buildings > div.fb2')); -assert.exists(document.querySelector('div.foreground-buildings > div.fb3')); -assert.exists(document.querySelector('div.foreground-buildings > div.fb4')); -assert.exists(document.querySelector('div.foreground-buildings > div.fb5')); -assert.exists(document.querySelector('div.foreground-buildings > div.fb6')); -``` - -You should place the new `div` elements in the correct order. - -```js -function __t(a, b) { - return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b); -} -assert(__t('div.fb1','fb2') && __t('div.fb2','fb3') && __t('div.fb3','fb4') && __t('div.fb4', 'fb5') && __t('div.fb5', 'fb6')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
---fcc-editable-region-- - - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -.foreground-buildings { - width: 100%; - height: 100%; - position: absolute; - top: 0; -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-031.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-031.md deleted file mode 100644 index 80f12d8c37..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-031.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -id: 5d822fd413a79914d39e98e7 -title: Part 31 -challengeType: 0 -dashedName: part-31 ---- - -# --description-- - -Give the six new elements these `width` and `height` values: `10%` and `60%` to `.fb1`, `10%` and `40%` to `.fb2`, `10%` and `35%` to `.fb3`, `8%` and `45%` to `.fb4`, `10%` and `33%` to `.fb5`, and `9%` and `38%` to `.fb6`. - -# --hints-- - -You should create a `.fb1` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.fb1')); -``` - -You should give the `.fb1` selector a `width` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.width, '10%'); -``` - -You should give the `.fb1` selector a `height` of `60%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.height, '60%'); -``` - -You should create a `.fb2` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.fb2')); -``` - -You should give the `.fb2` selector a `width` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.width, '10%'); -``` - -You should give the `.fb2` selector a `height` of `40%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.height, '40%'); -``` - -You should create a `.fb3` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.fb3')); -``` - -You should give the `.fb3` selector a `width` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.width, '10%'); -``` - -You should give the `.fb3` selector a `height` of `35%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.height, '35%'); -``` - -You should create a `.fb4` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.fb4')); -``` - -You should give the `.fb4` selector a `width` of `8%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.width, '8%'); -``` - -You should give the `.fb4` selector a `height` of `45%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.height, '45%'); -``` - -You should create a `.fb5` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.fb5')); -``` - -You should give the `.fb5` selector a `width` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.width, '10%'); -``` - -You should give the `.fb5` selector a `height` of `33%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.height, '33%'); -``` - -You should create a `.fb6` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.fb6')); -``` - -You should give the `.fb6` selector a `width` of `9%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.width, '9%'); -``` - -You should give the `.fb6` selector a `height` of `38%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.height, '38%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -.foreground-buildings { - width: 100%; - height: 100%; - position: absolute; - top: 0; -} ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-032.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-032.md deleted file mode 100644 index 2eec0eaf33..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-032.md +++ /dev/null @@ -1,189 +0,0 @@ ---- -id: 5d822fd413a79914d39e98e8 -title: Part 32 -challengeType: 0 -dashedName: part-32 ---- - -# --description-- - -Add the same `display`, `align-items`, and `justify-content` properties and values to `foreground-buildings` that you used on `background-buildings`. Again, this will use Flexbox to evenly space the buildings across the bottom of their container. - -# --hints-- - -You should give `.foreground-buildings` a `display` property of `flex`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.display, 'flex'); -``` - -You should give `.foreground-buildings` an `align-items` property of `flex-end`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.alignItems, 'flex-end'); -``` - -You should give `.foreground-buildings` a `justify-content` property of `space-evenly`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.justifyContent, 'space-evenly'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} ---fcc-editable-region-- -.foreground-buildings { - width: 100%; - height: 100%; - position: absolute; - top: 0; -} ---fcc-editable-region-- -.fb1 { - width: 10%; - height: 60%; -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb4 { - width: 8%; - height: 45%; -} - -.fb5 { - width: 10%; - height: 33%; -} - -.fb6 { - width: 9%; - height: 38%; -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-033.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-033.md deleted file mode 100644 index 552d8fdb23..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-033.md +++ /dev/null @@ -1,222 +0,0 @@ ---- -id: 5d822fd413a79914d39e98e9 -title: Part 33 -challengeType: 0 -dashedName: part-33 ---- - -# --description-- - -I see some code that can be optimized. Move the `position` and `top` properties and values from `.foreground-buildings` to `.background-buildings`. Then select both `.background-buildings` and `.foreground-buildings` there, effectively applying those styles to both of the elements. You can use a comma (`,`) to separate selectors like this: `selector1, selector2`. - -# --hints-- - -You should not remove the `.foreground-buildings` declaration. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')); -``` - -You should remove the `position` property from `.foreground-buildings`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position); -``` - -You should remove the `top` property from `.foreground-buildings`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top); -``` - -You should add the `position` property of `absolute` to `.background-buildings, foreground-buildings`. - -```js -function eitherOr() { - const a = new __helpers.CSSHelp(document) - return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings'); -} -assert.equal(eitherOr()?.position, 'absolute'); -``` - -You should add the `top` property of `0` to `.background-buildings, foreground-buildings`. - -```js -function eitherOr() { - const a = new __helpers.CSSHelp(document) - return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings'); -} -assert.equal(eitherOr()?.top, '0px'); -``` - -You should use a comma to use both `.foreground-buildings` and `.background-buildings` selectors in the same style declaration. - -```js -function eitherOr() { - const a = new __helpers.CSSHelp(document) - return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings'); -} -assert.exists(eitherOr()); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} ---fcc-editable-region-- -.background-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -.foreground-buildings { - width: 100%; - height: 100%; - position: absolute; - top: 0; - display: flex; - align-items: flex-end; - justify-content: space-evenly; -} ---fcc-editable-region-- -.fb1 { - width: 10%; - height: 60%; -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb4 { - width: 8%; - height: 45%; -} - -.fb5 { - width: 10%; - height: 33%; -} - -.fb6 { - width: 9%; - height: 38%; -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-034.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-034.md deleted file mode 100644 index 47737211d7..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-034.md +++ /dev/null @@ -1,180 +0,0 @@ ---- -id: 5d822fd413a79914d39e98ea -title: Part 34 -challengeType: 0 -dashedName: part-34 ---- - -# --description-- - -Now that you did that, you can delete the old `.foreground-buildings` declaration and all of its properties since they aren't needed anymore. - -# --hints-- - -You should delete the whole `.foreground-buildings` style declaration. - -```js -assert.notExists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} ---fcc-editable-region-- -.foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; -} ---fcc-editable-region-- -.fb1 { - width: 10%; - height: 60%; -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb4 { - width: 8%; - height: 45%; -} - -.fb5 { - width: 10%; - height: 33%; -} - -.fb6 { - width: 9%; - height: 38%; -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-035.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-035.md deleted file mode 100644 index 7d42b86a1d..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-035.md +++ /dev/null @@ -1,202 +0,0 @@ ---- -id: 5d822fd413a79914d39e98eb -title: Part 35 -challengeType: 0 -dashedName: part-35 ---- - -# --description-- - -The skyline is coming together. Fill in the `background-color` property of the foreground buildings. Use your `--building-color1` variable to fill in `.fb3` and `.fb4`, `--building-color2` for `.fb5`, `--building-color3` for `.fb2` and `.fb6`, and `--building-color4` for `.fb1`. - -# --hints-- - -You should give `.fb1` a `background-color` using `--building-color4`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.backgroundColor.trim(), 'var(--building-color4)'); -``` - -You should give `.fb2` a `background-color` using `--building-color3`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.backgroundColor, 'var(--building-color3)'); -``` - -You should give `.fb3` a `background-color` using `--building-color1`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.backgroundColor, 'var(--building-color1)'); -``` - -You should give `.fb4` a `background-color` using `--building-color1`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.backgroundColor, 'var(--building-color1)'); -``` - -You should give `.fb5` a `background-color` using `--building-color2`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.backgroundColor, 'var(--building-color2)'); -``` - -You should give `.fb6` a `background-color` using `--building-color3`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.backgroundColor, 'var(--building-color3)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} ---fcc-editable-region-- -.fb1 { - width: 10%; - height: 60%; -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb4 { - width: 8%; - height: 45%; -} - -.fb5 { - width: 10%; - height: 33%; -} - -.fb6 { - width: 9%; - height: 38%; -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-036.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-036.md deleted file mode 100644 index 2446ee4de8..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-036.md +++ /dev/null @@ -1,202 +0,0 @@ ---- -id: 5d822fd413a79914d39e98ec -title: Part 36 -challengeType: 0 -dashedName: part-36 ---- - -# --description-- - -Squeeze the buildings together again by adding two empty `div` elements within both the top and bottom of the `.foreground-buildings` element, and one more in between `.fb2` and `.fb3`. - -# --hints-- - -You should add two `div` elements as the first children of `.foreground-buildings`. - -```js -const bBuildings = document.querySelector('.background-buildings')?.children; -assert(![...bBuildings?.[0]?.classList]?.includes('fb1')); -assert(![...bBuildings?.[1]?.classList]?.includes('fb1')); -``` - -You should add one `div` element between `.fb2` and `.fb3`. - -```js -assert(document.querySelector('.fb2')?.nextElementSibling === document.querySelector('.fb3')?.previousElementSibling); -``` - - -You should add two `div` elements as the last children of `.foreground-buildings`. - -```js -const fb6 = document.querySelector('.fb6'); -assert.exists(fb6?.nextElementSibling); -assert.exists(fb6?.nextElementSibling?.nextElementSibling); -``` - -You should have added 5 new `div` elements. - -```js -assert.equal(document.querySelectorAll('div')?.length, 26); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
-
-
-
-
-
-
-
---fcc-editable-region-- - - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-037.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-037.md deleted file mode 100644 index a7d2b2524b..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-037.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -id: 5d822fd413a79914d39e98ed -title: Part 37 -challengeType: 0 -dashedName: part-37 ---- - -# --description-- - -Move the position of `.fb4` relative to where it is now by adding a `position` of `relative` and `left` of `10%` to it. Do the same for `.fb5` but use `right` instead of `left`. This will cover up the remaining white space in between the buildings. - -# --hints-- - -You should give `.fb4` a `position` of `relative`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.position, 'relative'); -``` - -You should give `.fb4` a `left` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.left, '10%'); -``` - -You should give `.fb5` a `position` of `relative`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.position, 'relative'); -``` - -You should give `.fb5` a `right` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.right, '10%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} ---fcc-editable-region-- -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); -} ---fcc-editable-region-- -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-038.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-038.md deleted file mode 100644 index 952920a88c..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-038.md +++ /dev/null @@ -1,195 +0,0 @@ ---- -id: 5d822fd413a79914d39e98ee -title: Part 38 -challengeType: 0 -dashedName: part-38 ---- - -# --description-- - -Your code is starting to get quite long. Add a comment above the `.fb1` class that says `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` to help people understand your code. Above the `.bb1` class add another comment that says `BACKGROUND BUILDINGS - "bb" stands for "background building"`. If you don't remember, comments in CSS look like this: `/* Comment here */`. - -# --hints-- - -You should add the comment `BACKGROUND BUILDINGS - "bb" stands for "background building"` above the `.bb1` selector. - -```js -assert(/\/\*\s*BACKGROUND BUILDINGS - "bb" stands for "background building"\s*\*\//gi.test(code)); -``` - -You should add the comment `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` above the `.fb1` selector. - -```js -assert(/\/\*\s*FOREGROUND BUILDINGS - "fb" stands for "foreground building"\s*\*\//gi.test(code)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} ---fcc-editable-region-- - - -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} ---fcc-editable-region-- -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-039.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-039.md deleted file mode 100644 index 2500b94d10..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-039.md +++ /dev/null @@ -1,196 +0,0 @@ ---- -id: 5d822fd413a79914d39e98ef -title: Part 39 -challengeType: 0 -dashedName: part-39 ---- - -# --description-- - -Create a new variable in `:root` called `--window-color1` and give it a value of `black`. This will be a secondary color for the purple buildings. - -# --hints-- - -You should create a new variable in `:root` called `--window-color1`. - -```js -assert(new __helpers.CSSHelp(document).isPropertyUsed('--window-color1')); -``` - -You should give the property variable `--window-color1` a value of `black`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color1').trim(), 'black'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css ---fcc-editable-region-- -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; -} ---fcc-editable-region-- -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-040.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-040.md deleted file mode 100644 index ba9e697cb8..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-040.md +++ /dev/null @@ -1,217 +0,0 @@ ---- -id: 5d822fd413a79914d39e98f0 -title: Part 40 -challengeType: 0 -dashedName: part-40 ---- - -# --description-- - -Gradients in CSS are a way to transition between colors across the distance of an element. They are applied to the `background` property and the syntax looks like this: - -```css -gradient-type( - color1, - color2 -); -``` - -In the example, `color1` is solid at the top, `color2` is solid at the bottom, and in between it transitions evenly from one to the next. In `.bb1a`, add a gradient of type `linear-gradient` to the `background` property with `--building-color1` as the first color and `--window-color1` as the second. - -# --hints-- - -You should apply a `background` to `.bb1a`. - -```js -assert(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background); -``` - -You should give the `background` a `linear-gradient`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background, 'linear-gradient'); -``` - -You should give the `background` a `linear-gradient` starting from `--building-color1`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1'); -``` - -You should give the `background` a `linear-gradient` ending at `--window-color1`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} ---fcc-editable-region-- -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); -} ---fcc-editable-region-- -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-041.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-041.md deleted file mode 100644 index 7e0922a857..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-041.md +++ /dev/null @@ -1,222 +0,0 @@ ---- -id: 5d822fd413a79914d39e98f1 -title: Part 41 -challengeType: 0 -dashedName: part-41 ---- - -# --description-- - -You want to add the same gradient to the next two sections. Instead of doing that, create a new class called `bb1-window`, and move the `height` and `background` properties and values from `.bb1a` to the new class. - -# --hints-- - -You should create a new class declaration called `bb1-window`. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1-window')); -``` - -You should move the `height` property and value from `.bb1a` to `.bb1-window`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height); -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.height, '10%'); -``` - -You should move the `background` property and value from `.bb1a` to `.bb1-window`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background); -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))'); -``` - -You should not move the `background-color` property from `.bb1a`. - -```js -assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor); -``` - -You should not move the `width` property from `.bb1a`. - -```js -assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} ---fcc-editable-region-- -.bb1a { - width: 70%; - height: 10%; - background-color: var(--building-color1); - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - - ---fcc-editable-region-- -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-042.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-042.md deleted file mode 100644 index 73b06d9418..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-042.md +++ /dev/null @@ -1,236 +0,0 @@ ---- -id: 5d822fd413a79914d39e98f2 -title: Part 42 -challengeType: 0 -dashedName: part-42 ---- - -# --description-- - -Add the new `bb1-window` class to the `.bb1a`, `.bb1b`, and `.bb1c` elements. This will apply the gradient to them. - -# --hints-- - -You should not remove the `bb1a` class. - -```js -assert.exists(document.querySelector('div.bb1a')); -``` - -You should add the `bb1-window` class to the `.bb1a` element. - -```js -assert.exists(document.querySelector('div.bb1a.bb1-window')); -``` - -You should not remove the `bb1b` class. - -```js -assert.exists(document.querySelector('div.bb1b')); -``` - -You should add the `bb1-window` class to the `.bb1b` element. - -```js -assert.exists(document.querySelector('div.bb1b.bb1-window')); -``` - -You should not remove the `bb1c` class. - -```js -assert.exists(document.querySelector('div.bb1c')); -``` - -You should add the `bb1-window` class to the `.bb1c` element. - -```js -assert.exists(document.querySelector('div.bb1c.bb1-window')); -``` - -You should not change the `.bb1d` element. - -```js -assert.exists(document.querySelector('div.bb1d')); -assert.notExists(document.querySelector('div.bb1d.bb1-window')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
---fcc-editable-region-- -
-
-
-
-
-
---fcc-editable-region-- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-043.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-043.md deleted file mode 100644 index 0987efbe54..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-043.md +++ /dev/null @@ -1,221 +0,0 @@ ---- -id: 5d822fd413a79914d39e98f3 -title: Part 43 -challengeType: 0 -dashedName: part-43 ---- - -# --description-- - -You don't need the `height` or `background-color` properties in `.bb1a`, `.bb1b` or `.bb1c` anymore, so go ahead and remove them. - -# --hints-- - -You should remove the `background-color` from `.bb1a`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor); -``` - -You should remove the `height` property from `.bb1b`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height); -``` - -You should remove the `background-color` property from `.bb1b`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor); -``` - -You should remove the `height` property from `.bb1c`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height); -``` - -You should remove the `background-color` property from `.bb1c`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} ---fcc-editable-region-- -.bb1a { - width: 70%; - background-color: var(--building-color1); -} - -.bb1b { - width: 80%; - height: 10%; - background-color: var(--building-color1); -} - -.bb1c { - width: 90%; - height: 10%; - background-color: var(--building-color1); -} ---fcc-editable-region-- -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-044.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-044.md deleted file mode 100644 index a823d98993..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-044.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 5d822fd413a79914d39e98f4 -title: Part 44 -challengeType: 0 -dashedName: part-44 ---- - -# --description-- - -Gradients can use as many colors as you want like this: - -```css -gradient-type( - color1, - color2, - color3 -); -``` - -Add a `linear-gradient` to `.bb1d` with `orange` as the first color, `--building-color1` as the second, and `--window-color1` as the third. Remember to use the gradient on the `background` property. - -# --hints-- - -You should use the `background` on `.bb1d`. - -```js -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background); -``` - -You should give the `background` property a `linear-gradient`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'linear-gradient'); -``` - -You should use `orange` as the first color in the `linear-gradient`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange'); -``` - -You should use `--building-color1` as the second color in the `linear-gradient`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)'); -``` - -You should use `--window-color1` as the third color in the `linear-gradient`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1),var(--window-color1))'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} ---fcc-editable-region-- -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); -} ---fcc-editable-region-- -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-045.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-045.md deleted file mode 100644 index 746f663724..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-045.md +++ /dev/null @@ -1,197 +0,0 @@ ---- -id: 5d822fd413a79914d39e98f5 -title: Part 45 -challengeType: 0 -dashedName: part-45 ---- - -# --description-- - -It's a little hidden behind the foreground buildings, but you can see the three color gradient there. Since you are using that now, remove the `background-color` property from `.bb1d`. - -# --hints-- - -You should remove the `background-color` property and value from `.bb1d` - -```js -assert.notMatch(code, /\.bb1d\s*\{\s*[^}]*?background-color[^}]*?\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} ---fcc-editable-region-- -.bb1d { - width: 100%; - height: 70%; - background-color: var(--building-color1); - background: linear-gradient( - orange, - var(--building-color1), - var(--window-color1) - ); -} ---fcc-editable-region-- -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-046.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-046.md deleted file mode 100644 index 243858d707..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-046.md +++ /dev/null @@ -1,206 +0,0 @@ ---- -id: 5d822fd413a79914d39e98f6 -title: Part 46 -challengeType: 0 -dashedName: part-46 ---- - -# --description-- - -You can specify where you want a gradient transition to complete by adding it to the color like this: - -```css -gradient-type( - color1, - color2 20%, - color3 -); -``` - -Here, it will transition from `color1` to `color2` between `0%` and `20%` of the element and then transition to `color3` for the rest. Add `80%` to the `--building-color1` color of the `.bb1d` gradient so you can see it in action. - -# --hints-- - -You should add a value of `80%` to the `--building-color1` color in the `linear-gradient` of `.bb1d`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)80%,var(--window-color1))'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} ---fcc-editable-region-- -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - orange, - var(--building-color1), - var(--window-color1) - ); -} ---fcc-editable-region-- -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-047.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-047.md deleted file mode 100644 index 9376d35c13..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-047.md +++ /dev/null @@ -1,202 +0,0 @@ ---- -id: 5d822fd413a79914d39e98f7 -title: Part 47 -challengeType: 0 -dashedName: part-47 ---- - -# --description-- - -Remove `orange` from the `.bb1d` gradient and change the `80%` to `50%`. This will make `--building-color1` solid for the top half, and then transition to `--window-color1` for the bottom half. - -# --hints-- - -You should remove `orange` from the `linear-gradient`. - -```js -assert.notInclude(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'orange'); -``` - -You should change the now first `linear-gradient` color to transition at `50%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(var(--building-color1)50%,var(--window-color1))'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} ---fcc-editable-region-- -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - orange, - var(--building-color1) 80%, - var(--window-color1) - ); -} ---fcc-editable-region-- -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-048.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-048.md deleted file mode 100644 index 4c4b2a6573..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-048.md +++ /dev/null @@ -1,209 +0,0 @@ ---- -id: 5d822fd413a79914d39e98f8 -title: Part 48 -challengeType: 0 -dashedName: part-48 ---- - -# --description-- - -Nest two new `div` elements within `.bb2`, give them the classes of `bb2a` and `bb2b`, in that order. These will be two sections for this building. - -# --hints-- - -You should add two `div` elements to `.bb2`. - -```js -assert.equal(document.querySelector('div.bb2')?.children?.length, 2); -``` - -You should give the first `div` a class of `bb2a`. - -```js -assert.exists(document.querySelector('div.bb2a')); -``` - -You should give the second `div` a class of `bb2b`. - -```js -assert.exists(document.querySelector('div.bb2b')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
---fcc-editable-region-- -
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-049.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-049.md deleted file mode 100644 index 663f909caa..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-049.md +++ /dev/null @@ -1,206 +0,0 @@ ---- -id: 5d822fd413a79914d39e98f9 -title: Part 49 -challengeType: 0 -dashedName: part-49 ---- - -# --description-- - -Give `.bb2b` a `width` and `height` of `100%` to make it fill the building container. You will add something on the top a little later. - -# --hints-- - -You should give `.bb2b` a `width` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.width, '100%'); -``` - -You should give `.bb2b` a `height` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.height, '100%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} ---fcc-editable-region-- - ---fcc-editable-region-- -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-050.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-050.md deleted file mode 100644 index 00d0e41165..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-050.md +++ /dev/null @@ -1,210 +0,0 @@ ---- -id: 5d822fd413a79914d39e98fa -title: Part 50 -challengeType: 0 -dashedName: part-50 ---- - -# --description-- - -Create a new variable in `:root` named `window-color2` with a value of `#8cd9b3`. This will be used as the secondary color for this building. - -# --hints-- - -You should create a new property variable called `window-color2` within `:root`. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2')); -``` - -You should give `window-color2` a value of `#8cd9b3`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2').trim(), '#8cd9b3'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css ---fcc-editable-region-- -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; -} ---fcc-editable-region-- -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} - -.bb2b { - width: 100%; - height: 100%; -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-051.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-051.md deleted file mode 100644 index 2b369aad43..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-051.md +++ /dev/null @@ -1,239 +0,0 @@ ---- -id: 5d822fd413a79914d39e98fb -title: Part 51 -challengeType: 0 -dashedName: part-51 ---- - -# --description-- - -You can make an instant color change in a gradient by giving the transition zero space like this: - -```css -gradient-type( - color1, - color1 50%, - color2 50%, - color2 -); -``` - -Here, the top half of the element will be `color1` and the bottom half will be `color2`. Add a `linear-gradient` to `.bb2b` that uses `--building-color2` from `0%` to `6%` and `--window-color2` from `6%` to `9%`. - -# --hints-- - -You should give `.bb2b` a `background` property. - -```js -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background); -``` - -You should use a `linear-gradient` on the `background`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background, "linear-gradient"); -``` - -You should use `--building-color2` from `0%` to `6%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /var\(--building-color2\)(0%)?,var\(--building-color2\)6%/); -``` - -You should use `--window-color2` from `6%` to `9%`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "var(--window-color2)6%,var(--window-color2)9%"); -``` - -`.bb2b` should have a `linear-gradient` transitioning from `--building-color2` at `0%` to `6%`, and `--window-color2` at `6%` to `9%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)6%,var\(--window-color2\)6%,var\(--window-color2\)9%\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} ---fcc-editable-region-- -.bb2b { - width: 100%; - height: 100%; -} ---fcc-editable-region-- -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-052.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-052.md deleted file mode 100644 index 6054757c04..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-052.md +++ /dev/null @@ -1,210 +0,0 @@ ---- -id: 5d822fd413a79914d39e98fc -title: Part 52 -challengeType: 0 -dashedName: part-52 ---- - -# --description-- - -You can see the hard color change at the top of the section. Change the gradient type from `linear-gradient` to `repeating-linear-gradient` for this section. This will make the four colors of your gradient repeat until it gets to the bottom of the element; giving you some stripes, and saving you from having to add a bunch of elements to create them. - -# --hints-- - -You should change the `background` property of `.bb2b` from using `linear-gradient` to using `repeating-linear-gradient`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "repeating-linear-gradient(var(--building-color2),var(--building-color2)6%,var(--window-color2)6%,var(--window-color2)9%)"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} ---fcc-editable-region-- -.bb2b { - width: 100%; - height: 100%; - background: linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} ---fcc-editable-region-- -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-053.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-053.md deleted file mode 100644 index 4eb36211e6..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-053.md +++ /dev/null @@ -1,208 +0,0 @@ ---- -id: 5d822fd413a79914d39e98fd -title: Part 53 -challengeType: 0 -dashedName: part-53 ---- - -# --description-- - -In the next few steps, you are going to use some tricks with CSS borders to turn the `.bb2a` section into a triangle at the top of the building. First, remove the `background-color` from `.bb2` since you don't need it anymore. - -# --hints-- - -You should remove the `background-color` from `.bb2`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2")?.backgroundColor); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( -var(--building-color1) 50%, -var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( -var(--building-color1), -var(--window-color1) - ); -} ---fcc-editable-region-- -.bb2 { - width: 10%; - height: 50%; - background-color: var(--building-color2); -} ---fcc-editable-region-- -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( -var(--building-color2), -var(--building-color2) 6%, -var(--window-color2) 6%, -var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-054.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-054.md deleted file mode 100644 index cff26bf35e..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-054.md +++ /dev/null @@ -1,259 +0,0 @@ ---- -id: 5d822fd413a79914d39e98fe -title: Part 54 -challengeType: 0 -dashedName: part-54 ---- - -# --description-- - -Add these properties to `.bb2a`: - -```css -margin: auto; -width: 5vw; -height: 5vw; -border-top: 1vw solid #000; -border-bottom: 1vw solid #000; -border-left: 1vw solid #999; -border-right: 1vw solid #999; -``` - -After you add these, you can see how a thick border on an element gives you some angles where two sides meet. You are going to use that bottom border as the top of the building. - -# --hints-- - -You should give `.bb2a` a `margin` of `auto`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.margin, "auto"); -``` - -You should give `.bb2a` a `width` of `auto`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.width, "5vw"); -``` - -You should give `.bb2a` a `height` of `5vw`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.height, "5vw"); -``` - -You should give `.bb2a` a `border-top` of `1vw solid #000`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderTop, "1vw solid rgb(0, 0, 0)"); -``` - -You should give `.bb2a` a `border-bottom` of `1vw solid #000`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderBottom, "1vw solid rgb(0, 0, 0)"); -``` - -You should give `.bb2a` a `border-left` of `1vw solid #999`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderLeft, "1vw solid rgb(153, 153, 153)"); -``` - -You should give `.bb2a` a `border-right` of `1vw solid #999`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderRight, "1vw solid rgb(153, 153, 153)"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} ---fcc-editable-region-- - ---fcc-editable-region-- -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-055.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-055.md deleted file mode 100644 index 6526a06e9e..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-055.md +++ /dev/null @@ -1,237 +0,0 @@ ---- -id: 5d822fd413a79914d39e98ff -title: Part 55 -challengeType: 0 -dashedName: part-55 ---- - -# --description-- - -Next, remove the `width` and `height` from `.bb2a`, and change the `border-left` and `border-right` to use `5vw` instead of `1vw`. The element will now have zero size and the borders will come together in the middle. - -# --hints-- - -You should remove the `width` from `.bb2a`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.width); -``` - -You should remove the `height` from `.bb2a`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.height); -``` - -You should change the `border-left` to use `5vw`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid rgb(153, 153, 153)"); -``` - -You should change the `border-right` to use `5vw`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid rgb(153, 153, 153)"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} ---fcc-editable-region-- -.bb2a { - margin: auto; - width: 5vw; - height: 5vw; - border-top: 1vw solid #000; - border-bottom: 1vw solid #000; - border-left: 1vw solid #999; - border-right: 1vw solid #999; -} ---fcc-editable-region-- -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-056.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-056.md deleted file mode 100644 index d09ab00818..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-056.md +++ /dev/null @@ -1,223 +0,0 @@ ---- -id: 5d822fd413a79914d39e9900 -title: Part 56 -challengeType: 0 -dashedName: part-56 ---- - -# --description-- - -Next, change the two `#999` of `.bb2a` to `transparent`. This will make the left and right borders invisible. - -# --hints-- - -You should change the `border-left` to use `transparent`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid transparent"); -``` - -You should change the `border-right` to use `transparent`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid transparent"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} ---fcc-editable-region-- -.bb2a { - margin: auto; - border-top: 1vw solid #000; - border-bottom: 1vw solid #000; - border-left: 5vw solid #999; - border-right: 5vw solid #999; -} ---fcc-editable-region-- -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-057.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-057.md deleted file mode 100644 index 0e69ca5d02..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-057.md +++ /dev/null @@ -1,223 +0,0 @@ ---- -id: 5d822fd413a79914d39e9901 -title: Part 57 -challengeType: 0 -dashedName: part-57 ---- - -# --description-- - -Remove the `margin` and `border-top` properties and values from `.bb2a` to turn it into a triangle for the top of the building. - -# --hints-- - -You should remove the `margin` from `.bb2a`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.margin); -``` - -You should remove the `border-top` from `.bb2a`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderTop); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} ---fcc-editable-region-- -.bb2a { - margin: auto; - border-top: 1vw solid #000; - border-bottom: 1vw solid #000; - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} ---fcc-editable-region-- -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-058.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-058.md deleted file mode 100644 index 5f714c9b26..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-058.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 5d822fd413a79914d39e9902 -title: Part 58 -challengeType: 0 -dashedName: part-58 ---- - -# --description-- - -Finally, on the `border-bottom` property of `.bb2a`, change the `1vw` to `5vh` and change the `#000` color to your `--building-color2` variable. There you go, now it looks good! At any time throughout this project, you can comment out or remove the `border` property you added to everything at the beginning to see what the buildings will look like when that gets removed at the end. - -# --hints-- - -You should change `border-bottom` to use `5vh`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom, "5vh"); -``` - -You should change `border-bottom` to use `--building-color2`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "var(--building-color2)"); -``` - -`border-bottom` should be `5vh solid var(--building-color2)`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "5vh solid var(--building-color2)"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} ---fcc-editable-region-- -.bb2a { - border-bottom: 1vw solid #000; - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} ---fcc-editable-region-- -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-059.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-059.md deleted file mode 100644 index e1f6e74f64..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-059.md +++ /dev/null @@ -1,222 +0,0 @@ ---- -id: 5d822fd413a79914d39e9903 -title: Part 59 -challengeType: 0 -dashedName: part-59 ---- - -# --description-- - -On to the next building! Create a new variable called `--window-color3` in `:root` and give it a value of `#d98cb3`. This will be the secondary color for the pink buildings. - -# --hints-- - -You should define a new property variable `--window-color3`. - -```js -assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color3")); -``` - -You should give `--window-color3` a value of `#d98cb3`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color3")?.trim(), "#d98cb3"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css ---fcc-editable-region-- -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; -} ---fcc-editable-region-- -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-060.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-060.md deleted file mode 100644 index c46d40193e..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-060.md +++ /dev/null @@ -1,244 +0,0 @@ ---- -id: 5d822fd413a79914d39e9904 -title: Part 60 -challengeType: 0 -dashedName: part-60 ---- - -# --description-- - -So far, all the gradients you created have gone from top to bottom, that's the default direction. You can specify another direction by adding it before your colors like this: - -```css -gradient-type( - direction, - color1, - color2 -); -``` - -Fill in `.bb3` with a `repeating-linear-gradient`. Use `90deg` for the direction, your `building-color3` for the first two colors, and `window-color3` at `15%` for the third. When you don't specify a distance for a color, it will use the values that makes sense. In this case, the first two colors will default to `0%` and `7.5%` because it starts at `0%`, and `7.5%` is half of the `15%`. - -# --hints-- - -You should give `.bb3` a `background` using `repeating-linear-gradient`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.background, "repeating-linear-gradient"); -``` - -You should use `90deg` for the direction in the first argument of `repeating-linear-gradient`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg"); -``` - -You should use `--building-color3` for the first two colors. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3)"); -``` - -You should use `--window-color3` at `15%` for the third color. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3),var(--window-color3)15%)"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} ---fcc-editable-region-- -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); -} ---fcc-editable-region-- -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-061.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-061.md deleted file mode 100644 index 8f877540df..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-061.md +++ /dev/null @@ -1,222 +0,0 @@ ---- -id: 5d822fd413a79914d39e9905 -title: Part 61 -challengeType: 0 -dashedName: part-61 ---- - -# --description-- - -Remove the `background-color` property and value from `.bb3` since you are using the gradient as the background now. - -# --hints-- - -You should remove the `background-color` from `.bb3`. - -```js -assert.notMatch(code, /\.bb3\s*\{\s*[^}]*?background-color[^}]*?\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} ---fcc-editable-region-- -.bb3 { - width: 10%; - height: 55%; - background-color: var(--building-color3); - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} ---fcc-editable-region-- -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-062.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-062.md deleted file mode 100644 index 9a10f37717..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-062.md +++ /dev/null @@ -1,248 +0,0 @@ ---- -id: 5d822fd413a79914d39e9906 -title: Part 62 -challengeType: 0 -dashedName: part-62 ---- - -# --description-- - -The next building will have three sections. Nest three `div` elements within `.bb4`. Give them the classes of `bb4a`, `bb4b` and `bb4c` in that order. - -# --hints-- - -You should add three `div` elements within `.bb4`. - -```js -assert.equal(document.querySelector("div.bb4")?.children?.length, 3); -``` - -You should give the first new `div` a class of `bb4a`. - -```js -assert.exists(document.querySelector("div.bb4 > div.bb4a")); -``` - -You should give the second new `div` a class of `bb4b`. - -```js -assert.exists(document.querySelector("div.bb4 > div.bb4a")); -``` - -You should give the third new `div` a class of `bb4c`. - -```js -assert.exists(document.querySelector("div.bb4 > div.bb4a")); -``` - -You should place the new `div` elements in this order `.bb4a + .bb4b + .bb4c`. - -```js -assert.exists(document.querySelector("div.bb4a + div.bb4b")); -assert.exists(document.querySelector("div.bb4b + div.bb4c")); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
---fcc-editable-region-- -
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-063.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-063.md deleted file mode 100644 index 16c5e7305a..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-063.md +++ /dev/null @@ -1,257 +0,0 @@ ---- -id: 5d822fd413a79914d39e9907 -title: Part 63 -challengeType: 0 -dashedName: part-63 ---- - -# --description-- - -Give the new `div` elements these `width` and `height` values: `3%` and `10%` to `.bb4a`, `80%` and `5%` to `.bb4b`, and `100%` and `85%` to `.bb4c`. - -# --hints-- - -You should give `.bb4a` a `width` of `3%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.width, "3%"); -``` - -You should give `.bb4a` a `height` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.height, "10%"); -``` - -You should give `.bb4b` a `width` of `80%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.width, "80%"); -``` - -You should give `.bb4b` a `height` of `5%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.height, "5%"); -``` - -You should give `.bb4c` a `width` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.width, "100%"); -``` - -You should give `.bb4c` a `height` of `85%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.height, "85%"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} ---fcc-editable-region-- - ---fcc-editable-region-- -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-064.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-064.md deleted file mode 100644 index d01d252375..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-064.md +++ /dev/null @@ -1,257 +0,0 @@ ---- -id: 5d822fd413a79914d39e9908 -title: Part 64 -challengeType: 0 -dashedName: part-64 ---- - -# --description-- - -Remove the `background-color` property and value from `.bb4`, and add it to the three new sections `.bb4a`, `.bb4b`, and `.bb4c`, so only the sections are filled. - -# --hints-- - -You should remove the `background-color` from `.bb4`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb4")?.backgroundColor); -``` - -You should give `.bb4a` a `background-color` of `--building-color4`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.backgroundColor.trim(), "var(--building-color4)"); -``` - -You should give `.bb4b` a `background-color` of `--building-color4`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.backgroundColor.trim(), "var(--building-color4)"); -``` - -You should give `.bb4c` a `background-color` of `--building-color4`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.backgroundColor.trim(), "var(--building-color4)"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} ---fcc-editable-region-- -.bb4 { - width: 11%; - height: 58%; - background-color: var(--building-color4); -} - -.bb4a { - width: 3%; - height: 10%; -} - -.bb4b { - width: 80%; - height: 5%; -} - -.bb4c { - width: 100%; - height: 85%; -} ---fcc-editable-region-- -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-065.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-065.md deleted file mode 100644 index 19619b732d..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-065.md +++ /dev/null @@ -1,244 +0,0 @@ ---- -id: 5d822fd413a79914d39e9909 -title: Part 65 -challengeType: 0 -dashedName: part-65 ---- - -# --description-- - -You want `.bb4` to share the properties of `.bb1` that center the sections. Instead of duplicating that code, create a new class above the background building comment called `building-wrap`. Leave it empty for now; this class will be used in a few places to save you some coding. - -# --hints-- - -You should create a new class declaration called `building-wrap`. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle(".building-wrap")); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} ---fcc-editable-region-- - ---fcc-editable-region-- -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-066.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-066.md deleted file mode 100644 index 9938257199..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-066.md +++ /dev/null @@ -1,276 +0,0 @@ ---- -id: 5d822fd413a79914d39e990a -title: Part 66 -challengeType: 0 -dashedName: part-66 ---- - -# --description-- - -Move the `display`, `flex-direction`, and `align-items` properties and values from `.bb1` to the new `building-wrap` class. - -# --hints-- - -You should remove `display` from `.bb1`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.display); -``` - -You should move `display` with a value of `flex` to `.building-wrap`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.display, "flex"); -``` - -You should remove `flex-direction` from `.bb1`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.flexDirection); -``` - -You should move `flex-direction` with a value of `column` to `.building-wrap`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.flexDirection, "column"); -``` - -You should remove `align-items` from `.bb1`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.alignItems); -``` - -You should move `align-items` with a value of `center` to `.building-wrap`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.alignItems, "center"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} ---fcc-editable-region-- -.building-wrap { - -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; - display: flex; - flex-direction: column; - align-items: center; -} ---fcc-editable-region-- -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-067.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-067.md deleted file mode 100644 index 62c94234f8..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-067.md +++ /dev/null @@ -1,253 +0,0 @@ ---- -id: 5d822fd413a79914d39e990b -title: Part 67 -challengeType: 0 -dashedName: part-67 ---- - -# --description-- - -Add the new `building-wrap` class to the `.bb1` and `.bb4` elements. This will apply the centering properties to the buildings that need it. - -# --hints-- - -You should add `building-wrap` to the `.bb1` element. - -```js -assert.exists(document.querySelector("div.bb1.building-wrap")); -``` - -You should add `building-wrap` to the `.bb4` element. - -```js -assert.exists(document.querySelector("div.bb4.building-wrap")); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
---fcc-editable-region-- -
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-068.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-068.md deleted file mode 100644 index 073774fed9..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-068.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -id: 5d822fd413a79914d39e990c -title: Part 68 -challengeType: 0 -dashedName: part-68 ---- - -# --description-- - -Create a new variable called `--window-color4` in `:root` and give it a value of `#8cb3d9`. This will be the secondary color for the last background building. - -# --hints-- - -You should define a new property variable `--window-color4`. - -```js -assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color4")); -``` - -You should give `--window-color4` a value of `#8cb3d9`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color4")?.trim(), "#8cb3d9"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css ---fcc-editable-region-- -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; -} ---fcc-editable-region-- -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-069.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-069.md deleted file mode 100644 index eef1666be9..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-069.md +++ /dev/null @@ -1,254 +0,0 @@ ---- -id: 5d822fd413a79914d39e990d -title: Part 69 -challengeType: 0 -dashedName: part-69 ---- - -# --description-- - -Nest four new `div` elements within `.bb4c`, give them all the class of `bb4-window`. These will be windows for this building. - -# --hints-- - -You should add four `div` elements to `.bb4c`. - -```js -assert.equal(document.querySelector(".bb4c")?.children?.length, 4); -``` - -You should give each new `div` a class of `bb4-window`. - -```js -assert.equal(document.querySelectorAll("div.bb4c > div.bb4-window")?.length, 4); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
---fcc-editable-region-- -
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-070.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-070.md deleted file mode 100644 index 7184a01644..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-070.md +++ /dev/null @@ -1,264 +0,0 @@ ---- -id: 5d822fd413a79914d39e990e -title: Part 70 -challengeType: 0 -dashedName: part-70 ---- - -# --description-- - -Give the `bb4-window` class a `width` of `18%`, a `height` of `90%`, and add your `--window-color4` variable as the `background-color`. - -# --hints-- - -You should give `.bb4-window` a `width` of `18%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.width, "18%"); -``` - -You should give `.bb4-window` a `height` of `90%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.height, "90%"); -``` - -You should give `.bb4-window` a `background-color` of `--window-color4`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.backgroundColor.trim(), "var(--window-color4)"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} ---fcc-editable-region-- - ---fcc-editable-region-- -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-071.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-071.md deleted file mode 100644 index d212208d9a..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-071.md +++ /dev/null @@ -1,285 +0,0 @@ ---- -id: 5d822fd413a79914d39e990f -title: Part 71 -challengeType: 0 -dashedName: part-71 ---- - -# --description-- - -The windows are stacked on top of each other at the left of the section, behind the purple building. Add a new class below `.building-wrap` called `.window-wrap`, and add these properties to it: - -```css -display: flex; -align-items: center; -justify-content: space-evenly; -``` - -This will be used in a few places to center window elements vertically, and evenly space them in their parent. - -# --hints-- - -You should create a `.window-wrap` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle(".window-wrap")); -``` - -You should give `.window-wrap` a `display` of `flex`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.display, "flex"); -``` - -You should give `.window-wrap` an `align-items` of `center`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.alignItems, "center"); -``` - -You should give `.window-wrap` a `justify-content` of `space-evenly`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.justifyContent, "space-evenly"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} ---fcc-editable-region-- - ---fcc-editable-region-- -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-072.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-072.md deleted file mode 100644 index d6a3fee472..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-072.md +++ /dev/null @@ -1,265 +0,0 @@ ---- -id: 5d822fd413a79914d39e9910 -title: Part 72 -challengeType: 0 -dashedName: part-72 ---- - -# --description-- - -Add the new `window-wrap` class to the `.bb4c` element. - -# --hints-- - -You should add a class of `window-wrap` to `.bb4c`. - -```js -assert.exists(document.querySelector("div.bb4c.window-wrap")); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
-
-
-
-
-
---fcc-editable-region-- -
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-073.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-073.md deleted file mode 100644 index 80a18f9dba..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-073.md +++ /dev/null @@ -1,290 +0,0 @@ ---- -id: 5d822fd413a79914d39e9911 -title: Part 73 -challengeType: 0 -dashedName: part-73 ---- - -# --description-- - -Looks good! On to the foreground buildings! Turn the `.fb1` building into three sections by nesting three new `div` elements within it. Give them the classes of `fb1a`, `fb1b` and `fb1c`, in that order. - -# --hints-- - -You should add three `div` elements within `.fb1`. - -```js -assert.equal(document.querySelector("div.fb1")?.children?.length, 3); -``` - -You should give the first new `div` a class of `fb1a`. - -```js -assert.exists(document.querySelector("div.fb1 > div.fb1a")); -``` - -You should give the second new `div` a class of `fbab`. - -```js -assert.exists(document.querySelector("div.fb1 > div.fb1b")); -``` - -You should give the third new `div` a class of `fb1c`. - -```js -assert.exists(document.querySelector("div.fb1 > div.fb1c")); -``` - -You should place the new `div` elements in this order `.fb1a + .fb1b + .fb1c`. - -```js -assert.exists(document.querySelector("div.fb1a + div.fb1b")); -assert.exists(document.querySelector("div.fb1b + div.fb1c")); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
---fcc-editable-region-- -
---fcc-editable-region-- -
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-074.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-074.md deleted file mode 100644 index 8e41d908da..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-074.md +++ /dev/null @@ -1,286 +0,0 @@ ---- -id: 5d822fd413a79914d39e9912 -title: Part 74 -challengeType: 0 -dashedName: part-74 ---- - -# --description-- - -Give `.fb1b` a `width` of `60%` and `height` of `10%`, and `.fb1c` a `width` of `100%` and `height` of `80%`. - -# --hints-- - -You should give `.fb1b` a `width` of `60%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.width, "60%"); -``` - -You should give `.fb1b` a `height` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.height, "10%"); -``` - -You should give `.fb1c` a `width` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.width, "100%"); -``` - -You should give `.fb1c` a `height` of `80%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.height, "80%"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} ---fcc-editable-region-- - ---fcc-editable-region-- -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-075.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-075.md deleted file mode 100644 index 45f8ac994e..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-075.md +++ /dev/null @@ -1,279 +0,0 @@ ---- -id: 5d822fd413a79914d39e9913 -title: Part 75 -challengeType: 0 -dashedName: part-75 ---- - -# --description-- - -Add the `building-wrap` class to the `.fb1` element to center the sections. - -# --hints-- - -You should add the class `building-wrap` to `.fb1`. - -```js -assert.exists(document.querySelector("div.fb1.building-wrap")); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
---fcc-editable-region-- -
-
-
-
-
---fcc-editable-region-- -
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb1b { - width: 60%; - height: 10%; -} - -.fb1c { - width: 100%; - height: 80%; -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-076.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-076.md deleted file mode 100644 index e5d039c1fc..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-076.md +++ /dev/null @@ -1,283 +0,0 @@ ---- -id: 5d822fd413a79914d39e9914 -title: Part 76 -challengeType: 0 -dashedName: part-76 ---- - -# --description-- - -Move the `background-color` property and value from `.fb1` to `.fb1b`. - -# --hints-- - -You should remove `background-color` from `.fb1`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb1")?.backgroundColor); -``` - -You should add a `background-color` of `--building-color4` to `.fb1b`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.backgroundColor.trim(), "var(--building-color4)"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ ---fcc-editable-region-- -.fb1 { - width: 10%; - height: 60%; - background-color: var(--building-color4); -} - -.fb1b { - width: 60%; - height: 10%; -} ---fcc-editable-region-- -.fb1c { - width: 100%; - height: 80%; -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-077.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-077.md deleted file mode 100644 index e32e24c575..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-077.md +++ /dev/null @@ -1,296 +0,0 @@ ---- -id: 5d822fd413a79914d39e9916 -title: Part 77 -challengeType: 0 -dashedName: part-77 ---- - -# --description-- - -Don't worry about the space at the bottom, everything will get moved down later when you add some height to the element at the top of the building. - -Add a `repeating-linear-gradient` to `.fb1c` with a `90deg` angle, your `--building-color4` from `0%` to `10%` and `transparent` from `10%` to `15%`. - -# --hints-- - -You should give `.fb1c` a `background` with a `repeating-linear-gradient`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.background, "repeating-linear-gradient"); -``` - -You should use a direction of `90deg`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), "repeating-linear-gradient(90deg"); -``` - -You should use a first color of `--building-color4` from `0%` to `10%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%/); -``` - -You should use a second color of `transparent` from `10%` to `15%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} ---fcc-editable-region-- -.fb1c { - width: 100%; - height: 80%; -} ---fcc-editable-region-- -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-078.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-078.md deleted file mode 100644 index 53da66d55e..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-078.md +++ /dev/null @@ -1,306 +0,0 @@ ---- -id: 5d822fd413a79914d39e9917 -title: Part 78 -challengeType: 0 -dashedName: part-78 ---- - -# --description-- - -You can add multiple gradients to an element by separating them with a comma (`,`) like this: - -```css -gradient1( - colors -), -gradient2( - colors -); -``` - -Add a `repeating-linear-gradient` to `.fb1c` below the one that's there; use your `--building-color4` from `0%` to `10%` and `--window-color4` from `10%` and `90%`. This will fill in behind the gradient you added last. - -# --hints-- - -You should not alter the first `repeating-linear-gradient`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\)/); -``` - -You should add a `repeating-linear-gradient` with a first color of `--building-color4` from `0%` to `10%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color4\)(0%)?,var\(--building-color4\)10%/); -``` - -You should use a second color of `--window-color4` from `10%` to `90%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\),repeating-linear-gradient\(var\(--building-color4\)(0%)?,var\(--building-color4\)10%,var\(--window-color4\)10%,var\(--window-color4\)90%\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} ---fcc-editable-region-- -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ) -} ---fcc-editable-region-- -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-079.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-079.md deleted file mode 100644 index 427ff06cca..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-079.md +++ /dev/null @@ -1,297 +0,0 @@ ---- -id: 5d822fd413a79914d39e9918 -title: Part 79 -challengeType: 0 -dashedName: part-79 ---- - -# --description-- - -You're going to use some more border tricks for the top section. Add a `border-bottom` with a value of `7vh solid var(--building-color4)` to `.fb1a`. This will put a `7vh` height border on the bottom. But since the element has zero size, it only shows up as a 2px wide line from the 1px border that is on all the elements. - -# --hints-- - -You should give `.fb1a` a `border-bottom`. - -```js -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom); -``` - -You should use a `border-bottom` of `7vh solid var(--building-color4)`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom.trim(), "7vh solid var(--building-color4)"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} ---fcc-editable-region-- - ---fcc-editable-region-- -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-080.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-080.md deleted file mode 100644 index 4c177a753f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-080.md +++ /dev/null @@ -1,300 +0,0 @@ ---- -id: 5d822fd413a79914d39e9919 -title: Part 80 -challengeType: 0 -dashedName: part-80 ---- - -# --description-- - -When you make the left and right borders bigger, the border on the bottom will expand to be the width of the combined left and right border widths. Add `2vw solid transparent` as the value of the `border-left` and `border-right` properties of `.fb1a`. They will be invisible, but it will make the border on the bottom `4vw` wide. - -# --hints-- - -You should give `.fb1a` a `border-left` of `2vw solid transparent`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderLeft, "2vw solid transparent"); -``` - -You should give `.fb1a` a `border-right` of `2vw solid transparent`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderRight, "2vw solid transparent"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} ---fcc-editable-region-- -.fb1a { - border-bottom: 7vh solid var(--building-color4); -} ---fcc-editable-region-- -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-081.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-081.md deleted file mode 100644 index 109408b6b1..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-081.md +++ /dev/null @@ -1,311 +0,0 @@ ---- -id: 5d822fd413a79914d39e991a -title: Part 81 -challengeType: 0 -dashedName: part-81 ---- - -# --description-- - -On to the next building! Nest two `div` elements within `.fb2` and give them classes of `fb2a` and `fb2b`, in that order. - -# --hints-- - -You should add two `div` elements within `.fb2`. - -```js -assert.equal(document.querySelectorAll("div.fb2 > div")?.length, 2); -``` - -You should give the first new `div` a class of `fb2a`. - -```js -assert.exists(document.querySelector("div.fb2 > div.fb2a")); -assert(document.querySelector("div.fb2 > div.fb2a") === document.querySelector("div.fb2")?.firstElementChild); -``` - -You should give the second new `div` a class of `fb2b`. - -```js -assert.exists(document.querySelector("div.fb2 > div.fb2b")); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
---fcc-editable-region-- -
---fcc-editable-region-- -
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-082.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-082.md deleted file mode 100644 index bf324a2956..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-082.md +++ /dev/null @@ -1,313 +0,0 @@ ---- -id: 5d822fd413a79914d39e991b -title: Part 82 -challengeType: 0 -dashedName: part-82 ---- - -# --description-- - -Give `.fb2a` a `width` of `100%` and `.fb2b` a `width` of `100%` and `height` of `75%`. - -# --hints-- - -You should give `.fb2a` a `width` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.width, "100%"); -``` - -You should give `.fb2b` a `width` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.width, "100%"); -``` - -You should give `.fb2b` a `height` of `75%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.height, "75%"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} ---fcc-editable-region-- - ---fcc-editable-region-- -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-083.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-083.md deleted file mode 100644 index 24184743ac..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-083.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 5d822fd413a79914d39e991c -title: Part 83 -challengeType: 0 -dashedName: part-83 ---- - -# --description-- - -Nest three `div` elements within `.fb2b` and give them a class of `fb2-window`. These will be windows for this section of the building. - -# --hints-- - -You should add three `div` elements within `.fb2b`. - -```js -assert.equal(document.querySelectorAll("div.fb2b > div")?.length, 3); -``` - -You should give the three new `div` elements each a class of `fb2-window`. - -```js -assert.equal(document.querySelectorAll("div.fb2-window")?.length, 3); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
---fcc-editable-region-- -
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb2a { - width: 100%; -} - -.fb2b { - width: 100%; - height: 75%; -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-084.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-084.md deleted file mode 100644 index b775b0fe5f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-084.md +++ /dev/null @@ -1,314 +0,0 @@ ---- -id: 5d822fd413a79914d39e991d -title: Part 84 -challengeType: 0 -dashedName: part-84 ---- - -# --description-- - -Add your `window-wrap` class to `.fb2b` to position the new window elements. - -# --hints-- - -You should add the class `window-wrap` to `.fb2b`. - -```js -assert.exists(document.querySelector("div.fb2b.window-wrap")); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
-
-
-
-
---fcc-editable-region-- -
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb2a { - width: 100%; -} - -.fb2b { - width: 100%; - height: 75%; -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-085.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-085.md deleted file mode 100644 index 9326f714b2..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-085.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: 5d822fd413a79914d39e991e -title: Part 85 -challengeType: 0 -dashedName: part-85 ---- - -# --description-- - -Give the `.fb2-window` elements a `width` of `22%`, `height` of `100%`, and a `background-color` of your `--window-color3` variable. - -# --hints-- - -You should give the `.fb2-window` elements a `width` of `22%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.width, "22%"); -``` - -You should give the `.fb2-window` elements a `height` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.height, "100%"); -``` - -You should give the `.fb2-window` elements a `background-color` of `--window-color3`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.backgroundColor.trim(), "var(--window-color3)"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb2a { - width: 100%; -} - -.fb2b { - width: 100%; - height: 75%; -} ---fcc-editable-region-- - ---fcc-editable-region-- -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-086.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-086.md deleted file mode 100644 index 8caf7577c6..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-086.md +++ /dev/null @@ -1,323 +0,0 @@ ---- -id: 5d822fd413a79914d39e991f -title: Part 86 -challengeType: 0 -dashedName: part-86 ---- - -# --description-- - -Move the `background-color` property and value from `.fb2` to `.fb2b` to just color the section and not the container. - -# --hints-- - -You should remove the `background-color` property from `.fb2`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb2")?.backgroundColor); -``` - -You should give `.fb2b` a `background-color` of `--building-color3`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.backgroundColor.trim(), "var(--building-color3)"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} ---fcc-editable-region-- -.fb2 { - width: 10%; - height: 40%; - background-color: var(--building-color3); -} - -.fb2a { - width: 100%; -} - -.fb2b { - width: 100%; - height: 75%; -} ---fcc-editable-region-- -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-087.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-087.md deleted file mode 100644 index 50973d12a8..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-087.md +++ /dev/null @@ -1,329 +0,0 @@ ---- -id: 5d822fd413a79914d39e9920 -title: Part 87 -challengeType: 0 -dashedName: part-87 ---- - -# --description-- - -For `.fb2a`, add a `border-bottom` of `10vh solid var(--building-color3)`, and a `border-left` and `border-right` of `1vw solid transparent`. This time the border trick will create a trapezoid shape. - -# --hints-- - -You should give `.fb2a` a `border-bottom` of `10vh solid var(--building-color3)`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderBottom.trim(), "10vh solid var(--building-color3)"); -``` - -You should give `.fb2a` a `border-left` of `1vw solid transparent`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderLeft, "1vw solid transparent"); -``` - -You should give `.fb2a` a `border-right` of `1vw solid transparent`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderRight, "1vw solid transparent"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} ---fcc-editable-region-- -.fb2a { - width: 100%; -} ---fcc-editable-region-- -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-088.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-088.md deleted file mode 100644 index 6ccdfd4622..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-088.md +++ /dev/null @@ -1,347 +0,0 @@ ---- -id: 5d822fd413a79914d39e9921 -title: Part 88 -challengeType: 0 -dashedName: part-88 ---- - -# --description-- - -For the next building, nest four `div` elements within `.fb3` with classes of `fb3a`, `fb3b`, `fb3a` again, and `fb3b` again, in that order. This building will have four sections, and the top two will be almost the same as the bottom two. - -# --hints-- - -You should add four `div` elements within `.fb3`. - -```js -assert.equal(document.querySelectorAll("div.fb3 > div")?.length, 4); -``` - -You should give the first new `div` a class of `fb3a`. - -```js -assert.equal(document.querySelector("div.fb3").firstElementChild, document.querySelector("div.fb3a")); -``` - -You should give the second new `div` a class of `fb3b`. - -```js -assert.equal(document.querySelector("div.fb3 :nth-child(2)"), document.querySelector("div.fb3b")); -``` - -You should give the third new `div` a class of `fb3a`. - -```js -assert.equal(document.querySelector("div.fb3 :nth-child(3)"), document.querySelector("div.fb3b + div.fb3a")); -``` - -You should give the fourth new `div` a class of `fb3b`. - -```js -assert.exists(document.querySelector("div.fb3 :nth-child(4).fb3b")); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
---fcc-editable-region-- -
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-089.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-089.md deleted file mode 100644 index dc7197e55d..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-089.md +++ /dev/null @@ -1,346 +0,0 @@ ---- -id: 5d822fd413a79914d39e9922 -title: Part 89 -challengeType: 0 -dashedName: part-89 ---- - -# --description-- - -Give the `.fb3a` element a `width` of `80%` and `height` of `15%`. Then give the `.fb3b` element a `width` of `100%` and `height` of `35%`. - -# --hints-- - -You should give `.fb3a` a `width` of `80%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.width, "80%"); -``` - -You should give `.fb3a` a `height` of `15%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.height, "15%"); -``` - -You should give `.fb3b` a `width` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.width, "100%"); -``` - -You should give `.fb3b` a `height` of `35%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.height, "35%"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} ---fcc-editable-region-- - ---fcc-editable-region-- -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-090.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-090.md deleted file mode 100644 index bb0c2f514b..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-090.md +++ /dev/null @@ -1,347 +0,0 @@ ---- -id: 5d822fd413a79914d39e9923 -title: Part 90 -challengeType: 0 -dashedName: part-90 ---- - -# --description-- - -Remove the `background-color` property and value from `.fb3`, and add them to `.fb3a` and `.fb3b`. - -# --hints-- - -You should remove the `background-color` from `.fb3`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb3")?.backgroundColor); -``` - -You should give `.fb3a` a `background-color` of `--building-color1`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.backgroundColor.trim(), "var(--building-color1)"); -``` - -You should give `.fb3b` a `background-color` of `--building-color1`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.backgroundColor.trim(), "var(--building-color1)"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} ---fcc-editable-region-- -.fb3 { - width: 10%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3a { - width: 80%; - height: 15%; -} - -.fb3b { - width: 100%; - height: 35%; -} ---fcc-editable-region-- -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-091.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-091.md deleted file mode 100644 index 6be858bcdc..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-091.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 5d822fd413a79914d39e9924 -title: Part 91 -challengeType: 0 -dashedName: part-91 ---- - -# --description-- - -Add your `building-wrap` class to the `.fb3` element to center the sections. - -# --hints-- - -You should add the class `building-wrap` to `.fb3`. - -```js -assert.exists(document.querySelector("div.fb3.building-wrap")); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
-
-
-
-
-
---fcc-editable-region-- -
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-092.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-092.md deleted file mode 100644 index 934c17f77d..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-092.md +++ /dev/null @@ -1,345 +0,0 @@ ---- -id: 5d822fd413a79914d39e9925 -title: Part 92 -challengeType: 0 -dashedName: part-92 ---- - -# --description-- - -Nest three new `div` elements in the first `.fb3a` element. Give them each a class of `fb3-window`. These will be windows for this section. - -# --hints-- - -You should add three `div` elements within the first `.fb3a` element. - -```js -assert.equal(document.querySelectorAll("div.fb3a > div")?.length, 3); -``` - -You should give each new `div` a class of `fb3-window`. - -```js -assert.equal(document.querySelectorAll("div.fb3-window")?.length, 3) -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
---fcc-editable-region-- -
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-093.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-093.md deleted file mode 100644 index df2a8d48b7..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-093.md +++ /dev/null @@ -1,354 +0,0 @@ ---- -id: 5d822fd413a79914d39e9926 -title: Part 93 -challengeType: 0 -dashedName: part-93 ---- - -# --description-- - -Give the `.fb3-window` elements a `width` of `25%`, a `height` of `80%`, and use your `--window-color1` variable as the `background-color` value. - -# --hints-- - -You should give `.fb3-window` a `width` of `25%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.width, "25%"); -``` - -You should give `.fb3-window` a `height` of `80%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.height, "80%"); -``` - -You should give `.fb3-window` a `background-color` of `--window-color1`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.backgroundColor.trim(), "var(--window-color1)"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} ---fcc-editable-region-- - ---fcc-editable-region-- -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-094.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-094.md deleted file mode 100644 index 759f3108a6..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-094.md +++ /dev/null @@ -1,349 +0,0 @@ ---- -id: 5d822fd413a79914d39e9927 -title: Part 94 -challengeType: 0 -dashedName: part-94 ---- - -# --description-- - -Add your `window-wrap` class to the `.fb3a` element to center and space the windows. - -# --hints-- - -You should give `.fb3a` a class of `window-wrap`. - -```js -assert.exists(document.querySelector("div.fb3a.window-wrap")); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
-
-
-
-
---fcc-editable-region-- -
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-095.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-095.md deleted file mode 100644 index 791e0dd553..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-095.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 5d822fd413a79914d39e9928 -title: Part 95 -challengeType: 0 -dashedName: part-95 ---- - -# --description-- - -I'm not thrilled about that black for the windows anymore. Change the `--window-color1` value to `#bb99ff`. - -# --hints-- - -You should change the value of `--window-color1` to `#bb99ff`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color1")?.trim(), "#bb99ff"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css ---fcc-editable-region-- -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: black; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} ---fcc-editable-region-- -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-096.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-096.md deleted file mode 100644 index e2ffa35234..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-096.md +++ /dev/null @@ -1,361 +0,0 @@ ---- -id: 5d822fd413a79914d39e9929 -title: Part 96 -challengeType: 0 -dashedName: part-96 ---- - -# --description-- - -Only three more building to go. Nest two new `div` elements within the `.fb4` element and give them the classes of `fb4a` and `fb4b`, in that order. Remember that you sort of flipped the location of `.fb4` and `.fb5`, so it's the rightmost purple building you are working on now. - -# --hints-- - -You should add two `div` elements within `.fb4`. - -```js -assert.equal(document.querySelectorAll("div.fb4 > div")?.length, 2); -``` - -You should give the first new `div` a class of `fb4a`. - -```js -assert.exists(document.querySelector("div.fb4a")); -``` - -You should give the second new `div` a class of `fb4b`. - -```js -assert.exists(document.querySelector("div.fb4b")); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
---fcc-editable-region-- -
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-097.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-097.md deleted file mode 100644 index f37352eedb..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-097.md +++ /dev/null @@ -1,358 +0,0 @@ ---- -id: 5d822fd413a79914d39e992a -title: Part 97 -challengeType: 0 -dashedName: part-97 ---- - -# --description-- - -Give `.fb4b` a `width` of `100%` and `height` of `89%`. - -# --hints-- - -You should give `.fb4b` a `width` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.width, "100%"); -``` - -You should give `.fb4b` a `height` of `89%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.height, "89%"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} ---fcc-editable-region-- - ---fcc-editable-region-- -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-098.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-098.md deleted file mode 100644 index 87770986b0..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-098.md +++ /dev/null @@ -1,360 +0,0 @@ ---- -id: 5d822fd413a79914d39e992b -title: Part 98 -challengeType: 0 -dashedName: part-98 ---- - -# --description-- - -Add your `--building-color1` variable as value of the `background-color` property of `.fb4b`. Then, remove the `background-color` from `.fb4`. - -# --hints-- - -You should remove the `background-color` from `.fb4`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb4")?.backgroundColor); -``` - -You should give `.fb4b` a `background-color` of `--building-color1`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.backgroundColor.trim(), "var(--building-color1)"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} ---fcc-editable-region-- -.fb4 { - width: 8%; - height: 45%; - background-color: var(--building-color1); - position: relative; - left: 10%; -} - -.fb4b { - width: 100%; - height: 89%; -} ---fcc-editable-region-- -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-099.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-099.md deleted file mode 100644 index f31cd0844c..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-099.md +++ /dev/null @@ -1,363 +0,0 @@ ---- -id: 5d822fd413a79914d39e992c -title: Part 99 -challengeType: 0 -dashedName: part-99 ---- - -# --description-- - -Nest six `div` elements within `.fb4b` and give them all a class of `fb4-window`. - -# --hints-- - -You should add six `div` elements within `.fb4b`. - -```js -assert.equal(document.querySelectorAll("div.fb4b > div")?.length, 6); -``` - -You should give each new `div` a class of `fb4-window`. - -```js -assert.equal(document.querySelectorAll("div.fb4-window")?.length, 6); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- -
---fcc-editable-region-- -
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-100.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-100.md deleted file mode 100644 index 31f752029a..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-100.md +++ /dev/null @@ -1,376 +0,0 @@ ---- -id: 5d822fd413a79914d39e992d -title: Part 100 -challengeType: 0 -dashedName: part-100 ---- - -# --description-- - -Give the `.fb4-window` elements a `width` of `30%`, `height` of `10%`, and `border-radius` of `50%`. These will make some circular windows for this building. - -# --hints-- - -You should give `.fb4-window` a `width` of `30%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.width, "30%"); -``` - -You should give `.fb4-window` a `height` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.height, "10%"); -``` - -You should give `.fb4-window` a `border-radius` of `50%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.borderRadius, "50%"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); -} ---fcc-editable-region-- - ---fcc-editable-region-- -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-101.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-101.md deleted file mode 100644 index 9bb4540b01..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-101.md +++ /dev/null @@ -1,373 +0,0 @@ ---- -id: 5d822fd413a79914d39e992e -title: Part 101 -challengeType: 0 -dashedName: part-101 ---- - -# --description-- - -Fill in the windows with your secondary color for this building. Also add a `margin` of `10%` to give the windows some space. - -# --hints-- - -You should give `.fb4-window` a `background-color` of `--window-color1`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.backgroundColor.trim(), "var(--window-color1)"); -``` - -You should give `.fb4-window` a `margin` of `10%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.margin, "10%"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); -} ---fcc-editable-region-- -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; -} ---fcc-editable-region-- -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-102.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-102.md deleted file mode 100644 index 9df52f7221..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-102.md +++ /dev/null @@ -1,376 +0,0 @@ ---- -id: 5d822fd413a79914d39e992f -title: Part 102 -challengeType: 0 -dashedName: part-102 ---- - -# --description-- - -Add `display: flex` and `flex-wrap: wrap` to the window container. This will put your windows side by side, and then push them down to a new row when they don't fit. - -# --hints-- - -You should give `.fb4b` a `display` of `flex`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.display, "flex"); -``` - -You should give `.fb4b` a `flex-wrap` of `wrap`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.flexWrap, "wrap"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} ---fcc-editable-region-- -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); -} ---fcc-editable-region-- -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-103.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-103.md deleted file mode 100644 index f6d9f9b1de..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-103.md +++ /dev/null @@ -1,380 +0,0 @@ ---- -id: 5d822fd413a79914d39e9930 -title: Part 103 -challengeType: 0 -dashedName: part-103 ---- - -# --description-- - -This building is going to have another triangle on top. Give the top section a `border-top` of `5vh solid transparent`, and a `border-left` that is `8vw`, `solid`, and uses your building color variable as the color. - -# --hints-- - -You should give `.fb4a` a `border-top` of `5vh solid transparent`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderTop.trim(), "5vh solid transparent") -``` - -You should give `.fb4a` a `border-left` of `8vw solid var(--building-color1)`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderLeft.trim(), "8vw solid var(--building-color1)") -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} ---fcc-editable-region-- - ---fcc-editable-region-- -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} - -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-104.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-104.md deleted file mode 100644 index e51d237193..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-104.md +++ /dev/null @@ -1,395 +0,0 @@ ---- -id: 5d822fd413a79914d39e9932 -title: Part 104 -challengeType: 0 -dashedName: part-104 ---- - -# --description-- - -On to the next building! It's the green one in the foreground. Give it a `repeating-linear-gradient` with your building color from `0%` to `5%`, and `transparent` from `5%` to `10%`. - -# --hints-- - -You should give `.fb5` a `background` property. - -```js -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb5")?.background); -``` - -You should give the `background` a `repeating-linear-gradient`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle(".fb5")?.background, "repeating-linear-gradient"); -``` - -You should give the `repeating-linear-gradient` a first color of `--building-color2` from `0%` to `5%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%/); -``` - -You should give the `repeating-linear-gradient` a second color of `transparent` from `5%` to `10%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} ---fcc-editable-region-- -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; -} ---fcc-editable-region-- -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-105.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-105.md deleted file mode 100644 index d0bd2ea1f0..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-105.md +++ /dev/null @@ -1,401 +0,0 @@ ---- -id: 5d822fd413a79914d39e9933 -title: Part 105 -challengeType: 0 -dashedName: part-105 ---- - -# --description-- - -Add another `repeating-linear-gradient` below the one you just added. Give it a `90deg` direction, use your building color from `0%` to `12%` and window color `12%` to `44%`. This will make a bunch of rectangle windows. - -# --hints-- - -You should give `.fb5` a second `repeating-linear-gradient` in the `background` property. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient/); -``` - -You should give the second `repeating-linear-gradient` a direction of `90deg`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg/); -``` - -You should give the second `repeating-linear-gradient` a first color of `--building-color2` from `0%` to `12%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%/); -``` - -You should give the second `repeating-linear-gradient` a second color of `--window-color2` from `12%` to `44%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%,var\(--window-color2\)12%,var\(--window-color2\)44%\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} ---fcc-editable-region-- -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 5%, - transparent 5%, - transparent 10% - ) -} ---fcc-editable-region-- -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-106.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-106.md deleted file mode 100644 index 6ef0f7152f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-106.md +++ /dev/null @@ -1,390 +0,0 @@ ---- -id: 5d822fd413a79914d39e9915 -title: Part 106 -challengeType: 0 -dashedName: part-106 ---- - -# --description-- - -You don't need the `background-color` for this building anymore so you can remove that property. - -# --hints-- - -You should remove the `background-color` of `.fb5`. - -```js -assert.notMatch(code, /\.fb5\s*\{\s*[^}]*?background-color[^}]*?\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} ---fcc-editable-region-- -.fb5 { - width: 10%; - height: 33%; - background-color: var(--building-color2); - position: relative; - right: 10%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 5%, - transparent 5%, - transparent 10% - ), - repeating-linear-gradient( - 90deg, - var(--building-color2), - var(--building-color2) 12%, - var(--window-color2) 12%, - var(--window-color2) 44% - ); -} ---fcc-editable-region-- -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-107.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-107.md deleted file mode 100644 index cdb0673a5b..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-107.md +++ /dev/null @@ -1,408 +0,0 @@ ---- -id: 5d822fd413a79914d39e9934 -title: Part 107 -challengeType: 0 -dashedName: part-107 ---- - -# --description-- - -Finally! You made it to the last building! Add a repeating gradient to it with a `90deg` direction. Use the building color from `0%` to `10%` and `transparent` from `10%` to `30%`. - -# --hints-- - -You should add a `repeating-linear-gradient` to `.fb6` in the `background` property. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.background, "repeating-linear-gradient"); -``` - -You should give the `repeating-linear-gradient` a direction of `90deg`. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), "repeating-linear-gradient(90deg"); -``` - -You should give the `repeating-linear-gradient` a first color of `--building-color3` from `0%` to `10%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%/); -``` - -You should give the `repeating-linear-gradient` a second color of `transparent` from `10%` to `30%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - position: relative; - right: 10%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 5%, - transparent 5%, - transparent 10% - ), - repeating-linear-gradient( - 90deg, - var(--building-color2), - var(--building-color2) 12%, - var(--window-color2) 12%, - var(--window-color2) 44% - ); -} ---fcc-editable-region-- -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); -} ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-108.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-108.md deleted file mode 100644 index 05bb4f8999..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-108.md +++ /dev/null @@ -1,408 +0,0 @@ ---- -id: 5d822fd413a79914d39e9935 -title: Part 108 -challengeType: 0 -dashedName: part-108 ---- - -# --description-- - -Add another repeating gradient to this building; make it the same as the one you just added, except don't add the `90deg` direction and use your window color instead of the two `transparent` colors. - -# --hints-- - -You should give `.fb6` a second `repeating-linear-gradient` in the `background` property. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient/); -``` - -You should give the second `repeating-linear-gradient` a first color of `--building-color3` from `0%` to `10%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%/); -``` - -You should give the second `repeating-linear-gradient` a second color of `--window-color3` from `10%` to `30%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%,var\(--window-color3\)10%,var\(--window-color3\)30%\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - position: relative; - right: 10%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 5%, - transparent 5%, - transparent 10% - ), - repeating-linear-gradient( - 90deg, - var(--building-color2), - var(--building-color2) 12%, - var(--window-color2) 12%, - var(--window-color2) 44% - ); -} ---fcc-editable-region-- -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3) 10%, - transparent 10%, - transparent 30% - ) -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-109.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-109.md deleted file mode 100644 index db2ce83057..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-109.md +++ /dev/null @@ -1,403 +0,0 @@ ---- -id: 5d822fd413a79914d39e9931 -title: Part 109 -challengeType: 0 -dashedName: part-109 ---- - -# --description-- - -You can remove the `background-color` for this building now, since it isn't needed. - -# --hints-- - -You should remove the `background-color` of `.fb6`. - -```js -assert.notMatch(code, /\.fb6\s*\{\s*[^}]*?background-color[^}]*?\}/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - border: 1px solid black; - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - position: relative; - right: 10%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 5%, - transparent 5%, - transparent 10% - ), - repeating-linear-gradient( - 90deg, - var(--building-color2), - var(--building-color2) 12%, - var(--window-color2) 12%, - var(--window-color2) 44% - ); -} ---fcc-editable-region-- -.fb6 { - width: 9%; - height: 38%; - background-color: var(--building-color3); - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3) 10%, - transparent 10%, - transparent 30% - ), - repeating-linear-gradient( - var(--building-color3), - var(--building-color3) 10%, - var(--window-color3) 10%, - var(--window-color3) 30% - ); -} ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-110.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-110.md deleted file mode 100644 index 7a8418e151..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-110.md +++ /dev/null @@ -1,401 +0,0 @@ ---- -id: 5d822fd413a79914d39e9936 -title: Part 110 -challengeType: 0 -dashedName: part-110 ---- - -# --description-- - -Okay, the buildings are done. Go back to the `*` selector and remove the `border` you applied to everything at the beginning and the buildings will come together. - -# --hints-- - -You should remove the `border` from the `*` selector. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle("*")?.border); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} ---fcc-editable-region-- -* { - border: 1px solid black; - box-sizing: border-box; -} ---fcc-editable-region-- -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - position: relative; - right: 10%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 5%, - transparent 5%, - transparent 10% - ), - repeating-linear-gradient( - 90deg, - var(--building-color2), - var(--building-color2) 12%, - var(--window-color2) 12%, - var(--window-color2) 44% - ); -} - -.fb6 { - width: 9%; - height: 38%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3) 10%, - transparent 10%, - transparent 30% - ), - repeating-linear-gradient( - var(--building-color3), - var(--building-color3) 10%, - var(--window-color3) 10%, - var(--window-color3) 30% - ); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-111.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-111.md deleted file mode 100644 index 7c289d6e2c..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-111.md +++ /dev/null @@ -1,402 +0,0 @@ ---- -id: 5d822fd413a79914d39e9937 -title: Part 111 -challengeType: 0 -dashedName: part-111 ---- - -# --description-- - -Add `sky` as a second class to the `.background-buildings` element. You are going to make a background for the skyline. - -# --hints-- - -You should add a class of `sky` to `.background-buildings`. - -```js -assert.exists(document.querySelector("div.background-buildings.sky")); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - ---fcc-editable-region-- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
---fcc-editable-region-- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - position: relative; - right: 10%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 5%, - transparent 5%, - transparent 10% - ), - repeating-linear-gradient( - 90deg, - var(--building-color2), - var(--building-color2) 12%, - var(--window-color2) 12%, - var(--window-color2) 44% - ); -} - -.fb6 { - width: 9%; - height: 38%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3) 10%, - transparent 10%, - transparent 30% - ), - repeating-linear-gradient( - var(--building-color3), - var(--building-color3) 10%, - var(--window-color3) 10%, - var(--window-color3) 30% - ); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-112.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-112.md deleted file mode 100644 index aebfa50ab6..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-112.md +++ /dev/null @@ -1,420 +0,0 @@ ---- -id: 5d822fd413a79914d39e9938 -title: Part 112 -challengeType: 0 -dashedName: part-112 ---- - -# --description-- - -Give the `sky` class a `radial-gradient`. Use `#ffcf33` from `0%` to `20%`, `#ffff66` at `21%`, and `#bbeeff` at `100%`. This will add circular gradient to the background that will be your sun. - -# --hints-- - -You should give `.sky` a `radial-gradient` in the `background` property. - -```js -assert.include(new __helpers.CSSHelp(document).getStyle(".sky")?.background, "radial-gradient"); -``` - -You should give the `radial-gradient` a first color of `#ffcf33`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%/); -``` - -You should give the `radial-gradient` a second color of `#ffff66` at `21%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%/); -``` - -You should give the `radial-gradient` a third color of `#bbeeff` at `100%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} ---fcc-editable-region-- - ---fcc-editable-region-- -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - position: relative; - right: 10%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 5%, - transparent 5%, - transparent 10% - ), - repeating-linear-gradient( - 90deg, - var(--building-color2), - var(--building-color2) 12%, - var(--window-color2) 12%, - var(--window-color2) 44% - ); -} - -.fb6 { - width: 9%; - height: 38%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3) 10%, - transparent 10%, - transparent 30% - ), - repeating-linear-gradient( - var(--building-color3), - var(--building-color3) 10%, - var(--window-color3) 10%, - var(--window-color3) 30% - ); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-113.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-113.md deleted file mode 100644 index 0af4218a33..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-113.md +++ /dev/null @@ -1,409 +0,0 @@ ---- -id: 5d822fd413a79914d39e9939 -title: Part 113 -challengeType: 0 -dashedName: part-113 ---- - -# --description-- - -At the top of the sky gradient color list, where you would put a direction for the gradient; add `circle closest-corner at 15% 15%,`. This will move the start of the gradient to `15%` from the top and left. It will make it end at the `closest-corner` and it will maintain a `circle` shape. These are some keywords built into gradients to describe how it behaves. - -# --hints-- - -You should give the `.sky` `radial-gradient` a direction of `circle closest-corner at 15% 15%`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(circle closest-corner at 15% 15%, rgb\(255, 207, 51\)|( 0%), rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} ---fcc-editable-region-- -.sky { - background: radial-gradient( - #ffcf33, - #ffcf33 20%, - #ffff66 21%, - #bbeeff 100% - ); -} ---fcc-editable-region-- -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - position: relative; - right: 10%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 5%, - transparent 5%, - transparent 10% - ), - repeating-linear-gradient( - 90deg, - var(--building-color2), - var(--building-color2) 12%, - var(--window-color2) 12%, - var(--window-color2) 44% - ); -} - -.fb6 { - width: 9%; - height: 38%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3) 10%, - transparent 10%, - transparent 30% - ), - repeating-linear-gradient( - var(--building-color3), - var(--building-color3) 10%, - var(--window-color3) 10%, - var(--window-color3) 30% - ); -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-114.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-114.md deleted file mode 100644 index b4a019003d..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-114.md +++ /dev/null @@ -1,421 +0,0 @@ ---- -id: 5d822fd413a79914d39e993a -title: Part 114 -challengeType: 0 -dashedName: part-114 ---- - -# --description-- - -A media query can be used to change styles based on certain conditions, and they look like this: - -```css -@media (condition) { - -} -``` - -Add an empty media query at the bottom of your stylesheet with a condition of `max-width: 1000px`. Styles added in here will take effect when the document size is 1000px wide or less. - -# --hints-- - -You should add an empty media query with `max-width: 1000px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getCSSRules("media")?.[0]?.media?.mediaText, '(max-width: 1000px)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -.sky { - background: radial-gradient( - closest-corner circle at 15% 15%, - #ffcf33, - #ffcf33 20%, - #ffff66 21%, - #bbeeff 100% - ); -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - position: relative; - right: 10%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 5%, - transparent 5%, - transparent 10% - ), - repeating-linear-gradient( - 90deg, - var(--building-color2), - var(--building-color2) 12%, - var(--window-color2) 12%, - var(--window-color2) 44% - ); -} - -.fb6 { - width: 9%; - height: 38%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3) 10%, - transparent 10%, - transparent 30% - ), - repeating-linear-gradient( - var(--building-color3), - var(--building-color3) 10%, - var(--window-color3) 10%, - var(--window-color3) 30% - ); -} ---fcc-editable-region-- - ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-115.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-115.md deleted file mode 100644 index c9487b9c44..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-115.md +++ /dev/null @@ -1,423 +0,0 @@ ---- -id: 5d822fd413a79914d39e993b -title: Part 115 -challengeType: 0 -dashedName: part-115 ---- - -# --description-- - -Copy and paste your whole `sky` class along with all of its properties and values into the media query. You are going to make another color scheme for the skyline that changes it from day to night. - -Note: You are going to need to scroll past the editable region to copy the class. - -# --hints-- - -You should not delete the existing `.sky` declaration. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.getPropVal('background', true), /radial-gradient\(circleclosest-cornerat15%15%,rgb\(255,207,51\)(0%)?,rgb\(255,207,51\)20%,rgb\(255,255,102\)21%,rgb\(187,238,255\)100%\)/); -``` - -You should copy the existing `.sky` declaration into the media query. - -```js -assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s*(0%)?\s*,\s*rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s+20%\s*,\s*rgb\(\s*255\s*,\s*255\s*,\s*102\s*\)\s+21%\s*,\s*rgb\(\s*187\s*,\s*238\s*,\s*255\s*\)\s+100%\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -.sky { - background: radial-gradient( - closest-corner circle at 15% 15%, - #ffcf33, - #ffcf33 20%, - #ffff66 21%, - #bbeeff 100% - ); -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - position: relative; - right: 10%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 5%, - transparent 5%, - transparent 10% - ), - repeating-linear-gradient( - 90deg, - var(--building-color2), - var(--building-color2) 12%, - var(--window-color2) 12%, - var(--window-color2) 44% - ); -} - -.fb6 { - width: 9%; - height: 38%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3) 10%, - transparent 10%, - transparent 30% - ), - repeating-linear-gradient( - var(--building-color3), - var(--building-color3) 10%, - var(--window-color3) 10%, - var(--window-color3) 30% - ); -} ---fcc-editable-region-- -@media (max-width: 1000px) { - -} ---fcc-editable-region-- - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-116.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-116.md deleted file mode 100644 index 45daeee048..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-116.md +++ /dev/null @@ -1,436 +0,0 @@ ---- -id: 5d822fd413a79914d39e993c -title: Part 116 -challengeType: 0 -dashedName: part-116 ---- - -# --description-- - -In the `sky` class of the media query, change the two `#ffcf33` color values to `#ccc`, the `#ffff66` to `#445`, and the `#bbeeff` to `#223`. Then you can resize your window to see the background change colors. - -# --hints-- - -You should change the first color values from `#ffcf33` to `#ccc`. - -```js -assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%/); -``` - -You should change the second color value from `#ffff66` to `#445`. - -```js -assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%/); -``` - -You should change the third color value from `#bbeeff` to `#223`. - -```js -assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%\s*,\s*rgb\(\s*34\s*,\s*34\s*,\s*51\s*\)\s+100%\s*\)/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -.sky { - background: radial-gradient( -closest-corner circle at 15% 15%, -#ffcf33, -#ffcf33 20%, -#ffff66 21%, -#bbeeff 100% - ); -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( -var(--building-color1) 50%, -var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( -var(--building-color1), -var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( -var(--building-color2), -var(--building-color2) 6%, -var(--window-color2) 6%, -var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( -90deg, -var(--building-color3), -var(--building-color3), -var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( -90deg, -var(--building-color4), -var(--building-color4) 10%, -transparent 10%, -transparent 15% - ), - repeating-linear-gradient( -var(--building-color4), -var(--building-color4) 10%, -var(--window-color4) 10%, -var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - position: relative; - right: 10%; - background: repeating-linear-gradient( -var(--building-color2), -var(--building-color2) 5%, -transparent 5%, -transparent 10% - ), - repeating-linear-gradient( -90deg, -var(--building-color2), -var(--building-color2) 12%, -var(--window-color2) 12%, -var(--window-color2) 44% - ); -} - -.fb6 { - width: 9%; - height: 38%; - background: repeating-linear-gradient( -90deg, -var(--building-color3), -var(--building-color3) 10%, -transparent 10%, -transparent 30% - ), - repeating-linear-gradient( -var(--building-color3), -var(--building-color3) 10%, -var(--window-color3) 10%, -var(--window-color3) 30% - ); -} - -@media (max-width: 1000px) { ---fcc-editable-region-- - .sky { - background: radial-gradient( - closest-corner circle at 15% 15%, - #ffcf33, - #ffcf33 20%, - #ffff66 21%, - #bbeeff 100% -); - } ---fcc-editable-region-- -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-117.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-117.md deleted file mode 100644 index f8233bd788..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-117.md +++ /dev/null @@ -1,448 +0,0 @@ ---- -id: 5d822fd413a79914d39e993d -title: Part 117 -challengeType: 0 -dashedName: part-117 ---- - -# --description-- - -Add a `:root` selector to the top of your media query. Then redefine all four of the `--building-color` variables to use the value `#000` there. - -# --hints-- - -You should add a `:root` selector to the media query. - -```js -``` - -You should add `--building-color1` with a value of `#000`. - -```js -assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color1")?.trim(), "#000"); -``` - -You should add `--building-color2` with a value of `#000`. - -```js -assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color2")?.trim(), "#000"); -``` - -You should add `--building-color3` with a value of `#000`. - -```js -assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color3")?.trim(), "#000"); -``` - -You should add `--building-color4` with a value of `#000`. - -```js -assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color4")?.trim(), "#000"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -.sky { - background: radial-gradient( - closest-corner circle at 15% 15%, - #ffcf33, - #ffcf33 20%, - #ffff66 21%, - #bbeeff 100% - ); -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - position: relative; - right: 10%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 5%, - transparent 5%, - transparent 10% - ), - repeating-linear-gradient( - 90deg, - var(--building-color2), - var(--building-color2) 12%, - var(--window-color2) 12%, - var(--window-color2) 44% - ); -} - -.fb6 { - width: 9%; - height: 38%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3) 10%, - transparent 10%, - transparent 30% - ), - repeating-linear-gradient( - var(--building-color3), - var(--building-color3) 10%, - var(--window-color3) 10%, - var(--window-color3) 30% - ); -} - -@media (max-width: 1000px) { ---fcc-editable-region-- - ---fcc-editable-region-- - .sky { - background: radial-gradient( - closest-corner circle at 15% 15%, - #ccc, - #ccc 20%, - #445 21%, - #223 100% - ); - } -} - -``` - diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-118.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-118.md deleted file mode 100644 index 37acdf2d5e..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-118.md +++ /dev/null @@ -1,860 +0,0 @@ ---- -id: 5d822fd413a79914d39e993e -title: Part 118 -challengeType: 0 -dashedName: part-118 ---- - -# --description-- - -Lastly, in the `:root` selector of the media query, redefine all four of the `--window-color` variables to use `#777`. When you're done, resize the window and watch it go from day to night. - -Variables are primarily used with colors, and that's how you used them here. But they can be given any value and used on any property. Your project looks great! - -# --hints-- - -You should add `--window-color1` with a value of `#777`. - -```js -assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color1")?.trim(), "#777"); -``` - -You should add `--window-color2` with a value of `#777`. - -```js -assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color2")?.trim(), "#777"); -``` - -You should add `--window-color3` with a value of `#777`. - -```js -assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color3")?.trim(), "#777"); -``` - -You should add `--window-color4` with a value of `#777`. - -```js -assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color4")?.trim(), "#777"); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -.sky { - background: radial-gradient( - closest-corner circle at 15% 15%, - #ffcf33, - #ffcf33 20%, - #ffff66 21%, - #bbeeff 100% - ); -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - position: relative; - right: 10%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 5%, - transparent 5%, - transparent 10% - ), - repeating-linear-gradient( - 90deg, - var(--building-color2), - var(--building-color2) 12%, - var(--window-color2) 12%, - var(--window-color2) 44% - ); -} - -.fb6 { - width: 9%; - height: 38%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3) 10%, - transparent 10%, - transparent 30% - ), - repeating-linear-gradient( - var(--building-color3), - var(--building-color3) 10%, - var(--window-color3) 10%, - var(--window-color3) 30% - ); -} - -@media (max-width: 1000px) { ---fcc-editable-region-- - :root { - --building-color1: #000; - --building-color2: #000; - --building-color3: #000; - --building-color4: #000; - } ---fcc-editable-region-- - .sky { - background: radial-gradient( - closest-corner circle at 15% 15%, - #ccc, - #ccc 20%, - #445 21%, - #223 100% - ); - } -} - -``` - -# --solutions-- - -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -``` - -```css -:root { - --building-color1: #aa80ff; - --building-color2: #66cc99; - --building-color3: #cc6699; - --building-color4: #538cc6; - --window-color1: #bb99ff; - --window-color2: #8cd9b3; - --window-color3: #d98cb3; - --window-color4: #8cb3d9; -} - -* { - box-sizing: border-box; -} - -body { - height: 100vh; - margin: 0; - overflow: hidden; -} - -.background-buildings, .foreground-buildings { - width: 100%; - height: 100%; - display: flex; - align-items: flex-end; - justify-content: space-evenly; - position: absolute; - top: 0; -} - -.building-wrap { - display: flex; - flex-direction: column; - align-items: center; -} - -.window-wrap { - display: flex; - align-items: center; - justify-content: space-evenly; -} - -.sky { - background: radial-gradient( - closest-corner circle at 15% 15%, - #ffcf33, - #ffcf33 20%, - #ffff66 21%, - #bbeeff 100% - ); -} - -/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ -.bb1 { - width: 10%; - height: 70%; -} - -.bb1a { - width: 70%; -} - -.bb1b { - width: 80%; -} - -.bb1c { - width: 90%; -} - -.bb1d { - width: 100%; - height: 70%; - background: linear-gradient( - var(--building-color1) 50%, - var(--window-color1) - ); -} - -.bb1-window { - height: 10%; - background: linear-gradient( - var(--building-color1), - var(--window-color1) - ); -} - -.bb2 { - width: 10%; - height: 50%; -} - -.bb2a { - border-bottom: 5vh solid var(--building-color2); - border-left: 5vw solid transparent; - border-right: 5vw solid transparent; -} - -.bb2b { - width: 100%; - height: 100%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 6%, - var(--window-color2) 6%, - var(--window-color2) 9% - ); -} - -.bb3 { - width: 10%; - height: 55%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3), - var(--window-color3) 15% - ); -} - -.bb4 { - width: 11%; - height: 58%; -} - -.bb4a { - width: 3%; - height: 10%; - background-color: var(--building-color4); -} - -.bb4b { - width: 80%; - height: 5%; - background-color: var(--building-color4); -} - -.bb4c { - width: 100%; - height: 85%; - background-color: var(--building-color4); -} - -.bb4-window { - width: 18%; - height: 90%; - background-color: var(--window-color4); -} - -/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ -.fb1 { - width: 10%; - height: 60%; -} - -.fb1a { - border-bottom: 7vh solid var(--building-color4); - border-left: 2vw solid transparent; - border-right: 2vw solid transparent; -} - -.fb1b { - width: 60%; - height: 10%; - background-color: var(--building-color4); -} - -.fb1c { - width: 100%; - height: 80%; - background: repeating-linear-gradient( - 90deg, - var(--building-color4), - var(--building-color4) 10%, - transparent 10%, - transparent 15% - ), - repeating-linear-gradient( - var(--building-color4), - var(--building-color4) 10%, - var(--window-color4) 10%, - var(--window-color4) 90% - ); -} - -.fb2 { - width: 10%; - height: 40%; -} - -.fb2a { - width: 100%; - border-bottom: 10vh solid var(--building-color3); - border-left: 1vw solid transparent; - border-right: 1vw solid transparent; -} - -.fb2b { - width: 100%; - height: 75%; - background-color: var(--building-color3); -} - -.fb2-window { - width: 22%; - height: 100%; - background-color: var(--window-color3); -} - -.fb3 { - width: 10%; - height: 35%; -} - -.fb3a { - width: 80%; - height: 15%; - background-color: var(--building-color1); -} - -.fb3b { - width: 100%; - height: 35%; - background-color: var(--building-color1); -} - -.fb3-window { - width: 25%; - height: 80%; - background-color: var(--window-color1); -} - -.fb4 { - width: 8%; - height: 45%; - position: relative; - left: 10%; -} - -.fb4a { - border-top: 5vh solid transparent; - border-left: 8vw solid var(--building-color1); -} - -.fb4b { - width: 100%; - height: 89%; - background-color: var(--building-color1); - display: flex; - flex-wrap: wrap; -} - -.fb4-window { - width: 30%; - height: 10%; - border-radius: 50%; - background-color: var(--window-color1); - margin: 10%; -} - -.fb5 { - width: 10%; - height: 33%; - position: relative; - right: 10%; - background: repeating-linear-gradient( - var(--building-color2), - var(--building-color2) 5%, - transparent 5%, - transparent 10% - ), - repeating-linear-gradient( - 90deg, - var(--building-color2), - var(--building-color2) 12%, - var(--window-color2) 12%, - var(--window-color2) 44% - ); -} - -.fb6 { - width: 9%; - height: 38%; - background: repeating-linear-gradient( - 90deg, - var(--building-color3), - var(--building-color3) 10%, - transparent 10%, - transparent 30% - ), - repeating-linear-gradient( - var(--building-color3), - var(--building-color3) 10%, - var(--window-color3) 10%, - var(--window-color3) 30% - ); -} - -@media (max-width: 1000px) { - :root { - --building-color1: #000; - --building-color2: #000; - --building-color3: #000; - --building-color4: #000; - --window-color1: #777; - --window-color2: #777; - --window-color3: #777; - --window-color4: #777; - } - .sky { - background: radial-gradient( - closest-corner circle at 15% 15%, - #ccc, - #ccc 20%, - #445 21%, - #223 100% - ); - } -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-001.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-001.md new file mode 100644 index 0000000000..04b5bf100b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-001.md @@ -0,0 +1,47 @@ +--- +id: 5d822fd413a79914d39e98c9 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +Welcome to the CSS Variables Skyline project! Start by adding the `!DOCTYPE html` declaration at the top of the document so the browser knows what type of document it's reading. + +# --hints-- + +Your code should contain the `DOCTYPE` reference. + +```js +assert(code.match(/` after the type. + +```js +assert(code.match(/html\s*>/gi)); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-002.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-002.md new file mode 100644 index 0000000000..a796cd3341 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-002.md @@ -0,0 +1,54 @@ +--- +id: 5d822fd413a79914d39e98ca +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Add opening and closing `html` tags below the `DOCTYPE` so you have a place to start putting some code. + +# --hints-- + +Your `html` element should be below the `DOCTYPE` declaration. + +```js +assert(code.match(/(?)/gi)); +``` + +Your `html` element should have an opening tag. + +```js +assert(code.match(//gi)); +``` + +Your `html` element should have a closing tag. + +```js +assert(code.match(/<\/html\s*>/)); +``` + +Your `html` tags should be in the correct order. + +```js +assert(code.match(/\s*<\/html\s*>/)); +``` + +You should only have one `html` element. + +```js +assert(document.querySelectorAll('html').length === 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-003.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-003.md new file mode 100644 index 0000000000..c875ecf77c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-003.md @@ -0,0 +1,69 @@ +--- +id: 5d822fd413a79914d39e98cb +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Next, add opening and closing `head` and `body` tags within the `html` element. + +# --hints-- + +You should have an opening `head` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `head` tag. + +```js +assert(code.match(/<\/head\s*>/i)); +``` + +You should have an opening `body` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `body` tag. + +```js +assert(code.match(/<\/body\s*>/i)); +``` + +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')); +``` + +# --seed-- + +## --seed-contents-- + +```html + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-004.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-004.md new file mode 100644 index 0000000000..9d10f01ddd --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-004.md @@ -0,0 +1,101 @@ +--- +id: 5d822fd413a79914d39e98cc +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Add a `title` element to the `head`, and give your project a title of `freeCodeCamp Skyline Project`. Also, nest a self-closing `link` element in the `head` element. Give it a `rel` attribute value of `stylesheet`, a `type` attribute value of `text/css`, and an `href` attribute value of `styles.css`. + +# --hints-- + +Your code should have a `title` element. + +```js +const title = document.querySelector('title'); +assert.exists(title); +``` + +The `title` element should be within the `head` element. + +```js +const head = document.querySelector('head'); +// TODO: head does not contain title...body contains title +``` + +Your project should have a title of `freeCodeCamp Skyline Project`. + +```js +const title = document.querySelector('title'); +assert.equal(title.text.toLowerCase(), 'freecodecamp skyline project') +``` + +Remember, the casing and spelling matters for the title. + +```js +const title = document.querySelector('title'); +assert.equal(title.text, 'freeCodeCamp Skyline Project'); +``` + +Your code should have a `link` element. + +```js +assert.match(code, //i)); +``` + +Your `link` element should be within your `head` element. + +```js +assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)) +``` + +Your `link` element should have a `rel` attribute with the value `stylesheet`. + +```js +assert.match(code, / + +--fcc-editable-region-- + + + +--fcc-editable-region-- + + + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-005.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-005.md new file mode 100644 index 0000000000..74bf16b46a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-005.md @@ -0,0 +1,55 @@ +--- +id: 5d822fd413a79914d39e98cd +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +In CSS, you can target everything with an asterisk. Add a border to everything by using the `*` selector, and giving it a `border` of `1px solid black`. This is a trick I like to use to help visualize where elements are and their size. You will remove this later. + +# --hints-- + +You should use the `*` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('*')); +``` + +You should use the `border` property to style all the elements. + +```js +assert(new __helpers.CSSHelp(document).isPropertyUsed('border')); +``` + +All elements should have a `1px solid black` border. + +```js +const astStyles = new __helpers.CSSHelp(document).getStyle('*'); +assert.equal(astStyles?.border, '1px solid black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + + + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-006.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-006.md new file mode 100644 index 0000000000..23d7fccd45 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-006.md @@ -0,0 +1,60 @@ +--- +id: 5d822fd413a79914d39e98ce +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Also add a `box-sizing` of `border-box` to everything. This will make it so the border you added doesn't add any size to your elements. + +# --hints-- + +You should use the `box-sizing` property. + +```js +assert(new __helpers.CSSHelp(document).isPropertyUsed('box-sizing')); +``` + +You should make use of the existing `*` selector. + +```js +// Two selectors create two CSSStyleRule objects +assert.equal(new __helpers.CSSHelp(document).getStyleDeclarations('*').length, 1); +``` + +All elements should have a `box-sizing` of `border-box`. + +```js +const astStyles = new __helpers.CSSHelp(document).getStyle('*'); +assert.equal(astStyles.boxSizing, 'border-box'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + + + +``` + +```css +--fcc-editable-region-- +* { + border: 1px solid black; +} + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-007.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-007.md new file mode 100644 index 0000000000..5857782a0e --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-007.md @@ -0,0 +1,69 @@ +--- +id: 5d822fd413a79914d39e98cf +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +You can see the `body` (it's the inner-most box on your page); the box around it is the `html` element. Make your `body` fill the whole viewport by giving it a `height` of `100vh`. Remove the default `margin` from the `body` by setting the `margin` to `0`. Finally, set the `overflow` property to `hidden` to hide any scroll bars that appear when something extends past the viewport. + +# --hints-- + +You should use the `body` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('body')); +``` + +Your `body` should have a `height` of `100vh`. + +```js +const bodyStyles = new __helpers.CSSHelp(document).getStyle('body'); +assert.equal(bodyStyles?.height, '100vh'); +``` + +Your `body` should have a `margin` of `0`. + +```js +// TODO: Editor adds margin as preferential style - 8px is always added. +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px'); +``` + +Your `body` should have the `overflow` property set to `hidden`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + + + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-008.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-008.md new file mode 100644 index 0000000000..94bbf16291 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-008.md @@ -0,0 +1,64 @@ +--- +id: 5d822fd413a79914d39e98d0 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +It's tough to see now, but there's a border at the edge of your preview, that's the `body`. Create a `div` element in the `body` with a class of `background-buildings`. This will be a container for a group of buildings. + +# --hints-- + +You should create a `div` element. + +```js +assert.exists(document.querySelector('div')); +``` + +Your `div` element should be within the `body`. + +```js +assert(document.querySelector('div')?.parentElement?.localName === 'body'); +``` + +Your `div` element should have a class of `background-buildings` + +```js +assert([...document.querySelector('div')?.classList]?.includes('background-buildings')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-009.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-009.md new file mode 100644 index 0000000000..964119d6be --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-009.md @@ -0,0 +1,67 @@ +--- +id: 5d822fd413a79914d39e98d1 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Give your background buildings element a `width` and `height` of `100%` to make it the full width and height of its parent, the `body`. + +# --hints-- + +You should use the `background-buildings` class to select the correct element. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.background-buildings')); +``` + +Your `.background-buildings` element should have a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.width, '100%'); +``` + +Your `.background-buildings` element should have a `height` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.height, '100%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-010.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-010.md new file mode 100644 index 0000000000..f031003f3c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-010.md @@ -0,0 +1,82 @@ +--- +id: 5d822fd413a79914d39e98d2 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Nest a `div` with a class of `bb1` in the background buildings container. Give it a `width` of `10%` and `height` of `70%`. "bb" stands for "background building", this will be your first building. + +# --hints-- + +You should create a new `div` element. + +```js +assert.equal(document.querySelectorAll('div').length, 2); +``` + +You should give the new `div` a class of `bb1`. + +```js +assert.exists(document.querySelector('div.bb1')); +``` + +You should use a `.bb1` class selector to style the element. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1')); +``` + +You should give the `.bb1` element a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.width, '10%'); +``` + +You should give the `.bb1` element a `height` of `70%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.height, '70%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +--fcc-editable-region-- +
+--fcc-editable-region-- + + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-011.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-011.md new file mode 100644 index 0000000000..92fc1930ac --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-011.md @@ -0,0 +1,104 @@ +--- +id: 5d822fd413a79914d39e98d3 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Nest four `div` elements in the `.bb1` container. Give them the classes `bb1a`, `bb1b`, `bb1c`, and `bb1d` in that order. This building will have four sections. + +# --hints-- + +You should create four new `div` elements. + +```js +assert.equal(document.querySelectorAll('div')?.length, 6); +``` + +You should give one of the new `div` elements a class of `bb1a`. + +```js +assert.exists(document.querySelector('div.bb1a')); +``` + +You should give one of the new `div` elements a class of `bb1b`. + +```js +assert.exists(document.querySelector('div.bb1b')); +``` + +You should give one of the new `div` elements a class of `bb1c`. + +```js +assert.exists(document.querySelector('div.bb1c')); +``` + +You should give one of the new `div` elements a class of `bb1d`. + +```js +assert.exists(document.querySelector('div.bb1d')); +``` + +You should place the new `div` elements in the correct order. + +```js +function __t(a, b) { + return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b); +} +assert(__t('div.bb1a','bb1b') && __t('div.bb1b','bb1c') && __t('div.bb1c','bb1d')); +``` + +You should place the new `div` elements within the `.bb1` element. + +```js +assert.equal(document.querySelectorAll('div.bb1 > div')?.length, 4); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +.bb1 { + width: 10%; + height: 70%; +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-012.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-012.md new file mode 100644 index 0000000000..6aef012f6a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-012.md @@ -0,0 +1,137 @@ +--- +id: 5d822fd413a79914d39e98d4 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Give the parts of your building `width` and `height` properties with these values: `70%` and `10%` to `.bb1a`, `80%` and `10%` to `.bb1b`, `90%` and `10%` to `.bb1c`, and `100%` and `70%` to `.bb1d`. Remember that these percentages are relative to the parent and note that the heights will add up to 100% - vertically filling the container. + +# --hints-- + +You should use a class selector to style `.bb1a`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')); +``` + +You should give `.bb1a` a `width` of `70%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width, '70%'); +``` + +You should give `.bb1a` a `height` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height, '10%'); +``` + +You should use a class selector to style `.bb1b`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')); +``` + +You should give `.bb1b` a `width` of `80%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.width, '80%'); +``` + +You should give `.bb1b` a `height` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height, '10%'); +``` + +You should use a class selector to style `.bb1c`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')); +``` + +You should give `.bb1c` a `width` of `90%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.width, '90%'); +``` + +You should give `.bb1c` a `height` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height, '10%'); +``` + +You should use a class selector to style `.bb1d`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')); +``` + +You should give `.bb1d` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.width, '100%'); +``` + +You should give `.bb1d` a `height` of `70%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.height, '70%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +.bb1 { + width: 10%; + height: 70%; +} +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-013.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-013.md new file mode 100644 index 0000000000..f380c65c3e --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-013.md @@ -0,0 +1,111 @@ +--- +id: 5d822fd413a79914d39e98d5 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Give your `.bb1` element these style properties: `display: flex;`, `flex-direction: column;`, and `align-items: center;`. This will center the parts of the building using "flex" or "flexbox". You will learn about it in more detail on another project. + +# --hints-- + +You should not change the `.bb1` `width` or `height` properties. + +```js +const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); +assert.equal(bb1Style?.width, '10%'); +assert.equal(bb1Style?.height, '70%'); +``` + +You should give the `.bb1` element a `display` of `flex`. + +```js +const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); +assert.equal(bb1Style?.display, 'flex'); +``` + +You should give the `.bb1` element a `flex-direction` of `column`. + +```js +const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); +assert.equal(bb1Style?.flexDirection, 'column'); +``` + +You should give the `.bb1` element a `align-items` of `center`. + +```js +const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); +assert.equal(bb1Style?.alignItems, 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} +--fcc-editable-region-- +.bb1 { + width: 10%; + height: 70%; +} +--fcc-editable-region-- +.bb1a { + width: 70%; + height: 10%; +} + +.bb1b { + width: 80%; + height: 10%; +} + +.bb1c { + width: 90%; + height: 10%; +} + +.bb1d { + width: 100%; + height: 70%; +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-014.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-014.md new file mode 100644 index 0000000000..8b2537cb05 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-014.md @@ -0,0 +1,102 @@ +--- +id: 5d822fd413a79914d39e98d6 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Now you have something that is starting to resemble a building. Let's get into your first variable. Variable declarations begin with two dashes (`-`) and are given a name and a value like this: `--variable-name: value;`. In the `.bb1` class, create a variable named `--building-color1` and give it a value of `#999`. + +# --hints-- + +You should create a new variable named `--building-color1`. + +```js +assert(new __helpers.CSSHelp(document).isPropertyUsed('--building-color1')); +``` + +You should define the `--building-color1` variable within `.bb1`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1')); +``` + +You should give `--building-color1` a value of `#999`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#999'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} +--fcc-editable-region-- +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} +--fcc-editable-region-- +.bb1a { + width: 70%; + height: 10%; +} + +.bb1b { + width: 80%; + height: 10%; +} + +.bb1c { + width: 90%; + height: 10%; +} + +.bb1d { + width: 100%; + height: 70%; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-015.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-015.md new file mode 100644 index 0000000000..8ad3cf30b1 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-015.md @@ -0,0 +1,97 @@ +--- +id: 5d822fd413a79914d39e98d7 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +To use a variable, put the variable name in parentheses with `var` in front of them like this: `var(--variable-name)`. Add your variable as the value of the `background-color` property of the `.bb1a` class. Whatever value you gave the variable will be applied to whatever property you use it on. In this case, your variable has the value of `#999`. So `#999` will be used as the value for the `background-color` property. + +# --hints-- + +The `background-color` of the `bb1a` element should be set. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor) +``` + +You should use `var(--building-color1)` to set the `background-color` of the `.bb1a` element. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor.trim(), 'var(--building-color1)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #999; +} +--fcc-editable-region-- +.bb1a { + width: 70%; + height: 10%; +} +--fcc-editable-region-- +.bb1b { + width: 80%; + height: 10%; +} + +.bb1c { + width: 90%; + height: 10%; +} + +.bb1d { + width: 100%; + height: 70%; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-016.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-016.md new file mode 100644 index 0000000000..8fe8535861 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-016.md @@ -0,0 +1,123 @@ +--- +id: 5d822fd413a79914d39e98d8 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Use the same variable as the `background-color` of the `.bb1b`, `.bb1c`, and `.bb1d` classes to fill in the rest of the building. + +# --hints-- + +The `background-color` of the `bb1b` element should be set. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor) +``` + +You should use `var(--building-color1)` to set the `background-color` of the `.bb1b` element. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor.trim(), 'var(--building-color1)'); +``` + +The `background-color` of the `bb1c` element should be set. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor) +``` + +You should use `var(--building-color1)` to set the `background-color` of the `.bb1c` element. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor.trim(), 'var(--building-color1)'); +``` + +The `background-color` of the `bb1d` element should be set. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor) +``` + +You should use `var(--building-color1)` to set the `background-color` of the `.bb1d` element. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor.trim(), 'var(--building-color1)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #999; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.bb1b { + width: 80%; + height: 10%; +} + +.bb1c { + width: 90%; + height: 10%; +} + +.bb1d { + width: 100%; + height: 70%; +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-017.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-017.md new file mode 100644 index 0000000000..c4c02e67d8 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-017.md @@ -0,0 +1,98 @@ +--- +id: 5d822fd413a79914d39e98d9 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +I don't really like that color. Change the value of your variable from `#999` to `#aa80ff` and you can see how it gets applied everywhere you used the variable. This is the main advantage of using variables, being able to quickly change many values in your stylesheet by just changing the value of a variable. + +# --hints-- + +You should change the value of the `--building-color1` property variable from `#999` to `#aa80ff`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#aa80ff'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +--fcc-editable-region-- + --building-color1: #999; +--fcc-editable-region-- +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-018.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-018.md new file mode 100644 index 0000000000..8859ca2b51 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-018.md @@ -0,0 +1,132 @@ +--- +id: 5d822fd413a79914d39e98da +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Your first building looks pretty good now. Let's make some more! Nest three new `div` elements in the `background-buildings` container and give them the classes of `bb2`, `bb3`, and `bb4` in that order. These will be three more buildings for the background. + +# --hints-- + +You should create a `div` with a class of `bb2`. + +```js +assert.exists(document.querySelector('div.bb2')); +``` + +You should create a `div` with a class of `bb3`. + +```js +assert.exists(document.querySelector('div.bb3')); +``` + +You should create a `div` with a class of `bb4`. + +```js +assert.exists(document.querySelector('div.bb4')); +``` + +You should create 3 new `div` elements. + +```js +assert.equal(document.querySelectorAll('div')?.length, 9); +``` + +You should place these `div` elements within the `.background-buildings` element. + +```js +assert.equal(document.querySelector('div.background-buildings')?.children?.length, 4); +``` + +You should place the elements in the correct order. + +```js +function __t(a, b) { + return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b); +} +assert(__t('div.bb1','bb2') && __t('div.bb2','bb3') && __t('div.bb3','bb4')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-019.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-019.md new file mode 100644 index 0000000000..2386d71392 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-019.md @@ -0,0 +1,132 @@ +--- +id: 5d822fd413a79914d39e98db +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Give the new buildings `width` and `height` properties of: `10%` and `50%` for `.bb2`, `10%` and `55%` for `.bb3`, and `11%` and `58%` for `.bb4`. You will be using almost all percent based units and some flexbox for this project, so everything will be completely responsive. + +# --hints-- + +You should give `.bb2` a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.width, '10%'); +``` + +You should give `.bb2` a `height` of `50%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.height, '50%'); +``` + +You should give `.bb3` a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.width, '10%'); +``` + +You should give `.bb3` a `height` of `55%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.height, '55%'); +``` + +You should give `.bb4` a `width` of `11%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.width, '11%'); +``` + +You should give `.bb4` a `height` of `58%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.height, '58%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-020.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-020.md new file mode 100644 index 0000000000..cbb6d53352 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-020.md @@ -0,0 +1,126 @@ +--- +id: 5d822fd413a79914d39e98dc +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +The buildings are stacked on top of each other and running off the screen. Let's fix that. Add the properties `display: flex;`, `align-items: flex-end;`, and `justify-content: space-evenly;` to the `background-buildings` class. This will use flexbox again to evenly space the buildings across the bottom of the element. + +# --hints-- + +You should add a `display` of `flex` to the `background-buildings` class. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.display, 'flex'); +``` + +You should add an `align-items` of `flex-end` to the `background-buildings` class. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.alignItems, 'flex-end'); +``` + +You should add a `justify-content` of `space-evenly` to the `background-buildings` class. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.justifyContent, 'space-evenly'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} +--fcc-editable-region-- +.background-buildings { + width: 100%; + height: 100%; +} +--fcc-editable-region-- +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb3 { + width: 10%; + height: 55%; +} + +.bb4 { + width: 11%; + height: 58%; +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-021.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-021.md new file mode 100644 index 0000000000..76b700f7e4 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-021.md @@ -0,0 +1,141 @@ +--- +id: 5d822fd413a79914d39e98dd +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +I don't like how spaced out the buildings are. Squeeze them together by adding two empty `div` elements to the top of the `background-buildings` element, two more at the bottom of it, and one more in between `.bb3` and `.bb4`. These will be added as evenly-spaced elements across the container, effectively moving the buildings closer to the center. + +# --hints-- + +You should add two new `div` elements before the `.bb1` element. + +```js +const bBuildings = document.querySelector('.background-buildings')?.children; +assert(![...bBuildings?.[0]?.classList]?.includes('bb1')); +assert(![...bBuildings?.[1]?.classList]?.includes('bb1')); +``` + +You should add one new `div` element between the `.bb3` and `.bb4` element. + +```js +assert(document.querySelector('.bb3')?.nextElementSibling === document.querySelector('.bb4')?.previousElementSibling); +``` + +You should add two new `div` elements after the `.bb4` element. + +```js +const bb4 = document.querySelector('.bb4'); +assert.exists(bb4?.nextElementSibling); +assert.exists(bb4?.nextElementSibling?.nextElementSibling); +``` + +You should add 5 new `div` elements. + +```js +assert.equal(document.querySelectorAll('div')?.length, 14); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- + + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb3 { + width: 10%; + height: 55%; +} + +.bb4 { + width: 11%; + height: 58%; +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-022.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-022.md new file mode 100644 index 0000000000..308e0bec9e --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-022.md @@ -0,0 +1,139 @@ +--- +id: 5d822fd413a79914d39e98de +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Create a new variable by the other one called `--building-color2` and give it a value of `#66cc99`. Then set it as the `background-color` of `.bb2`. + +# --hints-- + +You should define a new property variable called `--building-color2`. + +```js +assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color2')); +``` + +You should give `--building-color2` a value of `#66cc99`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2').trim(), '#66cc99'); +``` + +You should set the `background-color` of `.bb2`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor); +``` + +You should set the `background-color` using the `--building-color2` variable. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor.trim(), 'var(--building-color2)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} +--fcc-editable-region-- +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; +} +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; +} + +.bb4 { + width: 11%; + height: 58%; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-023.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-023.md new file mode 100644 index 0000000000..d124fdce78 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-023.md @@ -0,0 +1,123 @@ +--- +id: 5d822fd413a79914d39e98df +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Hmm, I'm not sure why that didn't work. You can add a fallback value to a variable by putting it as the second value of where you use the variable like this: `var(--variable-name, fallback-value)`. The property will use the fallback value when there's a problem with the variable. Add a fallback value of `green` to the `background-color` of `.bb2`. + +# --hints-- + +You should add a fallback value of `green` to the `background-color` property. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor.trim(), 'var(--building-color2, green)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; + --building-color2: #66cc99; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; +} + +.bb4 { + width: 11%; + height: 58%; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-024.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-024.md new file mode 100644 index 0000000000..7c7b52392d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-024.md @@ -0,0 +1,141 @@ +--- +id: 5d822fd413a79914d39e98e0 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Create a new variable by the other ones named `--building-color3` and give it a value of `#cc6699`. Then use it as the `background-color` of the `.bb3` class and give it a fallback value of `pink`. + +# --hints-- + +You should define a new property variable called `--building-color3`. + +```js +assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color3')); +``` + +You should give `--building-color3` a value of `#66cc99`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3')?.trim(), '#cc6699'); +``` + +You should set the `background-color` of `.bb3`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor); +``` + +You should set the `background-color` using the `--building-color3` variable with a fallback of `pink`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor.trim(), 'var(--building-color3, pink)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} +--fcc-editable-region-- +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; + --building-color2: #66cc99; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2, green); +} + +.bb3 { + width: 10%; + height: 55%; +} +--fcc-editable-region-- +.bb4 { + width: 11%; + height: 58%; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-025.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-025.md new file mode 100644 index 0000000000..373626cb27 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-025.md @@ -0,0 +1,154 @@ +--- +id: 5d822fd413a79914d39e98e1 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +That one used the fallback value as well? I see the problem now! The variables you declared in `.bb1` do not cascade to the `.bb2` and `.bb3` sibling elements. That's just how CSS works. Because of this, variables are often declared in the `:root` selector. This is the highest level selector in CSS; putting your variables there will make them usable everywhere. Add the `:root` selector to the top of your stylesheet, and move all your variable declarations there. + +# --hints-- + +You should declare a `:root` selector at the top of the stylesheet. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle(':root')); +``` + +You should define `--building-color1` with a value of `#aa80ff` in the `:root` selector. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color1')?.trim(), '#aa80ff'); +``` + +You should define `--building-color2` with a value of `#66cc99` in the `:root` selector. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color2')?.trim(), '#66cc99'); +``` + +You should define `--building-color3` with a value of `#cc6699` in the `:root` selector. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color3')?.trim(), '#cc6699'); +``` + +You should remove the custom property variables from `.bb1`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1')); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2')); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; +} +--fcc-editable-region-- +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2, green); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3, pink); +} + +.bb4 { + width: 11%; + height: 58%; +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-026.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-026.md new file mode 100644 index 0000000000..2d914d6997 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-026.md @@ -0,0 +1,134 @@ +--- +id: 5d822fd413a79914d39e98e2 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Now that you've worked the bugs out and the buildings are the right colors, you can remove the fallback values in the two places they were used. Go ahead and do that now. + +# --hints-- + +You should remove the fallback in the `background-color` from `.bb2`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor, 'var(--building-color2)'); +``` + +You should remove the fallback in the `background-color` from `.bb3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor.trim(), 'var(--building-color3)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2, green); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3, pink); +} +--fcc-editable-region-- +.bb4 { + width: 11%; + height: 58%; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-027.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-027.md new file mode 100644 index 0000000000..e143005d10 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-027.md @@ -0,0 +1,137 @@ +--- +id: 5d822fd413a79914d39e98e3 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Create another variable named `--building-color4` and give it a value of `#538cc6`. Make sure it's in the `:root` selector this time. Then use it to fill in the last building. + +# --hints-- + +You should define a new property variable called `--building-color4`. + +```js +assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color4')); +``` + +You should give `--building-color4` a value of `#538cc6` in the `:root` selector. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color4').trim(), '#538cc6'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; +} +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-028.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-028.md new file mode 100644 index 0000000000..8833c47483 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-028.md @@ -0,0 +1,146 @@ +--- +id: 5d822fd413a79914d39e98e4 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +The background buildings are starting to look pretty good. Create a new `div` below the `background-buildings` element and give it a class of `foreground-buildings`. This will be another container for more buildings. + +# --hints-- + +You should create a new `div` element. + +```js +assert.equal(document.querySelectorAll('div')?.length, 15); +``` + +The new `div` should come after the `div.background-buildings` element. + +```js +assert.exists(document.querySelector('div.background-buildings + div')); +``` + +Your new `div` should have a class of `foreground-buildings`. + +```js +assert.exists(document.querySelector('div.foreground-buildings')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- + +--fcc-editable-region-- + + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-029.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-029.md new file mode 100644 index 0000000000..7817bb93ba --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-029.md @@ -0,0 +1,160 @@ +--- +id: 5d822fd413a79914d39e98e5 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +You want the foreground buildings container to sit directly on top of the background buildings element. Give it a `width` and `height` of `100%`, set the `position` to `absolute`, and the `top` to `0`. This will make it the same size as the body and move the start of it to the top left corner. + +# --hints-- + +You should use a `.foreground-buildings` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')); +``` + +You should give the `.foreground-buildings` element a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.width, '100%'); +``` + +You should give the `.foreground-buildings` element a `height` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.height, '100%'); +``` + +You should give the `.foreground-buildings` element a `position` of `absolute`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position, 'absolute'); +``` + +You should give the `.foreground-buildings` element a `top` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-030.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-030.md new file mode 100644 index 0000000000..6b0c4149b5 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-030.md @@ -0,0 +1,191 @@ +--- +id: 5d822fd413a79914d39e98e6 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Nest six `div` elements within `.foreground-buildings` and give them the classes of `fb1` through `fb6` in that order. "fb" stands for "foreground building". These will be six more buildings for the foreground. + +# --hints-- + +You should create a new `div` with a class of `fb1`. + +```js +assert.exists(document.querySelector('div.fb1')); +``` + +You should create a new `div` with a class of `fb2`. + +```js +assert.exists(document.querySelector('div.fb2')); +``` + +You should create a new `div` with a class of `fb3`. + +```js +assert.exists(document.querySelector('div.fb3')); +``` + +You should create a new `div` with a class of `fb4`. + +```js +assert.exists(document.querySelector('div.fb4')); +``` + +You should create a new `div` with a class of `fb5`. + +```js +assert.exists(document.querySelector('div.fb5')); +``` + +You should create a new `div` with a class of `fb6`. + +```js +assert.exists(document.querySelector('div.fb6')); +``` + +You should place these new `div` elements within the `.foreground-buildings` element. + +```js +assert.exists(document.querySelector('div.foreground-buildings > div.fb1')); +assert.exists(document.querySelector('div.foreground-buildings > div.fb2')); +assert.exists(document.querySelector('div.foreground-buildings > div.fb3')); +assert.exists(document.querySelector('div.foreground-buildings > div.fb4')); +assert.exists(document.querySelector('div.foreground-buildings > div.fb5')); +assert.exists(document.querySelector('div.foreground-buildings > div.fb6')); +``` + +You should place the new `div` elements in the correct order. + +```js +function __t(a, b) { + return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b); +} +assert(__t('div.fb1','fb2') && __t('div.fb2','fb3') && __t('div.fb3','fb4') && __t('div.fb4', 'fb5') && __t('div.fb5', 'fb6')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- + + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +.foreground-buildings { + width: 100%; + height: 100%; + position: absolute; + top: 0; +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-031.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-031.md new file mode 100644 index 0000000000..f0bf1e56fa --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-031.md @@ -0,0 +1,252 @@ +--- +id: 5d822fd413a79914d39e98e7 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +Give the six new elements these `width` and `height` values: `10%` and `60%` to `.fb1`, `10%` and `40%` to `.fb2`, `10%` and `35%` to `.fb3`, `8%` and `45%` to `.fb4`, `10%` and `33%` to `.fb5`, and `9%` and `38%` to `.fb6`. + +# --hints-- + +You should create a `.fb1` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.fb1')); +``` + +You should give the `.fb1` selector a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.width, '10%'); +``` + +You should give the `.fb1` selector a `height` of `60%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.height, '60%'); +``` + +You should create a `.fb2` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.fb2')); +``` + +You should give the `.fb2` selector a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.width, '10%'); +``` + +You should give the `.fb2` selector a `height` of `40%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.height, '40%'); +``` + +You should create a `.fb3` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.fb3')); +``` + +You should give the `.fb3` selector a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.width, '10%'); +``` + +You should give the `.fb3` selector a `height` of `35%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.height, '35%'); +``` + +You should create a `.fb4` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.fb4')); +``` + +You should give the `.fb4` selector a `width` of `8%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.width, '8%'); +``` + +You should give the `.fb4` selector a `height` of `45%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.height, '45%'); +``` + +You should create a `.fb5` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.fb5')); +``` + +You should give the `.fb5` selector a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.width, '10%'); +``` + +You should give the `.fb5` selector a `height` of `33%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.height, '33%'); +``` + +You should create a `.fb6` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.fb6')); +``` + +You should give the `.fb6` selector a `width` of `9%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.width, '9%'); +``` + +You should give the `.fb6` selector a `height` of `38%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.height, '38%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +.foreground-buildings { + width: 100%; + height: 100%; + position: absolute; + top: 0; +} +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-032.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-032.md new file mode 100644 index 0000000000..91c3f6732b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-032.md @@ -0,0 +1,189 @@ +--- +id: 5d822fd413a79914d39e98e8 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Add the same `display`, `align-items`, and `justify-content` properties and values to `foreground-buildings` that you used on `background-buildings`. Again, this will use Flexbox to evenly space the buildings across the bottom of their container. + +# --hints-- + +You should give `.foreground-buildings` a `display` property of `flex`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.display, 'flex'); +``` + +You should give `.foreground-buildings` an `align-items` property of `flex-end`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.alignItems, 'flex-end'); +``` + +You should give `.foreground-buildings` a `justify-content` property of `space-evenly`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.justifyContent, 'space-evenly'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} +--fcc-editable-region-- +.foreground-buildings { + width: 100%; + height: 100%; + position: absolute; + top: 0; +} +--fcc-editable-region-- +.fb1 { + width: 10%; + height: 60%; +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb4 { + width: 8%; + height: 45%; +} + +.fb5 { + width: 10%; + height: 33%; +} + +.fb6 { + width: 9%; + height: 38%; +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-033.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-033.md new file mode 100644 index 0000000000..9df80f54e4 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-033.md @@ -0,0 +1,222 @@ +--- +id: 5d822fd413a79914d39e98e9 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +I see some code that can be optimized. Move the `position` and `top` properties and values from `.foreground-buildings` to `.background-buildings`. Then select both `.background-buildings` and `.foreground-buildings` there, effectively applying those styles to both of the elements. You can use a comma (`,`) to separate selectors like this: `selector1, selector2`. + +# --hints-- + +You should not remove the `.foreground-buildings` declaration. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')); +``` + +You should remove the `position` property from `.foreground-buildings`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position); +``` + +You should remove the `top` property from `.foreground-buildings`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top); +``` + +You should add the `position` property of `absolute` to `.background-buildings, foreground-buildings`. + +```js +function eitherOr() { + const a = new __helpers.CSSHelp(document) + return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings'); +} +assert.equal(eitherOr()?.position, 'absolute'); +``` + +You should add the `top` property of `0` to `.background-buildings, foreground-buildings`. + +```js +function eitherOr() { + const a = new __helpers.CSSHelp(document) + return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings'); +} +assert.equal(eitherOr()?.top, '0px'); +``` + +You should use a comma to use both `.foreground-buildings` and `.background-buildings` selectors in the same style declaration. + +```js +function eitherOr() { + const a = new __helpers.CSSHelp(document) + return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings'); +} +assert.exists(eitherOr()); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} +--fcc-editable-region-- +.background-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +.foreground-buildings { + width: 100%; + height: 100%; + position: absolute; + top: 0; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} +--fcc-editable-region-- +.fb1 { + width: 10%; + height: 60%; +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb4 { + width: 8%; + height: 45%; +} + +.fb5 { + width: 10%; + height: 33%; +} + +.fb6 { + width: 9%; + height: 38%; +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-034.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-034.md new file mode 100644 index 0000000000..2f566a2343 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-034.md @@ -0,0 +1,180 @@ +--- +id: 5d822fd413a79914d39e98ea +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Now that you did that, you can delete the old `.foreground-buildings` declaration and all of its properties since they aren't needed anymore. + +# --hints-- + +You should delete the whole `.foreground-buildings` style declaration. + +```js +assert.notExists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} +--fcc-editable-region-- +.foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; +} +--fcc-editable-region-- +.fb1 { + width: 10%; + height: 60%; +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb4 { + width: 8%; + height: 45%; +} + +.fb5 { + width: 10%; + height: 33%; +} + +.fb6 { + width: 9%; + height: 38%; +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-035.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-035.md new file mode 100644 index 0000000000..0dea3bfc15 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-035.md @@ -0,0 +1,202 @@ +--- +id: 5d822fd413a79914d39e98eb +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +The skyline is coming together. Fill in the `background-color` property of the foreground buildings. Use your `--building-color1` variable to fill in `.fb3` and `.fb4`, `--building-color2` for `.fb5`, `--building-color3` for `.fb2` and `.fb6`, and `--building-color4` for `.fb1`. + +# --hints-- + +You should give `.fb1` a `background-color` using `--building-color4`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.backgroundColor.trim(), 'var(--building-color4)'); +``` + +You should give `.fb2` a `background-color` using `--building-color3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.backgroundColor, 'var(--building-color3)'); +``` + +You should give `.fb3` a `background-color` using `--building-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.backgroundColor, 'var(--building-color1)'); +``` + +You should give `.fb4` a `background-color` using `--building-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.backgroundColor, 'var(--building-color1)'); +``` + +You should give `.fb5` a `background-color` using `--building-color2`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.backgroundColor, 'var(--building-color2)'); +``` + +You should give `.fb6` a `background-color` using `--building-color3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.backgroundColor, 'var(--building-color3)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} +--fcc-editable-region-- +.fb1 { + width: 10%; + height: 60%; +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb4 { + width: 8%; + height: 45%; +} + +.fb5 { + width: 10%; + height: 33%; +} + +.fb6 { + width: 9%; + height: 38%; +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-036.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-036.md new file mode 100644 index 0000000000..cbf8fb48ea --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-036.md @@ -0,0 +1,202 @@ +--- +id: 5d822fd413a79914d39e98ec +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Squeeze the buildings together again by adding two empty `div` elements within both the top and bottom of the `.foreground-buildings` element, and one more in between `.fb2` and `.fb3`. + +# --hints-- + +You should add two `div` elements as the first children of `.foreground-buildings`. + +```js +const bBuildings = document.querySelector('.background-buildings')?.children; +assert(![...bBuildings?.[0]?.classList]?.includes('fb1')); +assert(![...bBuildings?.[1]?.classList]?.includes('fb1')); +``` + +You should add one `div` element between `.fb2` and `.fb3`. + +```js +assert(document.querySelector('.fb2')?.nextElementSibling === document.querySelector('.fb3')?.previousElementSibling); +``` + + +You should add two `div` elements as the last children of `.foreground-buildings`. + +```js +const fb6 = document.querySelector('.fb6'); +assert.exists(fb6?.nextElementSibling); +assert.exists(fb6?.nextElementSibling?.nextElementSibling); +``` + +You should have added 5 new `div` elements. + +```js +assert.equal(document.querySelectorAll('div')?.length, 26); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+--fcc-editable-region-- + + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-037.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-037.md new file mode 100644 index 0000000000..772e156aad --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-037.md @@ -0,0 +1,201 @@ +--- +id: 5d822fd413a79914d39e98ed +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +Move the position of `.fb4` relative to where it is now by adding a `position` of `relative` and `left` of `10%` to it. Do the same for `.fb5` but use `right` instead of `left`. This will cover up the remaining white space in between the buildings. + +# --hints-- + +You should give `.fb4` a `position` of `relative`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.position, 'relative'); +``` + +You should give `.fb4` a `left` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.left, '10%'); +``` + +You should give `.fb5` a `position` of `relative`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.position, 'relative'); +``` + +You should give `.fb5` a `right` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.right, '10%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-038.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-038.md new file mode 100644 index 0000000000..01e4317a5b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-038.md @@ -0,0 +1,195 @@ +--- +id: 5d822fd413a79914d39e98ee +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Your code is starting to get quite long. Add a comment above the `.fb1` class that says `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` to help people understand your code. Above the `.bb1` class add another comment that says `BACKGROUND BUILDINGS - "bb" stands for "background building"`. If you don't remember, comments in CSS look like this: `/* Comment here */`. + +# --hints-- + +You should add the comment `BACKGROUND BUILDINGS - "bb" stands for "background building"` above the `.bb1` selector. + +```js +assert(/\/\*\s*BACKGROUND BUILDINGS - "bb" stands for "background building"\s*\*\//gi.test(code)); +``` + +You should add the comment `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` above the `.fb1` selector. + +```js +assert(/\/\*\s*FOREGROUND BUILDINGS - "fb" stands for "foreground building"\s*\*\//gi.test(code)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} +--fcc-editable-region-- + + +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} +--fcc-editable-region-- +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-039.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-039.md new file mode 100644 index 0000000000..96457fc13a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-039.md @@ -0,0 +1,196 @@ +--- +id: 5d822fd413a79914d39e98ef +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Create a new variable in `:root` called `--window-color1` and give it a value of `black`. This will be a secondary color for the purple buildings. + +# --hints-- + +You should create a new variable in `:root` called `--window-color1`. + +```js +assert(new __helpers.CSSHelp(document).isPropertyUsed('--window-color1')); +``` + +You should give the property variable `--window-color1` a value of `black`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color1').trim(), 'black'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-040.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-040.md new file mode 100644 index 0000000000..21b466579e --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-040.md @@ -0,0 +1,217 @@ +--- +id: 5d822fd413a79914d39e98f0 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +Gradients in CSS are a way to transition between colors across the distance of an element. They are applied to the `background` property and the syntax looks like this: + +```css +gradient-type( + color1, + color2 +); +``` + +In the example, `color1` is solid at the top, `color2` is solid at the bottom, and in between it transitions evenly from one to the next. In `.bb1a`, add a gradient of type `linear-gradient` to the `background` property with `--building-color1` as the first color and `--window-color1` as the second. + +# --hints-- + +You should apply a `background` to `.bb1a`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background); +``` + +You should give the `background` a `linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background, 'linear-gradient'); +``` + +You should give the `background` a `linear-gradient` starting from `--building-color1`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1'); +``` + +You should give the `background` a `linear-gradient` ending at `--window-color1`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} +--fcc-editable-region-- +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-041.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-041.md new file mode 100644 index 0000000000..c940ef178d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-041.md @@ -0,0 +1,222 @@ +--- +id: 5d822fd413a79914d39e98f1 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +You want to add the same gradient to the next two sections. Instead of doing that, create a new class called `bb1-window`, and move the `height` and `background` properties and values from `.bb1a` to the new class. + +# --hints-- + +You should create a new class declaration called `bb1-window`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1-window')); +``` + +You should move the `height` property and value from `.bb1a` to `.bb1-window`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height); +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.height, '10%'); +``` + +You should move the `background` property and value from `.bb1a` to `.bb1-window`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background); +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))'); +``` + +You should not move the `background-color` property from `.bb1a`. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor); +``` + +You should not move the `width` property from `.bb1a`. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} +--fcc-editable-region-- +.bb1a { + width: 70%; + height: 10%; + background-color: var(--building-color1); + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + + +--fcc-editable-region-- +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-042.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-042.md new file mode 100644 index 0000000000..aeb271aaab --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-042.md @@ -0,0 +1,236 @@ +--- +id: 5d822fd413a79914d39e98f2 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Add the new `bb1-window` class to the `.bb1a`, `.bb1b`, and `.bb1c` elements. This will apply the gradient to them. + +# --hints-- + +You should not remove the `bb1a` class. + +```js +assert.exists(document.querySelector('div.bb1a')); +``` + +You should add the `bb1-window` class to the `.bb1a` element. + +```js +assert.exists(document.querySelector('div.bb1a.bb1-window')); +``` + +You should not remove the `bb1b` class. + +```js +assert.exists(document.querySelector('div.bb1b')); +``` + +You should add the `bb1-window` class to the `.bb1b` element. + +```js +assert.exists(document.querySelector('div.bb1b.bb1-window')); +``` + +You should not remove the `bb1c` class. + +```js +assert.exists(document.querySelector('div.bb1c')); +``` + +You should add the `bb1-window` class to the `.bb1c` element. + +```js +assert.exists(document.querySelector('div.bb1c.bb1-window')); +``` + +You should not change the `.bb1d` element. + +```js +assert.exists(document.querySelector('div.bb1d')); +assert.notExists(document.querySelector('div.bb1d.bb1-window')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-043.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-043.md new file mode 100644 index 0000000000..1d7ffd0ec3 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-043.md @@ -0,0 +1,221 @@ +--- +id: 5d822fd413a79914d39e98f3 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +You don't need the `height` or `background-color` properties in `.bb1a`, `.bb1b` or `.bb1c` anymore, so go ahead and remove them. + +# --hints-- + +You should remove the `background-color` from `.bb1a`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor); +``` + +You should remove the `height` property from `.bb1b`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height); +``` + +You should remove the `background-color` property from `.bb1b`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor); +``` + +You should remove the `height` property from `.bb1c`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height); +``` + +You should remove the `background-color` property from `.bb1c`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} +--fcc-editable-region-- +.bb1a { + width: 70%; + background-color: var(--building-color1); +} + +.bb1b { + width: 80%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-044.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-044.md new file mode 100644 index 0000000000..78f4f0213a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-044.md @@ -0,0 +1,226 @@ +--- +id: 5d822fd413a79914d39e98f4 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Gradients can use as many colors as you want like this: + +```css +gradient-type( + color1, + color2, + color3 +); +``` + +Add a `linear-gradient` to `.bb1d` with `orange` as the first color, `--building-color1` as the second, and `--window-color1` as the third. Remember to use the gradient on the `background` property. + +# --hints-- + +You should use the `background` on `.bb1d`. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background); +``` + +You should give the `background` property a `linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'linear-gradient'); +``` + +You should use `orange` as the first color in the `linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange'); +``` + +You should use `--building-color1` as the second color in the `linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)'); +``` + +You should use `--window-color1` as the third color in the `linear-gradient`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1),var(--window-color1))'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} +--fcc-editable-region-- +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-045.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-045.md new file mode 100644 index 0000000000..5d32579bdc --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-045.md @@ -0,0 +1,197 @@ +--- +id: 5d822fd413a79914d39e98f5 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +It's a little hidden behind the foreground buildings, but you can see the three color gradient there. Since you are using that now, remove the `background-color` property from `.bb1d`. + +# --hints-- + +You should remove the `background-color` property and value from `.bb1d` + +```js +assert.notMatch(code, /\.bb1d\s*\{\s*[^}]*?background-color[^}]*?\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} +--fcc-editable-region-- +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); + background: linear-gradient( + orange, + var(--building-color1), + var(--window-color1) + ); +} +--fcc-editable-region-- +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-046.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-046.md new file mode 100644 index 0000000000..2cd9253fc6 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-046.md @@ -0,0 +1,206 @@ +--- +id: 5d822fd413a79914d39e98f6 +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +You can specify where you want a gradient transition to complete by adding it to the color like this: + +```css +gradient-type( + color1, + color2 20%, + color3 +); +``` + +Here, it will transition from `color1` to `color2` between `0%` and `20%` of the element and then transition to `color3` for the rest. Add `80%` to the `--building-color1` color of the `.bb1d` gradient so you can see it in action. + +# --hints-- + +You should add a value of `80%` to the `--building-color1` color in the `linear-gradient` of `.bb1d`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)80%,var(--window-color1))'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} +--fcc-editable-region-- +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + orange, + var(--building-color1), + var(--window-color1) + ); +} +--fcc-editable-region-- +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-047.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-047.md new file mode 100644 index 0000000000..786c61a26b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-047.md @@ -0,0 +1,202 @@ +--- +id: 5d822fd413a79914d39e98f7 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Remove `orange` from the `.bb1d` gradient and change the `80%` to `50%`. This will make `--building-color1` solid for the top half, and then transition to `--window-color1` for the bottom half. + +# --hints-- + +You should remove `orange` from the `linear-gradient`. + +```js +assert.notInclude(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'orange'); +``` + +You should change the now first `linear-gradient` color to transition at `50%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(var(--building-color1)50%,var(--window-color1))'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} +--fcc-editable-region-- +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + orange, + var(--building-color1) 80%, + var(--window-color1) + ); +} +--fcc-editable-region-- +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-048.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-048.md new file mode 100644 index 0000000000..7b6d2106e0 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-048.md @@ -0,0 +1,209 @@ +--- +id: 5d822fd413a79914d39e98f8 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Nest two new `div` elements within `.bb2`, give them the classes of `bb2a` and `bb2b`, in that order. These will be two sections for this building. + +# --hints-- + +You should add two `div` elements to `.bb2`. + +```js +assert.equal(document.querySelector('div.bb2')?.children?.length, 2); +``` + +You should give the first `div` a class of `bb2a`. + +```js +assert.exists(document.querySelector('div.bb2a')); +``` + +You should give the second `div` a class of `bb2b`. + +```js +assert.exists(document.querySelector('div.bb2b')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-049.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-049.md new file mode 100644 index 0000000000..aa1a31e821 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-049.md @@ -0,0 +1,206 @@ +--- +id: 5d822fd413a79914d39e98f9 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Give `.bb2b` a `width` and `height` of `100%` to make it fill the building container. You will add something on the top a little later. + +# --hints-- + +You should give `.bb2b` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.width, '100%'); +``` + +You should give `.bb2b` a `height` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.height, '100%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} +--fcc-editable-region-- + +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-050.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-050.md new file mode 100644 index 0000000000..a69e5fdf05 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-050.md @@ -0,0 +1,210 @@ +--- +id: 5d822fd413a79914d39e98fa +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Create a new variable in `:root` named `window-color2` with a value of `#8cd9b3`. This will be used as the secondary color for this building. + +# --hints-- + +You should create a new property variable called `window-color2` within `:root`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2')); +``` + +You should give `window-color2` a value of `#8cd9b3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2').trim(), '#8cd9b3'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} + +.bb2b { + width: 100%; + height: 100%; +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-051.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-051.md new file mode 100644 index 0000000000..e950a09ba5 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-051.md @@ -0,0 +1,239 @@ +--- +id: 5d822fd413a79914d39e98fb +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +You can make an instant color change in a gradient by giving the transition zero space like this: + +```css +gradient-type( + color1, + color1 50%, + color2 50%, + color2 +); +``` + +Here, the top half of the element will be `color1` and the bottom half will be `color2`. Add a `linear-gradient` to `.bb2b` that uses `--building-color2` from `0%` to `6%` and `--window-color2` from `6%` to `9%`. + +# --hints-- + +You should give `.bb2b` a `background` property. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background); +``` + +You should use a `linear-gradient` on the `background`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background, "linear-gradient"); +``` + +You should use `--building-color2` from `0%` to `6%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /var\(--building-color2\)(0%)?,var\(--building-color2\)6%/); +``` + +You should use `--window-color2` from `6%` to `9%`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "var(--window-color2)6%,var(--window-color2)9%"); +``` + +`.bb2b` should have a `linear-gradient` transitioning from `--building-color2` at `0%` to `6%`, and `--window-color2` at `6%` to `9%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)6%,var\(--window-color2\)6%,var\(--window-color2\)9%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; +} +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-052.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-052.md new file mode 100644 index 0000000000..ee9b760359 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-052.md @@ -0,0 +1,210 @@ +--- +id: 5d822fd413a79914d39e98fc +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +You can see the hard color change at the top of the section. Change the gradient type from `linear-gradient` to `repeating-linear-gradient` for this section. This will make the four colors of your gradient repeat until it gets to the bottom of the element; giving you some stripes, and saving you from having to add a bunch of elements to create them. + +# --hints-- + +You should change the `background` property of `.bb2b` from using `linear-gradient` to using `repeating-linear-gradient`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "repeating-linear-gradient(var(--building-color2),var(--building-color2)6%,var(--window-color2)6%,var(--window-color2)9%)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-053.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-053.md new file mode 100644 index 0000000000..392799de62 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-053.md @@ -0,0 +1,208 @@ +--- +id: 5d822fd413a79914d39e98fd +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +In the next few steps, you are going to use some tricks with CSS borders to turn the `.bb2a` section into a triangle at the top of the building. First, remove the `background-color` from `.bb2` since you don't need it anymore. + +# --hints-- + +You should remove the `background-color` from `.bb2`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2")?.backgroundColor); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( +var(--building-color1) 50%, +var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( +var(--building-color1), +var(--window-color1) + ); +} +--fcc-editable-region-- +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( +var(--building-color2), +var(--building-color2) 6%, +var(--window-color2) 6%, +var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-054.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-054.md new file mode 100644 index 0000000000..e5af4bf374 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-054.md @@ -0,0 +1,259 @@ +--- +id: 5d822fd413a79914d39e98fe +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Add these properties to `.bb2a`: + +```css +margin: auto; +width: 5vw; +height: 5vw; +border-top: 1vw solid #000; +border-bottom: 1vw solid #000; +border-left: 1vw solid #999; +border-right: 1vw solid #999; +``` + +After you add these, you can see how a thick border on an element gives you some angles where two sides meet. You are going to use that bottom border as the top of the building. + +# --hints-- + +You should give `.bb2a` a `margin` of `auto`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.margin, "auto"); +``` + +You should give `.bb2a` a `width` of `auto`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.width, "5vw"); +``` + +You should give `.bb2a` a `height` of `5vw`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.height, "5vw"); +``` + +You should give `.bb2a` a `border-top` of `1vw solid #000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderTop, "1vw solid rgb(0, 0, 0)"); +``` + +You should give `.bb2a` a `border-bottom` of `1vw solid #000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderBottom, "1vw solid rgb(0, 0, 0)"); +``` + +You should give `.bb2a` a `border-left` of `1vw solid #999`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderLeft, "1vw solid rgb(153, 153, 153)"); +``` + +You should give `.bb2a` a `border-right` of `1vw solid #999`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderRight, "1vw solid rgb(153, 153, 153)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} +--fcc-editable-region-- + +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-055.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-055.md new file mode 100644 index 0000000000..45f18d9e02 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-055.md @@ -0,0 +1,237 @@ +--- +id: 5d822fd413a79914d39e98ff +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Next, remove the `width` and `height` from `.bb2a`, and change the `border-left` and `border-right` to use `5vw` instead of `1vw`. The element will now have zero size and the borders will come together in the middle. + +# --hints-- + +You should remove the `width` from `.bb2a`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.width); +``` + +You should remove the `height` from `.bb2a`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.height); +``` + +You should change the `border-left` to use `5vw`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid rgb(153, 153, 153)"); +``` + +You should change the `border-right` to use `5vw`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid rgb(153, 153, 153)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} +--fcc-editable-region-- +.bb2a { + margin: auto; + width: 5vw; + height: 5vw; + border-top: 1vw solid #000; + border-bottom: 1vw solid #000; + border-left: 1vw solid #999; + border-right: 1vw solid #999; +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-056.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-056.md new file mode 100644 index 0000000000..7653173060 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-056.md @@ -0,0 +1,223 @@ +--- +id: 5d822fd413a79914d39e9900 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Next, change the two `#999` of `.bb2a` to `transparent`. This will make the left and right borders invisible. + +# --hints-- + +You should change the `border-left` to use `transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid transparent"); +``` + +You should change the `border-right` to use `transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid transparent"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} +--fcc-editable-region-- +.bb2a { + margin: auto; + border-top: 1vw solid #000; + border-bottom: 1vw solid #000; + border-left: 5vw solid #999; + border-right: 5vw solid #999; +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-057.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-057.md new file mode 100644 index 0000000000..1c17631e57 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-057.md @@ -0,0 +1,223 @@ +--- +id: 5d822fd413a79914d39e9901 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Remove the `margin` and `border-top` properties and values from `.bb2a` to turn it into a triangle for the top of the building. + +# --hints-- + +You should remove the `margin` from `.bb2a`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.margin); +``` + +You should remove the `border-top` from `.bb2a`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderTop); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} +--fcc-editable-region-- +.bb2a { + margin: auto; + border-top: 1vw solid #000; + border-bottom: 1vw solid #000; + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-058.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-058.md new file mode 100644 index 0000000000..d483efc8b3 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-058.md @@ -0,0 +1,226 @@ +--- +id: 5d822fd413a79914d39e9902 +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Finally, on the `border-bottom` property of `.bb2a`, change the `1vw` to `5vh` and change the `#000` color to your `--building-color2` variable. There you go, now it looks good! At any time throughout this project, you can comment out or remove the `border` property you added to everything at the beginning to see what the buildings will look like when that gets removed at the end. + +# --hints-- + +You should change `border-bottom` to use `5vh`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom, "5vh"); +``` + +You should change `border-bottom` to use `--building-color2`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "var(--building-color2)"); +``` + +`border-bottom` should be `5vh solid var(--building-color2)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "5vh solid var(--building-color2)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} +--fcc-editable-region-- +.bb2a { + border-bottom: 1vw solid #000; + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-059.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-059.md new file mode 100644 index 0000000000..85486ff2b8 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-059.md @@ -0,0 +1,222 @@ +--- +id: 5d822fd413a79914d39e9903 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +On to the next building! Create a new variable called `--window-color3` in `:root` and give it a value of `#d98cb3`. This will be the secondary color for the pink buildings. + +# --hints-- + +You should define a new property variable `--window-color3`. + +```js +assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color3")); +``` + +You should give `--window-color3` a value of `#d98cb3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color3")?.trim(), "#d98cb3"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-060.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-060.md new file mode 100644 index 0000000000..8d0e0feb23 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-060.md @@ -0,0 +1,244 @@ +--- +id: 5d822fd413a79914d39e9904 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +So far, all the gradients you created have gone from top to bottom, that's the default direction. You can specify another direction by adding it before your colors like this: + +```css +gradient-type( + direction, + color1, + color2 +); +``` + +Fill in `.bb3` with a `repeating-linear-gradient`. Use `90deg` for the direction, your `building-color3` for the first two colors, and `window-color3` at `15%` for the third. When you don't specify a distance for a color, it will use the values that makes sense. In this case, the first two colors will default to `0%` and `7.5%` because it starts at `0%`, and `7.5%` is half of the `15%`. + +# --hints-- + +You should give `.bb3` a `background` using `repeating-linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.background, "repeating-linear-gradient"); +``` + +You should use `90deg` for the direction in the first argument of `repeating-linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg"); +``` + +You should use `--building-color3` for the first two colors. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3)"); +``` + +You should use `--window-color3` at `15%` for the third color. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3),var(--window-color3)15%)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} +--fcc-editable-region-- +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-061.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-061.md new file mode 100644 index 0000000000..696a47b250 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-061.md @@ -0,0 +1,222 @@ +--- +id: 5d822fd413a79914d39e9905 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Remove the `background-color` property and value from `.bb3` since you are using the gradient as the background now. + +# --hints-- + +You should remove the `background-color` from `.bb3`. + +```js +assert.notMatch(code, /\.bb3\s*\{\s*[^}]*?background-color[^}]*?\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} +--fcc-editable-region-- +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-062.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-062.md new file mode 100644 index 0000000000..65cd610ba3 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-062.md @@ -0,0 +1,248 @@ +--- +id: 5d822fd413a79914d39e9906 +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +The next building will have three sections. Nest three `div` elements within `.bb4`. Give them the classes of `bb4a`, `bb4b` and `bb4c` in that order. + +# --hints-- + +You should add three `div` elements within `.bb4`. + +```js +assert.equal(document.querySelector("div.bb4")?.children?.length, 3); +``` + +You should give the first new `div` a class of `bb4a`. + +```js +assert.exists(document.querySelector("div.bb4 > div.bb4a")); +``` + +You should give the second new `div` a class of `bb4b`. + +```js +assert.exists(document.querySelector("div.bb4 > div.bb4a")); +``` + +You should give the third new `div` a class of `bb4c`. + +```js +assert.exists(document.querySelector("div.bb4 > div.bb4a")); +``` + +You should place the new `div` elements in this order `.bb4a + .bb4b + .bb4c`. + +```js +assert.exists(document.querySelector("div.bb4a + div.bb4b")); +assert.exists(document.querySelector("div.bb4b + div.bb4c")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-063.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-063.md new file mode 100644 index 0000000000..0b79da4e47 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-063.md @@ -0,0 +1,257 @@ +--- +id: 5d822fd413a79914d39e9907 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Give the new `div` elements these `width` and `height` values: `3%` and `10%` to `.bb4a`, `80%` and `5%` to `.bb4b`, and `100%` and `85%` to `.bb4c`. + +# --hints-- + +You should give `.bb4a` a `width` of `3%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.width, "3%"); +``` + +You should give `.bb4a` a `height` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.height, "10%"); +``` + +You should give `.bb4b` a `width` of `80%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.width, "80%"); +``` + +You should give `.bb4b` a `height` of `5%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.height, "5%"); +``` + +You should give `.bb4c` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.width, "100%"); +``` + +You should give `.bb4c` a `height` of `85%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.height, "85%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} +--fcc-editable-region-- + +--fcc-editable-region-- +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-064.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-064.md new file mode 100644 index 0000000000..118282c066 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-064.md @@ -0,0 +1,257 @@ +--- +id: 5d822fd413a79914d39e9908 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Remove the `background-color` property and value from `.bb4`, and add it to the three new sections `.bb4a`, `.bb4b`, and `.bb4c`, so only the sections are filled. + +# --hints-- + +You should remove the `background-color` from `.bb4`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb4")?.backgroundColor); +``` + +You should give `.bb4a` a `background-color` of `--building-color4`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.backgroundColor.trim(), "var(--building-color4)"); +``` + +You should give `.bb4b` a `background-color` of `--building-color4`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.backgroundColor.trim(), "var(--building-color4)"); +``` + +You should give `.bb4c` a `background-color` of `--building-color4`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.backgroundColor.trim(), "var(--building-color4)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} +--fcc-editable-region-- +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +.bb4a { + width: 3%; + height: 10%; +} + +.bb4b { + width: 80%; + height: 5%; +} + +.bb4c { + width: 100%; + height: 85%; +} +--fcc-editable-region-- +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-065.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-065.md new file mode 100644 index 0000000000..7295a689c5 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-065.md @@ -0,0 +1,244 @@ +--- +id: 5d822fd413a79914d39e9909 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +You want `.bb4` to share the properties of `.bb1` that center the sections. Instead of duplicating that code, create a new class above the background building comment called `building-wrap`. Leave it empty for now; this class will be used in a few places to save you some coding. + +# --hints-- + +You should create a new class declaration called `building-wrap`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle(".building-wrap")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} +--fcc-editable-region-- + +--fcc-editable-region-- +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-066.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-066.md new file mode 100644 index 0000000000..320be1f69b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-066.md @@ -0,0 +1,276 @@ +--- +id: 5d822fd413a79914d39e990a +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Move the `display`, `flex-direction`, and `align-items` properties and values from `.bb1` to the new `building-wrap` class. + +# --hints-- + +You should remove `display` from `.bb1`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.display); +``` + +You should move `display` with a value of `flex` to `.building-wrap`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.display, "flex"); +``` + +You should remove `flex-direction` from `.bb1`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.flexDirection); +``` + +You should move `flex-direction` with a value of `column` to `.building-wrap`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.flexDirection, "column"); +``` + +You should remove `align-items` from `.bb1`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.alignItems); +``` + +You should move `align-items` with a value of `center` to `.building-wrap`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.alignItems, "center"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} +--fcc-editable-region-- +.building-wrap { + +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} +--fcc-editable-region-- +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-067.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-067.md new file mode 100644 index 0000000000..620263b9aa --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-067.md @@ -0,0 +1,253 @@ +--- +id: 5d822fd413a79914d39e990b +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Add the new `building-wrap` class to the `.bb1` and `.bb4` elements. This will apply the centering properties to the buildings that need it. + +# --hints-- + +You should add `building-wrap` to the `.bb1` element. + +```js +assert.exists(document.querySelector("div.bb1.building-wrap")); +``` + +You should add `building-wrap` to the `.bb4` element. + +```js +assert.exists(document.querySelector("div.bb4.building-wrap")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-068.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-068.md new file mode 100644 index 0000000000..706046d44c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-068.md @@ -0,0 +1,252 @@ +--- +id: 5d822fd413a79914d39e990c +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +Create a new variable called `--window-color4` in `:root` and give it a value of `#8cb3d9`. This will be the secondary color for the last background building. + +# --hints-- + +You should define a new property variable `--window-color4`. + +```js +assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color4")); +``` + +You should give `--window-color4` a value of `#8cb3d9`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color4")?.trim(), "#8cb3d9"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-069.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-069.md new file mode 100644 index 0000000000..5f8c00b85d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-069.md @@ -0,0 +1,254 @@ +--- +id: 5d822fd413a79914d39e990d +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Nest four new `div` elements within `.bb4c`, give them all the class of `bb4-window`. These will be windows for this building. + +# --hints-- + +You should add four `div` elements to `.bb4c`. + +```js +assert.equal(document.querySelector(".bb4c")?.children?.length, 4); +``` + +You should give each new `div` a class of `bb4-window`. + +```js +assert.equal(document.querySelectorAll("div.bb4c > div.bb4-window")?.length, 4); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-070.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-070.md new file mode 100644 index 0000000000..7cc97f2ee7 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-070.md @@ -0,0 +1,264 @@ +--- +id: 5d822fd413a79914d39e990e +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Give the `bb4-window` class a `width` of `18%`, a `height` of `90%`, and add your `--window-color4` variable as the `background-color`. + +# --hints-- + +You should give `.bb4-window` a `width` of `18%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.width, "18%"); +``` + +You should give `.bb4-window` a `height` of `90%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.height, "90%"); +``` + +You should give `.bb4-window` a `background-color` of `--window-color4`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.backgroundColor.trim(), "var(--window-color4)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} +--fcc-editable-region-- + +--fcc-editable-region-- +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-071.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-071.md new file mode 100644 index 0000000000..1deeefb4cd --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-071.md @@ -0,0 +1,285 @@ +--- +id: 5d822fd413a79914d39e990f +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +The windows are stacked on top of each other at the left of the section, behind the purple building. Add a new class below `.building-wrap` called `.window-wrap`, and add these properties to it: + +```css +display: flex; +align-items: center; +justify-content: space-evenly; +``` + +This will be used in a few places to center window elements vertically, and evenly space them in their parent. + +# --hints-- + +You should create a `.window-wrap` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle(".window-wrap")); +``` + +You should give `.window-wrap` a `display` of `flex`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.display, "flex"); +``` + +You should give `.window-wrap` an `align-items` of `center`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.alignItems, "center"); +``` + +You should give `.window-wrap` a `justify-content` of `space-evenly`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.justifyContent, "space-evenly"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} +--fcc-editable-region-- + +--fcc-editable-region-- +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-072.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-072.md new file mode 100644 index 0000000000..4dbb203899 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-072.md @@ -0,0 +1,265 @@ +--- +id: 5d822fd413a79914d39e9910 +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Add the new `window-wrap` class to the `.bb4c` element. + +# --hints-- + +You should add a class of `window-wrap` to `.bb4c`. + +```js +assert.exists(document.querySelector("div.bb4c.window-wrap")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-073.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-073.md new file mode 100644 index 0000000000..96e5994d0f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-073.md @@ -0,0 +1,290 @@ +--- +id: 5d822fd413a79914d39e9911 +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +Looks good! On to the foreground buildings! Turn the `.fb1` building into three sections by nesting three new `div` elements within it. Give them the classes of `fb1a`, `fb1b` and `fb1c`, in that order. + +# --hints-- + +You should add three `div` elements within `.fb1`. + +```js +assert.equal(document.querySelector("div.fb1")?.children?.length, 3); +``` + +You should give the first new `div` a class of `fb1a`. + +```js +assert.exists(document.querySelector("div.fb1 > div.fb1a")); +``` + +You should give the second new `div` a class of `fbab`. + +```js +assert.exists(document.querySelector("div.fb1 > div.fb1b")); +``` + +You should give the third new `div` a class of `fb1c`. + +```js +assert.exists(document.querySelector("div.fb1 > div.fb1c")); +``` + +You should place the new `div` elements in this order `.fb1a + .fb1b + .fb1c`. + +```js +assert.exists(document.querySelector("div.fb1a + div.fb1b")); +assert.exists(document.querySelector("div.fb1b + div.fb1c")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-074.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-074.md new file mode 100644 index 0000000000..c4921e63ac --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-074.md @@ -0,0 +1,286 @@ +--- +id: 5d822fd413a79914d39e9912 +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Give `.fb1b` a `width` of `60%` and `height` of `10%`, and `.fb1c` a `width` of `100%` and `height` of `80%`. + +# --hints-- + +You should give `.fb1b` a `width` of `60%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.width, "60%"); +``` + +You should give `.fb1b` a `height` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.height, "10%"); +``` + +You should give `.fb1c` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.width, "100%"); +``` + +You should give `.fb1c` a `height` of `80%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.height, "80%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-075.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-075.md new file mode 100644 index 0000000000..05e6a7e805 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-075.md @@ -0,0 +1,279 @@ +--- +id: 5d822fd413a79914d39e9913 +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Add the `building-wrap` class to the `.fb1` element to center the sections. + +# --hints-- + +You should add the class `building-wrap` to `.fb1`. + +```js +assert.exists(document.querySelector("div.fb1.building-wrap")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+--fcc-editable-region-- +
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb1b { + width: 60%; + height: 10%; +} + +.fb1c { + width: 100%; + height: 80%; +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-076.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-076.md new file mode 100644 index 0000000000..745f7f94a9 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-076.md @@ -0,0 +1,283 @@ +--- +id: 5d822fd413a79914d39e9914 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Move the `background-color` property and value from `.fb1` to `.fb1b`. + +# --hints-- + +You should remove `background-color` from `.fb1`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb1")?.backgroundColor); +``` + +You should add a `background-color` of `--building-color4` to `.fb1b`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.backgroundColor.trim(), "var(--building-color4)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +--fcc-editable-region-- +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb1b { + width: 60%; + height: 10%; +} +--fcc-editable-region-- +.fb1c { + width: 100%; + height: 80%; +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-077.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-077.md new file mode 100644 index 0000000000..367add6a5f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-077.md @@ -0,0 +1,296 @@ +--- +id: 5d822fd413a79914d39e9916 +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +Don't worry about the space at the bottom, everything will get moved down later when you add some height to the element at the top of the building. + +Add a `repeating-linear-gradient` to `.fb1c` with a `90deg` angle, your `--building-color4` from `0%` to `10%` and `transparent` from `10%` to `15%`. + +# --hints-- + +You should give `.fb1c` a `background` with a `repeating-linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.background, "repeating-linear-gradient"); +``` + +You should use a direction of `90deg`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), "repeating-linear-gradient(90deg"); +``` + +You should use a first color of `--building-color4` from `0%` to `10%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%/); +``` + +You should use a second color of `transparent` from `10%` to `15%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} +--fcc-editable-region-- +.fb1c { + width: 100%; + height: 80%; +} +--fcc-editable-region-- +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-078.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-078.md new file mode 100644 index 0000000000..72820c5e31 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-078.md @@ -0,0 +1,306 @@ +--- +id: 5d822fd413a79914d39e9917 +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +You can add multiple gradients to an element by separating them with a comma (`,`) like this: + +```css +gradient1( + colors +), +gradient2( + colors +); +``` + +Add a `repeating-linear-gradient` to `.fb1c` below the one that's there; use your `--building-color4` from `0%` to `10%` and `--window-color4` from `10%` and `90%`. This will fill in behind the gradient you added last. + +# --hints-- + +You should not alter the first `repeating-linear-gradient`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\)/); +``` + +You should add a `repeating-linear-gradient` with a first color of `--building-color4` from `0%` to `10%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color4\)(0%)?,var\(--building-color4\)10%/); +``` + +You should use a second color of `--window-color4` from `10%` to `90%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\),repeating-linear-gradient\(var\(--building-color4\)(0%)?,var\(--building-color4\)10%,var\(--window-color4\)10%,var\(--window-color4\)90%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} +--fcc-editable-region-- +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ) +} +--fcc-editable-region-- +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-079.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-079.md new file mode 100644 index 0000000000..cd5163ab40 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-079.md @@ -0,0 +1,297 @@ +--- +id: 5d822fd413a79914d39e9918 +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +You're going to use some more border tricks for the top section. Add a `border-bottom` with a value of `7vh solid var(--building-color4)` to `.fb1a`. This will put a `7vh` height border on the bottom. But since the element has zero size, it only shows up as a 2px wide line from the 1px border that is on all the elements. + +# --hints-- + +You should give `.fb1a` a `border-bottom`. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom); +``` + +You should use a `border-bottom` of `7vh solid var(--building-color4)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom.trim(), "7vh solid var(--building-color4)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-080.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-080.md new file mode 100644 index 0000000000..b8da9757eb --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-080.md @@ -0,0 +1,300 @@ +--- +id: 5d822fd413a79914d39e9919 +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +When you make the left and right borders bigger, the border on the bottom will expand to be the width of the combined left and right border widths. Add `2vw solid transparent` as the value of the `border-left` and `border-right` properties of `.fb1a`. They will be invisible, but it will make the border on the bottom `4vw` wide. + +# --hints-- + +You should give `.fb1a` a `border-left` of `2vw solid transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderLeft, "2vw solid transparent"); +``` + +You should give `.fb1a` a `border-right` of `2vw solid transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderRight, "2vw solid transparent"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} +--fcc-editable-region-- +.fb1a { + border-bottom: 7vh solid var(--building-color4); +} +--fcc-editable-region-- +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-081.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-081.md new file mode 100644 index 0000000000..83f38c1043 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-081.md @@ -0,0 +1,311 @@ +--- +id: 5d822fd413a79914d39e991a +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +On to the next building! Nest two `div` elements within `.fb2` and give them classes of `fb2a` and `fb2b`, in that order. + +# --hints-- + +You should add two `div` elements within `.fb2`. + +```js +assert.equal(document.querySelectorAll("div.fb2 > div")?.length, 2); +``` + +You should give the first new `div` a class of `fb2a`. + +```js +assert.exists(document.querySelector("div.fb2 > div.fb2a")); +assert(document.querySelector("div.fb2 > div.fb2a") === document.querySelector("div.fb2")?.firstElementChild); +``` + +You should give the second new `div` a class of `fb2b`. + +```js +assert.exists(document.querySelector("div.fb2 > div.fb2b")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-082.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-082.md new file mode 100644 index 0000000000..cc905e068a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-082.md @@ -0,0 +1,313 @@ +--- +id: 5d822fd413a79914d39e991b +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +Give `.fb2a` a `width` of `100%` and `.fb2b` a `width` of `100%` and `height` of `75%`. + +# --hints-- + +You should give `.fb2a` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.width, "100%"); +``` + +You should give `.fb2b` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.width, "100%"); +``` + +You should give `.fb2b` a `height` of `75%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.height, "75%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-083.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-083.md new file mode 100644 index 0000000000..435f35f9a4 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-083.md @@ -0,0 +1,316 @@ +--- +id: 5d822fd413a79914d39e991c +title: Step 83 +challengeType: 0 +dashedName: step-83 +--- + +# --description-- + +Nest three `div` elements within `.fb2b` and give them a class of `fb2-window`. These will be windows for this section of the building. + +# --hints-- + +You should add three `div` elements within `.fb2b`. + +```js +assert.equal(document.querySelectorAll("div.fb2b > div")?.length, 3); +``` + +You should give the three new `div` elements each a class of `fb2-window`. + +```js +assert.equal(document.querySelectorAll("div.fb2-window")?.length, 3); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb2a { + width: 100%; +} + +.fb2b { + width: 100%; + height: 75%; +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-084.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-084.md new file mode 100644 index 0000000000..c2f3a40d01 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-084.md @@ -0,0 +1,314 @@ +--- +id: 5d822fd413a79914d39e991d +title: Step 84 +challengeType: 0 +dashedName: step-84 +--- + +# --description-- + +Add your `window-wrap` class to `.fb2b` to position the new window elements. + +# --hints-- + +You should add the class `window-wrap` to `.fb2b`. + +```js +assert.exists(document.querySelector("div.fb2b.window-wrap")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb2a { + width: 100%; +} + +.fb2b { + width: 100%; + height: 75%; +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-085.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-085.md new file mode 100644 index 0000000000..663e2f3492 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-085.md @@ -0,0 +1,325 @@ +--- +id: 5d822fd413a79914d39e991e +title: Step 85 +challengeType: 0 +dashedName: step-85 +--- + +# --description-- + +Give the `.fb2-window` elements a `width` of `22%`, `height` of `100%`, and a `background-color` of your `--window-color3` variable. + +# --hints-- + +You should give the `.fb2-window` elements a `width` of `22%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.width, "22%"); +``` + +You should give the `.fb2-window` elements a `height` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.height, "100%"); +``` + +You should give the `.fb2-window` elements a `background-color` of `--window-color3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.backgroundColor.trim(), "var(--window-color3)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb2a { + width: 100%; +} + +.fb2b { + width: 100%; + height: 75%; +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-086.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-086.md new file mode 100644 index 0000000000..6f801d64ca --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-086.md @@ -0,0 +1,323 @@ +--- +id: 5d822fd413a79914d39e991f +title: Step 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +Move the `background-color` property and value from `.fb2` to `.fb2b` to just color the section and not the container. + +# --hints-- + +You should remove the `background-color` property from `.fb2`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb2")?.backgroundColor); +``` + +You should give `.fb2b` a `background-color` of `--building-color3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.backgroundColor.trim(), "var(--building-color3)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} +--fcc-editable-region-- +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb2a { + width: 100%; +} + +.fb2b { + width: 100%; + height: 75%; +} +--fcc-editable-region-- +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-087.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-087.md new file mode 100644 index 0000000000..6d51ad75eb --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-087.md @@ -0,0 +1,329 @@ +--- +id: 5d822fd413a79914d39e9920 +title: Step 87 +challengeType: 0 +dashedName: step-87 +--- + +# --description-- + +For `.fb2a`, add a `border-bottom` of `10vh solid var(--building-color3)`, and a `border-left` and `border-right` of `1vw solid transparent`. This time the border trick will create a trapezoid shape. + +# --hints-- + +You should give `.fb2a` a `border-bottom` of `10vh solid var(--building-color3)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderBottom.trim(), "10vh solid var(--building-color3)"); +``` + +You should give `.fb2a` a `border-left` of `1vw solid transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderLeft, "1vw solid transparent"); +``` + +You should give `.fb2a` a `border-right` of `1vw solid transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderRight, "1vw solid transparent"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} +--fcc-editable-region-- +.fb2a { + width: 100%; +} +--fcc-editable-region-- +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-088.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-088.md new file mode 100644 index 0000000000..059379becf --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-088.md @@ -0,0 +1,347 @@ +--- +id: 5d822fd413a79914d39e9921 +title: Step 88 +challengeType: 0 +dashedName: step-88 +--- + +# --description-- + +For the next building, nest four `div` elements within `.fb3` with classes of `fb3a`, `fb3b`, `fb3a` again, and `fb3b` again, in that order. This building will have four sections, and the top two will be almost the same as the bottom two. + +# --hints-- + +You should add four `div` elements within `.fb3`. + +```js +assert.equal(document.querySelectorAll("div.fb3 > div")?.length, 4); +``` + +You should give the first new `div` a class of `fb3a`. + +```js +assert.equal(document.querySelector("div.fb3").firstElementChild, document.querySelector("div.fb3a")); +``` + +You should give the second new `div` a class of `fb3b`. + +```js +assert.equal(document.querySelector("div.fb3 :nth-child(2)"), document.querySelector("div.fb3b")); +``` + +You should give the third new `div` a class of `fb3a`. + +```js +assert.equal(document.querySelector("div.fb3 :nth-child(3)"), document.querySelector("div.fb3b + div.fb3a")); +``` + +You should give the fourth new `div` a class of `fb3b`. + +```js +assert.exists(document.querySelector("div.fb3 :nth-child(4).fb3b")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-089.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-089.md new file mode 100644 index 0000000000..6354a9ff0e --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-089.md @@ -0,0 +1,346 @@ +--- +id: 5d822fd413a79914d39e9922 +title: Step 89 +challengeType: 0 +dashedName: step-89 +--- + +# --description-- + +Give the `.fb3a` element a `width` of `80%` and `height` of `15%`. Then give the `.fb3b` element a `width` of `100%` and `height` of `35%`. + +# --hints-- + +You should give `.fb3a` a `width` of `80%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.width, "80%"); +``` + +You should give `.fb3a` a `height` of `15%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.height, "15%"); +``` + +You should give `.fb3b` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.width, "100%"); +``` + +You should give `.fb3b` a `height` of `35%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.height, "35%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-090.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-090.md new file mode 100644 index 0000000000..de5b248187 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-090.md @@ -0,0 +1,347 @@ +--- +id: 5d822fd413a79914d39e9923 +title: Step 90 +challengeType: 0 +dashedName: step-90 +--- + +# --description-- + +Remove the `background-color` property and value from `.fb3`, and add them to `.fb3a` and `.fb3b`. + +# --hints-- + +You should remove the `background-color` from `.fb3`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb3")?.backgroundColor); +``` + +You should give `.fb3a` a `background-color` of `--building-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.backgroundColor.trim(), "var(--building-color1)"); +``` + +You should give `.fb3b` a `background-color` of `--building-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.backgroundColor.trim(), "var(--building-color1)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} +--fcc-editable-region-- +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3a { + width: 80%; + height: 15%; +} + +.fb3b { + width: 100%; + height: 35%; +} +--fcc-editable-region-- +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-091.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-091.md new file mode 100644 index 0000000000..7f8c2ec9e5 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-091.md @@ -0,0 +1,339 @@ +--- +id: 5d822fd413a79914d39e9924 +title: Step 91 +challengeType: 0 +dashedName: step-91 +--- + +# --description-- + +Add your `building-wrap` class to the `.fb3` element to center the sections. + +# --hints-- + +You should add the class `building-wrap` to `.fb3`. + +```js +assert.exists(document.querySelector("div.fb3.building-wrap")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-092.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-092.md new file mode 100644 index 0000000000..beb2dff073 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-092.md @@ -0,0 +1,345 @@ +--- +id: 5d822fd413a79914d39e9925 +title: Step 92 +challengeType: 0 +dashedName: step-92 +--- + +# --description-- + +Nest three new `div` elements in the first `.fb3a` element. Give them each a class of `fb3-window`. These will be windows for this section. + +# --hints-- + +You should add three `div` elements within the first `.fb3a` element. + +```js +assert.equal(document.querySelectorAll("div.fb3a > div")?.length, 3); +``` + +You should give each new `div` a class of `fb3-window`. + +```js +assert.equal(document.querySelectorAll("div.fb3-window")?.length, 3) +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-093.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-093.md new file mode 100644 index 0000000000..011081f7f5 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-093.md @@ -0,0 +1,354 @@ +--- +id: 5d822fd413a79914d39e9926 +title: Step 93 +challengeType: 0 +dashedName: step-93 +--- + +# --description-- + +Give the `.fb3-window` elements a `width` of `25%`, a `height` of `80%`, and use your `--window-color1` variable as the `background-color` value. + +# --hints-- + +You should give `.fb3-window` a `width` of `25%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.width, "25%"); +``` + +You should give `.fb3-window` a `height` of `80%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.height, "80%"); +``` + +You should give `.fb3-window` a `background-color` of `--window-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.backgroundColor.trim(), "var(--window-color1)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-094.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-094.md new file mode 100644 index 0000000000..f37406e17c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-094.md @@ -0,0 +1,349 @@ +--- +id: 5d822fd413a79914d39e9927 +title: Step 94 +challengeType: 0 +dashedName: step-94 +--- + +# --description-- + +Add your `window-wrap` class to the `.fb3a` element to center and space the windows. + +# --hints-- + +You should give `.fb3a` a class of `window-wrap`. + +```js +assert.exists(document.querySelector("div.fb3a.window-wrap")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-095.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-095.md new file mode 100644 index 0000000000..805692790b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-095.md @@ -0,0 +1,348 @@ +--- +id: 5d822fd413a79914d39e9928 +title: Step 95 +challengeType: 0 +dashedName: step-95 +--- + +# --description-- + +I'm not thrilled about that black for the windows anymore. Change the `--window-color1` value to `#bb99ff`. + +# --hints-- + +You should change the value of `--window-color1` to `#bb99ff`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color1")?.trim(), "#bb99ff"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-096.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-096.md new file mode 100644 index 0000000000..f726642ae7 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-096.md @@ -0,0 +1,361 @@ +--- +id: 5d822fd413a79914d39e9929 +title: Step 96 +challengeType: 0 +dashedName: step-96 +--- + +# --description-- + +Only three more building to go. Nest two new `div` elements within the `.fb4` element and give them the classes of `fb4a` and `fb4b`, in that order. Remember that you sort of flipped the location of `.fb4` and `.fb5`, so it's the rightmost purple building you are working on now. + +# --hints-- + +You should add two `div` elements within `.fb4`. + +```js +assert.equal(document.querySelectorAll("div.fb4 > div")?.length, 2); +``` + +You should give the first new `div` a class of `fb4a`. + +```js +assert.exists(document.querySelector("div.fb4a")); +``` + +You should give the second new `div` a class of `fb4b`. + +```js +assert.exists(document.querySelector("div.fb4b")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-097.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-097.md new file mode 100644 index 0000000000..8a93d618a8 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-097.md @@ -0,0 +1,358 @@ +--- +id: 5d822fd413a79914d39e992a +title: Step 97 +challengeType: 0 +dashedName: step-97 +--- + +# --description-- + +Give `.fb4b` a `width` of `100%` and `height` of `89%`. + +# --hints-- + +You should give `.fb4b` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.width, "100%"); +``` + +You should give `.fb4b` a `height` of `89%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.height, "89%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-098.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-098.md new file mode 100644 index 0000000000..9401dc8c54 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-098.md @@ -0,0 +1,360 @@ +--- +id: 5d822fd413a79914d39e992b +title: Step 98 +challengeType: 0 +dashedName: step-98 +--- + +# --description-- + +Add your `--building-color1` variable as value of the `background-color` property of `.fb4b`. Then, remove the `background-color` from `.fb4`. + +# --hints-- + +You should remove the `background-color` from `.fb4`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb4")?.backgroundColor); +``` + +You should give `.fb4b` a `background-color` of `--building-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.backgroundColor.trim(), "var(--building-color1)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} +--fcc-editable-region-- +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb4b { + width: 100%; + height: 89%; +} +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-099.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-099.md new file mode 100644 index 0000000000..d4afd28278 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-099.md @@ -0,0 +1,363 @@ +--- +id: 5d822fd413a79914d39e992c +title: Step 99 +challengeType: 0 +dashedName: step-99 +--- + +# --description-- + +Nest six `div` elements within `.fb4b` and give them all a class of `fb4-window`. + +# --hints-- + +You should add six `div` elements within `.fb4b`. + +```js +assert.equal(document.querySelectorAll("div.fb4b > div")?.length, 6); +``` + +You should give each new `div` a class of `fb4-window`. + +```js +assert.equal(document.querySelectorAll("div.fb4-window")?.length, 6); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-100.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-100.md new file mode 100644 index 0000000000..5b46639daf --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-100.md @@ -0,0 +1,376 @@ +--- +id: 5d822fd413a79914d39e992d +title: Step 100 +challengeType: 0 +dashedName: step-100 +--- + +# --description-- + +Give the `.fb4-window` elements a `width` of `30%`, `height` of `10%`, and `border-radius` of `50%`. These will make some circular windows for this building. + +# --hints-- + +You should give `.fb4-window` a `width` of `30%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.width, "30%"); +``` + +You should give `.fb4-window` a `height` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.height, "10%"); +``` + +You should give `.fb4-window` a `border-radius` of `50%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.borderRadius, "50%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-101.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-101.md new file mode 100644 index 0000000000..74ceeb39d3 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-101.md @@ -0,0 +1,373 @@ +--- +id: 5d822fd413a79914d39e992e +title: Step 101 +challengeType: 0 +dashedName: step-101 +--- + +# --description-- + +Fill in the windows with your secondary color for this building. Also add a `margin` of `10%` to give the windows some space. + +# --hints-- + +You should give `.fb4-window` a `background-color` of `--window-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.backgroundColor.trim(), "var(--window-color1)"); +``` + +You should give `.fb4-window` a `margin` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.margin, "10%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; +} +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-102.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-102.md new file mode 100644 index 0000000000..5b7ab0871a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-102.md @@ -0,0 +1,376 @@ +--- +id: 5d822fd413a79914d39e992f +title: Step 102 +challengeType: 0 +dashedName: step-102 +--- + +# --description-- + +Add `display: flex` and `flex-wrap: wrap` to the window container. This will put your windows side by side, and then push them down to a new row when they don't fit. + +# --hints-- + +You should give `.fb4b` a `display` of `flex`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.display, "flex"); +``` + +You should give `.fb4b` a `flex-wrap` of `wrap`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.flexWrap, "wrap"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} +--fcc-editable-region-- +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-103.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-103.md new file mode 100644 index 0000000000..8776b2a343 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-103.md @@ -0,0 +1,380 @@ +--- +id: 5d822fd413a79914d39e9930 +title: Step 103 +challengeType: 0 +dashedName: step-103 +--- + +# --description-- + +This building is going to have another triangle on top. Give the top section a `border-top` of `5vh solid transparent`, and a `border-left` that is `8vw`, `solid`, and uses your building color variable as the color. + +# --hints-- + +You should give `.fb4a` a `border-top` of `5vh solid transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderTop.trim(), "5vh solid transparent") +``` + +You should give `.fb4a` a `border-left` of `8vw solid var(--building-color1)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderLeft.trim(), "8vw solid var(--building-color1)") +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} +--fcc-editable-region-- + +--fcc-editable-region-- +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-104.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-104.md new file mode 100644 index 0000000000..a5d17609f4 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-104.md @@ -0,0 +1,395 @@ +--- +id: 5d822fd413a79914d39e9932 +title: Step 104 +challengeType: 0 +dashedName: step-104 +--- + +# --description-- + +On to the next building! It's the green one in the foreground. Give it a `repeating-linear-gradient` with your building color from `0%` to `5%`, and `transparent` from `5%` to `10%`. + +# --hints-- + +You should give `.fb5` a `background` property. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb5")?.background); +``` + +You should give the `background` a `repeating-linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".fb5")?.background, "repeating-linear-gradient"); +``` + +You should give the `repeating-linear-gradient` a first color of `--building-color2` from `0%` to `5%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%/); +``` + +You should give the `repeating-linear-gradient` a second color of `transparent` from `5%` to `10%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-105.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-105.md new file mode 100644 index 0000000000..7b52378398 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-105.md @@ -0,0 +1,401 @@ +--- +id: 5d822fd413a79914d39e9933 +title: Step 105 +challengeType: 0 +dashedName: step-105 +--- + +# --description-- + +Add another `repeating-linear-gradient` below the one you just added. Give it a `90deg` direction, use your building color from `0%` to `12%` and window color `12%` to `44%`. This will make a bunch of rectangle windows. + +# --hints-- + +You should give `.fb5` a second `repeating-linear-gradient` in the `background` property. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient/); +``` + +You should give the second `repeating-linear-gradient` a direction of `90deg`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg/); +``` + +You should give the second `repeating-linear-gradient` a first color of `--building-color2` from `0%` to `12%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%/); +``` + +You should give the second `repeating-linear-gradient` a second color of `--window-color2` from `12%` to `44%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%,var\(--window-color2\)12%,var\(--window-color2\)44%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ) +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-106.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-106.md new file mode 100644 index 0000000000..9cd09a4676 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-106.md @@ -0,0 +1,390 @@ +--- +id: 5d822fd413a79914d39e9915 +title: Step 106 +challengeType: 0 +dashedName: step-106 +--- + +# --description-- + +You don't need the `background-color` for this building anymore so you can remove that property. + +# --hints-- + +You should remove the `background-color` of `.fb5`. + +```js +assert.notMatch(code, /\.fb5\s*\{\s*[^}]*?background-color[^}]*?\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-107.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-107.md new file mode 100644 index 0000000000..63789692f9 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-107.md @@ -0,0 +1,408 @@ +--- +id: 5d822fd413a79914d39e9934 +title: Step 107 +challengeType: 0 +dashedName: step-107 +--- + +# --description-- + +Finally! You made it to the last building! Add a repeating gradient to it with a `90deg` direction. Use the building color from `0%` to `10%` and `transparent` from `10%` to `30%`. + +# --hints-- + +You should add a `repeating-linear-gradient` to `.fb6` in the `background` property. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.background, "repeating-linear-gradient"); +``` + +You should give the `repeating-linear-gradient` a direction of `90deg`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), "repeating-linear-gradient(90deg"); +``` + +You should give the `repeating-linear-gradient` a first color of `--building-color3` from `0%` to `10%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%/); +``` + +You should give the `repeating-linear-gradient` a second color of `transparent` from `10%` to `30%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-108.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-108.md new file mode 100644 index 0000000000..a4b5d48895 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-108.md @@ -0,0 +1,408 @@ +--- +id: 5d822fd413a79914d39e9935 +title: Step 108 +challengeType: 0 +dashedName: step-108 +--- + +# --description-- + +Add another repeating gradient to this building; make it the same as the one you just added, except don't add the `90deg` direction and use your window color instead of the two `transparent` colors. + +# --hints-- + +You should give `.fb6` a second `repeating-linear-gradient` in the `background` property. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient/); +``` + +You should give the second `repeating-linear-gradient` a first color of `--building-color3` from `0%` to `10%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%/); +``` + +You should give the second `repeating-linear-gradient` a second color of `--window-color3` from `10%` to `30%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%,var\(--window-color3\)10%,var\(--window-color3\)30%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ) +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-109.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-109.md new file mode 100644 index 0000000000..2069dd51dc --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-109.md @@ -0,0 +1,403 @@ +--- +id: 5d822fd413a79914d39e9931 +title: Step 109 +challengeType: 0 +dashedName: step-109 +--- + +# --description-- + +You can remove the `background-color` for this building now, since it isn't needed. + +# --hints-- + +You should remove the `background-color` of `.fb6`. + +```js +assert.notMatch(code, /\.fb6\s*\{\s*[^}]*?background-color[^}]*?\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-110.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-110.md new file mode 100644 index 0000000000..6fae389d82 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-110.md @@ -0,0 +1,401 @@ +--- +id: 5d822fd413a79914d39e9936 +title: Step 110 +challengeType: 0 +dashedName: step-110 +--- + +# --description-- + +Okay, the buildings are done. Go back to the `*` selector and remove the `border` you applied to everything at the beginning and the buildings will come together. + +# --hints-- + +You should remove the `border` from the `*` selector. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle("*")?.border); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} +--fcc-editable-region-- +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-111.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-111.md new file mode 100644 index 0000000000..79211722c4 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-111.md @@ -0,0 +1,402 @@ +--- +id: 5d822fd413a79914d39e9937 +title: Step 111 +challengeType: 0 +dashedName: step-111 +--- + +# --description-- + +Add `sky` as a second class to the `.background-buildings` element. You are going to make a background for the skyline. + +# --hints-- + +You should add a class of `sky` to `.background-buildings`. + +```js +assert.exists(document.querySelector("div.background-buildings.sky")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +--fcc-editable-region-- +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-112.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-112.md new file mode 100644 index 0000000000..de8fcc0fab --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-112.md @@ -0,0 +1,420 @@ +--- +id: 5d822fd413a79914d39e9938 +title: Step 112 +challengeType: 0 +dashedName: step-112 +--- + +# --description-- + +Give the `sky` class a `radial-gradient`. Use `#ffcf33` from `0%` to `20%`, `#ffff66` at `21%`, and `#bbeeff` at `100%`. This will add circular gradient to the background that will be your sun. + +# --hints-- + +You should give `.sky` a `radial-gradient` in the `background` property. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".sky")?.background, "radial-gradient"); +``` + +You should give the `radial-gradient` a first color of `#ffcf33`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%/); +``` + +You should give the `radial-gradient` a second color of `#ffff66` at `21%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%/); +``` + +You should give the `radial-gradient` a third color of `#bbeeff` at `100%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} +--fcc-editable-region-- + +--fcc-editable-region-- +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-113.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-113.md new file mode 100644 index 0000000000..a25f938bc2 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-113.md @@ -0,0 +1,409 @@ +--- +id: 5d822fd413a79914d39e9939 +title: Step 113 +challengeType: 0 +dashedName: step-113 +--- + +# --description-- + +At the top of the sky gradient color list, where you would put a direction for the gradient; add `circle closest-corner at 15% 15%,`. This will move the start of the gradient to `15%` from the top and left. It will make it end at the `closest-corner` and it will maintain a `circle` shape. These are some keywords built into gradients to describe how it behaves. + +# --hints-- + +You should give the `.sky` `radial-gradient` a direction of `circle closest-corner at 15% 15%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(circle closest-corner at 15% 15%, rgb\(255, 207, 51\)|( 0%), rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} +--fcc-editable-region-- +.sky { + background: radial-gradient( + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} +--fcc-editable-region-- +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-114.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-114.md new file mode 100644 index 0000000000..f22e40aa7a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-114.md @@ -0,0 +1,421 @@ +--- +id: 5d822fd413a79914d39e993a +title: Step 114 +challengeType: 0 +dashedName: step-114 +--- + +# --description-- + +A media query can be used to change styles based on certain conditions, and they look like this: + +```css +@media (condition) { + +} +``` + +Add an empty media query at the bottom of your stylesheet with a condition of `max-width: 1000px`. Styles added in here will take effect when the document size is 1000px wide or less. + +# --hints-- + +You should add an empty media query with `max-width: 1000px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getCSSRules("media")?.[0]?.media?.mediaText, '(max-width: 1000px)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-115.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-115.md new file mode 100644 index 0000000000..13c7ea6b25 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-115.md @@ -0,0 +1,423 @@ +--- +id: 5d822fd413a79914d39e993b +title: Step 115 +challengeType: 0 +dashedName: step-115 +--- + +# --description-- + +Copy and paste your whole `sky` class along with all of its properties and values into the media query. You are going to make another color scheme for the skyline that changes it from day to night. + +Note: You are going to need to scroll past the editable region to copy the class. + +# --hints-- + +You should not delete the existing `.sky` declaration. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.getPropVal('background', true), /radial-gradient\(circleclosest-cornerat15%15%,rgb\(255,207,51\)(0%)?,rgb\(255,207,51\)20%,rgb\(255,255,102\)21%,rgb\(187,238,255\)100%\)/); +``` + +You should copy the existing `.sky` declaration into the media query. + +```js +assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s*(0%)?\s*,\s*rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s+20%\s*,\s*rgb\(\s*255\s*,\s*255\s*,\s*102\s*\)\s+21%\s*,\s*rgb\(\s*187\s*,\s*238\s*,\s*255\s*\)\s+100%\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} +--fcc-editable-region-- +@media (max-width: 1000px) { + +} +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-116.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-116.md new file mode 100644 index 0000000000..2e6203ede0 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-116.md @@ -0,0 +1,436 @@ +--- +id: 5d822fd413a79914d39e993c +title: Step 116 +challengeType: 0 +dashedName: step-116 +--- + +# --description-- + +In the `sky` class of the media query, change the two `#ffcf33` color values to `#ccc`, the `#ffff66` to `#445`, and the `#bbeeff` to `#223`. Then you can resize your window to see the background change colors. + +# --hints-- + +You should change the first color values from `#ffcf33` to `#ccc`. + +```js +assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%/); +``` + +You should change the second color value from `#ffff66` to `#445`. + +```js +assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%/); +``` + +You should change the third color value from `#bbeeff` to `#223`. + +```js +assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%\s*,\s*rgb\(\s*34\s*,\s*34\s*,\s*51\s*\)\s+100%\s*\)/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.sky { + background: radial-gradient( +closest-corner circle at 15% 15%, +#ffcf33, +#ffcf33 20%, +#ffff66 21%, +#bbeeff 100% + ); +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( +var(--building-color1) 50%, +var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( +var(--building-color1), +var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( +var(--building-color2), +var(--building-color2) 6%, +var(--window-color2) 6%, +var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( +90deg, +var(--building-color3), +var(--building-color3), +var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( +90deg, +var(--building-color4), +var(--building-color4) 10%, +transparent 10%, +transparent 15% + ), + repeating-linear-gradient( +var(--building-color4), +var(--building-color4) 10%, +var(--window-color4) 10%, +var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( +var(--building-color2), +var(--building-color2) 5%, +transparent 5%, +transparent 10% + ), + repeating-linear-gradient( +90deg, +var(--building-color2), +var(--building-color2) 12%, +var(--window-color2) 12%, +var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( +90deg, +var(--building-color3), +var(--building-color3) 10%, +transparent 10%, +transparent 30% + ), + repeating-linear-gradient( +var(--building-color3), +var(--building-color3) 10%, +var(--window-color3) 10%, +var(--window-color3) 30% + ); +} + +@media (max-width: 1000px) { +--fcc-editable-region-- + .sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% +); + } +--fcc-editable-region-- +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-117.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-117.md new file mode 100644 index 0000000000..77036e1db7 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-117.md @@ -0,0 +1,448 @@ +--- +id: 5d822fd413a79914d39e993d +title: Step 117 +challengeType: 0 +dashedName: step-117 +--- + +# --description-- + +Add a `:root` selector to the top of your media query. Then redefine all four of the `--building-color` variables to use the value `#000` there. + +# --hints-- + +You should add a `:root` selector to the media query. + +```js +``` + +You should add `--building-color1` with a value of `#000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color1")?.trim(), "#000"); +``` + +You should add `--building-color2` with a value of `#000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color2")?.trim(), "#000"); +``` + +You should add `--building-color3` with a value of `#000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color3")?.trim(), "#000"); +``` + +You should add `--building-color4` with a value of `#000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color4")?.trim(), "#000"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +@media (max-width: 1000px) { +--fcc-editable-region-- + +--fcc-editable-region-- + .sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ccc, + #ccc 20%, + #445 21%, + #223 100% + ); + } +} + +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-118.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-118.md new file mode 100644 index 0000000000..0d02007e14 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/step-118.md @@ -0,0 +1,860 @@ +--- +id: 5d822fd413a79914d39e993e +title: Step 118 +challengeType: 0 +dashedName: step-118 +--- + +# --description-- + +Lastly, in the `:root` selector of the media query, redefine all four of the `--window-color` variables to use `#777`. When you're done, resize the window and watch it go from day to night. + +Variables are primarily used with colors, and that's how you used them here. But they can be given any value and used on any property. Your project looks great! + +# --hints-- + +You should add `--window-color1` with a value of `#777`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color1")?.trim(), "#777"); +``` + +You should add `--window-color2` with a value of `#777`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color2")?.trim(), "#777"); +``` + +You should add `--window-color3` with a value of `#777`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color3")?.trim(), "#777"); +``` + +You should add `--window-color4` with a value of `#777`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color4")?.trim(), "#777"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +@media (max-width: 1000px) { +--fcc-editable-region-- + :root { + --building-color1: #000; + --building-color2: #000; + --building-color3: #000; + --building-color4: #000; + } +--fcc-editable-region-- + .sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ccc, + #ccc 20%, + #445 21%, + #223 100% + ); + } +} + +``` + +# --solutions-- + +```html + + + + freeCodeCamp Skyline Project + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +@media (max-width: 1000px) { + :root { + --building-color1: #000; + --building-color2: #000; + --building-color3: #000; + --building-color4: #000; + --window-color1: #777; + --window-color2: #777; + --window-color3: #777; + --window-color4: #777; + } + .sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ccc, + #ccc 20%, + #445 21%, + #223 100% + ); + } +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-001.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-001.md deleted file mode 100644 index 2f5a5741a7..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-001.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -id: 60eebd07ea685b0e777b5583 -title: Part 1 -challengeType: 0 -dashedName: part-1 ---- - -# --description-- - -Welcome to the Registration Form project! Start by adding the `!DOCTYPE html` declaration at the top of the document so the browser knows what type of document it's reading. - -# --hints-- - -Your code should contain the `DOCTYPE` reference. - -```js -assert(code.match(/` after the type. - -```js -assert(code.match(/html\s*>/gi)); -``` - -# --seed-- - -## --seed-contents-- - -```html ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-002.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-002.md deleted file mode 100644 index a10c4a7f5a..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-002.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 60f027099a15b00485563dd2 -title: Part 2 -challengeType: 0 -dashedName: part-2 ---- - -# --description-- - -Add opening and closing `html` tags below the `DOCTYPE` so you have a place to start putting some code. - -# --hints-- - -Your `html` element should be below the `DOCTYPE` declaration. - -```js -assert(code.match(/(?)/gi)); -``` - -Your `html` element should have an opening tag. - -```js -assert(code.match(//gi)); -``` - -Your `html` element should have a closing tag. - -```js -assert(code.match(/<\/html\s*>/)); -``` - -Your `html` tags should be in the correct order. - -```js -assert(code.match(/\s*<\/html\s*>/)); -``` - -You should only have one `html` element. - -```js -// Possibly a redundant test, as browser fixes this -assert(document.querySelectorAll('html').length === 1); -``` - -# --seed-- - -## --seed-contents-- - -```html ---fcc-editable-region-- - - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-003.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-003.md deleted file mode 100644 index c333805a44..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-003.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -id: 60f027c87bc98f050395c139 -title: Part 3 -challengeType: 0 -dashedName: part-3 ---- - -# --description-- - -Next, add opening and closing `head` and `body` tags within the `html` element. - -# --hints-- - -You should have an opening `head` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `head` tag. - -```js -assert(code.match(/<\/head\s*>/i)); -``` - -You should have an opening `body` tag. - -```js -assert(code.match(//i)); -``` - -You should have a closing `body` tag. - -```js -assert(code.match(/<\/body\s*>/i)); -``` - -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')); -``` - -# --seed-- - -## --seed-contents-- - -```html ---fcc-editable-region-- - - - - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-004.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-004.md deleted file mode 100644 index 2706172ed0..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-004.md +++ /dev/null @@ -1,101 +0,0 @@ ---- -id: 60f0286404aefb0562a4fdf9 -title: Part 4 -challengeType: 0 -dashedName: part-4 ---- - -# --description-- - -Add a `title` element to the `head`, and give your project a title of `freeCodeCamp Registration Form Project`. Also, nest a self-closing `link` element in the `head` element. Give it a `rel` attribute value of `stylesheet`, a `type` attribute value of `text/css`, and an `href` attribute value of `styles.css`. - -# --hints-- - -Your code should have a `title` element. - -```js -const title = document.querySelector('title'); -assert.exists(title); -``` - -The `title` element should be within the `head` element. - -```js -const head = document.querySelector('head'); -// TODO: head does not contain title...body contains title -assert(true); -``` - -Your project should have a title of `freeCodeCamp Registration Form Project`. - -```js -const title = document.querySelector('title'); -assert.equal(title.text.toLowerCase(), 'freecodecamp registration form project') -``` - -Remember, the casing and spelling matters for the title. - -```js -const title = document.querySelector('title'); -assert.equal(title.text, 'freeCodeCamp Registration Form Project'); -``` - -Your code should have a `link` element. - -```js -assert.match(code, //i)); -``` - -Your `link` element should be within your `head` element. - -```js -assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)) -``` - -Your `link` element should have a `rel` attribute with the value `stylesheet`. - -```js -assert.match(code, / - - --fcc-editable-region-- - - - - - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-005.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-005.md deleted file mode 100644 index b79eee0437..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-005.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 60f02e7361b68405e27b62a5 -title: Part 5 -challengeType: 0 -dashedName: part-5 ---- - -# --description-- - -Within the `body`, provide a heading context for the content, by adding an `h1` with the text `Registration Form`. - -# --hints-- - -You should add the `h1` within the `body`. - -```js -assert.exists(document.querySelector('body > h1')); -``` - -You should give the `h1` the text `Registration Form`. - -```js -assert.equal(document.querySelector('body > h1')?.textContent, 'Registration Form'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - ---fcc-editable-region-- - - - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-006.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-006.md deleted file mode 100644 index 4998452eeb..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-006.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 60f030d388cb74067cf291c3 -title: Part 6 -challengeType: 0 -dashedName: part-6 ---- - -# --description-- - -Below the heading, use the following text within a paragraph element to encourage users to register: - -```md -Please fill out this form with the required information -``` - -# --hints-- - -You should add a `p` element within the `body`. - -```js -assert.exists(document.querySelector('body > p')); -``` - -You should add the `p` element below the `h1`. - -```js -assert.exists(document.querySelector('h1 + p')); -``` - -You should give the `p` element a text of `Please fill out this form with the required information`. - -```js -assert.equal(document.querySelector('p')?.innerText, 'Please fill out this form with the required information'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - ---fcc-editable-region-- - -

Registration Form

- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-007.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-007.md deleted file mode 100644 index 94d1f9cbb4..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-007.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -id: 60f1922fcbd2410527b3bd89 -title: Part 7 -challengeType: 0 -dashedName: part-7 ---- - -# --description-- - -To spruce the project up, let us add some CSS. Begin by giving the `body` a `width` of `100%`, and a `height` of `100vh`. - -# --hints-- - -You should use the `body` element selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('body')); -``` - -You should give the `body` a `width` of `100%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%'); -``` - -You should give the `body` a `height` of `100vh`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

- - -``` - -```css ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-008.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-008.md deleted file mode 100644 index 69c49f2568..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-008.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 60f1a5e2d2c23707a4f9a660 -title: Part 8 -challengeType: 0 -dashedName: part-8 ---- - -# --description-- - -Now, get rid of the horizontal scroll-bar, by setting the `body` default `margin` added by some browsers to `0`. - -# --hints-- - -You should add `margin` within the `body` element selector. - -```js -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.margin); -``` - -You should give the `margin` a value of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

- - -``` - -```css ---fcc-editable-region-- -body { - width: 100%; - height: 100vh; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-009.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-009.md deleted file mode 100644 index 4d6a77f056..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-009.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -id: 60f1a9cbd23023082e149fee -title: Part 9 -challengeType: 0 -dashedName: part-9 ---- - -# --description-- - -That is better. Now, make the background easy on the eyes, by changing the `body` `background-color` to `#1b1b32`. Then, to see the text, change the `color` to `#f5f6f7`. - -# --hints-- - -You should add the `background-color` within the `body` element selector. - -```js -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor); -``` - -You should give the `background-color` a value of `#1b1b32`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor, 'rgb(27, 27, 50)'); -``` - -You should add the `color` within the `body` element selector. - -```js -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.color); -``` - -You should give the `color` a value of `#f5f6f7`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.color, 'rgb(245, 246, 247)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

- - -``` - -```css ---fcc-editable-region-- -body { - width: 100%; - height: 100vh; - margin: 0; -} ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-010.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-010.md deleted file mode 100644 index 23499e37a7..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-010.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 60f5c3e399ff1a05629964e4 -title: Part 10 -challengeType: 0 -dashedName: part-10 ---- - -# --description-- - -As suggested by the title, you are creating a form. So, after the `p` element, insert a `form` with an `action` attribute targetting `https://fcc-registration-form.com`. - -# --hints-- - -You should add a `form` element adjacent the `p` element. - -```js -assert.exists(document.querySelector('p + form')); -``` - -You should give the `form` an `action` attribute. - -```js -// Default action points to window location -assert.notEqual(document.querySelector('form')?.action, window?.location?.href); -``` - -You should give the `action` a value of `https://fcc-registration-form.com`. - -```js -// TODO: Do we need to use an in-house (domain) URL - just-in-case -assert.equal(document.querySelector('form')?.action, 'https://fcc-registration-form.com/'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - ---fcc-editable-region-- - -

Registration Form

-

Please fill out this form with the required information

- - ---fcc-editable-region-- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-011.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-011.md deleted file mode 100644 index c9f716f439..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-011.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -id: 60f5cb8875ab6a0610f05071 -title: Part 11 -challengeType: 0 -dashedName: part-11 ---- - -# --description-- - -Seeing as we plan on having three distinct sections to the form, add three `fieldset` elements within the `form`. - -# --hints-- - -You should add three `fieldset` elements. - -```js -assert.equal(document.querySelectorAll('fieldset')?.length, 3); -``` - -The three `fieldset` elements should be within the `form`. - -```js -assert.equal(document.querySelectorAll('form > fieldset')?.length, 3); -``` - -The three `fieldset` elements should be siblings. - -```js -assert.exists(document.querySelector('fieldset + fieldset + fieldset')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - ---fcc-editable-region-- - -

Registration Form

-

Please fill out this form with the required information

-
- -
- ---fcc-editable-region-- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-012.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-012.md deleted file mode 100644 index 9b45666c77..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-012.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -id: 60f5d2776c854e069560fbe6 -title: Part 12 -challengeType: 0 -dashedName: part-12 ---- - -# --description-- - -The first `fieldset` will hold name, email, and password fields. Start by adding four `label` elements to the first `fieldset`. - -# --hints-- - -You should add four `label` elements. - -```js -assert.equal(document.querySelectorAll('label')?.length, 4); -``` - -You should add the `label` elements to the first `fieldset`. - -```js -assert.equal(document.querySelector('fieldset')?.querySelectorAll('label')?.length, 4); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

---fcc-editable-region-- -
-
- -
-
-
-
---fcc-editable-region-- - - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-013.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-013.md deleted file mode 100644 index 20af4d45d1..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-013.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -id: 60f5dc35c07ac1078f140916 -title: Part 13 -challengeType: 0 -dashedName: part-13 ---- - -# --description-- - -Add the following text to the `label` elements: - -- `Enter Your First Name:` -- `Enter Your Last Name:` -- `Enter Your Email:` -- `Create a New Password:` - -# --hints-- - -The first `label` should have the text `Enter Your First Name:`. - -```js -assert.match(document.querySelector('label')?.innerHTML, /Enter Your First Name:/i); -``` - -The second `label` should have the text `Enter Your Last Name:`. - -```js -assert.match(document.querySelector('fieldset > label:nth-child(2)')?.innerHTML, /Enter Your Last Name:/i); -``` - -The third `label` should have the text `Enter Your Email:`. - -```js -assert.match(document.querySelector('fieldset > label:nth-child(3)')?.innerHTML, /Enter Your Email:/i); -``` - -The fourth `label` should have the text `Create a New Password:`. - -```js -assert.match(document.querySelector('fieldset > label:nth-child(4)')?.innerHTML, /Create a New Password:/i); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
---fcc-editable-region-- -
- - - - -
---fcc-editable-region-- -
-
-
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-014.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-014.md deleted file mode 100644 index beb79bf783..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-014.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -id: 60f803d5241e6a0433a523a1 -title: Part 14 -challengeType: 0 -dashedName: part-14 ---- - -# --description-- - -As `label` elements are `inline` by default, they appear on the same line as the text they are labelling. To make them appear on separate lines, add `display: block` to the `label` element, and add a `margin` of `0.5rem 0`, to separate them from each other. - -# --hints-- - -You should use the `label` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('label')); -``` - -You should add a `display` property of value `block`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('label')?.display, 'block'); -``` - -You should add a `margin` property of value `0.5rem 0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('label')?.margin, '0.5rem 0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
-
-
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - ---fcc-editable-region-- - ---fcc-editable-region-- -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-015.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-015.md deleted file mode 100644 index fb317d0443..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-015.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -id: 60f805f813eaf2049bc2ceea -title: Part 15 -challengeType: 0 -dashedName: part-15 ---- - -# --description-- - -Nest an `input` element within each `label`. Be sure to add each `input` after the `label` text, and include a space after the colon. - -# --hints-- - -You should add four `input` elements to the `fieldset` element. - -```js -assert.equal(document.querySelectorAll('fieldset input')?.length, 4); -``` - -You should nest the `input` elements within the `label` elements. - -```js -assert.equal(document.querySelectorAll('label input')?.length, 4); -``` - -You should add the first `input` after the `label` text `Enter Your First Name:`, and include a space after the colon. - -```js -assert.equal(document.querySelectorAll('label')?.[0]?.innerHTML, 'Enter Your First Name: '); -``` - -You should add the second `input` after the `label` text `Enter Your Last Name:`, and include a space after the colon. - -```js -assert.equal(document.querySelectorAll('label')?.[1]?.innerHTML, 'Enter Your Last Name: '); -``` - -You should add the third `input` after the `label` text `Enter Your Email:`, and include a space after the colon. - -```js -assert.equal(document.querySelectorAll('label')?.[2]?.innerHTML, 'Enter Your Email: '); -``` - -You should add the fourth `input` after the `label` text `Create a New Password:`, and include a space after the colon. - -```js -assert.equal(document.querySelectorAll('label')?.[3]?.innerHTML, 'Create a New Password: '); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
- --fcc-editable-region-- -
- - - - -
---fcc-editable-region-- -
-
-
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-016.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-016.md deleted file mode 100644 index 3773a48f21..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-016.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -id: 60f80e0081e0f2052ae5b505 -title: Part 16 -challengeType: 0 -dashedName: part-16 ---- - -# --description-- - -Specifying the `type` attribute of a form element is important for the browser to know what kind of data it should expect. If the `type` is not specified, the browser will default to `text`. - -Give the first two `input` elements a `type` attribute of `text`, the third a `type` attribute of `email`, and the fourth a `type` attribute of `password`. - -The `email` type only allows emails with a `@` and a `.` in the domain. -The `password` type obscures the input, and warns if the site does not use HTTPS. - -# --hints-- - -You should give the first `input` element a `type` attribute of `text`. - -```js -assert.equal(document.querySelector('input')?.type, 'text'); -``` - -You should give the second `input` element a `type` attribute of `text`. - -```js -assert.equal(document.querySelectorAll('input')?.[1]?.type, 'text'); -``` - -You should give the third `input` element a `type` attribute of `email`. - -```js -assert.equal(document.querySelectorAll('input')?.[2]?.type, 'email'); -``` - -You should give the fourth `input` element a `type` attribute of `password`. - -```js -assert.equal(document.querySelectorAll('input')?.[3]?.type, 'password'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
---fcc-editable-region-- -
- - - - -
---fcc-editable-region-- -
-
-
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-017.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-017.md deleted file mode 100644 index 946c0a6600..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-017.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 60f81167d0d4910809f88945 -title: Part 17 -challengeType: 0 -dashedName: part-17 ---- - -# --description-- - -The first `input` element with a `type` of `submit` is automatically set to submit its nearest parent `form` element. - -To handle the form submission, after the last `fieldset` element add an `input` element with the `type` attribute set to `submit` and the `value` attribute set to `Submit`. - -# --hints-- - -You should add the `input` element after the last `fieldset` element. - -```js -assert.exists(document.querySelectorAll('fieldset')?.[2]?.nextElementSibling?.tagName, 'input'); -``` - -You should give the `input` element a `type` attribute of `submit`. - -```js -assert.exists(document.querySelector('fieldset + input[type="submit"]')); -``` - -You should give the `input` element a `value` attribute of `Submit`. - -```js -assert.exists(document.querySelector('fieldset + input[value="Submit"]')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
---fcc-editable-region-- -
- - - - -
-
-
- ---fcc-editable-region-- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-018.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-018.md deleted file mode 100644 index 0179a0a027..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-018.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -id: 60f81616cff80508badf9ad5 -title: Part 18 -challengeType: 0 -dashedName: part-18 ---- - -# --description-- - -At this point, you should be able to submit the form. However, you might notice not much happens. - -To make the form more interactive, add the `required` attribute to the `input` elements in the first `fieldset`. - -Now, if you try to submit the form without filling in the required fields, you will see an error message. - -# --hints-- - -You should give the first `input` element a `required` attribute. - -```js -assert.equal(document.querySelector('input')?.required, true); -``` - -You should give the second `input` element a `required` attribute. - -```js -assert.equal(document.querySelectorAll('input')?.[1]?.required, true); -``` - -You should give the third `input` element a `required` attribute. - -```js -assert.equal(document.querySelectorAll('input')?.[2]?.required, true); -``` - -You should give the fourth `input` element a `required` attribute. - -```js -assert.equal(document.querySelectorAll('input')?.[3]?.required, true); -``` - -You should not give the `submit` `input` a `required` attribute. - -```js -assert.equal(document.querySelector('input[type="submit"]')?.required, false); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
---fcc-editable-region-- -
- - - - -
-
-
- ---fcc-editable-region-- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-019.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-019.md deleted file mode 100644 index cb5c802804..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-019.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: 60f83e7bfc09900959f41e20 -title: Part 19 -challengeType: 0 -dashedName: part-19 ---- - -# --description-- - -Certain `type` attribute values come with built-in form validation. For example, `type="email"` requires that the value be a valid email address. - -Add custom validation to the password `input` element, by adding a `minlength` attribute with a value of `8`. Doing so prevents inputs of less than 8 characters being submitted. - -# --hints-- - -You should give the password `input` element a `minlength` attribute. - -```js -assert.notEqual(document.querySelector('input[type="password"]')?.minLength, -1); -``` - -You should give the `minlength` attribute a value of `8`. - -```js -assert.equal(document.querySelector('input[type="password"]')?.minLength, 8); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
---fcc-editable-region-- -
- - - - -
---fcc-editable-region-- -
-
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-020.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-020.md deleted file mode 100644 index fe8614fbe8..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-020.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -id: 60f84ec41116b209c280ba91 -title: Part 20 -challengeType: 0 -dashedName: part-20 ---- - -# --description-- - -With `type="password"` you can use the `pattern` attribute to define a regular expression that the password must match to be considered valid. - -Add a `pattern` attribute to the password `input` element to require the input match: `[a-z0-5]{8,}` - -The above is a regular expression which matches eight or more lowercase letters or the digits `0` to `5`. Then, remove the `minlength` attribute, and try it out. - -# --hints-- - -You should give the password `input` element a `pattern` attribute. - -```js -assert.isNotEmpty(document.querySelector('input[type="password"]')?.pattern); -``` - -You should give the `pattern` attribute a value of `[a-z0-5]{8,}`. - -```js -assert.equal(document.querySelector('input[type="password"]')?.pattern, '[a-z0-5]{8,}'); -``` - -You should remove the `minlength` attribute from the password `input` element. - -```js -assert.equal(document.querySelector('input[type="password"]')?.minLength, -1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
---fcc-editable-region-- -
- - - - -
---fcc-editable-region-- -
-
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-021.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-021.md deleted file mode 100644 index 9d57789b50..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-021.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -id: 60f852f645b5310a8264f555 -title: Part 21 -challengeType: 0 -dashedName: part-21 ---- - -# --description-- - -Let us go to the next part of the registration form. This section will ask for the type of account the user is opening, and will confirm the user has read the terms and conditions. - -Start by adding three `label` elements to the second `fieldset`. - -# --hints-- - -You should add three `label` elements to the second `fieldset`. - -```js -assert.equal(document.querySelectorAll('fieldset')?.[1]?.querySelectorAll('label')?.length, 3); -``` - -The `label` elements should be siblings. - -```js -assert.exists(document.querySelector('fieldset:nth-child(2)')?.querySelector('label + label + label')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
---fcc-editable-region-- -
- -
---fcc-editable-region-- -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-022.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-022.md deleted file mode 100644 index 7a2a5adb6c..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-022.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 60f85a62fb30c80bcea0cedb -title: Part 22 -challengeType: 0 -dashedName: part-22 ---- - -# --description-- - -Users will be allowed to chose either a `Personal Account` or `Business Account`. - -To do this, within each of the first two `label` elements, add one `input` element with `type="radio"`. - -# --hints-- - -You should add two `input` elements. - -```js -assert.equal(document.querySelectorAll('fieldset:nth-child(2) input')?.length, 2); -``` - -You should add one `input` to each of the first two `label` elements. - -```js -assert.exists(document.querySelector('fieldset:nth-child(2) > label:nth-child(1) > input')); -assert.exists(document.querySelector('fieldset:nth-child(2) > label:nth-child(2) > input')); -``` - -You should give both `input` elements a `type` of `radio`. - -```js -assert.equal(document.querySelectorAll('fieldset:nth-child(2) input[type="radio"]')?.length, 2); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
---fcc-editable-region-- -
- - - -
---fcc-editable-region-- -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-023.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-023.md deleted file mode 100644 index baffa4b84e..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-023.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -id: 60f8604682407e0d017bbf7f -title: Part 23 -challengeType: 0 -dashedName: part-23 ---- - -# --description-- - -For the terms and conditions, add an `input` of with a `type` of `checkbox` to the third `label` element. Also, as we do not want users to sign up, without having read the terms and conditions, make it `required`. - -# --hints-- - -You should add an `input` to the third `label` element. - -```js -assert.exists(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input')); -``` - -You should add a `type` attribute of value `checkbox` to the `input` element. - -```js -assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input')?.type, 'checkbox'); -``` - -You should add a `required` attribute to the `input` element. - -```js -assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input')?.required, true); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
---fcc-editable-region-- -
- - - -
---fcc-editable-region-- -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-024.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-024.md deleted file mode 100644 index e49ffd1e0e..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-024.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 60f8618d191b940d62038513 -title: Part 24 -challengeType: 0 -dashedName: part-24 ---- - -# --description-- - -Within each corresponding `label` element, and immediately after the `input` element, add a space and add the following text: - -```md -Personal Account -Business Account -I accept the terms and conditions -``` - -# --hints-- - -You should give the first `label` the text `Personal Account`. - -```js -assert.include(document.querySelector('fieldset:nth-child(2) > label')?.innerText, 'Personal Account'); -``` - -You should give the second `label` the text `Business Account`. - -```js -assert.include(document.querySelector('fieldset:nth-child(2) > label:nth-child(2)')?.innerText, 'Business Account'); -``` - -You should give the third `label` the text `I accept the terms and conditions`. - -```js -assert.include(document.querySelector('fieldset:nth-child(2) > label:nth-child(3)')?.innerText, 'I accept the terms and conditions'); -``` - -You should give the first `label` text one space at the front. - -```js -assert.equal(document.querySelector('fieldset:nth-child(2) > label')?.innerText?.[0], ' '); -``` - -You should give the second `label` text one space at the front. - -```js -assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(2)')?.innerText?.[0], ' '); -``` - -You should give the third `label` text one space at the front. - -```js -assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(3)')?.innerText?.[0], ' '); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
---fcc-editable-region-- -
- - - -
---fcc-editable-region-- -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-025.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-025.md deleted file mode 100644 index 96ecbd3e87..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-025.md +++ /dev/null @@ -1,83 +0,0 @@ ---- -id: 60fab4a123ce4b04526b082b -title: Part 25 -challengeType: 0 -dashedName: part-25 ---- - -# --description-- - -You only want one radio input to be selectable at a time. However, the form does not know the radio inputs are related. - -To relate the radio inputs, give them the same `name` attribute with a value of `account-type`. Now, it is not possible to select both radio inputs at the same time. - -# --hints-- - -You should give the first radio input the `name` attribute with a value of `account-type`. - -```js -assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(1) input[type="radio"]')?.name, 'account-type'); -``` - -You should give the second radio input the `name` attribute with a value of `account-type`. - -```js -assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(2) input[type="radio"]')?.name, 'account-type'); -``` - -You should not give the `checkbox` the `name` attribute. - -```js -assert.isEmpty(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input[type="checkbox"]')?.name); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
---fcc-editable-region-- -
- - - -
---fcc-editable-region-- -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-026.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-026.md deleted file mode 100644 index 52585c4d08..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-026.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -id: 60fab8367d35de04e5cb7929 -title: Part 26 -challengeType: 0 -dashedName: part-26 ---- - -# --description-- - -To finish this `fieldset` off, link the text `terms and conditions` to the following location: - -```md -https://www.freecodecamp.org/news/terms-of-service/ -``` - -# --hints-- - -You should use an `a` element to link to the terms and conditions. - -```js -assert.exists(document.querySelector('fieldset:nth-child(2) > label:nth-child(3) > input + a')); -``` - -You should give the `a` element an `href` of `https://www.freecodecamp.org/news/terms-of-service/`. - -```js -assert.match(document.querySelector('fieldset:nth-child(2) > label:nth-child(3) > input + a')?.href, /https:\/\/www\.freecodecamp\.org\/news\/terms-of-service\/?/); -``` - -You should only wrap the `a` element around the text `terms and conditions`. - -```js -assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(3) > input + a')?.textContent, 'terms and conditions'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
---fcc-editable-region-- -
- - - -
---fcc-editable-region-- -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-027.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-027.md deleted file mode 100644 index ecd523e66e..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-027.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 60fab9f17fa294054b74228c -title: Part 27 -challengeType: 0 -dashedName: part-27 ---- - -# --description-- - -Moving on to the final `fieldset`. What if you wanted to allow a user to upload a profile picture? - -Well, the `input` type `file` allows just that. Add a `label` with the text `Upload a profile picture: `, and add an `input` accepting a file upload. - -# --hints-- - -You should add a `label` with the text `Upload a profile picture: `. - -```js -assert.match(document.querySelector('fieldset:nth-child(3) > label')?.innerText, /Upload a profile picture:/i); -``` - -You should nest an `input` element inside the `label` element. - -```js -assert.exists(document.querySelector('fieldset:nth-child(3) > label > input')); -``` - -You should give the `input` element a `type` of `file`. - -```js -assert.equal(document.querySelector('fieldset:nth-child(3) > label > input')?.type, 'file'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
---fcc-editable-region-- -
- -
---fcc-editable-region-- - -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-028.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-028.md deleted file mode 100644 index d3dc4458f7..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-028.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 60fabf0dd4959805dbae09e6 -title: Part 28 -challengeType: 0 -dashedName: part-28 ---- - -# --description-- - -Add another `label` after the first, with the text `Input your age (years): `. Then, nest an `input` with the `type` of `number`. - -As we do not want users under the age of 13 to register, add a `min` attribute to the `input` with a value of `13`. Also, we can probably assume users over the age of 120 will not register; add a `max` attribute with a value of `120`. - -Now, if someone tries to submit the form with values outside of the range, a warning will appear, and the form will not submit. Give it a try. - -# --hints-- - -You should add a `label` to the third `fieldset`, after the existing `label`. - -```js -assert.exists(document.querySelector('fieldset:nth-child(3) > label + label')); -``` - -You should give the `label` the text `Input your age (years): `. - -```js -assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2)')?.textContent, 'Input your age (years): '); -``` - -You should give the `label` an `input` with `type` of `number`. - -```js -assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]')); -``` - -You should give the `input` a `min` attribute with a value of `13`. - -```js -assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]')?.min, '13'); -``` - -You should give the `input` a `max` attribute with a value of `120`. - -```js -assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]')?.max, '120'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
---fcc-editable-region-- -
- - -
---fcc-editable-region-- - -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-029.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-029.md deleted file mode 100644 index d864a3bd78..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-029.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -id: 60fac4095512d3066053d73c -title: Part 29 -challengeType: 0 -dashedName: part-29 ---- - -# --description-- - -Adding a dropdown to the form is easy with the `select` element. The `select` element is a container for a group of `option` elements, and the `option` element acts as a label for each dropdown option. Both elements require closing tags. - -Start, by adding a `select` element below the two `input` elements. Then, nest 5 `option` elements within the `select` element. - -# --hints-- - -You should add a `select` element to the third `fieldset`. - -```js -assert.exists(document.querySelector('fieldset:nth-child(3) > select')); -``` - -You should nest 5 `option` elements inside the `select` element. - -```js -assert.equal(document.querySelectorAll('fieldset:nth-child(3) > select > option')?.length, 5); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
---fcc-editable-region-- -
- - - -
---fcc-editable-region-- - -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-030.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-030.md deleted file mode 100644 index 386c799c4b..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-030.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -id: 60fac56271087806def55b33 -title: Part 30 -challengeType: 0 -dashedName: part-30 ---- - -# --description-- - -Nest the `select` element within a `label` element with the text `How did you hear about us?`. The text should come before the `select` element. - -# --hints-- - -You should nest only the `select` element within a `label` element. - -```js -assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(3) > select')); -``` - -You should give the `label` element the text `How did you hear about us?`. - -```js -assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(3)')?.innerText?.trim(), 'How did you hear about us?'); -``` - -You should place the text before the `select` element. - -```js -assert.match(document.querySelector('fieldset:nth-child(3) > label:nth-child(3)')?.innerHTML?.replace(/[\t\n]+/g, ''), /^How did you hear about us\?/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
---fcc-editable-region-- -
- - - -
---fcc-editable-region-- - -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-031.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-031.md deleted file mode 100644 index 8b70cb36ab..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-031.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 60fac8d7fdfaee0796934f20 -title: Part 31 -challengeType: 0 -dashedName: part-31 ---- - -# --description-- - -The dropdown options are currently empty. To give them content, add the following text to each subsequent `option` element: - -```md -(select one) -freeCodeCamp News -freeCodeCamp YouTube -freeCodeCamp Forum -Other -``` - -# --hints-- - -You should give the first `option` element the text `(select one)`. - -```js -assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[0]?.textContent, '(select one)'); -``` - -You should give the second `option` element the text `freeCodeCamp News`. - -```js -assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[1]?.textContent, 'freeCodeCamp News'); -``` - -You should give the third `option` element the text `freeCodeCamp YouTube`. - -```js -assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[2]?.textContent, 'freeCodeCamp YouTube'); -``` - -You should give the fourth `option` element the text `freeCodeCamp Forum`. - -```js -assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[3]?.textContent, 'freeCodeCamp Forum'); -``` - -You should give the fifth `option` element the text `Other`. - -```js -assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[4]?.textContent, 'Other'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
---fcc-editable-region-- -
- - - -
---fcc-editable-region-- - -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-032.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-032.md deleted file mode 100644 index 927cfe63c4..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-032.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -id: 60faca286cb48b07f6482970 -title: Part 32 -challengeType: 0 -dashedName: part-32 ---- - -# --description-- - -Submitting the form with an option selected would not send a useful value to the server. As such, each `option` needs to be given a `value` attribute. Without which, the text content of the `option` will be submitted to the server. - -Give the first `option` a `value` of `""`, and the subsequent `option` elements `value` attributes from `1` to `4`. - -# --hints-- - -You should give the first `option` a `value` of `""`. - -```js -assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[0]?.value, ''); -``` - -You should give the second `option` a `value` of `1`. - -```js -assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[1]?.value, '1'); -``` - -You should give the third `option` a `value` of `2`. - -```js -assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[2]?.value, '2'); -``` - -You should give the fourth `option` a `value` of `3`. - -```js -assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[3]?.value, '3'); -``` - -You should give the fifth `option` a `value` of `4`. - -```js -assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[4]?.value, '4'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
---fcc-editable-region-- -
- - - -
---fcc-editable-region-- - -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-033.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-033.md deleted file mode 100644 index a744db25b4..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-033.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 60facde2d0dc61085b41063f -title: Part 33 -challengeType: 0 -dashedName: part-33 ---- - -# --description-- - -The `textarea` element acts like an `input` element of type `text`, but comes with the added benefit of being able to receive multi-line text, and an initial number of text rows and columns. - -To allow users to register with a bio, add a `label` with the text `Provide a bio:` followed by a `textarea` element. - -# --hints-- - -You should add a `label` element within the third `fieldset`, after the existing `label` elements. - -```js -assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(4)')); -``` - -You should give the `label` a text of `Provide a bio:`. - -```js -assert.match(document.querySelector('fieldset:nth-child(3) > label:nth-child(4)')?.innerText, /Provide a bio/); -``` - -You should nest a `textarea` element within the `label`. - -```js -assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')); -``` - -You should give the `textarea` element opening and closing tags. - -```js -assert.match(code, /[\s\S]*<\/textarea\s*>/); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
---fcc-editable-region-- -
- - - - -
---fcc-editable-region-- - -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-034.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-034.md deleted file mode 100644 index 6fc789502b..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-034.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -id: 60facf914c7b9b08d7510c2c -title: Part 34 -challengeType: 0 -dashedName: part-34 ---- - -# --description-- - -The `textarea` appears too small. To give it an initial size, you can add the `rows` and `cols` attributes. - -Add an initial size of `3` rows and `30` columns. - -# --hints-- - -You should give the `textarea` a `rows` attribute with value `3`. - -```js -assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.rows, 3); -``` - -You should give the textarea a `cols` attribute with value `30`. - -```js -assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.cols, 30); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
---fcc-editable-region-- -
- - - - -
---fcc-editable-region-- - -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-035.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-035.md deleted file mode 100644 index fa5e965627..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-035.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -id: 60fad0a812d9890938524f50 -title: Part 35 -challengeType: 0 -dashedName: part-35 ---- - -# --description-- - -To give Campers an idea of what to put in their bio, the `placeholder` attribute is used. The `placeholder` accepts a text value, which is displayed until the user starts typing. - -Give the `textarea` a `placeholder` of `I like coding on the beach...`. - -# --hints-- - -You should give the `textarea` a `placeholder` attribute. - -```js -assert.isNotEmpty(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.placeholder); -``` - -You should give the `placeholder` a value of `I like coding on the beach...`. - -```js -assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.placeholder, 'I like coding on the beach...'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
---fcc-editable-region-- -
- - - - -
---fcc-editable-region-- - -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-036.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-036.md deleted file mode 100644 index 3e724820af..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-036.md +++ /dev/null @@ -1,155 +0,0 @@ ---- -id: 60fad1cafcde010995e15306 -title: Part 36 -challengeType: 0 -dashedName: part-36 ---- - -# --description-- - -With form submissions, it is useful, and good practice, to provide each submittable element with a `name` attribute. This attribute is used to identify the element in the form submission. - -Go ahead, and give each submittable element a unique `name` attribute of your choosing. _Except for the two `radio` inputs._ - -# --hints-- - -You should give the `input` expecting a first name a `name` attribtute. _P.S. I would have chosen `first-name`_ - -```js -assert.isNotEmpty(document.querySelector('fieldset:nth-child(1) > label:nth-child(1) > input')?.name); -``` - -You should give the `input` expecting a last name a `name` attribute. _P.S. I would have chosen `last-name`_ - -```js -assert.isNotEmpty(document.querySelector('fieldset:nth-child(1) > label:nth-child(2) > input')?.name); -``` - -You should give the `email` a `name` attribute. _P.S. I would have chosen `email`_ - -```js -assert.isNotEmpty(document.querySelector('input[type="email"]')?.name); -``` - -You should give the `password` a `name` attribute. _P.S. I would have chosen `password`_ - -```js -assert.isNotEmpty(document.querySelector('input[type="password"]')?.name); -``` - -You should give the `checkbox` a `name` attribute. _P.S. I would have chosen `terms`_ - -```js -assert.isNotEmpty(document.querySelector('input[type="checkbox"]')?.name); -``` - -You should give the `file` a `name` attribute. _P.S. I would have chosen `file`_ - -```js -assert.isNotEmpty(document.querySelector('input[type="file"]')?.name); -``` - -You should give the `number` a `name` attribute. _P.S. I would have chosen `age`_ - -```js -assert.isNotEmpty(document.querySelector('input[type="number"]')?.name); -``` - -You should give the `select` element a `name` attribute. _P.S. I would have chosen `referrer`_ - -```js -assert.isNotEmpty(document.querySelector('select')?.name); -``` - -You should give the `textarea` element a `name` attribute. _P.S. I would have chosen `bio`_ - -```js -assert.isNotEmpty(document.querySelector('textarea')?.name); -``` - -You should not give any of the `option` elements a `name` attribute. - -```js -[...document.querySelectorAll('option')]?.forEach(option => assert.isUndefined(option?.name)); -``` - -You should not give any of the `label` elements a `name` attribute. - -```js -[...document.querySelectorAll('label')]?.forEach(label => assert.isUndefined(label?.name)); -``` - -You should not give any of the `fieldset` elements a `name` attribute. - -```js -[...document.querySelectorAll('fieldset')]?.forEach(fieldset => assert.isEmpty(fieldset?.name)); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
---fcc-editable-region-- -
- - - - -
-
- - - -
-
- - - - -
---fcc-editable-region-- - -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; -} - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-037.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-037.md deleted file mode 100644 index 07449e88ec..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-037.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 60fad6dfcc0d930a59becf12 -title: Part 37 -challengeType: 0 -dashedName: part-37 ---- - -# --description-- - -The HTML for the registration form is finished. Now, you can spruce it up a bit. - -Start by changing the font to `Tahoma`, and the font size to `16px` in the `body`. - -# --hints-- - -You should use the `font-family` property to change the font. - -```js -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily); -``` - -You should set the `font-family` property to `Tahoma`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily, 'Tahoma'); -``` - -You should set the `font-size` property to `16px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.fontSize, '16px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css ---fcc-editable-region-- -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - -} ---fcc-editable-region-- - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-038.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-038.md deleted file mode 100644 index d1898bde6c..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-038.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: 60fad8e6148f310bba7890b1 -title: Part 38 -challengeType: 0 -dashedName: part-38 ---- - -# --description-- - -Center the `h1` and `p` elements by giving them a `margin` of `1em auto`. Then, center align the text as well. - -# --hints-- - -You should use a comma-separated element selector to style the `h1` and `p` elements. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('h1, p')); -``` - -You should use a `margin` of `1em auto` to center the `h1` and `p` elements. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('h1, p')?.margin, '1em auto'); -``` - -You should use a `text-align` of `center` to center the `h1` and `p` text. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('h1, p')?.textAlign, 'center'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-039.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-039.md deleted file mode 100644 index e8b78c0ab1..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-039.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -id: 60fad99e09f9d30c1657e790 -title: Part 39 -challengeType: 0 -dashedName: part-39 ---- - -# --description-- - -Center the `form` element, by giving it a `margin` of `0 auto`. Then, fix its size to a maximum `width` of `500px`, and a minimum width of `300px`. In between that range, allow it to have a `width` of `60vw`. - -# --hints-- - -You should use a `form` selector to style the `form` element. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('form')); -``` - -You should give the `form` a `margin` of `0 auto`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.margin, '0px auto'); -``` - -You should give the `form` a `max-width` of `500px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.maxWidth, '500px'); -``` - -You should give the `form` a `min-width` of `300px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.minWidth, '300px'); -``` - -You should give the `form` a `width` of `60vw`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.width, '60vw'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-040.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-040.md deleted file mode 100644 index 0bb8e1bd48..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-040.md +++ /dev/null @@ -1,121 +0,0 @@ ---- -id: 60fadb18058e950c73925279 -title: Part 40 -challengeType: 0 -dashedName: part-40 ---- - -# --description-- - -During development, it is useful to see the `fieldset` default borders. However, they make the content appear too separated. - -Remove the `border`, and add `2rem` of padding only to the top and bottom of each `fieldset`. Be sure to remove the `padding` from the left and right. - -# --hints-- - -You can use either a value of `none` or `0` to remove the `border`. - -```js -assert.match(new __helpers.CSSHelp(document).getStyle('fieldset')?.border, /(none)|(0px)/); -``` - -You should add `padding` of `2rem` to the top and bottom of each `fieldset`. - -```js -const fieldset = new __helpers.CSSHelp(document).getStyle('fieldset') -assert.equal(fieldset?.paddingTop, '2rem'); -assert.equal(fieldset?.paddingBottom, '2rem'); -``` - -You should remove the `padding` from the left and right of each `fieldset`. - -```js -const fieldset = new __helpers.CSSHelp(document).getStyle('fieldset') -assert.equal(fieldset?.paddingLeft, '0px'); -assert.equal(fieldset?.paddingRight, '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-041.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-041.md deleted file mode 100644 index 18c0e333d1..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-041.md +++ /dev/null @@ -1,114 +0,0 @@ ---- -id: 60fadce90f85c50d0bb0dd4f -title: Part 41 -challengeType: 0 -dashedName: part-41 ---- - -# --description-- - -To give the `fieldset` elements a bit of separation, select all but the last `fieldset` element, and give them a `border-bottom` of `3px solid #3b3b4f`. - -# --hints-- - -You can use the `:not(:last-of-type)` pseudo-class to select all but the last element. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('fieldset:not(:last-of-type)')); -``` - -You should give the `fieldset` elements a `border-bottom` of `3px solid #3b3b4f`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('fieldset:not(:last-of-type)')?.borderBottom, '3px solid rgb(59, 59, 79)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - -fieldset { - border: none; - padding: 2rem 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -label { - display: block; - margin: 0.5rem 0; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-042.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-042.md deleted file mode 100644 index 4e57ed42c0..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-042.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 60fadd972e6ffe0d6858fa2d -title: Part 42 -challengeType: 0 -dashedName: part-42 ---- - -# --description-- - -It would be nicer to have the `label` text appear above the form elements. - -Select all `input`, `textarea`, and `select` elements, and make them take up the full width of their parent elements. - -Also, add `10px` of `margin` to the top of the selected elements. Set the other margins to `0`. - -# --hints-- - -You should use a comma separated element selector to select the `input`, `textarea`, and `select` elements. - -```js -assert.isTrue(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].some(selector => new __helpers.CSSHelp(document).getStyle(selector))); -``` - -You should set the `width` property to `100%`. - -```js -const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector); -assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.width, '100%'); -``` - -You should set the `margin-top` property to `10px`. - -```js -const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector); -assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginTop, '10px'); -``` - -You should set the `margin-bottom` property to `0`. - -```js -const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector); -assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginBottom, '0px'); -``` - -You should set the `margin-left` property to `0`. - -```js -const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector); -assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginLeft, '0px'); -``` - -You should set the `margin-right` property to `0`. - -```js -const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector); -assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginRight, '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-043.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-043.md deleted file mode 100644 index 499913237c..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-043.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -id: 60fadfa2b540b70dcfa8b771 -title: Part 43 -challengeType: 0 -dashedName: part-43 ---- - -# --description-- - -For the second `fieldset`, you want the `input` and `label` text to appear on the same line. - -Start, by giving the `input` elements in the second `fieldset` a class of `inline`. - -# --hints-- - -You should give the first `input` a class of `inline`. - -```js -assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[0]?.classList?.contains('inline')); -``` - -You should give the second `input` a class of `inline`. - -```js -assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[1]?.classList?.contains('inline')); -``` - -You should give the third `input` a class of `inline`. - -```js -assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[2]?.classList?.contains('inline')); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
---fcc-editable-region-- -
- - - -
---fcc-editable-region-- -
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-044.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-044.md deleted file mode 100644 index d36f0ebca9..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-044.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 60fc219d333e37046f474a6e -title: Part 44 -challengeType: 0 -dashedName: part-44 ---- - -# --description-- - -Select only the `.inline` elements, and give them `width` of `unset`. This will remove the earlier rule which set all the `input` elements to `width: 100%`. - -# --hints-- - -You should use the `.inline` selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('.inline')); -``` - -You should give the `.inline` elements a `width` of `unset`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.width, 'unset'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-045.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-045.md deleted file mode 100644 index 1ae962a64d..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-045.md +++ /dev/null @@ -1,140 +0,0 @@ ---- -id: 60fc22d1e64d1b04cdd4e602 -title: Part 45 -challengeType: 0 -dashedName: part-45 ---- - -# --description-- - -Add some space between the `.inline` elements and the `label` text, by giving a right `margin` of `0.5em`. Also, set all the other margin to `0`. - -# --hints-- - -You should give the `.inline` elements a `margin-right` of `0.5em`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginRight, '0.5em'); -``` - -You should give the `.inline` elements a `margin-bottom` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginBottom, '0px'); -``` - -You should give the `.inline` elements a `margin-top` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginTop, '0px'); -``` - -You should give the `.inline` elements a `margin-left` of `0`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginLeft, '0px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; -} - ---fcc-editable-region-- -.inline { - width: unset; - -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-046.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-046.md deleted file mode 100644 index aae0fb3ced..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-046.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -id: 60fc236dc04532052926fdac -title: Part 46 -challengeType: 0 -dashedName: part-46 ---- - -# --description-- - -If you look close enough, you will notice the `.inline` elements are too high on the line. - -To combat this, set the `vertical-align` property to `middle`. - -# --hints-- - -You should set the `vertical-align` property to `middle` for all `.inline` elements. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.verticalAlign, 'middle'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; -} - ---fcc-editable-region-- -.inline { - width: unset; - margin: 0 0.5em 0 0; - -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-047.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-047.md deleted file mode 100644 index 3e096ed806..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-047.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 60ffe1bc30415f042faea936 -title: Part 47 -challengeType: 0 -dashedName: part-47 ---- - -# --description-- - -To make the `input` and `textarea` elements blend in with the background theme, set their `background-color` to `#0a0a23`. Then, give them a `1px`, `solid` border with a color of `#0a0a23`. - -# --hints-- - -You should use a comma separated element selector to select the `input` and `textarea` elements. - -```js -const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector); -assert.isTrue(['input, textarea', 'textarea, input'].some(selFunc)); -``` - -You should give the `input` and `textarea` elements a `background-color` of `#0a0a23`. - -```js -const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector); -assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.backgroundColor, 'rgb(10, 10, 35)'); -``` - -You should give the `input` and `textarea` elements a `1px`, `solid` border with a color of `#0a0a23`. - -```js -const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector); -assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.borderWidth, '1px'); -assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.borderStyle, 'solid'); -assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.borderColor, 'rgb(10, 10, 35)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -.inline { - width: unset; - margin: 0 0.5em 0 0; - vertical-align: middle; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-048.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-048.md deleted file mode 100644 index f4ee537b3f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-048.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 60ffe3936796ac04959285a9 -title: Part 48 -challengeType: 0 -dashedName: part-48 ---- - -# --description-- - -Currently, if you type in the `input` or `textarea` elements, you will not be able to see the text. Also, their height is too small to be easy to use. - -Fix this, by setting the `color` to `#ffffff`, and setting their `min-height` to `2em`. - -# --hints-- - -You should set the `color` to `#ffffff`. - -```js -const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector); -assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.color, 'rgb(255, 255, 255)'); -``` - -You should set the `min-height` to `2em`. - -```js -const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector); -assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.minHeight, '2em'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; -} - ---fcc-editable-region-- -input, textarea { - background-color: #0a0a23; - border: 1px solid #0a0a23; - -} ---fcc-editable-region-- - -.inline { - width: unset; - margin: 0 0.5em 0 0; - vertical-align: middle; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-049.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-049.md deleted file mode 100644 index 651a573ceb..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-049.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -id: 60ffe4f4ec18cd04dc470c56 -title: Part 49 -challengeType: 0 -dashedName: part-49 ---- - -# --description-- - -You want the `select` element to remain with a white background, but now it is not getting the same `min-height` as the `input` and `textarea` elements. - -Move the `min-height` property and value so that all three element types have the same `min-height` value, and the `select` element still has a white background. - -# --hints-- - -You should move the `min-height` property and value to the `input, textarea, select` selector. - -```js -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input, textarea, select')?.minHeight); -``` - -You should give the `input, textarea, select` selector a `min-height` of `2em`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('input, textarea, select')?.minHeight, '2em'); -``` - -You should remove the `min-height` declaration from the `input, textarea` selector. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input, textarea')?.minHeight); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css ---fcc-editable-region-- -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; -} - -input, textarea { - background-color: #0a0a23; - border: 1px solid #0a0a23; - color: #ffffff; - min-height: 2em; -} - -.inline { - width: unset; - margin: 0 0.5em 0 0; - vertical-align: middle; -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-050.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-050.md deleted file mode 100644 index 6d1ed89c0e..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-050.md +++ /dev/null @@ -1,152 +0,0 @@ ---- -id: 60ffe69ee377c6055e192a46 -title: Part 50 -challengeType: 0 -dashedName: part-50 ---- - -# --description-- - -To style the submit button, you can use an _attribute_ selector, which selects an element based on the given attribute value. Here is an example: - -```css -input[name="password"] -``` - -The above selects `input` elements with a `name` attribute value of `password`. - -Now, use the attribute selector to style the submit button with a `display` of `block`, and a `width` of `60%`. - -# --hints-- - -You should use an attribute selector of `input[type="submit"]` to style the submit button. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')); -``` - -You should give the submit button a `display` of `block`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.display, 'block'); -``` - -You should give the submit button a `width` of `60%`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.width, '60%'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; -} - -input, textarea { - background-color: #0a0a23; - border: 1px solid #0a0a23; - color: #ffffff; - min-height: 2em; -} - -.inline { - width: unset; - margin: 0 0.5em 0 0; - vertical-align: middle; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-051.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-051.md deleted file mode 100644 index ff73e41013..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-051.md +++ /dev/null @@ -1,145 +0,0 @@ ---- -id: 60ffe7d8aae62c05bcc9e7eb -title: Part 51 -challengeType: 0 -dashedName: part-51 ---- - -# --description-- - -With a `display` of `block` the submit button sits flush against the left edge of its parent. - -Use the same technique used to center the `form` to center the submit button. - -# --hints-- - -You should give the submit button a `margin` of `0 auto`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.margin, '0px auto'); -``` - -You should not give the submit button a `min-width` or `max-width`. - -```js -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.minWidth); -assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.maxWidth); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; -} - -input, textarea { - background-color: #0a0a23; - border: 1px solid #0a0a23; - color: #ffffff; - min-height: 2em; -} - -.inline { - width: unset; - margin: 0 0.5em 0 0; - vertical-align: middle; -} - ---fcc-editable-region-- -input[type="submit"] { - display: block; - width: 60%; - -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-052.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-052.md deleted file mode 100644 index ae8f320187..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-052.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -id: 60ffe8a5ceb0e90618db06d9 -title: Part 52 -challengeType: 0 -dashedName: part-52 ---- - -# --description-- - -To make the submit button look more in line with the rest of the form, give it the same `height` as the other fields (`2em`). Also, increase the `font-size` to `1.1rem`. - -# --hints-- - -You should give the submit button a `height` of `2em`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.height, '2em'); -``` - -You should give the submit button a `font-size` of `1.1rem`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.fontSize, '1.1rem'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; -} - -input, textarea { - background-color: #0a0a23; - border: 1px solid #0a0a23; - color: #ffffff; - min-height: 2em; -} - -.inline { - width: unset; - margin: 0 0.5em 0 0; - vertical-align: middle; -} - ---fcc-editable-region-- -input[type="submit"] { - display: block; - width: 60%; - margin: 0 auto; - -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-053.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-053.md deleted file mode 100644 index ea5df0a9b2..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-053.md +++ /dev/null @@ -1,145 +0,0 @@ ---- -id: 60ffe947a868ec068f7850f6 -title: Part 53 -challengeType: 0 -dashedName: part-53 ---- - -# --description-- - -To make the submit button appear more distinct, give it a `background-color` of `#3b3b4f`, and a `border-color` of `white`. - -# --hints-- - -You should give the submit button a `background-color` of `#3b3b4f`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.backgroundColor, 'rgb(59, 59, 79)'); -``` - -You should give the submit button a `border-color` of `white`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.borderColor, 'white'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; -} - -input, textarea { - background-color: #0a0a23; - border: 1px solid #0a0a23; - color: #ffffff; - min-height: 2em; -} - -.inline { - width: unset; - margin: 0 0.5em 0 0; - vertical-align: middle; -} - ---fcc-editable-region-- -input[type="submit"] { - display: block; - width: 60%; - margin: 0 auto; - height: 2em; - font-size: 1.1em; - -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-054.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-054.md deleted file mode 100644 index 2cf61cef7f..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-054.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -id: 60ffe9cb47809106eda2f2c9 -title: Part 54 -challengeType: 0 -dashedName: part-54 ---- - -# --description-- - -Lastly, for the submit button, you want to separate it from the `fieldset` above, and adjust its width to never be below `300px`. - -Change the `margin` property to include `1em` on the top and bottom, and set the width as described above. - -# --hints-- - -You should not change the `width` property. Use the `min-width` property. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.width, '60%'); -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.minWidth); -``` - -You should use the existing `margin` property to include `1em` on the top and bottom. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.margin, '1em auto'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; -} - -input, textarea { - background-color: #0a0a23; - border: 1px solid #0a0a23; - color: #ffffff; - min-height: 2em; -} - -.inline { - width: unset; - margin: 0 0.5em 0 0; - vertical-align: middle; -} - ---fcc-editable-region-- -input[type="submit"] { - display: block; - width: 60%; - margin: 0 auto; - height: 2em; - font-size: 1.1em; - background-color: #3b3b4f; - border-color: white; - -} ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-055.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-055.md deleted file mode 100644 index 85464b80af..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-055.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 60ffec2825da1007509ddd06 -title: Part 55 -challengeType: 0 -dashedName: part-55 ---- - -# --description-- - -Most browsers inject their own default CSS properties and values for different elements. If you look closely, you might be able to notice the file `input` is smaller than the other text `input` elements. By default, a `padding` of `1px 2px` is given to `input` elements you can type in. - -Using another attribute selector, style the `input` with a `type` of `file` to be the same padding as the other `input` elements. - -# --hints-- - -You should use an attribute selector to style the `input` element. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('input[type="file"]')); -``` - -You should give the `input[type="file"]` a `padding` of `1px 2px`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="file"]')?.padding, '1px 2px'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; -} - -input, textarea { - background-color: #0a0a23; - border: 1px solid #0a0a23; - color: #ffffff; - min-height: 2em; -} - -.inline { - width: unset; - margin: 0 0.5em 0 0; - vertical-align: middle; -} - -input[type="submit"] { - display: block; - width: 60%; - margin: 1em auto; - height: 2em; - font-size: 1.1em; - background-color: #3b3b4f; - border-color: white; - min-width: 300px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-056.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-056.md deleted file mode 100644 index f3c7c88dd3..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-056.md +++ /dev/null @@ -1,152 +0,0 @@ ---- -id: 60ffecefac971607ae73c60f -title: Part 56 -challengeType: 0 -dashedName: part-56 ---- - -# --description-- - -Speaking of `padding`, the submit button is sitting at the bottom of the `form` element. Add `2em` of `padding` only to the bottom of the `form`. - -# --hints-- - -You should use the `padding-bottom` property. - -```js -assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('form')?.paddingBottom); -``` - -You should give the `padding-bottom` a value of `2em`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.paddingBottom, '2em'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - ---fcc-editable-region-- -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; - -} ---fcc-editable-region-- - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; -} - -input, textarea { - background-color: #0a0a23; - border: 1px solid #0a0a23; - color: #ffffff; - min-height: 2em; -} - -.inline { - width: unset; - margin: 0 0.5em 0 0; - vertical-align: middle; -} - -input[type="submit"] { - display: block; - width: 60%; - margin: 1em auto; - height: 2em; - font-size: 1.1em; - background-color: #3b3b4f; - border-color: white; - min-width: 300px; -} - -input[type="file"] { - padding: 1px 2px; -} - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-057.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/part-057.md deleted file mode 100644 index 382535cfb7..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/registration-form/part-057.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 60ffefd6479a3d084fb77cbc -title: Part 57 -challengeType: 0 -dashedName: part-57 ---- - -# --description-- - -Last, but not least, change the text color of the `terms and conditions` link to `#dfdfe2`. - -Well done! You have completed the final part of the _Registration Form_ practice project. - -# --hints-- - -You should use an `a` element selector. - -```js -assert.exists(new __helpers.CSSHelp(document).getStyle('a')); -``` - -You should give the `a` element a `color` of `#dfdfe2`. - -```js -assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)'); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - freeCodeCamp Registration Form Project - - - -

Registration Form

-

Please fill out this form with the required information

-
-
- - - - -
-
- - - -
-
- - - - -
- -
- - -``` - -```css -body { - width: 100%; - height: 100vh; - margin: 0; - background-color: #1b1b32; - color: #f5f6f7; - font-family: Tahoma; - font-size: 16px; -} - -h1, p { - margin: 1em auto; - text-align: center; -} - -form { - width: 60vw; - max-width: 500px; - min-width: 300px; - margin: 0 auto; - padding-bottom: 2em; -} - -fieldset { - border: none; - padding: 2rem 0; -} - -fieldset:not(:last-of-type) { - border-bottom: 3px solid #3b3b4f; -} - -label { - display: block; - margin: 0.5rem 0; -} - -input, -textarea, -select { - margin: 10px 0 0 0; - width: 100%; -} - -input, textarea { - background-color: #0a0a23; - border: 1px solid #0a0a23; - color: #ffffff; - min-height: 2em; -} - -.inline { - width: unset; - margin: 0 0.5em 0 0; - vertical-align: middle; -} - -input[type="submit"] { - display: block; - width: 60%; - margin: 1em auto; - height: 2em; - font-size: 1.1em; - background-color: #3b3b4f; - border-color: white; - min-width: 300px; -} - -input[type="file"] { - padding: 1px 2px; -} - ---fcc-editable-region-- - ---fcc-editable-region-- - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-001.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-001.md new file mode 100644 index 0000000000..871f7cea6c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-001.md @@ -0,0 +1,46 @@ +--- +id: 60eebd07ea685b0e777b5583 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +Welcome to the Registration Form project! Start by adding the `!DOCTYPE html` declaration at the top of the document so the browser knows what type of document it's reading. + +# --hints-- + +Your code should contain the `DOCTYPE` reference. + +```js +assert(code.match(/` after the type. + +```js +assert(code.match(/html\s*>/gi)); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-002.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-002.md new file mode 100644 index 0000000000..d78a9b2eb0 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-002.md @@ -0,0 +1,54 @@ +--- +id: 60f027099a15b00485563dd2 +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Add opening and closing `html` tags below the `DOCTYPE` so you have a place to start putting some code. + +# --hints-- + +Your `html` element should be below the `DOCTYPE` declaration. + +```js +assert(code.match(/(?)/gi)); +``` + +Your `html` element should have an opening tag. + +```js +assert(code.match(//gi)); +``` + +Your `html` element should have a closing tag. + +```js +assert(code.match(/<\/html\s*>/)); +``` + +Your `html` tags should be in the correct order. + +```js +assert(code.match(/\s*<\/html\s*>/)); +``` + +You should only have one `html` element. + +```js +// Possibly a redundant test, as browser fixes this +assert(document.querySelectorAll('html').length === 1); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-003.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-003.md new file mode 100644 index 0000000000..b2b546852e --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-003.md @@ -0,0 +1,67 @@ +--- +id: 60f027c87bc98f050395c139 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Next, add opening and closing `head` and `body` tags within the `html` element. + +# --hints-- + +You should have an opening `head` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `head` tag. + +```js +assert(code.match(/<\/head\s*>/i)); +``` + +You should have an opening `body` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `body` tag. + +```js +assert(code.match(/<\/body\s*>/i)); +``` + +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')); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + + + + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-004.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-004.md new file mode 100644 index 0000000000..4338a84522 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-004.md @@ -0,0 +1,101 @@ +--- +id: 60f0286404aefb0562a4fdf9 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Add a `title` element to the `head`, and give your project a title of `freeCodeCamp Registration Form Project`. Also, nest a self-closing `link` element in the `head` element. Give it a `rel` attribute value of `stylesheet`, a `type` attribute value of `text/css`, and an `href` attribute value of `styles.css`. + +# --hints-- + +Your code should have a `title` element. + +```js +const title = document.querySelector('title'); +assert.exists(title); +``` + +The `title` element should be within the `head` element. + +```js +const head = document.querySelector('head'); +// TODO: head does not contain title...body contains title +assert(true); +``` + +Your project should have a title of `freeCodeCamp Registration Form Project`. + +```js +const title = document.querySelector('title'); +assert.equal(title.text.toLowerCase(), 'freecodecamp registration form project') +``` + +Remember, the casing and spelling matters for the title. + +```js +const title = document.querySelector('title'); +assert.equal(title.text, 'freeCodeCamp Registration Form Project'); +``` + +Your code should have a `link` element. + +```js +assert.match(code, //i)); +``` + +Your `link` element should be within your `head` element. + +```js +assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)) +``` + +Your `link` element should have a `rel` attribute with the value `stylesheet`. + +```js +assert.match(code, / + + --fcc-editable-region-- + + + + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-005.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-005.md new file mode 100644 index 0000000000..f5972d2888 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-005.md @@ -0,0 +1,43 @@ +--- +id: 60f02e7361b68405e27b62a5 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Within the `body`, provide a heading context for the content, by adding an `h1` with the text `Registration Form`. + +# --hints-- + +You should add the `h1` within the `body`. + +```js +assert.exists(document.querySelector('body > h1')); +``` + +You should give the `h1` the text `Registration Form`. + +```js +assert.equal(document.querySelector('body > h1')?.textContent, 'Registration Form'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-006.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-006.md new file mode 100644 index 0000000000..25c618df9e --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-006.md @@ -0,0 +1,54 @@ +--- +id: 60f030d388cb74067cf291c3 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Below the heading, use the following text within a paragraph element to encourage users to register: + +```md +Please fill out this form with the required information +``` + +# --hints-- + +You should add a `p` element within the `body`. + +```js +assert.exists(document.querySelector('body > p')); +``` + +You should add the `p` element below the `h1`. + +```js +assert.exists(document.querySelector('h1 + p')); +``` + +You should give the `p` element a text of `Please fill out this form with the required information`. + +```js +assert.equal(document.querySelector('p')?.innerText, 'Please fill out this form with the required information'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + +--fcc-editable-region-- + +

Registration Form

+ + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-007.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-007.md new file mode 100644 index 0000000000..40dd9ee7c7 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-007.md @@ -0,0 +1,54 @@ +--- +id: 60f1922fcbd2410527b3bd89 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +To spruce the project up, let us add some CSS. Begin by giving the `body` a `width` of `100%`, and a `height` of `100vh`. + +# --hints-- + +You should use the `body` element selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('body')); +``` + +You should give the `body` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%'); +``` + +You should give the `body` a `height` of `100vh`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-008.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-008.md new file mode 100644 index 0000000000..8da9ecff91 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-008.md @@ -0,0 +1,51 @@ +--- +id: 60f1a5e2d2c23707a4f9a660 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Now, get rid of the horizontal scroll-bar, by setting the `body` default `margin` added by some browsers to `0`. + +# --hints-- + +You should add `margin` within the `body` element selector. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.margin); +``` + +You should give the `margin` a value of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+ + +``` + +```css +--fcc-editable-region-- +body { + width: 100%; + height: 100vh; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-009.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-009.md new file mode 100644 index 0000000000..012b07809e --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-009.md @@ -0,0 +1,64 @@ +--- +id: 60f1a9cbd23023082e149fee +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +That is better. Now, make the background easy on the eyes, by changing the `body` `background-color` to `#1b1b32`. Then, to see the text, change the `color` to `#f5f6f7`. + +# --hints-- + +You should add the `background-color` within the `body` element selector. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor); +``` + +You should give the `background-color` a value of `#1b1b32`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor, 'rgb(27, 27, 50)'); +``` + +You should add the `color` within the `body` element selector. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.color); +``` + +You should give the `color` a value of `#f5f6f7`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.color, 'rgb(245, 246, 247)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+ + +``` + +```css +--fcc-editable-region-- +body { + width: 100%; + height: 100vh; + margin: 0; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-010.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-010.md new file mode 100644 index 0000000000..735a579aa3 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-010.md @@ -0,0 +1,63 @@ +--- +id: 60f5c3e399ff1a05629964e4 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +As suggested by the title, you are creating a form. So, after the `p` element, insert a `form` with an `action` attribute targetting `https://fcc-registration-form.com`. + +# --hints-- + +You should add a `form` element adjacent the `p` element. + +```js +assert.exists(document.querySelector('p + form')); +``` + +You should give the `form` an `action` attribute. + +```js +// Default action points to window location +assert.notEqual(document.querySelector('form')?.action, window?.location?.href); +``` + +You should give the `action` a value of `https://fcc-registration-form.com`. + +```js +// TODO: Do we need to use an in-house (domain) URL - just-in-case +assert.equal(document.querySelector('form')?.action, 'https://fcc-registration-form.com/'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + +--fcc-editable-region-- + +

Registration Form

+

Please fill out this form with the required information

+ + +--fcc-editable-region-- + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-011.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-011.md new file mode 100644 index 0000000000..a31380f9f4 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-011.md @@ -0,0 +1,63 @@ +--- +id: 60f5cb8875ab6a0610f05071 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Seeing as we plan on having three distinct sections to the form, add three `fieldset` elements within the `form`. + +# --hints-- + +You should add three `fieldset` elements. + +```js +assert.equal(document.querySelectorAll('fieldset')?.length, 3); +``` + +The three `fieldset` elements should be within the `form`. + +```js +assert.equal(document.querySelectorAll('form > fieldset')?.length, 3); +``` + +The three `fieldset` elements should be siblings. + +```js +assert.exists(document.querySelector('fieldset + fieldset + fieldset')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + +--fcc-editable-region-- + +

Registration Form

+

Please fill out this form with the required information

+
+ +
+ +--fcc-editable-region-- + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-012.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-012.md new file mode 100644 index 0000000000..0199d66229 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-012.md @@ -0,0 +1,61 @@ +--- +id: 60f5d2776c854e069560fbe6 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +The first `fieldset` will hold name, email, and password fields. Start by adding four `label` elements to the first `fieldset`. + +# --hints-- + +You should add four `label` elements. + +```js +assert.equal(document.querySelectorAll('label')?.length, 4); +``` + +You should add the `label` elements to the first `fieldset`. + +```js +assert.equal(document.querySelector('fieldset')?.querySelectorAll('label')?.length, 4); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+--fcc-editable-region-- +
+
+ +
+
+
+
+--fcc-editable-region-- + + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-013.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-013.md new file mode 100644 index 0000000000..f9dd108adb --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-013.md @@ -0,0 +1,81 @@ +--- +id: 60f5dc35c07ac1078f140916 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Add the following text to the `label` elements: + +- `Enter Your First Name:` +- `Enter Your Last Name:` +- `Enter Your Email:` +- `Create a New Password:` + +# --hints-- + +The first `label` should have the text `Enter Your First Name:`. + +```js +assert.match(document.querySelector('label')?.innerHTML, /Enter Your First Name:/i); +``` + +The second `label` should have the text `Enter Your Last Name:`. + +```js +assert.match(document.querySelector('fieldset > label:nth-child(2)')?.innerHTML, /Enter Your Last Name:/i); +``` + +The third `label` should have the text `Enter Your Email:`. + +```js +assert.match(document.querySelector('fieldset > label:nth-child(3)')?.innerHTML, /Enter Your Email:/i); +``` + +The fourth `label` should have the text `Create a New Password:`. + +```js +assert.match(document.querySelector('fieldset > label:nth-child(4)')?.innerHTML, /Create a New Password:/i); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+--fcc-editable-region-- +
+ + + + +
+--fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-014.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-014.md new file mode 100644 index 0000000000..ab02871561 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-014.md @@ -0,0 +1,72 @@ +--- +id: 60f803d5241e6a0433a523a1 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +As `label` elements are `inline` by default, they appear on the same line as the text they are labelling. To make them appear on separate lines, add `display: block` to the `label` element, and add a `margin` of `0.5rem 0`, to separate them from each other. + +# --hints-- + +You should use the `label` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('label')); +``` + +You should add a `display` property of value `block`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('label')?.display, 'block'); +``` + +You should add a `margin` property of value `0.5rem 0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('label')?.margin, '0.5rem 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+
+
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-015.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-015.md new file mode 100644 index 0000000000..3db58e58c9 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-015.md @@ -0,0 +1,94 @@ +--- +id: 60f805f813eaf2049bc2ceea +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Nest an `input` element within each `label`. Be sure to add each `input` after the `label` text, and include a space after the colon. + +# --hints-- + +You should add four `input` elements to the `fieldset` element. + +```js +assert.equal(document.querySelectorAll('fieldset input')?.length, 4); +``` + +You should nest the `input` elements within the `label` elements. + +```js +assert.equal(document.querySelectorAll('label input')?.length, 4); +``` + +You should add the first `input` after the `label` text `Enter Your First Name:`, and include a space after the colon. + +```js +assert.equal(document.querySelectorAll('label')?.[0]?.innerHTML, 'Enter Your First Name: '); +``` + +You should add the second `input` after the `label` text `Enter Your Last Name:`, and include a space after the colon. + +```js +assert.equal(document.querySelectorAll('label')?.[1]?.innerHTML, 'Enter Your Last Name: '); +``` + +You should add the third `input` after the `label` text `Enter Your Email:`, and include a space after the colon. + +```js +assert.equal(document.querySelectorAll('label')?.[2]?.innerHTML, 'Enter Your Email: '); +``` + +You should add the fourth `input` after the `label` text `Create a New Password:`, and include a space after the colon. + +```js +assert.equal(document.querySelectorAll('label')?.[3]?.innerHTML, 'Create a New Password: '); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+ --fcc-editable-region-- +
+ + + + +
+--fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-016.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-016.md new file mode 100644 index 0000000000..7d8faa4e47 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-016.md @@ -0,0 +1,87 @@ +--- +id: 60f80e0081e0f2052ae5b505 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Specifying the `type` attribute of a form element is important for the browser to know what kind of data it should expect. If the `type` is not specified, the browser will default to `text`. + +Give the first two `input` elements a `type` attribute of `text`, the third a `type` attribute of `email`, and the fourth a `type` attribute of `password`. + +The `email` type only allows emails with a `@` and a `.` in the domain. +The `password` type obscures the input, and warns if the site does not use HTTPS. + +# --hints-- + +You should give the first `input` element a `type` attribute of `text`. + +```js +assert.equal(document.querySelector('input')?.type, 'text'); +``` + +You should give the second `input` element a `type` attribute of `text`. + +```js +assert.equal(document.querySelectorAll('input')?.[1]?.type, 'text'); +``` + +You should give the third `input` element a `type` attribute of `email`. + +```js +assert.equal(document.querySelectorAll('input')?.[2]?.type, 'email'); +``` + +You should give the fourth `input` element a `type` attribute of `password`. + +```js +assert.equal(document.querySelectorAll('input')?.[3]?.type, 'password'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+--fcc-editable-region-- +
+ + + + +
+--fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-017.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-017.md new file mode 100644 index 0000000000..11127ac946 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-017.md @@ -0,0 +1,79 @@ +--- +id: 60f81167d0d4910809f88945 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +The first `input` element with a `type` of `submit` is automatically set to submit its nearest parent `form` element. + +To handle the form submission, after the last `fieldset` element add an `input` element with the `type` attribute set to `submit` and the `value` attribute set to `Submit`. + +# --hints-- + +You should add the `input` element after the last `fieldset` element. + +```js +assert.exists(document.querySelectorAll('fieldset')?.[2]?.nextElementSibling?.tagName, 'input'); +``` + +You should give the `input` element a `type` attribute of `submit`. + +```js +assert.exists(document.querySelector('fieldset + input[type="submit"]')); +``` + +You should give the `input` element a `value` attribute of `Submit`. + +```js +assert.exists(document.querySelector('fieldset + input[value="Submit"]')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+--fcc-editable-region-- +
+ + + + +
+
+
+ +--fcc-editable-region-- +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-018.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-018.md new file mode 100644 index 0000000000..f0cbeb6b6b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-018.md @@ -0,0 +1,93 @@ +--- +id: 60f81616cff80508badf9ad5 +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +At this point, you should be able to submit the form. However, you might notice not much happens. + +To make the form more interactive, add the `required` attribute to the `input` elements in the first `fieldset`. + +Now, if you try to submit the form without filling in the required fields, you will see an error message. + +# --hints-- + +You should give the first `input` element a `required` attribute. + +```js +assert.equal(document.querySelector('input')?.required, true); +``` + +You should give the second `input` element a `required` attribute. + +```js +assert.equal(document.querySelectorAll('input')?.[1]?.required, true); +``` + +You should give the third `input` element a `required` attribute. + +```js +assert.equal(document.querySelectorAll('input')?.[2]?.required, true); +``` + +You should give the fourth `input` element a `required` attribute. + +```js +assert.equal(document.querySelectorAll('input')?.[3]?.required, true); +``` + +You should not give the `submit` `input` a `required` attribute. + +```js +assert.equal(document.querySelector('input[type="submit"]')?.required, false); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+--fcc-editable-region-- +
+ + + + +
+
+
+ +--fcc-editable-region-- +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-019.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-019.md new file mode 100644 index 0000000000..aba8e6294b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-019.md @@ -0,0 +1,73 @@ +--- +id: 60f83e7bfc09900959f41e20 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Certain `type` attribute values come with built-in form validation. For example, `type="email"` requires that the value be a valid email address. + +Add custom validation to the password `input` element, by adding a `minlength` attribute with a value of `8`. Doing so prevents inputs of less than 8 characters being submitted. + +# --hints-- + +You should give the password `input` element a `minlength` attribute. + +```js +assert.notEqual(document.querySelector('input[type="password"]')?.minLength, -1); +``` + +You should give the `minlength` attribute a value of `8`. + +```js +assert.equal(document.querySelector('input[type="password"]')?.minLength, 8); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+--fcc-editable-region-- +
+ + + + +
+--fcc-editable-region-- +
+
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-020.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-020.md new file mode 100644 index 0000000000..ec5caca9d0 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-020.md @@ -0,0 +1,81 @@ +--- +id: 60f84ec41116b209c280ba91 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +With `type="password"` you can use the `pattern` attribute to define a regular expression that the password must match to be considered valid. + +Add a `pattern` attribute to the password `input` element to require the input match: `[a-z0-5]{8,}` + +The above is a regular expression which matches eight or more lowercase letters or the digits `0` to `5`. Then, remove the `minlength` attribute, and try it out. + +# --hints-- + +You should give the password `input` element a `pattern` attribute. + +```js +assert.isNotEmpty(document.querySelector('input[type="password"]')?.pattern); +``` + +You should give the `pattern` attribute a value of `[a-z0-5]{8,}`. + +```js +assert.equal(document.querySelector('input[type="password"]')?.pattern, '[a-z0-5]{8,}'); +``` + +You should remove the `minlength` attribute from the password `input` element. + +```js +assert.equal(document.querySelector('input[type="password"]')?.minLength, -1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+--fcc-editable-region-- +
+ + + + +
+--fcc-editable-region-- +
+
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-021.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-021.md new file mode 100644 index 0000000000..6c65a23708 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-021.md @@ -0,0 +1,75 @@ +--- +id: 60f852f645b5310a8264f555 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Let us go to the next part of the registration form. This section will ask for the type of account the user is opening, and will confirm the user has read the terms and conditions. + +Start by adding three `label` elements to the second `fieldset`. + +# --hints-- + +You should add three `label` elements to the second `fieldset`. + +```js +assert.equal(document.querySelectorAll('fieldset')?.[1]?.querySelectorAll('label')?.length, 3); +``` + +The `label` elements should be siblings. + +```js +assert.exists(document.querySelector('fieldset:nth-child(2)')?.querySelector('label + label + label')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-022.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-022.md new file mode 100644 index 0000000000..8d94fc2635 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-022.md @@ -0,0 +1,84 @@ +--- +id: 60f85a62fb30c80bcea0cedb +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Users will be allowed to chose either a `Personal Account` or `Business Account`. + +To do this, within each of the first two `label` elements, add one `input` element with `type="radio"`. + +# --hints-- + +You should add two `input` elements. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(2) input')?.length, 2); +``` + +You should add one `input` to each of the first two `label` elements. + +```js +assert.exists(document.querySelector('fieldset:nth-child(2) > label:nth-child(1) > input')); +assert.exists(document.querySelector('fieldset:nth-child(2) > label:nth-child(2) > input')); +``` + +You should give both `input` elements a `type` of `radio`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(2) input[type="radio"]')?.length, 2); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-023.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-023.md new file mode 100644 index 0000000000..52480956cb --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-023.md @@ -0,0 +1,81 @@ +--- +id: 60f8604682407e0d017bbf7f +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +For the terms and conditions, add an `input` of with a `type` of `checkbox` to the third `label` element. Also, as we do not want users to sign up, without having read the terms and conditions, make it `required`. + +# --hints-- + +You should add an `input` to the third `label` element. + +```js +assert.exists(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input')); +``` + +You should add a `type` attribute of value `checkbox` to the `input` element. + +```js +assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input')?.type, 'checkbox'); +``` + +You should add a `required` attribute to the `input` element. + +```js +assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input')?.required, true); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-024.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-024.md new file mode 100644 index 0000000000..090234ce60 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-024.md @@ -0,0 +1,105 @@ +--- +id: 60f8618d191b940d62038513 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Within each corresponding `label` element, and immediately after the `input` element, add a space and add the following text: + +```md +Personal Account +Business Account +I accept the terms and conditions +``` + +# --hints-- + +You should give the first `label` the text `Personal Account`. + +```js +assert.include(document.querySelector('fieldset:nth-child(2) > label')?.innerText, 'Personal Account'); +``` + +You should give the second `label` the text `Business Account`. + +```js +assert.include(document.querySelector('fieldset:nth-child(2) > label:nth-child(2)')?.innerText, 'Business Account'); +``` + +You should give the third `label` the text `I accept the terms and conditions`. + +```js +assert.include(document.querySelector('fieldset:nth-child(2) > label:nth-child(3)')?.innerText, 'I accept the terms and conditions'); +``` + +You should give the first `label` text one space at the front. + +```js +assert.equal(document.querySelector('fieldset:nth-child(2) > label')?.innerText?.[0], ' '); +``` + +You should give the second `label` text one space at the front. + +```js +assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(2)')?.innerText?.[0], ' '); +``` + +You should give the third `label` text one space at the front. + +```js +assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(3)')?.innerText?.[0], ' '); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-025.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-025.md new file mode 100644 index 0000000000..e4f170f38e --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-025.md @@ -0,0 +1,83 @@ +--- +id: 60fab4a123ce4b04526b082b +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +You only want one radio input to be selectable at a time. However, the form does not know the radio inputs are related. + +To relate the radio inputs, give them the same `name` attribute with a value of `account-type`. Now, it is not possible to select both radio inputs at the same time. + +# --hints-- + +You should give the first radio input the `name` attribute with a value of `account-type`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(1) input[type="radio"]')?.name, 'account-type'); +``` + +You should give the second radio input the `name` attribute with a value of `account-type`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(2) input[type="radio"]')?.name, 'account-type'); +``` + +You should not give the `checkbox` the `name` attribute. + +```js +assert.isEmpty(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input[type="checkbox"]')?.name); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-026.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-026.md new file mode 100644 index 0000000000..6cc148f98d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-026.md @@ -0,0 +1,85 @@ +--- +id: 60fab8367d35de04e5cb7929 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +To finish this `fieldset` off, link the text `terms and conditions` to the following location: + +```md +https://www.freecodecamp.org/news/terms-of-service/ +``` + +# --hints-- + +You should use an `a` element to link to the terms and conditions. + +```js +assert.exists(document.querySelector('fieldset:nth-child(2) > label:nth-child(3) > input + a')); +``` + +You should give the `a` element an `href` of `https://www.freecodecamp.org/news/terms-of-service/`. + +```js +assert.match(document.querySelector('fieldset:nth-child(2) > label:nth-child(3) > input + a')?.href, /https:\/\/www\.freecodecamp\.org\/news\/terms-of-service\/?/); +``` + +You should only wrap the `a` element around the text `terms and conditions`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(3) > input + a')?.textContent, 'terms and conditions'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-027.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-027.md new file mode 100644 index 0000000000..544c8e4dce --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-027.md @@ -0,0 +1,88 @@ +--- +id: 60fab9f17fa294054b74228c +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Moving on to the final `fieldset`. What if you wanted to allow a user to upload a profile picture? + +Well, the `input` type `file` allows just that. Add a `label` with the text `Upload a profile picture: `, and add an `input` accepting a file upload. + +# --hints-- + +You should add a `label` with the text `Upload a profile picture: `. + +```js +assert.match(document.querySelector('fieldset:nth-child(3) > label')?.innerText, /Upload a profile picture:/i); +``` + +You should nest an `input` element inside the `label` element. + +```js +assert.exists(document.querySelector('fieldset:nth-child(3) > label > input')); +``` + +You should give the `input` element a `type` of `file`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label > input')?.type, 'file'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-028.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-028.md new file mode 100644 index 0000000000..d874c530f7 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-028.md @@ -0,0 +1,102 @@ +--- +id: 60fabf0dd4959805dbae09e6 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Add another `label` after the first, with the text `Input your age (years): `. Then, nest an `input` with the `type` of `number`. + +As we do not want users under the age of 13 to register, add a `min` attribute to the `input` with a value of `13`. Also, we can probably assume users over the age of 120 will not register; add a `max` attribute with a value of `120`. + +Now, if someone tries to submit the form with values outside of the range, a warning will appear, and the form will not submit. Give it a try. + +# --hints-- + +You should add a `label` to the third `fieldset`, after the existing `label`. + +```js +assert.exists(document.querySelector('fieldset:nth-child(3) > label + label')); +``` + +You should give the `label` the text `Input your age (years): `. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2)')?.textContent, 'Input your age (years): '); +``` + +You should give the `label` an `input` with `type` of `number`. + +```js +assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]')); +``` + +You should give the `input` a `min` attribute with a value of `13`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]')?.min, '13'); +``` + +You should give the `input` a `max` attribute with a value of `120`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]')?.max, '120'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-029.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-029.md new file mode 100644 index 0000000000..d081f63709 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-029.md @@ -0,0 +1,84 @@ +--- +id: 60fac4095512d3066053d73c +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Adding a dropdown to the form is easy with the `select` element. The `select` element is a container for a group of `option` elements, and the `option` element acts as a label for each dropdown option. Both elements require closing tags. + +Start, by adding a `select` element below the two `input` elements. Then, nest 5 `option` elements within the `select` element. + +# --hints-- + +You should add a `select` element to the third `fieldset`. + +```js +assert.exists(document.querySelector('fieldset:nth-child(3) > select')); +``` + +You should nest 5 `option` elements inside the `select` element. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > select > option')?.length, 5); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-030.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-030.md new file mode 100644 index 0000000000..d321d5b13b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-030.md @@ -0,0 +1,94 @@ +--- +id: 60fac56271087806def55b33 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Nest the `select` element within a `label` element with the text `How did you hear about us?`. The text should come before the `select` element. + +# --hints-- + +You should nest only the `select` element within a `label` element. + +```js +assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(3) > select')); +``` + +You should give the `label` element the text `How did you hear about us?`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(3)')?.innerText?.trim(), 'How did you hear about us?'); +``` + +You should place the text before the `select` element. + +```js +assert.match(document.querySelector('fieldset:nth-child(3) > label:nth-child(3)')?.innerHTML?.replace(/[\t\n]+/g, ''), /^How did you hear about us\?/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-031.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-031.md new file mode 100644 index 0000000000..a58e285f14 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-031.md @@ -0,0 +1,116 @@ +--- +id: 60fac8d7fdfaee0796934f20 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +The dropdown options are currently empty. To give them content, add the following text to each subsequent `option` element: + +```md +(select one) +freeCodeCamp News +freeCodeCamp YouTube +freeCodeCamp Forum +Other +``` + +# --hints-- + +You should give the first `option` element the text `(select one)`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[0]?.textContent, '(select one)'); +``` + +You should give the second `option` element the text `freeCodeCamp News`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[1]?.textContent, 'freeCodeCamp News'); +``` + +You should give the third `option` element the text `freeCodeCamp YouTube`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[2]?.textContent, 'freeCodeCamp YouTube'); +``` + +You should give the fourth `option` element the text `freeCodeCamp Forum`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[3]?.textContent, 'freeCodeCamp Forum'); +``` + +You should give the fifth `option` element the text `Other`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[4]?.textContent, 'Other'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-032.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-032.md new file mode 100644 index 0000000000..e53ff5c7c9 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-032.md @@ -0,0 +1,110 @@ +--- +id: 60faca286cb48b07f6482970 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Submitting the form with an option selected would not send a useful value to the server. As such, each `option` needs to be given a `value` attribute. Without which, the text content of the `option` will be submitted to the server. + +Give the first `option` a `value` of `""`, and the subsequent `option` elements `value` attributes from `1` to `4`. + +# --hints-- + +You should give the first `option` a `value` of `""`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[0]?.value, ''); +``` + +You should give the second `option` a `value` of `1`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[1]?.value, '1'); +``` + +You should give the third `option` a `value` of `2`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[2]?.value, '2'); +``` + +You should give the fourth `option` a `value` of `3`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[3]?.value, '3'); +``` + +You should give the fifth `option` a `value` of `4`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[4]?.value, '4'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-033.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-033.md new file mode 100644 index 0000000000..7f4b954ecf --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-033.md @@ -0,0 +1,105 @@ +--- +id: 60facde2d0dc61085b41063f +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +The `textarea` element acts like an `input` element of type `text`, but comes with the added benefit of being able to receive multi-line text, and an initial number of text rows and columns. + +To allow users to register with a bio, add a `label` with the text `Provide a bio:` followed by a `textarea` element. + +# --hints-- + +You should add a `label` element within the third `fieldset`, after the existing `label` elements. + +```js +assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(4)')); +``` + +You should give the `label` a text of `Provide a bio:`. + +```js +assert.match(document.querySelector('fieldset:nth-child(3) > label:nth-child(4)')?.innerText, /Provide a bio/); +``` + +You should nest a `textarea` element within the `label`. + +```js +assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')); +``` + +You should give the `textarea` element opening and closing tags. + +```js +assert.match(code, /[\s\S]*<\/textarea\s*>/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-034.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-034.md new file mode 100644 index 0000000000..cace62622d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-034.md @@ -0,0 +1,95 @@ +--- +id: 60facf914c7b9b08d7510c2c +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +The `textarea` appears too small. To give it an initial size, you can add the `rows` and `cols` attributes. + +Add an initial size of `3` rows and `30` columns. + +# --hints-- + +You should give the `textarea` a `rows` attribute with value `3`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.rows, 3); +``` + +You should give the textarea a `cols` attribute with value `30`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.cols, 30); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-035.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-035.md new file mode 100644 index 0000000000..796cb814f0 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-035.md @@ -0,0 +1,95 @@ +--- +id: 60fad0a812d9890938524f50 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +To give Campers an idea of what to put in their bio, the `placeholder` attribute is used. The `placeholder` accepts a text value, which is displayed until the user starts typing. + +Give the `textarea` a `placeholder` of `I like coding on the beach...`. + +# --hints-- + +You should give the `textarea` a `placeholder` attribute. + +```js +assert.isNotEmpty(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.placeholder); +``` + +You should give the `placeholder` a value of `I like coding on the beach...`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.placeholder, 'I like coding on the beach...'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-036.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-036.md new file mode 100644 index 0000000000..6bc28a59d8 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-036.md @@ -0,0 +1,155 @@ +--- +id: 60fad1cafcde010995e15306 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +With form submissions, it is useful, and good practice, to provide each submittable element with a `name` attribute. This attribute is used to identify the element in the form submission. + +Go ahead, and give each submittable element a unique `name` attribute of your choosing. _Except for the two `radio` inputs._ + +# --hints-- + +You should give the `input` expecting a first name a `name` attribtute. _P.S. I would have chosen `first-name`_ + +```js +assert.isNotEmpty(document.querySelector('fieldset:nth-child(1) > label:nth-child(1) > input')?.name); +``` + +You should give the `input` expecting a last name a `name` attribute. _P.S. I would have chosen `last-name`_ + +```js +assert.isNotEmpty(document.querySelector('fieldset:nth-child(1) > label:nth-child(2) > input')?.name); +``` + +You should give the `email` a `name` attribute. _P.S. I would have chosen `email`_ + +```js +assert.isNotEmpty(document.querySelector('input[type="email"]')?.name); +``` + +You should give the `password` a `name` attribute. _P.S. I would have chosen `password`_ + +```js +assert.isNotEmpty(document.querySelector('input[type="password"]')?.name); +``` + +You should give the `checkbox` a `name` attribute. _P.S. I would have chosen `terms`_ + +```js +assert.isNotEmpty(document.querySelector('input[type="checkbox"]')?.name); +``` + +You should give the `file` a `name` attribute. _P.S. I would have chosen `file`_ + +```js +assert.isNotEmpty(document.querySelector('input[type="file"]')?.name); +``` + +You should give the `number` a `name` attribute. _P.S. I would have chosen `age`_ + +```js +assert.isNotEmpty(document.querySelector('input[type="number"]')?.name); +``` + +You should give the `select` element a `name` attribute. _P.S. I would have chosen `referrer`_ + +```js +assert.isNotEmpty(document.querySelector('select')?.name); +``` + +You should give the `textarea` element a `name` attribute. _P.S. I would have chosen `bio`_ + +```js +assert.isNotEmpty(document.querySelector('textarea')?.name); +``` + +You should not give any of the `option` elements a `name` attribute. + +```js +[...document.querySelectorAll('option')]?.forEach(option => assert.isUndefined(option?.name)); +``` + +You should not give any of the `label` elements a `name` attribute. + +```js +[...document.querySelectorAll('label')]?.forEach(label => assert.isUndefined(label?.name)); +``` + +You should not give any of the `fieldset` elements a `name` attribute. + +```js +[...document.querySelectorAll('fieldset')]?.forEach(fieldset => assert.isEmpty(fieldset?.name)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+--fcc-editable-region-- +
+ + + + +
+
+ + + +
+
+ + + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-037.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-037.md new file mode 100644 index 0000000000..5ff5f3f3e1 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-037.md @@ -0,0 +1,102 @@ +--- +id: 60fad6dfcc0d930a59becf12 +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +The HTML for the registration form is finished. Now, you can spruce it up a bit. + +Start by changing the font to `Tahoma`, and the font size to `16px` in the `body`. + +# --hints-- + +You should use the `font-family` property to change the font. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily); +``` + +You should set the `font-family` property to `Tahoma`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily, 'Tahoma'); +``` + +You should set the `font-size` property to `16px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.fontSize, '16px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +--fcc-editable-region-- +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + +} +--fcc-editable-region-- + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-038.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-038.md new file mode 100644 index 0000000000..f7b1fe5f4b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-038.md @@ -0,0 +1,103 @@ +--- +id: 60fad8e6148f310bba7890b1 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Center the `h1` and `p` elements by giving them a `margin` of `1em auto`. Then, center align the text as well. + +# --hints-- + +You should use a comma-separated element selector to style the `h1` and `p` elements. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('h1, p')); +``` + +You should use a `margin` of `1em auto` to center the `h1` and `p` elements. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('h1, p')?.margin, '1em auto'); +``` + +You should use a `text-align` of `center` to center the `h1` and `p` text. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('h1, p')?.textAlign, 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-039.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-039.md new file mode 100644 index 0000000000..9aa15bba84 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-039.md @@ -0,0 +1,120 @@ +--- +id: 60fad99e09f9d30c1657e790 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Center the `form` element, by giving it a `margin` of `0 auto`. Then, fix its size to a maximum `width` of `500px`, and a minimum width of `300px`. In between that range, allow it to have a `width` of `60vw`. + +# --hints-- + +You should use a `form` selector to style the `form` element. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('form')); +``` + +You should give the `form` a `margin` of `0 auto`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.margin, '0px auto'); +``` + +You should give the `form` a `max-width` of `500px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.maxWidth, '500px'); +``` + +You should give the `form` a `min-width` of `300px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.minWidth, '300px'); +``` + +You should give the `form` a `width` of `60vw`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.width, '60vw'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-040.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-040.md new file mode 100644 index 0000000000..5495259f9e --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-040.md @@ -0,0 +1,121 @@ +--- +id: 60fadb18058e950c73925279 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +During development, it is useful to see the `fieldset` default borders. However, they make the content appear too separated. + +Remove the `border`, and add `2rem` of padding only to the top and bottom of each `fieldset`. Be sure to remove the `padding` from the left and right. + +# --hints-- + +You can use either a value of `none` or `0` to remove the `border`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle('fieldset')?.border, /(none)|(0px)/); +``` + +You should add `padding` of `2rem` to the top and bottom of each `fieldset`. + +```js +const fieldset = new __helpers.CSSHelp(document).getStyle('fieldset') +assert.equal(fieldset?.paddingTop, '2rem'); +assert.equal(fieldset?.paddingBottom, '2rem'); +``` + +You should remove the `padding` from the left and right of each `fieldset`. + +```js +const fieldset = new __helpers.CSSHelp(document).getStyle('fieldset') +assert.equal(fieldset?.paddingLeft, '0px'); +assert.equal(fieldset?.paddingRight, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-041.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-041.md new file mode 100644 index 0000000000..155c37d0b0 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-041.md @@ -0,0 +1,114 @@ +--- +id: 60fadce90f85c50d0bb0dd4f +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +To give the `fieldset` elements a bit of separation, select all but the last `fieldset` element, and give them a `border-bottom` of `3px solid #3b3b4f`. + +# --hints-- + +You can use the `:not(:last-of-type)` pseudo-class to select all but the last element. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('fieldset:not(:last-of-type)')); +``` + +You should give the `fieldset` elements a `border-bottom` of `3px solid #3b3b4f`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('fieldset:not(:last-of-type)')?.borderBottom, '3px solid rgb(59, 59, 79)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-042.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-042.md new file mode 100644 index 0000000000..86c7f3de5b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-042.md @@ -0,0 +1,151 @@ +--- +id: 60fadd972e6ffe0d6858fa2d +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +It would be nicer to have the `label` text appear above the form elements. + +Select all `input`, `textarea`, and `select` elements, and make them take up the full width of their parent elements. + +Also, add `10px` of `margin` to the top of the selected elements. Set the other margins to `0`. + +# --hints-- + +You should use a comma separated element selector to select the `input`, `textarea`, and `select` elements. + +```js +assert.isTrue(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].some(selector => new __helpers.CSSHelp(document).getStyle(selector))); +``` + +You should set the `width` property to `100%`. + +```js +const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.width, '100%'); +``` + +You should set the `margin-top` property to `10px`. + +```js +const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginTop, '10px'); +``` + +You should set the `margin-bottom` property to `0`. + +```js +const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginBottom, '0px'); +``` + +You should set the `margin-left` property to `0`. + +```js +const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginLeft, '0px'); +``` + +You should set the `margin-right` property to `0`. + +```js +const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginRight, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-043.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-043.md new file mode 100644 index 0000000000..92e793cd52 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-043.md @@ -0,0 +1,131 @@ +--- +id: 60fadfa2b540b70dcfa8b771 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +For the second `fieldset`, you want the `input` and `label` text to appear on the same line. + +Start, by giving the `input` elements in the second `fieldset` a class of `inline`. + +# --hints-- + +You should give the first `input` a class of `inline`. + +```js +assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[0]?.classList?.contains('inline')); +``` + +You should give the second `input` a class of `inline`. + +```js +assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[1]?.classList?.contains('inline')); +``` + +You should give the third `input` a class of `inline`. + +```js +assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[2]?.classList?.contains('inline')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- +
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-044.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-044.md new file mode 100644 index 0000000000..0044bd9068 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-044.md @@ -0,0 +1,125 @@ +--- +id: 60fc219d333e37046f474a6e +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Select only the `.inline` elements, and give them `width` of `unset`. This will remove the earlier rule which set all the `input` elements to `width: 100%`. + +# --hints-- + +You should use the `.inline` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.inline')); +``` + +You should give the `.inline` elements a `width` of `unset`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.width, 'unset'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-045.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-045.md new file mode 100644 index 0000000000..8282ebda4d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-045.md @@ -0,0 +1,140 @@ +--- +id: 60fc22d1e64d1b04cdd4e602 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Add some space between the `.inline` elements and the `label` text, by giving a right `margin` of `0.5em`. Also, set all the other margin to `0`. + +# --hints-- + +You should give the `.inline` elements a `margin-right` of `0.5em`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginRight, '0.5em'); +``` + +You should give the `.inline` elements a `margin-bottom` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginBottom, '0px'); +``` + +You should give the `.inline` elements a `margin-top` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginTop, '0px'); +``` + +You should give the `.inline` elements a `margin-left` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginLeft, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +--fcc-editable-region-- +.inline { + width: unset; + +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-046.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-046.md new file mode 100644 index 0000000000..d146eb4d74 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-046.md @@ -0,0 +1,125 @@ +--- +id: 60fc236dc04532052926fdac +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +If you look close enough, you will notice the `.inline` elements are too high on the line. + +To combat this, set the `vertical-align` property to `middle`. + +# --hints-- + +You should set the `vertical-align` property to `middle` for all `.inline` elements. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.verticalAlign, 'middle'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +--fcc-editable-region-- +.inline { + width: unset; + margin: 0 0.5em 0 0; + +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-047.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-047.md new file mode 100644 index 0000000000..e5238ccccc --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-047.md @@ -0,0 +1,142 @@ +--- +id: 60ffe1bc30415f042faea936 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +To make the `input` and `textarea` elements blend in with the background theme, set their `background-color` to `#0a0a23`. Then, give them a `1px`, `solid` border with a color of `#0a0a23`. + +# --hints-- + +You should use a comma separated element selector to select the `input` and `textarea` elements. + +```js +const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector); +assert.isTrue(['input, textarea', 'textarea, input'].some(selFunc)); +``` + +You should give the `input` and `textarea` elements a `background-color` of `#0a0a23`. + +```js +const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.backgroundColor, 'rgb(10, 10, 35)'); +``` + +You should give the `input` and `textarea` elements a `1px`, `solid` border with a color of `#0a0a23`. + +```js +const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.borderWidth, '1px'); +assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.borderStyle, 'solid'); +assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.borderColor, 'rgb(10, 10, 35)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-048.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-048.md new file mode 100644 index 0000000000..2e59e57219 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-048.md @@ -0,0 +1,139 @@ +--- +id: 60ffe3936796ac04959285a9 +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Currently, if you type in the `input` or `textarea` elements, you will not be able to see the text. Also, their height is too small to be easy to use. + +Fix this, by setting the `color` to `#ffffff`, and setting their `min-height` to `2em`. + +# --hints-- + +You should set the `color` to `#ffffff`. + +```js +const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.color, 'rgb(255, 255, 255)'); +``` + +You should set the `min-height` to `2em`. + +```js +const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.minHeight, '2em'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +--fcc-editable-region-- +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + +} +--fcc-editable-region-- + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-049.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-049.md new file mode 100644 index 0000000000..d484413ad6 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-049.md @@ -0,0 +1,144 @@ +--- +id: 60ffe4f4ec18cd04dc470c56 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +You want the `select` element to remain with a white background, but now it is not getting the same `min-height` as the `input` and `textarea` elements. + +Move the `min-height` property and value so that all three element types have the same `min-height` value, and the `select` element still has a white background. + +# --hints-- + +You should move the `min-height` property and value to the `input, textarea, select` selector. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input, textarea, select')?.minHeight); +``` + +You should give the `input, textarea, select` selector a `min-height` of `2em`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input, textarea, select')?.minHeight, '2em'); +``` + +You should remove the `min-height` declaration from the `input, textarea` selector. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input, textarea')?.minHeight); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +--fcc-editable-region-- +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; + min-height: 2em; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-050.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-050.md new file mode 100644 index 0000000000..b888e68877 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-050.md @@ -0,0 +1,152 @@ +--- +id: 60ffe69ee377c6055e192a46 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +To style the submit button, you can use an _attribute_ selector, which selects an element based on the given attribute value. Here is an example: + +```css +input[name="password"] +``` + +The above selects `input` elements with a `name` attribute value of `password`. + +Now, use the attribute selector to style the submit button with a `display` of `block`, and a `width` of `60%`. + +# --hints-- + +You should use an attribute selector of `input[type="submit"]` to style the submit button. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')); +``` + +You should give the submit button a `display` of `block`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.display, 'block'); +``` + +You should give the submit button a `width` of `60%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.width, '60%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; + min-height: 2em; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-051.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-051.md new file mode 100644 index 0000000000..35125e293f --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-051.md @@ -0,0 +1,145 @@ +--- +id: 60ffe7d8aae62c05bcc9e7eb +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +With a `display` of `block` the submit button sits flush against the left edge of its parent. + +Use the same technique used to center the `form` to center the submit button. + +# --hints-- + +You should give the submit button a `margin` of `0 auto`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.margin, '0px auto'); +``` + +You should not give the submit button a `min-width` or `max-width`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.minWidth); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.maxWidth); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; + min-height: 2em; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +--fcc-editable-region-- +input[type="submit"] { + display: block; + width: 60%; + +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-052.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-052.md new file mode 100644 index 0000000000..1d0db5f3d4 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-052.md @@ -0,0 +1,143 @@ +--- +id: 60ffe8a5ceb0e90618db06d9 +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +To make the submit button look more in line with the rest of the form, give it the same `height` as the other fields (`2em`). Also, increase the `font-size` to `1.1rem`. + +# --hints-- + +You should give the submit button a `height` of `2em`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.height, '2em'); +``` + +You should give the submit button a `font-size` of `1.1rem`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.fontSize, '1.1rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; + min-height: 2em; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +--fcc-editable-region-- +input[type="submit"] { + display: block; + width: 60%; + margin: 0 auto; + +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-053.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-053.md new file mode 100644 index 0000000000..2f9715f92c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-053.md @@ -0,0 +1,145 @@ +--- +id: 60ffe947a868ec068f7850f6 +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +To make the submit button appear more distinct, give it a `background-color` of `#3b3b4f`, and a `border-color` of `white`. + +# --hints-- + +You should give the submit button a `background-color` of `#3b3b4f`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.backgroundColor, 'rgb(59, 59, 79)'); +``` + +You should give the submit button a `border-color` of `white`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.borderColor, 'white'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; + min-height: 2em; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +--fcc-editable-region-- +input[type="submit"] { + display: block; + width: 60%; + margin: 0 auto; + height: 2em; + font-size: 1.1em; + +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-054.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-054.md new file mode 100644 index 0000000000..9b2a40dabc --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-054.md @@ -0,0 +1,150 @@ +--- +id: 60ffe9cb47809106eda2f2c9 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Lastly, for the submit button, you want to separate it from the `fieldset` above, and adjust its width to never be below `300px`. + +Change the `margin` property to include `1em` on the top and bottom, and set the width as described above. + +# --hints-- + +You should not change the `width` property. Use the `min-width` property. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.width, '60%'); +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.minWidth); +``` + +You should use the existing `margin` property to include `1em` on the top and bottom. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.margin, '1em auto'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; + min-height: 2em; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +--fcc-editable-region-- +input[type="submit"] { + display: block; + width: 60%; + margin: 0 auto; + height: 2em; + font-size: 1.1em; + background-color: #3b3b4f; + border-color: white; + +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-055.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-055.md new file mode 100644 index 0000000000..524992057c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-055.md @@ -0,0 +1,151 @@ +--- +id: 60ffec2825da1007509ddd06 +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Most browsers inject their own default CSS properties and values for different elements. If you look closely, you might be able to notice the file `input` is smaller than the other text `input` elements. By default, a `padding` of `1px 2px` is given to `input` elements you can type in. + +Using another attribute selector, style the `input` with a `type` of `file` to be the same padding as the other `input` elements. + +# --hints-- + +You should use an attribute selector to style the `input` element. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('input[type="file"]')); +``` + +You should give the `input[type="file"]` a `padding` of `1px 2px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="file"]')?.padding, '1px 2px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; + min-height: 2em; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +input[type="submit"] { + display: block; + width: 60%; + margin: 1em auto; + height: 2em; + font-size: 1.1em; + background-color: #3b3b4f; + border-color: white; + min-width: 300px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-056.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-056.md new file mode 100644 index 0000000000..68830ca73d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-056.md @@ -0,0 +1,152 @@ +--- +id: 60ffecefac971607ae73c60f +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Speaking of `padding`, the submit button is sitting at the bottom of the `form` element. Add `2em` of `padding` only to the bottom of the `form`. + +# --hints-- + +You should use the `padding-bottom` property. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('form')?.paddingBottom); +``` + +You should give the `padding-bottom` a value of `2em`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.paddingBottom, '2em'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +--fcc-editable-region-- +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; + +} +--fcc-editable-region-- + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; + min-height: 2em; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +input[type="submit"] { + display: block; + width: 60%; + margin: 1em auto; + height: 2em; + font-size: 1.1em; + background-color: #3b3b4f; + border-color: white; + min-width: 300px; +} + +input[type="file"] { + padding: 1px 2px; +} + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/registration-form/step-057.md b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-057.md new file mode 100644 index 0000000000..addda59d65 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/registration-form/step-057.md @@ -0,0 +1,156 @@ +--- +id: 60ffefd6479a3d084fb77cbc +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Last, but not least, change the text color of the `terms and conditions` link to `#dfdfe2`. + +Well done! You have completed the final part of the _Registration Form_ practice project. + +# --hints-- + +You should use an `a` element selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('a')); +``` + +You should give the `a` element a `color` of `#dfdfe2`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + freeCodeCamp Registration Form Project + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; + padding-bottom: 2em; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; + min-height: 2em; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +input[type="submit"] { + display: block; + width: 60%; + margin: 1em auto; + height: 2em; + font-size: 1.1em; + background-color: #3b3b4f; + border-color: white; + min-width: 300px; +} + +input[type="file"] { + padding: 1px 2px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-001.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-001.md deleted file mode 100644 index a50816dd7c..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-001.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -id: 5d5a813321b9e3db6c106a46 -title: Part 1 -challengeType: 0 -dashedName: part-1 ---- - -# --description-- - -To keep track of the player's experience points, we've declared a variable called `xp` and assigned it the starting value of 0. - -Create another variable to keep track of health and start it at 100. - -# --hints-- - -See description above for instructions. - -```js -assert(health === 100); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-002.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-002.md deleted file mode 100644 index 0127056186..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-002.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -id: 5d5a8dd907f328a948d398ce -title: Part 2 -challengeType: 0 -dashedName: part-2 ---- - -# --description-- - -Create a variable called `gold` and set it to the value 50. - -# --hints-- - -See description above for instructions. - -```js -assert(gold === 50); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-003.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-003.md deleted file mode 100644 index 5e416ceb17..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-003.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -id: 5d5a8f1c07f328a948d398cf -title: Part 3 -challengeType: 0 -dashedName: part-3 ---- - -# --description-- - -Create a variable called `currentWeapon` and set it to 0. When a name has two words, the convention is to use so-called "lowerCamelCase". The first word is all lowercase, and then the first letter of every preceding word is uppercased. - -When a name has two words, the convention is to use so-called "lowerCamelCase". The variable name should look like this: currentWeapon. - -# --hints-- - -See description above for instructions. - -```js -assert(currentWeapon === 0); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-004.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-004.md deleted file mode 100644 index 01e3ae0136..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-004.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 5d5a903507f328a948d398d0 -title: Part 4 -challengeType: 0 -dashedName: part-4 ---- - -# --description-- - -We've been declaring variables with the `var` keyword. However, in modern JavaScript, it's better to use `let` instead of `var` because it fixes a number of unusual behaviors with `var` that make it difficult to reason about. - -Change every `var` to `let`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /let\s+xp\s*\=\s*0\;?/.test(code) && - /let\s+health\s*\=\s*100\;?/.test(code) && - /let\s+gold\s*\=\s*50\;?/.test(code) && - /let\s+currentWeapon\s*\=\s*0\;?/.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-005.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-005.md deleted file mode 100644 index 952c282390..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-005.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -id: 5d5aaa5807f328a948d398d1 -title: Part 5 -challengeType: 0 -dashedName: part-5 ---- - -# --description-- - -Now you will declare a variable without initializing it. - -Using the `let` keyword, declare a variable called `fighting` but don't set it equal to anything. Just end the line with a semicolon right after the variable name. - -# --hints-- - -See description above for instructions. - -```js -assert(/let\s+fighting\s*;?/.test(code) && fighting === undefined); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-006.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-006.md deleted file mode 100644 index 1ee50c18f0..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-006.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -id: 5d5aab5d07f328a948d398d2 -title: Part 6 -challengeType: 0 -dashedName: part-6 ---- - -# --description-- - -Declare variables named `monsterHealth` and `inventory` without initializing them. - -# --hints-- - -See description above for instructions. - -```js -assert(monsterHealth === undefined && inventory === undefined); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-007.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-007.md deleted file mode 100644 index 2053d6cc09..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-007.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -id: 5d5aac9c07f328a948d398d3 -title: Part 7 -challengeType: 0 -dashedName: part-7 ---- - -# --description-- - -Now set the inventory to equal the string "stick". - -Strings must be surrounded with double quotes `"`, single quotes `'`, or backticks `` ` ``. - -# --hints-- - -See description above for instructions. - -```js -assert(inventory === 'stick'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-008.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-008.md deleted file mode 100644 index 7a4a0040ab..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-008.md +++ /dev/null @@ -1,132 +0,0 @@ ---- -id: 5d5aad2307f328a948d398d4 -title: Part 8 -challengeType: 0 -dashedName: part-8 ---- - -# --description-- - -Since the inventory can store multiple items, change the value of `inventory` to an array with the items stick, dagger, and sword. - -Here is an example of a variable sandwich that equals a three-item array: - -```js -let sandwich = ["peanut butter", "jelly", "bread"]; -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - inventory.includes('stick') && - inventory.includes('dagger') && - inventory.includes('sword') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-009.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-009.md deleted file mode 100644 index 95c7682998..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-009.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -id: 5d5aae1207f328a948d398d5 -title: Part 9 -challengeType: 0 -dashedName: part-9 ---- - -# --description-- - -For now, let's start the player with just the stick. Delete the dagger and sword items in the array. More items will be added to the array during game play. - -# --hints-- - -See description above for instructions. - -```js -assert(inventory[0] === 'stick' && inventory.length === 1); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-010.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-010.md deleted file mode 100644 index fe8783aa45..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-010.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -id: 5d5ab57f07f328a948d398d6 -title: Part 10 -challengeType: 0 -dashedName: part-10 ---- - -# --description-- - -In order to update HTML elements on the page, you need to get references to them in your JavaScript code. The code `let el = document.querySelector("#el");` gets a reference to an HTML element with an `id` of `el` and assigns it to the variable `el`. - -Get a reference to the HTML element with the `id` of `button1` and assign it to a variable with the name `button1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /let\s+button1\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#button1\s*[\'\"\`]\s*\);?/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-011.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-011.md deleted file mode 100644 index 33b03c9c92..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-011.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -id: 5d5b66ce07f328a948d398d7 -title: Part 11 -challengeType: 0 -dashedName: part-11 ---- - -# --description-- - -You can also declare variables with the `const` key word. Since `button1` is a constant that will never change, switch the `let` keyword that declares the variable to `const`. - -# --hints-- - -See description above for instructions. - -```js -assert(/const\s+button1\s*/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-012.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-012.md deleted file mode 100644 index 9f6aba13f8..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-012.md +++ /dev/null @@ -1,165 +0,0 @@ ---- -id: 5d64cf8f853b56a21cd16319 -title: Part 12 -challengeType: 0 -dashedName: part-12 ---- - -# --description-- - -Here are the ids of the other HTML elements that we want a reference to in the JavaScript code: `button2`, `button3`, `text`, `xpText`, `healthText`, `goldText`, `monsterStats`, `monsterNameText`, `monsterHealthText`. - -Just like you did with `storeButton`, create variables and set them equal to the element references. - -# --hints-- - -See description above for instructions. - -```js -assert( - /const\s+button2\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#button2\s*[\'\"\`]\s*\);?/.test( - code - ) && - /const\s+button3\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#button3\s*[\'\"\`]\s*\);?/.test( - code - ) && - /const\s+text\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#text\s*[\'\"\`]\s*\);?/.test( - code - ) && - /const\s+xpText\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#xpText\s*[\'\"\`]\s*\);?/.test( - code - ) && - /const\s+healthText\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#healthText\s*[\'\"\`]\s*\);?/.test( - code - ) && - /const\s+goldText\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#goldText\s*[\'\"\`]\s*\);?/.test( - code - ) && - /const\s+monsterStats\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#monsterStats\s*[\'\"\`]\s*\);?/.test( - code - ) && - /const\s+monsterNameText|monsterName\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#monsterName\s*[\'\"\`]\s*\);?/.test( - code - ) && - /const\s+monsterHealthText|monsterHealth\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#monsterHealth\s*[\'\"\`]\s*\);?/.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-013.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-013.md deleted file mode 100644 index fa6cc172bd..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-013.md +++ /dev/null @@ -1,148 +0,0 @@ ---- -id: 5d651ee1ee291f75bbd738ee -title: Part 13 -challengeType: 0 -dashedName: part-13 ---- - -# --description-- - -Make a comment to describe what the next few lines of code will do. Comments can be written with either two forward-slashes `//` or with a multi-line sequence `/* */`. For example, here is a single line comment that says "hello world": `// hello world`. - -Write a single line comment that says "initialize buttons". - -# --hints-- - -See description above for instructions. - -```js -assert(/\/\/\s*[iI]nitialize buttons/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-014.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-014.md deleted file mode 100644 index 5e5a71ca5c..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-014.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -id: 5d652e5a6e6bf7a6a27aa80a -title: Part 14 -challengeType: 0 -dashedName: part-14 ---- - -# --description-- - -Designate what the first button in the HTML does by setting the `onclick` property of `button1` to the function name `goStore`. You will create the `goStore` function later. For example, in `button.onclick = openProgram;`, the `onclick` property of `button` is set to `openProgram`. - -# --hints-- - -See description above for instructions. - -```js -assert(/button1\.onclick\s*\=\s*goStore\;?/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-015.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-015.md deleted file mode 100644 index ef4c717e72..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-015.md +++ /dev/null @@ -1,155 +0,0 @@ ---- -id: 5d653b2d6e6bf7a6a27aa80b -title: Part 15 -challengeType: 0 -dashedName: part-15 ---- - -# --description-- - -Now set the `onclick` property of `button2` and `button3`. The second button should be set to `goCave` and the third button should be set to `fightDragon`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /button2\.onclick\s*\=\s*goCave\;?/.test(code) && - /button3\.onclick\s*\=\s*fightDragon\;?/.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-016.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-016.md deleted file mode 100644 index a3b657d461..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-016.md +++ /dev/null @@ -1,162 +0,0 @@ ---- -id: 5d653c4d6e6bf7a6a27aa80c -title: Part 16 -challengeType: 0 -dashedName: part-16 ---- - -# --description-- - -Create the `goStore` function to hold the code that runs whenever the player goes to the store. Here is an example of an empty function called `functionName` (Note the opening curly brace at the end of the first line and the closing curly brace on the second line): - -```js -function functionName() { -} -``` - -# --hints-- - -See description above for instructions. - -```js -assert(typeof goStore === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-017.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-017.md deleted file mode 100644 index d5b5e39ed6..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-017.md +++ /dev/null @@ -1,171 +0,0 @@ ---- -id: 5d6542826e6bf7a6a27aa80d -title: Part 17 -challengeType: 0 -dashedName: part-17 ---- - -# --description-- - -For now, make the `goStore` function output the message "Going to store." to the web console. For example, here is a function that outputs the message "Hello World" to the web console (Note that code inside a function should be indented): - -```js -function functionName() { - console.log("Hello World"); -} -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - goStore - .toString() - .match(/console\.log\(\s*[\"\'\`]Going to store\.?[\"\'\`]\s*\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-018.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-018.md deleted file mode 100644 index a889d272bc..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-018.md +++ /dev/null @@ -1,170 +0,0 @@ ---- -id: 5d65f2c62012114c7d7c57eb -title: Part 18 -challengeType: 0 -dashedName: part-18 ---- - -# --description-- - -Similar to the `goStore` function, create a `goCave` function that prints "Going to cave." to the console. - -# --hints-- - -See description above for instructions. - -```js -assert( - goCave - .toString() - .match(/console\.log\(\s*[\"\'\`]Going to cave\.?[\"\'\`]\s*\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-019.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-019.md deleted file mode 100644 index 57ab5c69cb..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-019.md +++ /dev/null @@ -1,180 +0,0 @@ ---- -id: 5d65f4cd2012114c7d7c57ec -title: Part 19 -challengeType: 0 -dashedName: part-19 ---- - -# --description-- - -Also, create a `fightDragon` function that prints "Fighting dragon." to the console. - -When you are finished, you can test out your program in the browser. - -# --hints-- - -See description above for instructions. - -```js -assert( - fightDragon - .toString() - .match(/console\.log\(\s*[\"\'\`]Fighting dragon\.?[\"\'\`]\s*\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-020.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-020.md deleted file mode 100644 index ad137d4786..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-020.md +++ /dev/null @@ -1,185 +0,0 @@ ---- -id: 5d65f6392012114c7d7c57ed -title: Part 20 -challengeType: 0 -dashedName: part-20 ---- - -# --description-- - -When a player clicks the 'Go to store' button, the buttons and text in the game should change. Remove the code inside the `goStore` function. Add a new line of code inside the function that updates the text of `button1` so that it says "Buy 10 health (10 gold)". - -For example, this code updates the text of `button` to say "Click Me": `button.innerText = "Click Me";`. - -# --hints-- - -See description above for instructions. - -```js -assert( - (() => { - goStore(); - return button1.innerText === 'Buy 10 health (10 gold)'; - })() -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-021.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-021.md deleted file mode 100644 index a2672d2934..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-021.md +++ /dev/null @@ -1,189 +0,0 @@ ---- -id: 5d6606634bab337fbb433884 -title: Part 21 -challengeType: 0 -dashedName: part-21 ---- - -# --description-- - -After the line that updates `button1`, update the text of `button2` to say "Buy weapon (30 gold)" and update the text of `button3` to say "Go to town square". - -# --hints-- - -See description above for instructions. - -```js -assert( - (() => { - goStore(); - return ( - button1.innerText === 'Buy 10 health (10 gold)' && - button2.innerText === 'Buy weapon (30 gold)' && - button3.innerText === 'Go to town square' - ); - })() -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-022.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-022.md deleted file mode 100644 index 6fd39fc853..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-022.md +++ /dev/null @@ -1,189 +0,0 @@ ---- -id: 5d66093c4bab337fbb433885 -title: Part 22 -challengeType: 0 -dashedName: part-22 ---- - -# --description-- - -Now that the text on the buttons have changed, the `onclick` properties on the buttons should change. Inside the goStore function, update the `onclick` property of all three buttons. The new functions should be `buyHealth`, `buyWeapon`, and `goTown`. If you have trouble, look at how the buttons were initialized. - -# --hints-- - -See description above for instructions. - -```js -assert( - goStore.toString().match(/button1\.onclick\s*\=\s*buyHealth\;?/) && - goStore.toString().match(/button2\.onclick\s*\=\s*buyWeapon\;?/) && - goStore.toString().match(/button3\.onclick\s*\=\s*goTown\;?/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-023.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-023.md deleted file mode 100644 index 4a6293348b..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-023.md +++ /dev/null @@ -1,193 +0,0 @@ ---- -id: 5d660a32e0696bdec46938d5 -title: Part 23 -challengeType: 0 -dashedName: part-23 ---- - -# --description-- - -Right after the `onclick` properties are updated, change the `innerText` property of `text` to "You enter the store." - -# --hints-- - -See description above for instructions. - -```js -assert( - goStore - .toString() - .match(/text\.innerText\s*\=\s*[\'\"\`]You enter the store\.?[\'\"\`]/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-024.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-024.md deleted file mode 100644 index abdd465afc..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-024.md +++ /dev/null @@ -1,203 +0,0 @@ ---- -id: 5d6616d8e0696bdec46938d6 -title: Part 24 -challengeType: 0 -dashedName: part-24 ---- - -# --description-- - -At the end of the current code, add three new empty functions called `buyHealth`, `buyWeapon`, and `goTown`. After this step, you can test out the game by clicking the "Go to store" button. - -# --hints-- - -See description above for instructions. - -```js -assert( - typeof buyHealth === 'function' && - typeof buyWeapon === 'function' && - typeof goTown === 'function' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-025.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-025.md deleted file mode 100644 index a0a3a5a021..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-025.md +++ /dev/null @@ -1,228 +0,0 @@ ---- -id: 5d661814e0696bdec46938d7 -title: Part 25 -challengeType: 0 -dashedName: part-25 ---- - -# --description-- - -Move the `goTown` function to above the `goStore` function. Then, copy and paste the contents of the `goStore` function into the `goTown` function. - -# --hints-- - -See description above for instructions. - -```js -assert( - (() => { - goTown(); - return ( - button1.innerText === 'Buy 10 health (10 gold)' && - button2.innerText === 'Buy weapon (30 gold)' && - button3.innerText === 'Go to town square' && - text.innerText === 'You enter the store.' && - goTown.toString().match(/button1\.onclick\s*\=\s*buyHealth\;?/) && - goTown.toString().match(/button2\.onclick\s*\=\s*buyWeapon\;?/) && - goTown.toString().match(/button3\.onclick\s*\=\s*goTown\;?/) - ); - })() -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-026.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-026.md deleted file mode 100644 index ee955fc993..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-026.md +++ /dev/null @@ -1,230 +0,0 @@ ---- -id: 5d66198de0696bdec46938d8 -title: Part 26 -challengeType: 0 -dashedName: part-26 ---- - -# --description-- - -Add double quote marks around the word "Store" in the line "You see a sign that says Store." Before each quotation mark add a `\` to signal that the following quote is not the end of the string, but should instead appear inside the string. This is called escaping. - -# --hints-- - -See description above for instructions. - -```js -assert( - (() => { - goTown(); - return ( - text.innerText === - 'You are in the town square. You see a sign that says "Store".' - ); - })() -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-027.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-027.md deleted file mode 100644 index adfd7d0a56..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-027.md +++ /dev/null @@ -1,235 +0,0 @@ ---- -id: 5d661bc6e0696bdec46938d9 -title: Part 27 -challengeType: 0 -dashedName: part-27 ---- - -# --description-- - -There is repetition in the `goTown` and `goStore` functions. When you have repetition in code, it is a sign that you need a new function. - -Above the `goTown` function, create an empty function called `update`. This time the function should take a parameter named `location` so data can be passed into the function when it is called. - -Here is an example of a function named `testFun` that accepts a parameter named `param`: - -```js -function testFun(param) { - console.log(param); -} -``` - -# --hints-- - -See description above for instructions. - -```js -assert(update.toString().match(/function update\(\s*location\)\s*\{\s*\}/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-028.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-028.md deleted file mode 100644 index ba513bd6d1..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-028.md +++ /dev/null @@ -1,230 +0,0 @@ ---- -id: 5d6653d5e0696bdec46938da -title: Part 28 -challengeType: 0 -dashedName: part-28 ---- - -# --description-- - -Below the list of `const` variables, create a new `const` variable called `locations`. Set it to equal an empty array. This will be used to store all the data for the locations in the game. - -# --hints-- - -See description above for instructions. - -```js -assert(Array.isArray(locations) && locations.length === 0); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-029.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-029.md deleted file mode 100644 index 6944af320f..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-029.md +++ /dev/null @@ -1,236 +0,0 @@ ---- -id: 5d665983e0696bdec46938dc -title: Part 29 -challengeType: 0 -dashedName: part-29 ---- - -# --description-- - -Arrays can store any data type, including objects. Objects are similar to arrays, except that instead of using indexes to access and modify their data, you access the data in objects through what are called properties. - -Inside the `locations` array add an empty object using curly braces. - -Here is an example of an array named `arr` with an empty object inside: `const arr = [{}];` - -# --hints-- - -See description above for instructions. - -```js -assert.deepStrictEqual(JSON.stringify(locations), `[{}]`); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-030.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-030.md deleted file mode 100644 index f9c6d55fd8..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-030.md +++ /dev/null @@ -1,246 +0,0 @@ ---- -id: 5d674fd9e0696bdec46938dd -title: Part 30 -challengeType: 0 -dashedName: part-30 ---- - -# --description-- - -Inside the object you just added, create a property called `name` with the value of "town square". - -For example, here is an example of an array with an object inside that has a property called `name` with a value of "Quincy Larson" (new lines are used only for the purpose of making the code more readable): - -```js -const arr = [ - { - name: "Quincy Larson" - } -] -``` - -# --hints-- - -See description above for instructions. - -```js -assert(locations[0].name === 'town square'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-031.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-031.md deleted file mode 100644 index ac1796c49b..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-031.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -id: 5d6752e3e0696bdec46938de -title: Part 31 -challengeType: 0 -dashedName: part-31 ---- - -# --description-- - -After the `name` property put a comma. On the next line add a property named `"button text"` that has a value of an empty array. Since the property name has more than one word, there must be quotes around it. - -Here is an example: - -```js -const arr = [ - { - name: "Quincy Larson", - "favorite colors": [] - } -] -``` - -# --hints-- - -See description above for instructions. - -```js -assert.deepStrictEqual(locations[0]['button text'], []); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-032.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-032.md deleted file mode 100644 index d358864c5f..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-032.md +++ /dev/null @@ -1,248 +0,0 @@ ---- -id: 5d6755fce0696bdec46938df -title: Part 32 -challengeType: 0 -dashedName: part-32 ---- - -# --description-- - -Inside the `"button text"` array, add three string elements. Use the three stings assigned to the buttons inside the `goTown` function. - -Here is an example array with three strings: `const arr = ["one", "two", "three"];`. - -# --hints-- - -See description above for instructions. - -```js -assert.deepStrictEqual(locations[0]['button text'], [ - 'Go to store', - 'Go to cave', - 'Fight dragon' -]); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-033.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-033.md deleted file mode 100644 index 7604f0b7a9..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-033.md +++ /dev/null @@ -1,247 +0,0 @@ ---- -id: 5d675726e0696bdec46938e0 -title: Part 33 -challengeType: 0 -dashedName: part-33 ---- - -# --description-- - -Add another property in the object with the name `"button functions"`. The value should be an array containing the three `onclick` functions from the `goTown` function. It should look like this: `[goStore, goCave, fightDragon]` - -# --hints-- - -See description above for instructions. - -```js -assert.deepStrictEqual(locations[0]['button functions'], [ - goStore, - goCave, - fightDragon -]); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-034.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-034.md deleted file mode 100644 index 53e94ec05c..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-034.md +++ /dev/null @@ -1,248 +0,0 @@ ---- -id: 5d678366e0696bdec46938e1 -title: Part 34 -challengeType: 0 -dashedName: part-34 ---- - -# --description-- - -Add one final property to the object named `text`. The value should be the final text from the `goTown` function. - -# --hints-- - -See description above for instructions. - -```js -assert( - locations[0].text === - 'You are in the town square. You see a sign that says "Store."' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-035.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-035.md deleted file mode 100644 index 6e9549b0e8..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-035.md +++ /dev/null @@ -1,261 +0,0 @@ ---- -id: 5d67845ee0696bdec46938e2 -title: Part 35 -challengeType: 0 -dashedName: part-35 ---- - -# --description-- - -The `locations` array currently has one element which is an object. Within the array, and after the object's final curly brace, add a comma. On the next line within the array, add another object with all the same properties as the first object. Keep the property names the same on the second object, but change all the property values to the information from the `goStore` function. Also, set the `name` property to `store`. - -# --hints-- - -See description above for instructions. - -```js -assert.deepStrictEqual(locations[1], { - 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.' -}); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-036.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-036.md deleted file mode 100644 index 76823a417f..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-036.md +++ /dev/null @@ -1,267 +0,0 @@ ---- -id: 5d67880ee0696bdec46938e3 -title: Part 36 -challengeType: 0 -dashedName: part-36 ---- - -# --description-- - -Now we are can consolidate the code inside the `goTown` and `goStore` functions. Copy the code inside the `goTown` function and paste it in the `update` function. Then delete all the code inside the `goTown` and `goStore` functions. - -# --hints-- - -See description above for instructions. - -```js -assert( - (() => { - update(); - return ( - goTown.toString() === 'function goTown() {}' && - goStore.toString() === 'function goStore() {}' && - button1.innerText === 'Go to store' && - button2.innerText === 'Go to cave' && - button3.innerText === 'Fight dragon' && - text.innerText === - 'You are in the town square. You see a sign that says "Store".' && - update.toString().match(/button1\.onclick\s*\=\s*goStore\;?/) && - update.toString().match(/button2\.onclick\s*\=\s*goCave\;?/) && - update.toString().match(/button3\.onclick\s*\=\s*fightDragon\;?/) - ); - })() -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-037.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-037.md deleted file mode 100644 index 996d05d8b2..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-037.md +++ /dev/null @@ -1,247 +0,0 @@ ---- -id: 5d67ad3de0696bdec46938e4 -title: Part 37 -challengeType: 0 -dashedName: part-37 ---- - -# --description-- - -Instead of assigning the `innerText` and `onClick` properties to specific strings and functions like it does now, the `update` function will use data from the `location` that is passed into it. First, data needs to be passed into the `update` function. Inside the `goTown` function, call the `update` function. - -Here is how you would call a function named `exampleFunction`: `exampleFunction();` - -# --hints-- - -See description above for instructions. - -```js -assert(goTown.toString().match(/update\(\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-038.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-038.md deleted file mode 100644 index 8b8100d9c3..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-038.md +++ /dev/null @@ -1,248 +0,0 @@ ---- -id: 5d67ae95e0696bdec46938e5 -title: Part 38 -challengeType: 0 -dashedName: part-38 ---- - -# --description-- - -Now change the code you just wrote to call the `update` function so the `locations` array is passed in as an argument. - -Here is how you would call a function named `exampleFunction` with an argument called `arg`: `exampleFunction(arg);` - -# --hints-- - -See description above for instructions. - -```js -assert(goTown.toString().match(/update\(locations\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-039.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-039.md deleted file mode 100644 index 63f30c6b59..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-039.md +++ /dev/null @@ -1,246 +0,0 @@ ---- -id: 5d67b284e0696bdec46938e6 -title: Part 39 -challengeType: 0 -dashedName: part-39 ---- - -# --description-- - -The `locations` array contains two locations: the town square and store. Currently the entire array with both locations is being passed in to the update function. Pass in only the first element of the locations array by adding `[0]` at the end of the name of the array. For example, `exampleFunction(arg[0]);` - -# --hints-- - -See description above for instructions. - -```js -assert(goTown.toString().match(/update\(locations\[0\]\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-040.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-040.md deleted file mode 100644 index c8e8a9857d..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-040.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -id: 5d67b945e0696bdec46938e7 -title: Part 40 -challengeType: 0 -dashedName: part-40 ---- - -# --description-- - -Now that the `goTown` function calls the `update` function with the first element of the `locations` array, it is time to use that location information to update the `innerText` and `onclick` properties. - -Inside the `update` function, change `button1.innerText` to equal `location["button text"]`. That line gets the `"button text"` property of the `location` that was passed into the `update` function\`. - -# --hints-- - -See description above for instructions. - -```js -assert( - update - .toString() - .match(/button1\.innerText\s*\=\s*location\[[\'\"\`]button text[\'\"\`]\]/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-041.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-041.md deleted file mode 100644 index bba6e8fafc..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-041.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -id: 5d68c3b1e0696bdec46938e8 -title: Part 41 -challengeType: 0 -dashedName: part-41 ---- - -# --description-- - -`location["button text"]` is an array with three elements. Use only the first element of the array by adding `[0]` at the end. - -# --hints-- - -See description above for instructions. - -```js -assert( - update - .toString() - .match( - /button1\.innerText\s*\=\s*location\[[\'\"\`]button text[\'\"\`]\]\[0\]/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-042.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-042.md deleted file mode 100644 index 5c6517b2b6..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-042.md +++ /dev/null @@ -1,257 +0,0 @@ ---- -id: 5d68c51ee0696bdec46938e9 -title: Part 42 -challengeType: 0 -dashedName: part-42 ---- - -# --description-- - -Now update the `innerText` of the other two buttons. They should be set to equal the same thing as the first button, except the number inside the brackets should be 1 for the second button and 2 for the third button. - -# --hints-- - -See description above for instructions. - -```js -assert( - update - .toString() - .match( - /button2\.innerText\s*\=\s*location\[[\'\"\`]button text[\'\"\`]\]\[1\]/ - ) && - update - .toString() - .match( - /button3\.innerText\s*\=\s*location\[[\'\"\`]button text[\'\"\`]\]\[2\]/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-043.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-043.md deleted file mode 100644 index 009d874188..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-043.md +++ /dev/null @@ -1,262 +0,0 @@ ---- -id: 5d68c5efe0696bdec46938ea -title: Part 43 -challengeType: 0 -dashedName: part-43 ---- - -# --description-- - -Now update the three `onclick` properties. These will look very similar to the `innerText` properties, except instead of using the `"button text"` part of the `location`, use `"button functions"`. - -# --hints-- - -See description above for instructions. - -```js -assert( - update - .toString() - .match( - /button1\.onclick\s*\=\s*location\[[\'\"\`]button functions[\'\"\`]\]\[0\]/ - ) && - update - .toString() - .match( - /button2\.onclick\s*\=\s*location\[[\'\"\`]button functions[\'\"\`]\]\[1\]/ - ) && - update - .toString() - .match( - /button3\.onclick\s*\=\s*location\[[\'\"\`]button functions[\'\"\`]\]\[2\]/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-044.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-044.md deleted file mode 100644 index 491a31d4c1..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-044.md +++ /dev/null @@ -1,248 +0,0 @@ ---- -id: 5d68c758e0696bdec46938eb -title: Part 44 -challengeType: 0 -dashedName: part-44 ---- - -# --description-- - -Finally, update `text.innerText` to equal the `text` from the location object. - -So far we have been accessing properties of the location object using bracket notation. This time use dot notation. Here is how to access a `name` property of an object called `obj` using dot notation: `obj.name`. - -# --hints-- - -See description above for instructions. - -```js -assert(update.toString().match(/text\.innerText\s*\=\s*location\.text\;?/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-045.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-045.md deleted file mode 100644 index cfcc6110ac..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-045.md +++ /dev/null @@ -1,247 +0,0 @@ ---- -id: 5d68c947e0696bdec46938ec -title: Part 45 -challengeType: 0 -dashedName: part-45 ---- - -# --description-- - -Now update the `goStore` function. The code should look just like the code inside the `goTown` function, except the number 0 should be changed to 1. After this step would be a good time to try out the game so far. You should be able to move between the store and the town square. - -# --hints-- - -See description above for instructions. - -```js -assert(goStore.toString().match(/update\(locations\[1\]\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-046.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-046.md deleted file mode 100644 index 8880e9dbae..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-046.md +++ /dev/null @@ -1,266 +0,0 @@ ---- -id: 5d68ca40e0696bdec46938ed -title: Part 46 -challengeType: 0 -dashedName: part-46 ---- - -# --description-- - -Add a third object in the `locations` array with the same properties as the other two objects. - -Set `name` to "cave". Set the elements in the `"button text"` array to \["Fight slime", "Fight fanged beast", and "Go to town square". Set te elements in the `"button functions"` array to be "fightSlime", "fightBeast", and "goTown". Set the value of the `text` property to "You enter the cave. You see some monsters.". - -# --hints-- - -See description above for instructions. - -```js -assert.deepStrictEqual(locations[2], { - 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.' -}); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
- -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-047.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-047.md deleted file mode 100644 index f80a1a077e..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-047.md +++ /dev/null @@ -1,265 +0,0 @@ ---- -id: 5d68d3f7e0696bdec46938ee -title: Part 47 -challengeType: 0 -dashedName: part-47 ---- - -# --description-- - -Now update the `goCave` function using the pattern from `goTown` and `goCave`. - -# --hints-- - -See description above for instructions. - -```js -assert(goCave.toString().match(/update\(locations\[2\]\)\;?/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
- -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-048.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-048.md deleted file mode 100644 index fe48b13995..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-048.md +++ /dev/null @@ -1,266 +0,0 @@ ---- -id: 5d68d4fde0696bdec46938ef -title: Part 48 -challengeType: 0 -dashedName: part-48 ---- - -# --description-- - -Create two more empty functions: `fightSlime` and `fightBeast`. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof fightSlime === 'function' && typeof fightBeast === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-049.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-049.md deleted file mode 100644 index ff7dfebe58..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-049.md +++ /dev/null @@ -1,275 +0,0 @@ ---- -id: 5d68d631e0696bdec46938f0 -title: Part 49 -challengeType: 0 -dashedName: part-49 ---- - -# --description-- - -Now that the store and cave locations are complete, we'll code the actions at those locations. Inside the `buyHealth` function, set `gold` to equal `gold` minus 10. - -For example here is how you would set set `num` to equal 5 less than `num`: `num = num - 5;`. - -# --hints-- - -See description above for instructions. - -```js -buyHealth(), assert(gold === 40); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-050.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-050.md deleted file mode 100644 index d933dc407a..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-050.md +++ /dev/null @@ -1,275 +0,0 @@ ---- -id: 5d68dbf7e0696bdec46938f1 -title: Part 50 -challengeType: 0 -dashedName: part-50 ---- - -# --description-- - -After gold is subtracted, add ten to health. - -# --hints-- - -See description above for instructions. - -```js -buyHealth(), assert(gold === 40 && health === 110); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-051.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-051.md deleted file mode 100644 index 5fcb7a9139..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-051.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: 5d6904b6e0696bdec46938f2 -title: Part 51 -challengeType: 0 -dashedName: part-51 ---- - -# --description-- - -There is a shorthand way to add or subtract from a variable called compound assignment. The long way to add to a variable is `num = num + 5`. The shorthand way is `num += 5`. It works the same way with subtraction. - -Update both lines inside the `buyHealth` function to use compound assignment. - -# --hints-- - -See description above for instructions. - -```js -assert( - buyHealth.toString().match(/gold\s*\-\=\s*10\;?/) && - buyHealth.toString().match(/health\s*\+\=\s*10\;?/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-052.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-052.md deleted file mode 100644 index ea3cf82bfa..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-052.md +++ /dev/null @@ -1,281 +0,0 @@ ---- -id: 5d6905ace0696bdec46938f3 -title: Part 52 -challengeType: 0 -dashedName: part-52 ---- - -# --description-- - -Now that the gold and health variables have been updated, we need to update the values displayed on the screen. Inside the `buyHealth` function, add the line `goldText.innerText = gold;`. Then use the same pattern to update `healthText`. - -# --hints-- - -See description above for instructions. - -```js -assert( - buyHealth.toString().match(/goldText\.innerText\s*\=\s*gold\;?/) && - buyHealth.toString().match(/healthText.innerText\s*\=\s*health\;?/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-053.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-053.md deleted file mode 100644 index b9488436a8..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-053.md +++ /dev/null @@ -1,302 +0,0 @@ ---- -id: 5d6f6bfc7c812010bf3327cc -title: Part 53 -challengeType: 0 -dashedName: part-53 ---- - -# --description-- - -What if the player doesn't have enough gold to buy health? Put all the code in the `buyHealth` function inside an `if` statement. Here is an example of an `if` statement inside a function: - -```js -function checkMoney() { - if (condition) { - console.log("You have money!"); - } -} -``` - -Note: For now you should use the word "condition" inside the `if` statement but we'll be changing that next. - -# --hints-- - -See description above for instructions. - -```js -assert( - buyHealth - .toString() - .match( - /if\s*\(\s*condition\s*\)\s*\{\s*(gold|health|goldText|healthText)/ - ) && - buyHealth.toString().match(/gold\s*\-\=\s*10\;?/) && - buyHealth.toString().match(/health\s*\+\=\s*10\;?/) && - buyHealth.toString().match(/goldText\.innerText\s*\=\s*gold\;?/) && - buyHealth.toString().match(/healthText\.innerText\s*\=\s*health\;?/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-054.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-054.md deleted file mode 100644 index e28f8fba0a..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-054.md +++ /dev/null @@ -1,292 +0,0 @@ ---- -id: 5d6f6e3c7c812010bf3327cd -title: Part 54 -challengeType: 0 -dashedName: part-54 ---- - -# --description-- - -The word "condition" inside the if statement is just a placeholder. Change the condition to check if the amount of gold the player has 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) { - console.log("Num is greater than or equal to five!"); -} -``` - -# --hints-- - -See description above for instructions. - -```js -assert(buyHealth.toString().match(/if\s*\(\s*gold\s*\>\=\s*10\s*\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-055.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-055.md deleted file mode 100644 index 1961a7c3bd..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-055.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 5d6f6f747c812010bf3327ce -title: Part 55 -challengeType: 0 -dashedName: part-55 ---- - -# --description-- - -Now when a player tries to buy health it will only work if they have enough money. If the player does not have enough money, nothing will happen. Add an `else` statement where you can put code to run if a player dees not have enough money. - -Here is an example of an empty `else` statement: - -```js -if (num >= 5) { - console.log("Num is greater than or equal to five!"); -} else { -} -``` - -# --hints-- - -See description above for instructions. - -```js -assert(buyHealth.toString().match(/\}\s*else\s*\{\s*\}/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-056.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-056.md deleted file mode 100644 index 92734d76b2..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-056.md +++ /dev/null @@ -1,290 +0,0 @@ ---- -id: 5d6f70937c812010bf3327cf -title: Part 56 -challengeType: 0 -dashedName: part-56 ---- - -# --description-- - -Inside the `else` statement, set `text.innerText` to equal "You do not have enough gold to buy health." - -# --hints-- - -See description above for instructions. - -```js -(gold = 5), - buyHealth(), - assert(text.innerText === 'You do not have enough gold to buy health.'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-057.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-057.md deleted file mode 100644 index c125391b4d..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-057.md +++ /dev/null @@ -1,290 +0,0 @@ ---- -id: 5d6f72657c812010bf3327d0 -title: Part 57 -challengeType: 0 -dashedName: part-57 ---- - -# --description-- - -Before we write the code for the `buyWeapon` function, use `const` to create a `weapons` variable right above the `locations` array. Set it to equal an empty array. - -# --hints-- - -See description above for instructions. - -```js -assert.deepStrictEqual(weapons, []); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-058.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-058.md deleted file mode 100644 index d48d9e790d..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-058.md +++ /dev/null @@ -1,314 +0,0 @@ ---- -id: 5d6f736b7c812010bf3327d2 -title: Part 58 -challengeType: 0 -dashedName: part-58 ---- - -# --description-- - -Just like in the `locations` array, all the elements in `weapons` will be objects. Add four objects to the `weapons` array, each with two properties: `name` and `power`. The first should be the `name` "stick" with `power` set to 5. Then, "dagger" with set `power` to 30. Next, "claw hammer" with a `power` of 50. Finally, "sword" with a `power` of 100. - -# --hints-- - -See description above for instructions. - -```js -assert.deepStrictEqual(weapons, [ - { name: 'stick', power: 5 }, - { name: 'dagger', power: 30 }, - { name: 'claw hammer', power: 50 }, - { name: 'sword', power: 100 } -]); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-059.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-059.md deleted file mode 100644 index f24a62ffa5..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-059.md +++ /dev/null @@ -1,329 +0,0 @@ ---- -id: 5d6f776c7c812010bf3327d3 -title: Part 59 -challengeType: 0 -dashedName: part-59 ---- - -# --description-- - -Inside the `buyWeapon` function, add an `if` statement to check if gold is greater than or equal to 30. - -# --hints-- - -See description above for instructions. - -```js -assert(buyWeapon.toString().match(/if\s*\(\s*gold\s*\>\=\s*30\)\s*\{\s*\}/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-060.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-060.md deleted file mode 100644 index a868276b9a..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-060.md +++ /dev/null @@ -1,332 +0,0 @@ ---- -id: 5d6f785f7c812010bf3327d4 -title: Part 60 -challengeType: 0 -dashedName: part-60 ---- - -# --description-- - -Similar to in the `buyHealth` function, set `gold` to equal 30 less than its current value. - -# --hints-- - -See description above for instructions. - -```js -(gold = 50), buyWeapon(), assert(gold === 20); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-061.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-061.md deleted file mode 100644 index 5cee23ff5b..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-061.md +++ /dev/null @@ -1,333 +0,0 @@ ---- -id: 5d6f79667c812010bf3327d6 -title: Part 61 -challengeType: 0 -dashedName: part-61 ---- - -# --description-- - -The value of `currentWeapon` 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` since the user is buying the next weapon in the `weapons` array. - -# --hints-- - -See description above for instructions. - -```js -(currentWeapon = 0), buyWeapon(), assert(currentWeapon === 1); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-062.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-062.md deleted file mode 100644 index ee5a51bf97..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-062.md +++ /dev/null @@ -1,342 +0,0 @@ ---- -id: 5d6f7b917c812010bf3327d7 -title: Part 62 -challengeType: 0 -dashedName: part-62 ---- - -# --description-- - -You can easily increment or add one to a variable with the `++` operator. All three of these statements add one to a number: - -```js -num = num + 1; -num += 1; -num++; -``` - -Change the line `currentWeapon += 1;` to use the `++` operator. - -# --hints-- - -See description above for instructions. - -```js -assert(buyWeapon.toString().match(/currentWeapon\s*\+\+\;?/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-063.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-063.md deleted file mode 100644 index 26bf3f78dc..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-063.md +++ /dev/null @@ -1,340 +0,0 @@ ---- -id: 5d6f82da7c812010bf3327d8 -title: Part 63 -challengeType: 0 -dashedName: part-63 ---- - -# --description-- - -Now update the `innerText` property of `goldText` and `text`. `text` should equal "You now have a new weapon.". - -# --hints-- - -See description above for instructions. - -```js -buyWeapon(), - assert( - goldText.innerText === '20' && - text.innerText === 'You now have a new weapon.' - ); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-064.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-064.md deleted file mode 100644 index 8725a9fc6e..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-064.md +++ /dev/null @@ -1,339 +0,0 @@ ---- -id: 5d6f919f7c812010bf3327d9 -title: Part 64 -challengeType: 0 -dashedName: part-64 ---- - -# --description-- - -Let's 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 `newWeapon` to equal `weapons`. - -# --hints-- - -See description above for instructions. - -```js -assert(/let\s*newWeapon\s*\=\s*weapons\;?/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-065.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-065.md deleted file mode 100644 index 32764ac06a..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-065.md +++ /dev/null @@ -1,340 +0,0 @@ ---- -id: 5d6f94347c812010bf3327da -title: Part 65 -challengeType: 0 -dashedName: part-65 ---- - -# --description-- - -Right after the word `weapons` (with no space between), add brackets `[]`. In between the brackets put `currentWeapon`, which is the index number of the weapon the player just bought. - -# --hints-- - -See description above for instructions. - -```js -assert(/let\s*newWeapon\s*\=\s*weapons\s?\[currentWeapon\]\;?/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-066.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-066.md deleted file mode 100644 index 597e6d7aad..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-066.md +++ /dev/null @@ -1,342 +0,0 @@ ---- -id: 5d6f96747c812010bf3327db -title: Part 66 -challengeType: 0 -dashedName: part-66 ---- - -# --description-- - -Get just the name property of the current weapon by adding `.name` at the end of `weapons[currentWeapon]` (don't use a space). - -# --hints-- - -See description above for instructions. - -```js -assert( - /let\s*newWeapon\s*\=\s*weapons\s?\[currentWeapon\]\.name\;?/.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-067.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-067.md deleted file mode 100644 index 5fd5f2e6f3..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-067.md +++ /dev/null @@ -1,351 +0,0 @@ ---- -id: 5d6f98247c812010bf3327dc -title: Part 67 -challengeType: 0 -dashedName: part-67 ---- - -# --description-- - -You can insert variables into a string with the concatenation (`+`) operator. Update the "You now have a new weapon." string so it says "You now have a " and then lists the name of the new weapon. Make sure to add a period at the end of the sentence. - -Here is an example that creates the string "Hello, our name is freeCodeCamp.": - -```js -let ourName = "freeCodeCamp"; -let ourStr = "Hello, our name is " + ourName + "."; -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - buyWeapon - .toString() - .match(/[\'\"\`]You now have a [\'\"\`]\s*\+\s*newWeapon\;?/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-068.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-068.md deleted file mode 100644 index 9bd5e014cd..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-068.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 5d6f9a4c7c812010bf3327dd -title: Part 68 -challengeType: 0 -dashedName: part-68 ---- - -# --description-- - -Way back at the beginning you created the `inventory` array. Push the `newWeapon` onto the end of the `inventory` array. Here is an example of pushing onto an array: - -```js -let arr = ["first"]; -let next = "second"; -arr.push(next); -// arr now equals ["first", "second"] -``` - -# --hints-- - -See description above for instructions. - -```js -buyWeapon(), assert.deepStrictEqual(inventory, ['stick', 'dagger']); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-069.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-069.md deleted file mode 100644 index ed7ac6e071..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-069.md +++ /dev/null @@ -1,349 +0,0 @@ ---- -id: 5d70850e066dac7142a6d797 -title: Part 69 -challengeType: 0 -dashedName: part-69 ---- - -# --description-- - -Up to this point, anytime `text.innerText` was updated, the old text was erased. This time, use the `+=` operator instead of 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 end). - -# --hints-- - -See description above for instructions. - -```js -assert( - buyWeapon - .toString() - .match( - /text\.innerText\s*\+\=\s*[\'\"\`] In your inventory you have\: [\'\"\`]\;?/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-070.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-070.md deleted file mode 100644 index 0e64dbaded..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-070.md +++ /dev/null @@ -1,350 +0,0 @@ ---- -id: 5d70862e066dac7142a6d798 -title: Part 70 -challengeType: 0 -dashedName: part-70 ---- - -# --description-- - -At the end of the string you just added after the ending quote mark, add `+ inventory` to add the contents of the inventory to the end of the string. - -# --hints-- - -See description above for instructions. - -```js -assert( - buyWeapon - .toString() - .match( - /text\.innerText\s*\+\=\s*[\'\"\`] In your inventory you have\: [\'\"\`]\s*\+\s*inventory\;?/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-071.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-071.md deleted file mode 100644 index b2dfd7e4c2..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-071.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 5d7086d4066dac7142a6d799 -title: Part 71 -challengeType: 0 -dashedName: part-71 ---- - -# --description-- - -At the end of the `if` statement inside the `buyWeapon` function, add an `else` statement. Inside the `else` statement, set `text.innerText` to equal "You do not have enough gold to buy a weapon.". - -# --hints-- - -See description above for instructions. - -```js -assert( - buyWeapon - .toString() - .match( - /\}\s*else\s*\{\s*text\.innerText\s*\=\s*[\'\"\`]You do not have enough gold to buy a weapon\.?[\'\"\`]\;?\s*\}/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-072.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-072.md deleted file mode 100644 index 6da16fae4d..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-072.md +++ /dev/null @@ -1,361 +0,0 @@ ---- -id: 5d7088d2066dac7142a6d79a -title: Part 72 -challengeType: 0 -dashedName: part-72 ---- - -# --description-- - -Once a player has the best weapon, they can't buy another one. Wrap all the code in the `buyWeapon` function inside another `if` statement. The condition should check if `currentWeapon` is less than 3 (the index of the last weapon). - -# --hints-- - -See description above for instructions. - -```js -assert( - buyWeapon - .toString() - .match( - /if\s*\(\s*currentWeapon\s*\<\s*3\s*\)\s*\{\s*if\s*\(\s*gold\s*\>\=\s*30\s*\)\s*\{/ - ) && - buyWeapon - .toString() - .match( - /\}\s*else\s*\{\s*text\.innerText\s*\=\s*[\'\"\`]You do not have enough gold to buy a weapon\.?[\'\"\`]\;?\s*\}\s*\}/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-073.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-073.md deleted file mode 100644 index b2de94000c..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-073.md +++ /dev/null @@ -1,358 +0,0 @@ ---- -id: 5d708ab5066dac7142a6d79b -title: Part 73 -challengeType: 0 -dashedName: part-73 ---- - -# --description-- - -At some point in the future, you may want to add more weapons. Instead of checking if `currentWeapon` is less than three, check if `currentWeapon` is less than the length of the `weapons` array. For example, here is how you would get the length of an array called `arr`: `arr.length`. - -# --hints-- - -See description above for instructions. - -```js -assert( - buyWeapon - .toString() - .match( - /if\s*\(\s*currentWeapon\s*\<\s*weapons\.length\s*\)\s*\{\s*if\s*\(\s*gold\s*\>\=\s*30\s*\)\s*\{/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-074.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-074.md deleted file mode 100644 index ac6f24dc33..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-074.md +++ /dev/null @@ -1,358 +0,0 @@ ---- -id: 5d708be9066dac7142a6d79c -title: Part 74 -challengeType: 0 -dashedName: part-74 ---- - -# --description-- - -We have to fix an error. The `currentWeapon` variable is the array index. Array indexing starts at zero. The index of the last element in an array is one less than the length of the array. In the `if` condition you are working on, change `weapons.length` to `weapons.length - 1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - buyWeapon - .toString() - .match( - /if\s*\(\s*currentWeapon\s*\<\s*weapons\.length\s*\-\s*1\s*\)\s*\{\s*if\s*\(\s*gold\s*\>\=\s*30\s*\)\s*\{/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-075.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-075.md deleted file mode 100644 index d8745f0ce6..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-075.md +++ /dev/null @@ -1,360 +0,0 @@ ---- -id: 5d708c9a066dac7142a6d79d -title: Part 75 -challengeType: 0 -dashedName: part-75 ---- - -# --description-- - -Add an `else` statement on the end of the outer `if` statement. Inside the `else` statement, set `text.innerText` to "You already have the most powerful weapon!". - -# --hints-- - -See description above for instructions. - -```js -assert( - buyWeapon - .toString() - .match( - /\}\s*else\s*\{\s*text\.innerText\s*\=\s*[\'\"\`]You do not have enough gold to buy a weapon\.?[\'\"\`]\;?\s*\}\s*\}\s*else\s*\{\s*text\.innerText\s*\=\s*[\'\"\`]You already have the most powerful weapon\![\'\"\`]\;?\s*\}/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-076.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-076.md deleted file mode 100644 index 9c9369715d..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-076.md +++ /dev/null @@ -1,364 +0,0 @@ ---- -id: 5d708dd7066dac7142a6d79e -title: Part 76 -challengeType: 0 -dashedName: part-76 ---- - -# --description-- - -Once a player has the most powerful weapon, we'll give them the ability to sell their older weapons back. In the else statement, set `button2.innerText` to equal "Sell weapon for 15 gold". Also, set `button2.onclick` to the function name `sellWeapon`. - -# --hints-- - -See description above for instructions. - -```js -assert( - buyWeapon - .toString() - .match( - /else\s*\{\s*text\.innerText\s*\=\s*[\'\"\`]You already have the most powerful weapon\![\'\"\`]\;?\s*button2\.innerText\s*\=\s*[\'\"\`]Sell weapon for 15 gold\.?[\'\"\`]\;?\s*button2\.onclick\s*\=\s*sellWeapon\;?\s*\}/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-077.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-077.md deleted file mode 100644 index 2204991a58..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-077.md +++ /dev/null @@ -1,363 +0,0 @@ ---- -id: 5d708fae066dac7142a6d79f -title: Part 77 -challengeType: 0 -dashedName: part-77 ---- - -# --description-- - -After the `buyWeapon` function, create an empty function called `sellWeapon`. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof sellWeapon === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-078.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-078.md deleted file mode 100644 index cdb3492126..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-078.md +++ /dev/null @@ -1,373 +0,0 @@ ---- -id: 5d709664066dac7142a6d7a0 -title: Part 78 -challengeType: 0 -dashedName: part-78 ---- - -# --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 one. - -# --hints-- - -See description above for instructions. - -```js -assert( - sellWeapon - .toString() - .match(/if\s*\(\s*inventory\.length\s*\>\s*1\s*\)\s*\{\s*\}/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-079.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-079.md deleted file mode 100644 index adf7474dbd..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-079.md +++ /dev/null @@ -1,386 +0,0 @@ ---- -id: 5d709bbc066dac7142a6d7a2 -title: Part 79 -challengeType: 0 -dashedName: part-79 ---- - -# --description-- - -Inside the `if` statement, set `gold` equal to 15 more than its current value. Also, update `goldText.innerText` to the new value. - -# --hints-- - -See description above for instructions. - -```js -assert( - (() => { - gold = 50; - inventory = ['stick']; - sellWeapon(); - return gold === 50 && goldText.innerText === '50'; - })() && - (() => { - gold = 50; - inventory = ['stick', 'dagger']; - sellWeapon(); - return gold === 65 && goldText.innerText === '65'; - })() -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-080.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-080.md deleted file mode 100644 index cc10b5e0ee..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-080.md +++ /dev/null @@ -1,379 +0,0 @@ ---- -id: 5d71b58b848f6914ab89897d -title: Part 80 -challengeType: 0 -dashedName: part-80 ---- - -# --description-- - -Use the `let` keyword to create a variable named `currentWeapon`. Don't set it equal to anything yet. Notice that we already have a `currentWeapon` variable from earlier. Since the `let` keyword is used instead of `var`, this new version of `currentWeapon` is scoped only to this `if` statement. At the close of the `if` statement, the old version of `currentWeapon` will be used again. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.match( - /if\s*\(\s*inventory\.length\s*\>\s*1\s*\)\s*\{\s*(.\s*)*let\s*currentWeapon\;?/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-081.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-081.md deleted file mode 100644 index 043a6e1b1e..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-081.md +++ /dev/null @@ -1,388 +0,0 @@ ---- -id: 5d71bdca848f6914ab89897e -title: Part 81 -challengeType: 0 -dashedName: part-81 ---- - -# --description-- - -Use the `shift()` method on the `inventory` array to remove the first element and return that removed element. Set `currentWeapon` to equal returned element. - -Here is an example: - -```js -let arr = ["one", "two", "three"]; -let firstElement = arr.shift(); -// arr now equals ["two", "three"] and firstElement now equals "one" -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - code.match( - /if\s*\(\s*inventory\.length\s*\>\s*1\s*\)\s*\{\s*(.\s*)*let\s*currentWeapon\s*\=\s*inventory\.shift\(\s*\)\;?/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-082.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-082.md deleted file mode 100644 index 1c53103684..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-082.md +++ /dev/null @@ -1,380 +0,0 @@ ---- -id: 5d71bfdf848f6914ab89897f -title: Part 82 -challengeType: 0 -dashedName: part-82 ---- - -# --description-- - -After the line that creates the `currentWeapon` variable, set `text.innerText` to equal `"You sold a " + currentWeapon + "."` - -# --hints-- - -See description above for instructions. - -```js -(inventory = ['potato', 'carrot']), - sellWeapon(), - assert(text.innerText === 'You sold a potato.' && inventory[0] === 'carrot'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-083.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-083.md deleted file mode 100644 index 93d8b087fd..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-083.md +++ /dev/null @@ -1,384 +0,0 @@ ---- -id: 5d71c20f848f6914ab898980 -title: Part 83 -challengeType: 0 -dashedName: part-83 ---- - -# --description-- - -Now use the `+=` operator to add to `text.innerText`. Add the string " In your inventory you have: " (with spaces at the beginning and end). Then add the `inventory` variable to the end of the string. - -# --hints-- - -See description above for instructions. - -```js -(inventory = ['potato', 'carrot']), - sellWeapon(), - assert( - text.innerText === 'You sold a potato. In your inventory you have: carrot' - ); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-084.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-084.md deleted file mode 100644 index 3874c2eb17..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-084.md +++ /dev/null @@ -1,387 +0,0 @@ ---- -id: 5d71c80e848f6914ab898981 -title: Part 84 -challengeType: 0 -dashedName: part-84 ---- - -# --description-- - -Add code so that if the length of the inventory is NOT more than one, then a text message appears that says "Don't sell your only weapon!". - -# --hints-- - -See description above for instructions. - -```js -(inventory = ['potato']), - sellWeapon(), - assert( - inventory[0] === 'potato' && - text.innerText === "Don't sell your only weapon!" - ); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-085.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-085.md deleted file mode 100644 index 3bdde43e8f..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-085.md +++ /dev/null @@ -1,408 +0,0 @@ ---- -id: 5d71cab4f27e5122af9f1178 -title: Part 85 -challengeType: 0 -dashedName: part-85 ---- - -# --description-- - -Now we'll start working on fighting monsters. Organize your code by moving the `fightDragon` function to the bottom of the code near the other fight functions. - -Below where the `weapons` array is defined, define a `monsters` array. Set the contents of the `monsters` array to: `{ name: "slime", level: 2, health: 15 }, {name: "fanged beast", level: 8, health: 60 }, { name: "dragon", level: 20, health: 300 }`. Space out the code similar to the `weapons` array so that it is easier to read. - -# --hints-- - -See description above for instructions. - -```js -assert.deepStrictEqual(monsters, [ - { name: 'slime', level: 2, health: 15 }, - { name: 'fanged beast', level: 8, health: 60 }, - { name: 'dragon', level: 20, health: 300 } -]); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-086.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-086.md deleted file mode 100644 index eb27db0455..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-086.md +++ /dev/null @@ -1,423 +0,0 @@ ---- -id: 5d71ea30f27e5122af9f1179 -title: Part 86 -challengeType: 0 -dashedName: part-86 ---- - -# --description-- - -Fighting each type of monster will be very similar so all three fighting functions will call a function named `goFight`. At the end of the code, add an empty function named `goFight`. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof goFight === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-087.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-087.md deleted file mode 100644 index 181b645c76..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-087.md +++ /dev/null @@ -1,430 +0,0 @@ ---- -id: 5d71eb0bf27e5122af9f117a -title: Part 87 -challengeType: 0 -dashedName: part-87 ---- - -# --description-- - -Inside the `fightSlime` function, set `fighting` to equal 0 (which is the index of the slime in the `monsters` array). On the next line, call the `goFight` function. - -As a reminder, here is how you would call a function named `myFunc`: `myFunc();`. - -# --hints-- - -See description above for instructions. - -```js -assert(fightSlime.toString().match(/fighting\s*\=\s*0\;?\s*goFight\(\s*\)\;?/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-088.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-088.md deleted file mode 100644 index 052627f864..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-088.md +++ /dev/null @@ -1,436 +0,0 @@ ---- -id: 5d71f787e39bedcf8f0998ff -title: Part 88 -challengeType: 0 -dashedName: part-88 ---- - -# --description-- - -Write the code for the `fightBeast` and `fightDragon` functions, using the `fightSlime` function as an example. Make sure to delete the line that is already in the `fightDragon` function. - -# --hints-- - -See description above for instructions. - -```js -assert( - fightBeast.toString().match(/fighting\s*\=\s*1\;?\s*goFight\(\s*\)\;?/) && - fightDragon.toString().match(/fighting\s*\=\s*2\;?\s*goFight\(\s*\)\;?/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-089.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-089.md deleted file mode 100644 index 47c417e426..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-089.md +++ /dev/null @@ -1,452 +0,0 @@ ---- -id: 5d71ed88f27e5122af9f117b -title: Part 89 -challengeType: 0 -dashedName: part-89 ---- - -# --description-- - -Add a new object in the `locations` array with all the same properties as the other objects in the array. Set `name` to "fight". Set `"button text"` to `["Attack", "Dodge", "Run"]`. Set `"button functions"` to `[attack, dodge, goTown]`. And set `text` to "You are fighting a monster.". - -# --hints-- - -See description above for instructions. - -```js -assert.deepStrictEqual(locations[3], { - name: 'fight', - 'button text': ['Attack', 'Dodge', 'Run'], - 'button functions': [attack, dodge, goTown], - text: 'You are fighting a monster.' -}); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
- -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-090.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-090.md deleted file mode 100644 index d84f61206f..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-090.md +++ /dev/null @@ -1,454 +0,0 @@ ---- -id: 5d71f217e39bedcf8f0998fd -title: Part 90 -challengeType: 0 -dashedName: part-90 ---- - -# --description-- - -At the end of the code create empty functions named `attack` and `dodge`. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof attack === 'function' && typeof dodge === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-091.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-091.md deleted file mode 100644 index 3dc950693b..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-091.md +++ /dev/null @@ -1,461 +0,0 @@ ---- -id: 5d71f669e39bedcf8f0998fe -title: Part 91 -challengeType: 0 -dashedName: part-91 ---- - -# --description-- - -In the `goFight` function, call the `update` function and pass it `locations[3]`. - -# --hints-- - -See description above for instructions. - -```js -assert(goFight.toString().match(/update\(\s*locations\[\s*3\s*\]\s*\)\;?/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-092.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-092.md deleted file mode 100644 index f4a6a6eb3e..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-092.md +++ /dev/null @@ -1,476 +0,0 @@ ---- -id: 5d72027ce39bedcf8f099900 -title: Part 92 -challengeType: 0 -dashedName: part-92 ---- - -# --description-- - -Next in the `goFight` function, set `monsterHealth` to equal the health of the current monster. You can get the health of the current monster with `monsters[fighting].health`. Try to understand that line before continuing. - -# --hints-- - -See description above for instructions. - -```js -assert( - (() => { - fightSlime(); - return monsterHealth === 15; - })() && - (() => { - fightBeast(); - return monsterHealth === 60; - })() && - (() => { - fightDragon(); - return monsterHealth === 300; - })() -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-093.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-093.md deleted file mode 100644 index 84e0290e3c..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-093.md +++ /dev/null @@ -1,471 +0,0 @@ ---- -id: 5d721925e39bedcf8f099901 -title: Part 93 -challengeType: 0 -dashedName: part-93 ---- - -# --description-- - -The HTML that shows the monster stats that has been hidden using CSS. Display the `monsterStats` HTML element by updating its CSS `display` property to equal `block`. - -Here is an example of updating the `display` property of an element named `myElement`: `myElement.style.display = "block";` - -# --hints-- - -See description above for instructions. - -```js -assert( - goFight - .toString() - .match(/^\s*monsterStats\.style\.display\s*\=\s*[\'\"\`]block[\'\"\`]\;?/m) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-094.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-094.md deleted file mode 100644 index 3b804fc655..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-094.md +++ /dev/null @@ -1,483 +0,0 @@ ---- -id: 5d7dea508360d21c6826a9af -title: Part 94 -challengeType: 0 -dashedName: part-94 ---- - -# --description-- - -Now set the `innerText` property of `monsterNameText` to equal `monsters[fighting].name`. Also, set the `innerText` property of `monsterHealthText` to equal `monsterHealth`. - -# --hints-- - -See description above for instructions. - -```js -assert( - (() => { - fightBeast(); - return ( - monsterNameText.innerText === 'fanged beast' && - monsterHealthText.innerText === '60' - ); - })() && - (() => { - fightDragon(); - return ( - monsterNameText.innerText === 'dragon' && - monsterHealthText.innerText === '300' - ); - })() -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-095.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-095.md deleted file mode 100644 index 0361edec43..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-095.md +++ /dev/null @@ -1,471 +0,0 @@ ---- -id: 5d7deecc8360d21c6826a9b0 -title: Part 95 -challengeType: 0 -dashedName: part-95 ---- - -# --description-- - -We'll build out the `attack` function now. For the first line in the function, update the text message to say "The \[monster name] attacks." but replace "\[monster name]" with the actual name of the monster. Remember, you can get the monster name with `monsters[fighting].name`. - -# --hints-- - -See description above for instructions. - -```js -fightDragon(), attack(), assert(text.innerText === 'The dragon attacks.'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-096.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-096.md deleted file mode 100644 index 5b74ed5e58..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-096.md +++ /dev/null @@ -1,478 +0,0 @@ ---- -id: 5d7df0458360d21c6826a9b1 -title: Part 96 -challengeType: 0 -dashedName: part-96 ---- - -# --description-- - -Now use the `+=` operator to append more text to `text.innerText`. Add the text " You attack it with your \[weapon name]." but replace "\[weapon name]" with the actual weapon name. Remember, you can get the weapon name with `weapons[currentWeapon].name`. - -# --hints-- - -See description above for instructions. - -```js -(currentWeapon = 3), - fightDragon(), - attack(), - assert( - text.innerText === 'The dragon attacks. You attack it with your sword.' - ); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-097.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-097.md deleted file mode 100644 index 6b15d33fda..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-097.md +++ /dev/null @@ -1,475 +0,0 @@ ---- -id: 5d7df2a68360d21c6826a9b2 -title: Part 97 -challengeType: 0 -dashedName: part-97 ---- - -# --description-- - -Next, set `health` to equal `health` minus the monster's level. You can get the monster's level with `monsters[fighting].level`. - -# --hints-- - -See description above for instructions. - -```js -(health = 50), fightDragon(), attack(), assert(health === 30); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-098.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-098.md deleted file mode 100644 index f4683e6bc9..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-098.md +++ /dev/null @@ -1,477 +0,0 @@ ---- -id: 5d7df41a8360d21c6826a9b3 -title: Part 98 -challengeType: 0 -dashedName: part-98 ---- - -# --description-- - -Set `monsterHealth` to `monsterHealth` minus the power of the current weapon (`weapons[currentWeapon].power`). - -# --hints-- - -See description above for instructions. - -```js -fightDragon(), (monsterHealth = 20), attack(), assert(monsterHealth === 15); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-099.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-099.md deleted file mode 100644 index bd3cbd8d48..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-099.md +++ /dev/null @@ -1,484 +0,0 @@ ---- -id: 5d7df75a8360d21c6826a9b4 -title: Part 99 -challengeType: 0 -dashedName: part-99 ---- - -# --description-- - -At the end of that line, add a random number between one and the value of `xp`. Here is the formula to get a random number between 1 and 5: `Math.floor(Math.random() * 5) + 1`. - -`Math.random()` returns a decimal or floating point number between 0 and 1, and `Math.floor()` rounds a given number down to the nearest integer. - -# --hints-- - -See description above for instructions. - -```js -(xp = 1), - fightDragon(), - (monsterHealth = 20), - attack(), - assert(monsterHealth === 14); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-100.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-100.md deleted file mode 100644 index 1f7732f04f..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-100.md +++ /dev/null @@ -1,485 +0,0 @@ ---- -id: 5d7dfb908360d21c6826a9b5 -title: Part 100 -challengeType: 0 -dashedName: part-100 ---- - -# --description-- - -Update `healthText.innerText` and `monsterHealthText.innerText` to equal `health` and `monsterHealth`. - -# --hints-- - -See description above for instructions. - -```js -(xp = 1), - (health = 50), - fightDragon(), - (monsterHealth = 20), - attack(), - assert(monsterHealthText.innerText === '14' && healthText.innerText === '30'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-101.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-101.md deleted file mode 100644 index 60d5157b2b..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-101.md +++ /dev/null @@ -1,489 +0,0 @@ ---- -id: 5d7e02c88360d21c6826a9b7 -title: Part 101 -challengeType: 0 -dashedName: part-101 ---- - -# --description-- - -Check if health is less than or equal to zero. If it is, call the `lose()` function. - -# --hints-- - -See description above for instructions. - -```js -assert( - attack - .toString() - .match(/^\s*if\s*\(\s*health\s*\<\=\s*0\s*\)\s*\{\s*lose\(\s*\);?\s*\}/m) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-102.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-102.md deleted file mode 100644 index 47874a2616..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-102.md +++ /dev/null @@ -1,508 +0,0 @@ ---- -id: 5d7e06728360d21c6826a9b8 -title: Part 102 -challengeType: 0 -dashedName: part-102 ---- - -# --description-- - -An `else` statement can be conditional with an `else if` statement. At the end of the `if` statement, add an `else if` statement to check if `monsterHealth` is less than or equal to zero. Inside the `else if` block, call the `defeatMonster()` function. - -Here is an example of an `if` statement with `else if` and `else`: - -```js -if (num > 15) { - return "Bigger than 15"; -} else if (num < 5) { - return "Smaller than 5"; -} else { - return "Between 5 and 15"; -} -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - attack - .toString() - .match( - /^\s*if\s*\(\s*health\s*\<\=\s*0\s*\)\s*\{\s*lose\(\s*\);?\s*\}\s*else if\s*\(\s*monsterHealth\s*\<\=\s*0\s*\)\s*\{\s*defeatMonster\(\s*\)\;?\s*\}/m - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-103.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-103.md deleted file mode 100644 index 5df47c54bd..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-103.md +++ /dev/null @@ -1,498 +0,0 @@ ---- -id: 5d7e077e8360d21c6826a9b9 -title: Part 103 -challengeType: 0 -dashedName: part-103 ---- - -# --description-- - -At the end of the code add two empty functions named `defeatMonster` and `lose`. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof defeatMonster === 'function' && typeof lose === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-104.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-104.md deleted file mode 100644 index 295fcda0c0..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-104.md +++ /dev/null @@ -1,507 +0,0 @@ ---- -id: 5d7e13798360d21c6826a9bb -title: Part 104 -challengeType: 0 -dashedName: part-104 ---- - -# --description-- - -Inside the `dodge` function, set `text.innerText` equal to "You dodge the attack from the \[monster's name]." Instead of "\[monster's name]", get the monster's name with `monsters[fighting].name`. - -# --hints-- - -See description above for instructions. - -```js -fightDragon(), - dodge(), - assert(text.innerText === 'You dodge the attack from the dragon.'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-105.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-105.md deleted file mode 100644 index dc57d38ff7..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-105.md +++ /dev/null @@ -1,509 +0,0 @@ ---- -id: 5d7f3b6c7c4263f469c36b17 -title: Part 105 -challengeType: 0 -dashedName: part-105 ---- - -# --description-- - -In the `defeatMonster` function, set `gold` to equal `gold` plus the monster's level times 6.7. You can get the monster's level with `monsters[fighting].level`. - -Here is how you would set `num` to equal `num` plus five times eight: `num += 5 * 8`. Remember that `Math.floor()` rounds any number passed to it down to the nearest whole number. - -# --hints-- - -See description above for instructions. - -```js -(gold = 10), fightSlime(), defeatMonster(), assert(gold === 23); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-106.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-106.md deleted file mode 100644 index 152059279f..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-106.md +++ /dev/null @@ -1,509 +0,0 @@ ---- -id: 5d7f405c7c4263f469c36b18 -title: Part 106 -challengeType: 0 -dashedName: part-106 ---- - -# --description-- - -Set `xp` to equal `xp` plus the monster's level. - -# --hints-- - -See description above for instructions. - -```js -(xp = 10), fightSlime(), defeatMonster(), assert(xp === 12); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-107.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-107.md deleted file mode 100644 index b21cfd70ac..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-107.md +++ /dev/null @@ -1,516 +0,0 @@ ---- -id: 5d7f410b7c4263f469c36b19 -title: Part 107 -challengeType: 0 -dashedName: part-107 ---- - -# --description-- - -Now set the `innerText` properties of `goldText` and `xpText` to the updated values. - -# --hints-- - -See description above for instructions. - -```js -(xp = 10), - (gold = 10), - fightSlime(), - defeatMonster(), - assert(goldText.innerText === '23' && xpText.innerText === '12'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-108.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-108.md deleted file mode 100644 index a4f80d2ba5..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-108.md +++ /dev/null @@ -1,518 +0,0 @@ ---- -id: 5d7f41fa7c4263f469c36b1a -title: Part 108 -challengeType: 0 -dashedName: part-108 ---- - -# --description-- - -Finish the `defeatMonster` function by calling the `update()` function and pass in `locations[4]`. - -# --hints-- - -See description above for instructions. - -```js -assert( - defeatMonster.toString().match(/^\s*update\(\s*locations\[\s*4\s*\]\s*\)/m) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-109.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-109.md deleted file mode 100644 index f686445b89..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-109.md +++ /dev/null @@ -1,532 +0,0 @@ ---- -id: 5d7f43947c4263f469c36b1b -title: Part 109 -challengeType: 0 -dashedName: part-109 ---- - -# --description-- - -Add a new object in the `locations` array with all the same properties as the other objects in the array. Set `name` to "kill monster". Set `"button text"` to `["Go to town square", "Go to town square", "Go to town square"]`. Set `"button functions"` to `[goTown, goTown, goTown]`. And set `text` to "The monster screams Arg! as it dies. You gain experience points and find gold.". - -# --hints-- - -See description above for instructions. - -```js -assert.deepStrictEqual(locations[4], { - name: 'kill monster', - 'button text': [ - 'Go to town square', - 'Go to town square', - 'Go to town square' - ], - 'button functions': [goTown, goTown, goTown], - text: - 'The monster screams Arg! as it dies. You gain experience points and find gold.' -}); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-110.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-110.md deleted file mode 100644 index 0177434542..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-110.md +++ /dev/null @@ -1,538 +0,0 @@ ---- -id: 5d7f44ac7c4263f469c36b1c -title: Part 110 -challengeType: 0 -dashedName: part-110 ---- - -# --description-- - -The word "Arg!" should have quotes around it. Besides escaping quotes, there is another way you can include quote marks inside a quote. Change the double quotes to single quotes around the sentence, "The monster screams Arg! as it dies. You gain experience points and find gold". Then add double quotes around "Arg!" - -# --hints-- - -See description above for instructions. - -```js -assert.deepStrictEqual(locations[4], { - name: 'kill monster', - 'button text': [ - 'Go to town square', - 'Go to town square', - 'Go to town square' - ], - 'button functions': [goTown, goTown, goTown], - text: - 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' -}); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-111.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-111.md deleted file mode 100644 index 2b1d5134cb..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-111.md +++ /dev/null @@ -1,542 +0,0 @@ ---- -id: 5d7f459421b11cdaa3f6b15f -title: Part 111 -challengeType: 0 -dashedName: part-111 ---- - -# --description-- - -While you're working in the `locations` array, add another object at the end. Set `name` to "lose". Set `"button text"` to `["REPLAY?", "REPLAY?", "REPLAY?"]`. Set `"button functions"` to `[restart, restart, restart]`. And set `text` to "You die. ☠️". - -# --hints-- - -See description above for instructions. - -```js -assert.deepStrictEqual(locations[5], { - name: 'lose', - 'button text': ['REPLAY?', 'REPLAY?', 'REPLAY?'], - 'button functions': [restart, restart, restart], - text: 'You die. ☠️' -}); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
- -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-112.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-112.md deleted file mode 100644 index 4b2f082256..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-112.md +++ /dev/null @@ -1,544 +0,0 @@ ---- -id: 5d7f4d9421b11cdaa3f6b160 -title: Part 112 -challengeType: 0 -dashedName: part-112 ---- - -# --description-- - -After a monster is defeated the monster stat box should no longer display. On the first line of the `update` function add: `monsterStats.style.display = "none";`. - -# --hints-- - -See description above for instructions. - -```js -fightSlime(), defeatMonster(), assert(monsterStats.style.display === 'none'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
- -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-113.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-113.md deleted file mode 100644 index cd7d324d20..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-113.md +++ /dev/null @@ -1,546 +0,0 @@ ---- -id: 5d80c1d821b11cdaa3f6b164 -title: Part 113 -challengeType: 0 -dashedName: part-113 ---- - -# --description-- - -In the `lose` function, call the `update` function and pass in `locations[5]`. - -# --hints-- - -See description above for instructions. - -```js -update(locations[0]), lose(), assert(text.innerText === 'You die. ☠️'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
- -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-114.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-114.md deleted file mode 100644 index f1bdeebb2e..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-114.md +++ /dev/null @@ -1,575 +0,0 @@ ---- -id: 5d80c3c021b11cdaa3f6b165 -title: Part 114 -challengeType: 0 -dashedName: part-114 ---- - -# --description-- - -At the end of the code, create a `restart` function. Inside the function, set `xp` to 0, set `health` to 100, set `gold` to 50, set `currentWeapon` to 0, and set `inventory` to `["stick"]`. Also, update the `innerText` properties of `goldText`, `healthText`, and `xpText` to their current values. Finally, call the `goTown()` function. - -After this step is a good time to test the game so far. - -# --hints-- - -See description above for instructions. - -```js -(currentWeapon = 1), - (inventory = ['stick', 'dagger']), - fightSlime(), - attack(), - defeatMonster(), - restart(), - assert( - xp === 0 && - gold === 50 && - currentWeapon === 0 && - inventory[0] === 'stick' && - inventory.length === 1 && - goldText.innerText === '50' && - healthText.innerText === '100' && - xpText.innerText === '0' && - text.innerText === - 'You are in the town square. You see a sign that says "Store."' - ); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-115.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-115.md deleted file mode 100644 index 2da91fb9a9..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-115.md +++ /dev/null @@ -1,578 +0,0 @@ ---- -id: 5d80d20d21b11cdaa3f6b166 -title: Part 115 -challengeType: 0 -dashedName: part-115 ---- - -# --description-- - -Inside the `attack` function, update the contents of the `else if` statement. Instead of calling the `defeatMonster` function right away, create an `if` statement with an `else` statement. If the player is fighting the dragon (`fighting === 2`), then call the `winGame` function. Else, call the `defeatMonster` function. - -# --hints-- - -See description above for instructions. - -```js -assert( - attack - .toString() - .match( - /^\s*\}\s*else\s*if\s*\(\s*monsterHealth\s*\<\=\s*0\s*\)\s*\{\s*if\s*\(\s*fighting\s*===\s*2\)\s*\{\s*winGame\(\s*\)\;?\s*\}\s*else\s*\{\s*defeatMonster\(\s*\)\;?\s*\}\s*\}/m - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-116.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-116.md deleted file mode 100644 index a648dc53a4..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-116.md +++ /dev/null @@ -1,592 +0,0 @@ ---- -id: 5d80d67021b11cdaa3f6b167 -title: Part 116 -challengeType: 0 -dashedName: part-116 ---- - -# --description-- - -The conditional operator, also called the ternary operator, can be used as a one line if-else expression. The syntax is: `condition ? statement-if-true : statement-if-false;`. - -Change the if-else expression from the last challenge to use the ternary operator instead. Here is an example: - -```js -if (age >= 18) { - adultFunction(); -} else { - kidFunction(); -} - -// The above if-else expression does the same thing as the following line - -age >= 18 ? adultFunction() : kidFunction(); -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - attack - .toString() - .match( - /^\s*\}\s*else\s*if\s*\(\s*monsterHealth\s*\<\=\s*0\s*\)\s*\{\s*fighting\s*\=\=\=\s*2\s*\?\s*winGame\(\s*\)\s*\:\s*defeatMonster\(\s*\)\;?\s*\}/m - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-117.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-117.md deleted file mode 100644 index d2f4277b03..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-117.md +++ /dev/null @@ -1,572 +0,0 @@ ---- -id: 5d80da7521b11cdaa3f6b168 -title: Part 117 -challengeType: 0 -dashedName: part-117 ---- - -# --description-- - -After the `lose` function, create a function called `winGame`. Inside the `winGame` function, call the `update` function and pass in `locations[6]`. - -# --hints-- - -See description above for instructions. - -```js -assert(winGame.toString().replace(/\s/g, '').includes('update(locations[6])')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-118.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-118.md deleted file mode 100644 index 5544e87fe0..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-118.md +++ /dev/null @@ -1,587 +0,0 @@ ---- -id: 5dbab6d36ef5fe3a704f848c -title: Part 118 -challengeType: 0 -dashedName: part-118 ---- - -# --description-- - -Add another object in the `locations` array. Everything should be the same as the "lose" element, except the `name` should be "win" and the text should be "You defeat the dragon! YOU WIN THE GAME! 🎉" - -# --hints-- - -See description above for instructions. - -```js -assert.deepStrictEqual(locations[6], { - name: 'win', - 'button text': ['Fight slime', 'Fight fanged beast', 'Go to town square'], - 'button functions': [restart, restart, restart], - text: 'You defeat the dragon! YOU WIN THE GAME! 🎉' -}); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-119.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-119.md deleted file mode 100644 index 3e79f91c2f..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-119.md +++ /dev/null @@ -1,595 +0,0 @@ ---- -id: 5dbabb746ef5fe3a704f848d -title: Part 119 -challengeType: 0 -dashedName: part-119 ---- - -# --description-- - -The game could be complete now, but let's make it more interesting. - -Inside the `attack` function, change the line `health -= monsters[fighting].level;` to `health -= getMonsterAttackValue(monsters[fighting].level);` This sets `health` to equal `health` minus the return value of the `getMonsterAttackValue` function. Also, pass the level of the monster to `getMonsterAttackValue` as an argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - attack - .toString() - .replace(/\s/g, '') - .includes('health-=getMonsterAttackValue(monsters[fighting].level') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-120.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-120.md deleted file mode 100644 index 9a1eb4d22d..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-120.md +++ /dev/null @@ -1,594 +0,0 @@ ---- -id: 5dbac08e6ef5fe3a704f848f -title: Part 120 -challengeType: 0 -dashedName: part-120 ---- - -# --description-- - -Under the `attack` function, create a function with name `getMonsterAttackValue` that takes `level` as a parameter. - -# --hints-- - -See description above for instructions. - -```js -assert( - getMonsterAttackValue.toString().replace(/\s/g, '') === - 'functiongetMonsterAttackValue(level){}' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-121.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-121.md deleted file mode 100644 index 50e8300f07..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-121.md +++ /dev/null @@ -1,601 +0,0 @@ ---- -id: 5dbac0c86ef5fe3a704f8490 -title: Part 121 -challengeType: 0 -dashedName: part-121 ---- - -# --description-- - -The attack of the monster will be based on the monster's level and player's `xp`. In the `getMonsterAttackValue` function, use `const` to create a variable called `hit`. Set it to equal the equation `(level * 5) - (Math.floor(Math.random() * xp))`. - -# --hints-- - -See description above for instructions. - -```js -assert( - getMonsterAttackValue - .toString() - .replace(/\s/g, '') - .includes('varhit=level*5-Math.floor(Math.random()*xp)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-122.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-122.md deleted file mode 100644 index 2c8de55b40..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-122.md +++ /dev/null @@ -1,604 +0,0 @@ ---- -id: 5dbac1f16ef5fe3a704f8491 -title: Part 122 -challengeType: 0 -dashedName: part-122 ---- - -# --description-- - -Log the value of `hit` to the console to use in debugging. - -Here is how to log the value of `num` to the console: `console.log(num);`. - -# --hints-- - -See description above for instructions. - -```js -assert( - getMonsterAttackValue - .toString() - .replace(/\s/g, '') - .includes('console.log(hit)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-123.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-123.md deleted file mode 100644 index 7ccf018a43..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-123.md +++ /dev/null @@ -1,611 +0,0 @@ ---- -id: 5dbac2b06ef5fe3a704f8492 -title: Part 123 -challengeType: 0 -dashedName: part-123 ---- - -# --description-- - -Now return `hit` from the `getMonsterAttackValue` function. The return value of this function is used in the `attack` function. - -Here is an example of a function that returns a value: - -```js -function plusThree(num) { - let numPlusThree = num + 3; - return numPlusThree; -} - -const answer = plusThree(5); // 8 -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - getMonsterAttackValue.toString().replace(/\s/g, '').includes('returnhit') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-124.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-124.md deleted file mode 100644 index 8f9d1b0f76..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-124.md +++ /dev/null @@ -1,614 +0,0 @@ ---- -id: 5dbbb5076ef5fe3a704f849d -title: Part 124 -challengeType: 0 -dashedName: part-124 ---- - -# --description-- - -If you play the game in its current state you might notice a bug. If your `xp` is high enough, the `getMonsterAttackValue` function will sometimes return a negative number, which will actually add to your total health when fighting a monster! - -In `getMonsterAttackValue`, change `return hit` to a ternary operator that returns `hit` if `hit` is greater than 0, or returns 0 if it is not. - -For example, here's a function that returns 5 if `tickets` is greater than 3, or returns 0 if it is not: - -```js -function applyDiscount(tickets) { - return tickets > 2 : 5 : 0; -} -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - getMonsterAttackValue - .toString() - .replace(/\s/g, '') - .includes('returnhit>0?hit:0') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-125.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-125.md deleted file mode 100644 index 62d444f251..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-125.md +++ /dev/null @@ -1,609 +0,0 @@ ---- -id: 5dbac6176ef5fe3a704f8493 -title: Part 125 -challengeType: 0 -dashedName: part-125 ---- - -# --description-- - -In the `attack` function after the line `health -= getMonsterAttackValue(monsters[fighting].level);`, create an empty if expression. For the condition, put the function call `isMonsterHit()`. - -Here is an example of an empty if expression with a function call as the condition: - -```js -if (isTrue()) { - -} -``` - -# --hints-- - -See description above for instructions. - -```js -assert(attack.toString().replace(/\s/g, '').includes('if(isMonsterHit()){}')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-126.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-126.md deleted file mode 100644 index b2107ec1f0..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-126.md +++ /dev/null @@ -1,620 +0,0 @@ ---- -id: 5dbaca566ef5fe3a704f8494 -title: Part 126 -challengeType: 0 -dashedName: part-126 ---- - -# --description-- - -In the `attack` function, move the line `monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;` into the `if` block. - -Here is an example of code in an `if` block that logs a message to the console: - -```js -if (isTrue()) { - console.log("It's true!"); -} -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - attack - .toString() - .replace(/\s/g, '') - .match( - /if\(isMonsterHit\(\)\)\{monsterHealth\-\=weapons\[currentWeapon\]\.power\+Math\.floor\(Math\.random\(\)\*xp\)\+1;?\}/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-127.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-127.md deleted file mode 100644 index 85efb551ae..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-127.md +++ /dev/null @@ -1,614 +0,0 @@ ---- -id: 5dbae0446ef5fe3a704f8495 -title: Part 127 -challengeType: 0 -dashedName: part-127 ---- - -# --description-- - -Add an `else` expression to the `if` expression. Use the `+=` operator to add the text " You miss." onto the end of `text.innerText`. - -# --hints-- - -See description above for instructions. - -```js -assert( - attack - .toString() - .replace(/\s/g, '') - .match( - /if\(isMonsterHit\(\)\)\{monsterHealth\-\=weapons\[currentWeapon\]\.power\+Math\.floor\(Math\.random\(\)\*xp\)\+1;?\}else\{text\.innerText\+\=[\'\"\`]Youmiss.[\'\"\`]\;?\}/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-128.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-128.md deleted file mode 100644 index 5ded47315c..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-128.md +++ /dev/null @@ -1,630 +0,0 @@ ---- -id: 5dbae1f66ef5fe3a704f8496 -title: Part 128 -challengeType: 0 -dashedName: part-128 ---- - -# --description-- - -Now create the `isMonsterHit` function. It will return a boolean to be used in the `if` expression. Return the result of the comparison `Math.random() > .2`. - -Here is a function that returns the result of a comparison: - -```js -function flipHeads() { - return Math.random() > .5; -} -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - isMonsterHit - .toString() - .replace(/\s/g, '') - .includes('returnMath.random()>.2') || - isMonsterHit - .toString() - .replace(/\s/g, '') - .includes('returnMath.random()>0.2') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-129.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-129.md deleted file mode 100644 index 9fc1336bd5..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-129.md +++ /dev/null @@ -1,628 +0,0 @@ ---- -id: 5dbba5716ef5fe3a704f8497 -title: Part 129 -challengeType: 0 -dashedName: part-129 ---- - -# --description-- - -The player should hit if either `Math.random() > .2` OR if the player's health is less than 20. At the end of the return statement, add the "logical or" operator (`||`) and then check if `health` is less than 20. - -Here is an example that returns true if either a number is less than 10 or more than 20: `num < 10 || num > 20`. - -# --hints-- - -See description above for instructions. - -```js -assert( - isMonsterHit - .toString() - .replace(/\s/g, '') - .includes('returnMath.random()>.2||health<20') || - isMonsterHit - .toString() - .replace(/\s/g, '') - .includes('returnMath.random()>0.2||health<20') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-130.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-130.md deleted file mode 100644 index 0d3f4e0a31..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-130.md +++ /dev/null @@ -1,625 +0,0 @@ ---- -id: 5dbba70e6ef5fe3a704f8498 -title: Part 130 -challengeType: 0 -dashedName: part-130 ---- - -# --description-- - -On every attack, there should be a small chance that the player's weapon breaks. At the end of the `attack` function, add an empty `if` expression with the condition `Math.random() <= .1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - attack.toString().replace(/\s/g, '').includes('if(Math.random()<=.1){}') || - isMonsterHit - .toString() - .replace(/\s/g, '') - .includes('if(Math.random()<=0.1){}') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-131.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-131.md deleted file mode 100644 index 041946ae73..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-131.md +++ /dev/null @@ -1,646 +0,0 @@ ---- -id: 5dbba89e6ef5fe3a704f8499 -title: Part 131 -challengeType: 0 -dashedName: part-131 ---- - -# --description-- - -Use the `+=` operator to add "Your \[last item in inventory array] breaks." to the end of `text.innerText`. Instead of the bracketed text, it should show the actual item name. - -Use `inventory.pop()` to both remove the last element from the array AND return that element. For example: - -```js -let shoppingList = ["milk", "apples", "cereal"]; -console.log("I bought " + shoppingList.pop() + "."); // Logs "I bought cereal." -// shoppingList now equals ["milk", "apples"] -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - attack - .toString() - .replace(/\s/g, '') - .match( - /if\(Math\.random\(\)\<\=0?\.1\)\{text\.innerText\+\=\"Your\"\+inventory\.pop\(\)\+\"breaks\.\"\;?\}/ - ) || - attack - .toString() - .replace(/\s/g, '') - .match( - /if\(Math\.random\(\)\<\=0?\.1\)\{text\.innerText\+\=\"Your\"\.concat\(inventory\.pop\(\)\,\"breaks\.\"\)\;?\}/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-132.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-132.md deleted file mode 100644 index 307889edf7..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-132.md +++ /dev/null @@ -1,632 +0,0 @@ ---- -id: 5dbbaeb56ef5fe3a704f849a -title: Part 132 -challengeType: 0 -dashedName: part-132 ---- - -# --description-- - -Decrement the value of `currentWeapon` using `--`. For example, say `num` equals 5. After running `num--`, `num` now equals 4. - -# --hints-- - -See description above for instructions. - -```js -assert( - attack - .toString() - .replace(/\s/g, '') - .match( - /if\(Math\.random\(\)\<\=0?\.1\)\{text\.innerText\+\=\"Your\"\+inventory\.pop\(\)\+\"breaks\.\"\;?currentWeapon--\;?\}/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-133.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-133.md deleted file mode 100644 index ea35840058..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-133.md +++ /dev/null @@ -1,643 +0,0 @@ ---- -id: 5dbbb00e6ef5fe3a704f849b -title: Part 133 -challengeType: 0 -dashedName: part-133 ---- - -# --description-- - -We don't want a player's only weapon to break. - -Use the "logical and" operator (`&&`) to add a second condition to the `if` expression you just wrote. A player's weapon should only be able to break if `inventory.length` does not equal (`!==`) one. - -Here is an example of an `if` expression with the conditions that `firstName` equals "Quincy" AND `lastName` does NOT equal "Larson". With `&&`, both conditions must be true or else the entire statement evaluates to false. - -```js -if (firstName === "Quincy" && lastName !== "Larson") { - console.log("Cool name but not the creator of freeCodeCamp.org.") -} -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - attack - .toString() - .replace(/\s/g, '') - .match( - /if\(Math\.random\(\)\<\=0?\.1\&\&inventory\.length\!\=\=1\)\{text\.innerText\+\=\"Your\"\+inventory\.pop\(\)\+\"breaks\.\"\;?currentWeapon--\;?\}/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-134.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-134.md deleted file mode 100644 index d73015dadc..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-134.md +++ /dev/null @@ -1,637 +0,0 @@ ---- -id: 5dbbb1466ef5fe3a704f849c -title: Part 134 -challengeType: 0 -dashedName: part-134 ---- - -# --description-- - -The only thing left to add is a mini-game easter egg (a hidden feature). - -Add a new function called `easterEgg` that calls the `update` function and passes in `locations[7]` as an argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - easterEgg - .toString() - .replace(/\s/g, '') - .match(/functioneasterEgg\(\)\{(return)?update\(locations\[7\]\)\;?}/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-135.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-135.md deleted file mode 100644 index 6c4fded964..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-135.md +++ /dev/null @@ -1,651 +0,0 @@ ---- -id: 5dbbf3796ef5fe3a704f849e -title: Part 135 -challengeType: 0 -dashedName: part-135 ---- - -# --description-- - -Add a new object to the `locations` array. - -Set `name` to "easter egg", `"button text"` to `["2", "8", "Go to town square?"]`, `"button functions"` to `[pickTwo, pickEight, goTown]`, and `text` to "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" - -# --hints-- - -See description above for instructions. - -```js -assert.deepStrictEqual(locations[7], { - name: 'easter egg', - 'button text': ['2', '8', 'Go to town square?'], - 'button functions': [pickTwo, pickEight, goTown], - text: - 'You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!' -}); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
- -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-136.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-136.md deleted file mode 100644 index efd107afd6..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-136.md +++ /dev/null @@ -1,662 +0,0 @@ ---- -id: 5dbbf8d86ef5fe3a704f849f -title: Part 136 -challengeType: 0 -dashedName: part-136 ---- - -# --description-- - -At the end of the code, add two new functions named `pickTwo` and `pickEight`. - -Inside each function call the `pick()` function. Pass either "2" or "8" as arguments to `pick` depending on the function name. - -# --hints-- - -See description above for instructions. - -```js -assert( - pickTwo.toString().replace(/\s/g, '').includes('pick(2)') && - pickEight.toString().replace(/\s/g, '').includes('pick(8)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
- -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-137.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-137.md deleted file mode 100644 index 3d42d7bf29..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-137.md +++ /dev/null @@ -1,664 +0,0 @@ ---- -id: 5dbc23a66ef5fe3a704f84a0 -title: Part 137 -challengeType: 0 -dashedName: part-137 ---- - -# --description-- - -Add a `pick` function with a parameter named "guess". - -# --hints-- - -See description above for instructions. - -```js -assert(pick.toString().replace(/\s/g, '').includes('functionpick(guess){}')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-138.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-138.md deleted file mode 100644 index 3f07a2a595..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-138.md +++ /dev/null @@ -1,675 +0,0 @@ ---- -id: 5dbc2c506ef5fe3a704f84a1 -title: Part 138 -challengeType: 0 -dashedName: part-138 ---- - -# --description-- - -Inside `pick`, use `let` to initialize a variable named "numbers" and set it to an empty array. - -# --hints-- - -See description above for instructions. - -```js -assert( - pick - .toString() - .replace(/\s/g, '') - .match(/functionpick\(guess\)\{varnumbers\=\[\]\;?\}/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-139.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-139.md deleted file mode 100644 index 67782d1950..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-139.md +++ /dev/null @@ -1,692 +0,0 @@ ---- -id: 5dbc2d056ef5fe3a704f84a2 -title: Part 139 -challengeType: 0 -dashedName: part-139 ---- - -# --description-- - -Inside `pick`, create a `while` loop to run the same code multiple times. The code inside the `while` loop should keep repeating while `numbers.length` is less than 10 and stop once that condition is no longer true. - -Here is an example of a while loop that repeats code inside the loop while `i` is less than five. - -```js -let ourArray = []; -let i = 0; -while(i < 5) { - ourArray.push(i); - i++; -} -// ourArray now equals [0,1,2,3,4] -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - pick - .toString() - .replace(/\s/g, '') - .includes( - 'while(numbers.length<10){if(_LPC++%2000===0&&Date.now()-_LP>1500){' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-140.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-140.md deleted file mode 100644 index 85f93bb2c7..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-140.md +++ /dev/null @@ -1,681 +0,0 @@ ---- -id: 5dbc2f2d6ef5fe3a704f84a3 -title: Part 140 -challengeType: 0 -dashedName: part-140 ---- - -# --description-- - -Inside the `while` loop, push a random number between 0 and 10 onto the end of the `numbers` array. Get the random number with `Math.floor(Math.random() * 11)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - pick - .toString() - .replace(/\s/g, '') - .includes('numbers.push(Math.floor(Math.random()*11));}') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-141.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-141.md deleted file mode 100644 index ad875cd5dc..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-141.md +++ /dev/null @@ -1,679 +0,0 @@ ---- -id: 5dbc33956ef5fe3a704f84a4 -title: Part 141 -challengeType: 0 -dashedName: part-141 ---- - -# --description-- - -After the `while` loop, set `text.innerText` to equal "You picked \[guess]. Here are the random numbers:". Replace \[guess] with the actual guess. - -# --hints-- - -See description above for instructions. - -```js -pickTwo(), - assert(text.innerText === 'You picked 2. Here are the random numbers:'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-142.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-142.md deleted file mode 100644 index a788245bf3..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-142.md +++ /dev/null @@ -1,693 +0,0 @@ ---- -id: 5dbc35326ef5fe3a704f84a5 -title: Part 142 -challengeType: 0 -dashedName: part-142 ---- - -# --description-- - -Before the final end quote in the string you just added, insert the new line escape sequence (`\n`). This will cause the next part you add to `text.innerText` to appear on a new line. - -# --hints-- - -See description above for instructions. - -```js -assert( - pick - .toString() - .replace(/\s/g, '') - .includes( - 'text.innerText="Youpicked"+guess+".Herearetherandomnumbers:\\n";' - ) || - pick - .toString() - .replace(/\s/g, '') - .includes( - 'text.innerText="Youpicked".concat(guess,".Herearetherandomnumbers:\\n");' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-143.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-143.md deleted file mode 100644 index ddcf064846..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-143.md +++ /dev/null @@ -1,692 +0,0 @@ ---- -id: 5dbfced07736e5ee7d235544 -title: Part 143 -challengeType: 0 -dashedName: part-143 ---- - -# --description-- - -A `for` loop runs "for" a specific number of times. - -We will go over how for loops work in the next several steps. In the meantime, just copy the for loop below and paste it at the end of the `pick` function: - -```js -for (let x = 1; x < 5; x++) { - -} -``` - -# --hints-- - -See description above for instructions. - -```js -assert(pick.toString().replace(/\s/g, '').includes('for(varx=1;x<5;x++){')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-144.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-144.md deleted file mode 100644 index 876c77aa71..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-144.md +++ /dev/null @@ -1,692 +0,0 @@ ---- -id: 5dbfd4837736e5ee7d235545 -title: Part 144 -challengeType: 0 -dashedName: part-144 ---- - -# --description-- - -For loops are declared with three optional expressions separated by semicolons: `for ([initialization]; [condition]; [final-expression])`. - -The initialization statement is executed only one time before the loop starts and is often used to define and set up the loop variable. Think of it like declaring a variable to use as a counter in your `for` loop. - -Many `for` loops use `i` as an initializer and start from 0, so change `let x = 1;` to `let i = 0;`. - -# --hints-- - -See description above for instructions. - -```js -assert(pick.toString().replace(/\s/g, '').includes('for(vari=0;x<5;x++){')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-145.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-145.md deleted file mode 100644 index 2614aec51b..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-145.md +++ /dev/null @@ -1,690 +0,0 @@ ---- -id: 5dbfdb737736e5ee7d235546 -title: Part 145 -challengeType: 0 -dashedName: part-145 ---- - -# --description-- - -The second statement in a `for` loop, the condition statement, is evaluated at the beginning of every loop iteration. The loop will continue as long as it evaluates to true. - -We want the loop to run 10 times, so change `x < 5` to `i < 10`. - -# --hints-- - -See description above for instructions. - -```js -assert(pick.toString().replace(/\s/g, '').includes('for(vari=0;i<10;x++){')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-146.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-146.md deleted file mode 100644 index e6593263c0..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-146.md +++ /dev/null @@ -1,690 +0,0 @@ ---- -id: 5dbfdc377736e5ee7d235547 -title: Part 146 -challengeType: 0 -dashedName: part-146 ---- - -# --description-- - -The last statement in a `for` loop is the final-expression, and is executed at the end of each loop iteration. - -Since we changed the initializer from `x` to `i`, change `x++` to `i++`. This will iterate the initializer `i` by 1 after each loop. - -# --hints-- - -See description above for instructions. - -```js -assert(pick.toString().replace(/\s/g, '').includes('for(vari=0;i<10;i++){')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-147.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-147.md deleted file mode 100644 index 4ba199d139..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-147.md +++ /dev/null @@ -1,693 +0,0 @@ ---- -id: 5dbfe2f37736e5ee7d235548 -title: Part 147 -challengeType: 0 -dashedName: part-147 ---- - -# --description-- - -Inside the for loop, use the `+=` operator to add to the end of `text.innerText`. Add the the number at index `i` in the `numbers` array with `numbers[i]`. Then add a new line. So the entire line inside the for loop should look like: `text.innerText += numbers[i] + "\n";` - -# --hints-- - -See description above for instructions. - -```js -assert( - pick - .toString() - .replace(/\s/g, '') - .includes('text.innerText+=numbers[i]+"\\n";}}') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-148.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-148.md deleted file mode 100644 index fe8ebc1c01..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-148.md +++ /dev/null @@ -1,699 +0,0 @@ ---- -id: 5dbfeffe7736e5ee7d235549 -title: Part 148 -challengeType: 0 -dashedName: part-148 ---- - -# --description-- - -The `indexOf()` array method returns the first index at which a given element can be found in the array, or -1 if it is not present. - -After the for loop, add an `if` expression to check if the guessed number is in the `numbers` array. The condition of the `if` expression should check if `numbers.indexOf(guess) !== -1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - pick - .toString() - .replace(/\s/g, '') - .includes('if(numbers.indexOf(guess)!==-1){}') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-149.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-149.md deleted file mode 100644 index 753caba8e7..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-149.md +++ /dev/null @@ -1,705 +0,0 @@ ---- -id: 5dbff18d7736e5ee7d23554a -title: Part 149 -challengeType: 0 -dashedName: part-149 ---- - -# --description-- - -Inside the `if` expression, add the following string to the end of `text.innerText`: "Right! You win 20 gold!" Also, add 20 to the value of `gold` and update `goldText.innerText`. - -# --hints-- - -See description above for instructions. - -```js -assert( - pick - .toString() - .replace(/\s/g, '') - .includes('text.innerText+="Right!Youwin20gold!";') && - pick.toString().replace(/\s/g, '').includes('gold+=20;') && - pick.toString().replace(/\s/g, '').includes('goldText.innerText=gold;') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-150.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-150.md deleted file mode 100644 index 53d6a01dd0..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-150.md +++ /dev/null @@ -1,712 +0,0 @@ ---- -id: 5dbff2d07736e5ee7d23554b -title: Part 150 -challengeType: 0 -dashedName: part-150 ---- - -# --description-- - -Add an `else` expression. Inside add "Wrong! You lose 10 health!" to the end of `text.innerText`. Also, subtract 10 from `health` and update `healthText.innerText`. - -# --hints-- - -See description above for instructions. - -```js -assert( - pick.toString().replace(/\s/g, '').includes('else{') && - pick - .toString() - .replace(/\s/g, '') - .includes('text.innerText+="Wrong!Youlose10health!";') && - pick.toString().replace(/\s/g, '').includes('health-=10;') && - pick.toString().replace(/\s/g, '').includes('healthText.innerText=health;') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-151.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-151.md deleted file mode 100644 index 20095d9bcd..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-151.md +++ /dev/null @@ -1,718 +0,0 @@ ---- -id: 5dbffd907736e5ee7d23554c -title: Part 151 -challengeType: 0 -dashedName: part-151 ---- - -# --description-- - -At the end of the `else` statement, check if `health` is less than or equal to zero. If so, call the `lose()` function. - -# --hints-- - -See description above for instructions. - -```js -assert( - pick - .toString() - .replace(/\s/g, '') - .includes( - 'else{text.innerText+="Wrong!Youlose10health!";health-=10;healthText.innerText=health;if(health<=0){lose();}}' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-152.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-152.md deleted file mode 100644 index 871a954431..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-152.md +++ /dev/null @@ -1,724 +0,0 @@ ---- -id: 5dbffe887736e5ee7d23554d -title: Part 152 -challengeType: 0 -dashedName: part-152 ---- - -# --description-- - -Inside the `locations` array, on the `kill monster` object, "button functions" is currently set to `[goTown, goTown, goTown]`. Change the third `goTown` to `easterEgg`. This is how a player will access the hidden feature of the game. - -# --hints-- - -See description above for instructions. - -```js -assert.deepStrictEqual(locations[4], { - name: 'kill monster', - 'button text': [ - 'Go to town square', - 'Go to town square', - 'Go to town square' - ], - 'button functions': [goTown, goTown, easterEgg], - text: - 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' -}); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-153.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-153.md deleted file mode 100644 index deec67837f..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-153.md +++ /dev/null @@ -1,714 +0,0 @@ ---- -id: 5dc01a727736e5ee7d23554f -title: Part 153 -challengeType: 0 -dashedName: part-153 ---- - -# --description-- - -Congratulations! You are finished! Now try out the game. - -# --hints-- - -See description above for instructions. - -```js - -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-001.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-001.md new file mode 100644 index 0000000000..20f57329bd --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-001.md @@ -0,0 +1,113 @@ +--- +id: 5d5a813321b9e3db6c106a46 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +To keep track of the player's experience points, we've declared a variable called `xp` and assigned it the starting value of 0. + +Create another variable to keep track of health and start it at 100. + +# --hints-- + +See description above for instructions. + +```js +assert(health === 100); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-002.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-002.md new file mode 100644 index 0000000000..6a08b7cb91 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-002.md @@ -0,0 +1,113 @@ +--- +id: 5d5a8dd907f328a948d398ce +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Create a variable called `gold` and set it to the value 50. + +# --hints-- + +See description above for instructions. + +```js +assert(gold === 50); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-003.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-003.md new file mode 100644 index 0000000000..5c2f4243f4 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-003.md @@ -0,0 +1,117 @@ +--- +id: 5d5a8f1c07f328a948d398cf +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Create a variable called `currentWeapon` and set it to 0. When a name has two words, the convention is to use so-called "lowerCamelCase". The first word is all lowercase, and then the first letter of every preceding word is uppercased. + +When a name has two words, the convention is to use so-called "lowerCamelCase". The variable name should look like this: currentWeapon. + +# --hints-- + +See description above for instructions. + +```js +assert(currentWeapon === 0); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-004.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-004.md new file mode 100644 index 0000000000..f3901154d8 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-004.md @@ -0,0 +1,123 @@ +--- +id: 5d5a903507f328a948d398d0 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +We've been declaring variables with the `var` keyword. However, in modern JavaScript, it's better to use `let` instead of `var` because it fixes a number of unusual behaviors with `var` that make it difficult to reason about. + +Change every `var` to `let`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /let\s+xp\s*\=\s*0\;?/.test(code) && + /let\s+health\s*\=\s*100\;?/.test(code) && + /let\s+gold\s*\=\s*50\;?/.test(code) && + /let\s+currentWeapon\s*\=\s*0\;?/.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-005.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-005.md new file mode 100644 index 0000000000..1c06e17af7 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-005.md @@ -0,0 +1,119 @@ +--- +id: 5d5aaa5807f328a948d398d1 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Now you will declare a variable without initializing it. + +Using the `let` keyword, declare a variable called `fighting` but don't set it equal to anything. Just end the line with a semicolon right after the variable name. + +# --hints-- + +See description above for instructions. + +```js +assert(/let\s+fighting\s*;?/.test(code) && fighting === undefined); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-006.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-006.md new file mode 100644 index 0000000000..d0cae1d5d5 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-006.md @@ -0,0 +1,120 @@ +--- +id: 5d5aab5d07f328a948d398d2 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Declare variables named `monsterHealth` and `inventory` without initializing them. + +# --hints-- + +See description above for instructions. + +```js +assert(monsterHealth === undefined && inventory === undefined); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-007.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-007.md new file mode 100644 index 0000000000..2755938a64 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-007.md @@ -0,0 +1,124 @@ +--- +id: 5d5aac9c07f328a948d398d3 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Now set the inventory to equal the string "stick". + +Strings must be surrounded with double quotes `"`, single quotes `'`, or backticks `` ` ``. + +# --hints-- + +See description above for instructions. + +```js +assert(inventory === 'stick'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-008.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-008.md new file mode 100644 index 0000000000..9e6f0da43d --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-008.md @@ -0,0 +1,132 @@ +--- +id: 5d5aad2307f328a948d398d4 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Since the inventory can store multiple items, change the value of `inventory` to an array with the items stick, dagger, and sword. + +Here is an example of a variable sandwich that equals a three-item array: + +```js +let sandwich = ["peanut butter", "jelly", "bread"]; +``` + +# --hints-- + +See description above for instructions. + +```js +assert( + inventory.includes('stick') && + inventory.includes('dagger') && + inventory.includes('sword') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-009.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-009.md new file mode 100644 index 0000000000..5f6b1961a8 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-009.md @@ -0,0 +1,122 @@ +--- +id: 5d5aae1207f328a948d398d5 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +For now, let's start the player with just the stick. Delete the dagger and sword items in the array. More items will be added to the array during game play. + +# --hints-- + +See description above for instructions. + +```js +assert(inventory[0] === 'stick' && inventory.length === 1); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-010.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-010.md new file mode 100644 index 0000000000..2205248dd1 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-010.md @@ -0,0 +1,131 @@ +--- +id: 5d5ab57f07f328a948d398d6 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +In order to update HTML elements on the page, you need to get references to them in your JavaScript code. The code `let el = document.querySelector("#el");` gets a reference to an HTML element with an `id` of `el` and assigns it to the variable `el`. + +Get a reference to the HTML element with the `id` of `button1` and assign it to a variable with the name `button1`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /let\s+button1\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#button1\s*[\'\"\`]\s*\);?/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-011.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-011.md new file mode 100644 index 0000000000..da60e97ab6 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-011.md @@ -0,0 +1,126 @@ +--- +id: 5d5b66ce07f328a948d398d7 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +You can also declare variables with the `const` key word. Since `button1` is a constant that will never change, switch the `let` keyword that declares the variable to `const`. + +# --hints-- + +See description above for instructions. + +```js +assert(/const\s+button1\s*/.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-012.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-012.md new file mode 100644 index 0000000000..3790aaeded --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-012.md @@ -0,0 +1,165 @@ +--- +id: 5d64cf8f853b56a21cd16319 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Here are the ids of the other HTML elements that we want a reference to in the JavaScript code: `button2`, `button3`, `text`, `xpText`, `healthText`, `goldText`, `monsterStats`, `monsterNameText`, `monsterHealthText`. + +Just like you did with `storeButton`, create variables and set them equal to the element references. + +# --hints-- + +See description above for instructions. + +```js +assert( + /const\s+button2\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#button2\s*[\'\"\`]\s*\);?/.test( + code + ) && + /const\s+button3\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#button3\s*[\'\"\`]\s*\);?/.test( + code + ) && + /const\s+text\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#text\s*[\'\"\`]\s*\);?/.test( + code + ) && + /const\s+xpText\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#xpText\s*[\'\"\`]\s*\);?/.test( + code + ) && + /const\s+healthText\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#healthText\s*[\'\"\`]\s*\);?/.test( + code + ) && + /const\s+goldText\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#goldText\s*[\'\"\`]\s*\);?/.test( + code + ) && + /const\s+monsterStats\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#monsterStats\s*[\'\"\`]\s*\);?/.test( + code + ) && + /const\s+monsterNameText|monsterName\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#monsterName\s*[\'\"\`]\s*\);?/.test( + code + ) && + /const\s+monsterHealthText|monsterHealth\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#monsterHealth\s*[\'\"\`]\s*\);?/.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-013.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-013.md new file mode 100644 index 0000000000..da87727a50 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-013.md @@ -0,0 +1,148 @@ +--- +id: 5d651ee1ee291f75bbd738ee +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Make a comment to describe what the next few lines of code will do. Comments can be written with either two forward-slashes `//` or with a multi-line sequence `/* */`. For example, here is a single line comment that says "hello world": `// hello world`. + +Write a single line comment that says "initialize buttons". + +# --hints-- + +See description above for instructions. + +```js +assert(/\/\/\s*[iI]nitialize buttons/.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-014.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-014.md new file mode 100644 index 0000000000..5edd4a0c77 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-014.md @@ -0,0 +1,150 @@ +--- +id: 5d652e5a6e6bf7a6a27aa80a +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Designate what the first button in the HTML does by setting the `onclick` property of `button1` to the function name `goStore`. You will create the `goStore` function later. For example, in `button.onclick = openProgram;`, the `onclick` property of `button` is set to `openProgram`. + +# --hints-- + +See description above for instructions. + +```js +assert(/button1\.onclick\s*\=\s*goStore\;?/.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-015.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-015.md new file mode 100644 index 0000000000..9152b08f2f --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-015.md @@ -0,0 +1,155 @@ +--- +id: 5d653b2d6e6bf7a6a27aa80b +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Now set the `onclick` property of `button2` and `button3`. The second button should be set to `goCave` and the third button should be set to `fightDragon`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /button2\.onclick\s*\=\s*goCave\;?/.test(code) && + /button3\.onclick\s*\=\s*fightDragon\;?/.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-016.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-016.md new file mode 100644 index 0000000000..6a4a87be2b --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-016.md @@ -0,0 +1,162 @@ +--- +id: 5d653c4d6e6bf7a6a27aa80c +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Create the `goStore` function to hold the code that runs whenever the player goes to the store. Here is an example of an empty function called `functionName` (Note the opening curly brace at the end of the first line and the closing curly brace on the second line): + +```js +function functionName() { +} +``` + +# --hints-- + +See description above for instructions. + +```js +assert(typeof goStore === 'function'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-017.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-017.md new file mode 100644 index 0000000000..8d81b9587a --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-017.md @@ -0,0 +1,171 @@ +--- +id: 5d6542826e6bf7a6a27aa80d +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +For now, make the `goStore` function output the message "Going to store." to the web console. For example, here is a function that outputs the message "Hello World" to the web console (Note that code inside a function should be indented): + +```js +function functionName() { + console.log("Hello World"); +} +``` + +# --hints-- + +See description above for instructions. + +```js +assert( + goStore + .toString() + .match(/console\.log\(\s*[\"\'\`]Going to store\.?[\"\'\`]\s*\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-018.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-018.md new file mode 100644 index 0000000000..1d586b1626 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-018.md @@ -0,0 +1,170 @@ +--- +id: 5d65f2c62012114c7d7c57eb +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Similar to the `goStore` function, create a `goCave` function that prints "Going to cave." to the console. + +# --hints-- + +See description above for instructions. + +```js +assert( + goCave + .toString() + .match(/console\.log\(\s*[\"\'\`]Going to cave\.?[\"\'\`]\s*\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-019.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-019.md new file mode 100644 index 0000000000..e9c62601a9 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-019.md @@ -0,0 +1,180 @@ +--- +id: 5d65f4cd2012114c7d7c57ec +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Also, create a `fightDragon` function that prints "Fighting dragon." to the console. + +When you are finished, you can test out your program in the browser. + +# --hints-- + +See description above for instructions. + +```js +assert( + fightDragon + .toString() + .match(/console\.log\(\s*[\"\'\`]Fighting dragon\.?[\"\'\`]\s*\)/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-020.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-020.md new file mode 100644 index 0000000000..70b3cbca4f --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-020.md @@ -0,0 +1,185 @@ +--- +id: 5d65f6392012114c7d7c57ed +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +When a player clicks the 'Go to store' button, the buttons and text in the game should change. Remove the code inside the `goStore` function. Add a new line of code inside the function that updates the text of `button1` so that it says "Buy 10 health (10 gold)". + +For example, this code updates the text of `button` to say "Click Me": `button.innerText = "Click Me";`. + +# --hints-- + +See description above for instructions. + +```js +assert( + (() => { + goStore(); + return button1.innerText === 'Buy 10 health (10 gold)'; + })() +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-021.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-021.md new file mode 100644 index 0000000000..2feb48f4b4 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-021.md @@ -0,0 +1,189 @@ +--- +id: 5d6606634bab337fbb433884 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +After the line that updates `button1`, update the text of `button2` to say "Buy weapon (30 gold)" and update the text of `button3` to say "Go to town square". + +# --hints-- + +See description above for instructions. + +```js +assert( + (() => { + goStore(); + return ( + button1.innerText === 'Buy 10 health (10 gold)' && + button2.innerText === 'Buy weapon (30 gold)' && + button3.innerText === 'Go to town square' + ); + })() +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-022.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-022.md new file mode 100644 index 0000000000..c2224e8d86 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-022.md @@ -0,0 +1,189 @@ +--- +id: 5d66093c4bab337fbb433885 +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Now that the text on the buttons have changed, the `onclick` properties on the buttons should change. Inside the goStore function, update the `onclick` property of all three buttons. The new functions should be `buyHealth`, `buyWeapon`, and `goTown`. If you have trouble, look at how the buttons were initialized. + +# --hints-- + +See description above for instructions. + +```js +assert( + goStore.toString().match(/button1\.onclick\s*\=\s*buyHealth\;?/) && + goStore.toString().match(/button2\.onclick\s*\=\s*buyWeapon\;?/) && + goStore.toString().match(/button3\.onclick\s*\=\s*goTown\;?/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-023.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-023.md new file mode 100644 index 0000000000..0cc6d8545e --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-023.md @@ -0,0 +1,193 @@ +--- +id: 5d660a32e0696bdec46938d5 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Right after the `onclick` properties are updated, change the `innerText` property of `text` to "You enter the store." + +# --hints-- + +See description above for instructions. + +```js +assert( + goStore + .toString() + .match(/text\.innerText\s*\=\s*[\'\"\`]You enter the store\.?[\'\"\`]/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-024.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-024.md new file mode 100644 index 0000000000..bd6615d841 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-024.md @@ -0,0 +1,203 @@ +--- +id: 5d6616d8e0696bdec46938d6 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +At the end of the current code, add three new empty functions called `buyHealth`, `buyWeapon`, and `goTown`. After this step, you can test out the game by clicking the "Go to store" button. + +# --hints-- + +See description above for instructions. + +```js +assert( + typeof buyHealth === 'function' && + typeof buyWeapon === 'function' && + typeof goTown === 'function' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-025.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-025.md new file mode 100644 index 0000000000..6596565b2b --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-025.md @@ -0,0 +1,228 @@ +--- +id: 5d661814e0696bdec46938d7 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Move the `goTown` function to above the `goStore` function. Then, copy and paste the contents of the `goStore` function into the `goTown` function. + +# --hints-- + +See description above for instructions. + +```js +assert( + (() => { + goTown(); + return ( + button1.innerText === 'Buy 10 health (10 gold)' && + button2.innerText === 'Buy weapon (30 gold)' && + button3.innerText === 'Go to town square' && + text.innerText === 'You enter the store.' && + goTown.toString().match(/button1\.onclick\s*\=\s*buyHealth\;?/) && + goTown.toString().match(/button2\.onclick\s*\=\s*buyWeapon\;?/) && + goTown.toString().match(/button3\.onclick\s*\=\s*goTown\;?/) + ); + })() +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-026.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-026.md new file mode 100644 index 0000000000..4af137caa1 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-026.md @@ -0,0 +1,230 @@ +--- +id: 5d66198de0696bdec46938d8 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Add double quote marks around the word "Store" in the line "You see a sign that says Store." Before each quotation mark add a `\` to signal that the following quote is not the end of the string, but should instead appear inside the string. This is called escaping. + +# --hints-- + +See description above for instructions. + +```js +assert( + (() => { + goTown(); + return ( + text.innerText === + 'You are in the town square. You see a sign that says "Store".' + ); + })() +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-027.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-027.md new file mode 100644 index 0000000000..6c779d3723 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-027.md @@ -0,0 +1,235 @@ +--- +id: 5d661bc6e0696bdec46938d9 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +There is repetition in the `goTown` and `goStore` functions. When you have repetition in code, it is a sign that you need a new function. + +Above the `goTown` function, create an empty function called `update`. This time the function should take a parameter named `location` so data can be passed into the function when it is called. + +Here is an example of a function named `testFun` that accepts a parameter named `param`: + +```js +function testFun(param) { + console.log(param); +} +``` + +# --hints-- + +See description above for instructions. + +```js +assert(update.toString().match(/function update\(\s*location\)\s*\{\s*\}/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-028.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-028.md new file mode 100644 index 0000000000..4e208f9853 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-028.md @@ -0,0 +1,230 @@ +--- +id: 5d6653d5e0696bdec46938da +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Below the list of `const` variables, create a new `const` variable called `locations`. Set it to equal an empty array. This will be used to store all the data for the locations in the game. + +# --hints-- + +See description above for instructions. + +```js +assert(Array.isArray(locations) && locations.length === 0); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-029.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-029.md new file mode 100644 index 0000000000..e501b60f84 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-029.md @@ -0,0 +1,236 @@ +--- +id: 5d665983e0696bdec46938dc +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Arrays can store any data type, including objects. Objects are similar to arrays, except that instead of using indexes to access and modify their data, you access the data in objects through what are called properties. + +Inside the `locations` array add an empty object using curly braces. + +Here is an example of an array named `arr` with an empty object inside: `const arr = [{}];` + +# --hints-- + +See description above for instructions. + +```js +assert.deepStrictEqual(JSON.stringify(locations), `[{}]`); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-030.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-030.md new file mode 100644 index 0000000000..8cd3d63ced --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-030.md @@ -0,0 +1,246 @@ +--- +id: 5d674fd9e0696bdec46938dd +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Inside the object you just added, create a property called `name` with the value of "town square". + +For example, here is an example of an array with an object inside that has a property called `name` with a value of "Quincy Larson" (new lines are used only for the purpose of making the code more readable): + +```js +const arr = [ + { + name: "Quincy Larson" + } +] +``` + +# --hints-- + +See description above for instructions. + +```js +assert(locations[0].name === 'town square'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-031.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-031.md new file mode 100644 index 0000000000..37b8fed5e5 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-031.md @@ -0,0 +1,252 @@ +--- +id: 5d6752e3e0696bdec46938de +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +After the `name` property put a comma. On the next line add a property named `"button text"` that has a value of an empty array. Since the property name has more than one word, there must be quotes around it. + +Here is an example: + +```js +const arr = [ + { + name: "Quincy Larson", + "favorite colors": [] + } +] +``` + +# --hints-- + +See description above for instructions. + +```js +assert.deepStrictEqual(locations[0]['button text'], []); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-032.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-032.md new file mode 100644 index 0000000000..37eb25af4a --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-032.md @@ -0,0 +1,248 @@ +--- +id: 5d6755fce0696bdec46938df +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Inside the `"button text"` array, add three string elements. Use the three stings assigned to the buttons inside the `goTown` function. + +Here is an example array with three strings: `const arr = ["one", "two", "three"];`. + +# --hints-- + +See description above for instructions. + +```js +assert.deepStrictEqual(locations[0]['button text'], [ + 'Go to store', + 'Go to cave', + 'Fight dragon' +]); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-033.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-033.md new file mode 100644 index 0000000000..11c527fbb7 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-033.md @@ -0,0 +1,247 @@ +--- +id: 5d675726e0696bdec46938e0 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Add another property in the object with the name `"button functions"`. The value should be an array containing the three `onclick` functions from the `goTown` function. It should look like this: `[goStore, goCave, fightDragon]` + +# --hints-- + +See description above for instructions. + +```js +assert.deepStrictEqual(locations[0]['button functions'], [ + goStore, + goCave, + fightDragon +]); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-034.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-034.md new file mode 100644 index 0000000000..9ffcf992e0 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-034.md @@ -0,0 +1,248 @@ +--- +id: 5d678366e0696bdec46938e1 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Add one final property to the object named `text`. The value should be the final text from the `goTown` function. + +# --hints-- + +See description above for instructions. + +```js +assert( + locations[0].text === + 'You are in the town square. You see a sign that says "Store."' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-035.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-035.md new file mode 100644 index 0000000000..8fde46b3d6 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-035.md @@ -0,0 +1,261 @@ +--- +id: 5d67845ee0696bdec46938e2 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +The `locations` array currently has one element which is an object. Within the array, and after the object's final curly brace, add a comma. On the next line within the array, add another object with all the same properties as the first object. Keep the property names the same on the second object, but change all the property values to the information from the `goStore` function. Also, set the `name` property to `store`. + +# --hints-- + +See description above for instructions. + +```js +assert.deepStrictEqual(locations[1], { + 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.' +}); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-036.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-036.md new file mode 100644 index 0000000000..905dbd0150 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-036.md @@ -0,0 +1,267 @@ +--- +id: 5d67880ee0696bdec46938e3 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Now we are can consolidate the code inside the `goTown` and `goStore` functions. Copy the code inside the `goTown` function and paste it in the `update` function. Then delete all the code inside the `goTown` and `goStore` functions. + +# --hints-- + +See description above for instructions. + +```js +assert( + (() => { + update(); + return ( + goTown.toString() === 'function goTown() {}' && + goStore.toString() === 'function goStore() {}' && + button1.innerText === 'Go to store' && + button2.innerText === 'Go to cave' && + button3.innerText === 'Fight dragon' && + text.innerText === + 'You are in the town square. You see a sign that says "Store".' && + update.toString().match(/button1\.onclick\s*\=\s*goStore\;?/) && + update.toString().match(/button2\.onclick\s*\=\s*goCave\;?/) && + update.toString().match(/button3\.onclick\s*\=\s*fightDragon\;?/) + ); + })() +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-037.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-037.md new file mode 100644 index 0000000000..7c50ee0efa --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-037.md @@ -0,0 +1,247 @@ +--- +id: 5d67ad3de0696bdec46938e4 +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +Instead of assigning the `innerText` and `onClick` properties to specific strings and functions like it does now, the `update` function will use data from the `location` that is passed into it. First, data needs to be passed into the `update` function. Inside the `goTown` function, call the `update` function. + +Here is how you would call a function named `exampleFunction`: `exampleFunction();` + +# --hints-- + +See description above for instructions. + +```js +assert(goTown.toString().match(/update\(\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-038.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-038.md new file mode 100644 index 0000000000..77192c5840 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-038.md @@ -0,0 +1,248 @@ +--- +id: 5d67ae95e0696bdec46938e5 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Now change the code you just wrote to call the `update` function so the `locations` array is passed in as an argument. + +Here is how you would call a function named `exampleFunction` with an argument called `arg`: `exampleFunction(arg);` + +# --hints-- + +See description above for instructions. + +```js +assert(goTown.toString().match(/update\(locations\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-039.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-039.md new file mode 100644 index 0000000000..6fd6638a0b --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-039.md @@ -0,0 +1,246 @@ +--- +id: 5d67b284e0696bdec46938e6 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +The `locations` array contains two locations: the town square and store. Currently the entire array with both locations is being passed in to the update function. Pass in only the first element of the locations array by adding `[0]` at the end of the name of the array. For example, `exampleFunction(arg[0]);` + +# --hints-- + +See description above for instructions. + +```js +assert(goTown.toString().match(/update\(locations\[0\]\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-040.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-040.md new file mode 100644 index 0000000000..0a8aad189b --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-040.md @@ -0,0 +1,252 @@ +--- +id: 5d67b945e0696bdec46938e7 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +Now that the `goTown` function calls the `update` function with the first element of the `locations` array, it is time to use that location information to update the `innerText` and `onclick` properties. + +Inside the `update` function, change `button1.innerText` to equal `location["button text"]`. That line gets the `"button text"` property of the `location` that was passed into the `update` function\`. + +# --hints-- + +See description above for instructions. + +```js +assert( + update + .toString() + .match(/button1\.innerText\s*\=\s*location\[[\'\"\`]button text[\'\"\`]\]/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-041.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-041.md new file mode 100644 index 0000000000..7a4a8f05a6 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-041.md @@ -0,0 +1,252 @@ +--- +id: 5d68c3b1e0696bdec46938e8 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +`location["button text"]` is an array with three elements. Use only the first element of the array by adding `[0]` at the end. + +# --hints-- + +See description above for instructions. + +```js +assert( + update + .toString() + .match( + /button1\.innerText\s*\=\s*location\[[\'\"\`]button text[\'\"\`]\]\[0\]/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-042.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-042.md new file mode 100644 index 0000000000..8dde5b4513 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-042.md @@ -0,0 +1,257 @@ +--- +id: 5d68c51ee0696bdec46938e9 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Now update the `innerText` of the other two buttons. They should be set to equal the same thing as the first button, except the number inside the brackets should be 1 for the second button and 2 for the third button. + +# --hints-- + +See description above for instructions. + +```js +assert( + update + .toString() + .match( + /button2\.innerText\s*\=\s*location\[[\'\"\`]button text[\'\"\`]\]\[1\]/ + ) && + update + .toString() + .match( + /button3\.innerText\s*\=\s*location\[[\'\"\`]button text[\'\"\`]\]\[2\]/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-043.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-043.md new file mode 100644 index 0000000000..8f5370004f --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-043.md @@ -0,0 +1,262 @@ +--- +id: 5d68c5efe0696bdec46938ea +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Now update the three `onclick` properties. These will look very similar to the `innerText` properties, except instead of using the `"button text"` part of the `location`, use `"button functions"`. + +# --hints-- + +See description above for instructions. + +```js +assert( + update + .toString() + .match( + /button1\.onclick\s*\=\s*location\[[\'\"\`]button functions[\'\"\`]\]\[0\]/ + ) && + update + .toString() + .match( + /button2\.onclick\s*\=\s*location\[[\'\"\`]button functions[\'\"\`]\]\[1\]/ + ) && + update + .toString() + .match( + /button3\.onclick\s*\=\s*location\[[\'\"\`]button functions[\'\"\`]\]\[2\]/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-044.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-044.md new file mode 100644 index 0000000000..d29a7b316e --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-044.md @@ -0,0 +1,248 @@ +--- +id: 5d68c758e0696bdec46938eb +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Finally, update `text.innerText` to equal the `text` from the location object. + +So far we have been accessing properties of the location object using bracket notation. This time use dot notation. Here is how to access a `name` property of an object called `obj` using dot notation: `obj.name`. + +# --hints-- + +See description above for instructions. + +```js +assert(update.toString().match(/text\.innerText\s*\=\s*location\.text\;?/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-045.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-045.md new file mode 100644 index 0000000000..9468f0a7dd --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-045.md @@ -0,0 +1,247 @@ +--- +id: 5d68c947e0696bdec46938ec +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Now update the `goStore` function. The code should look just like the code inside the `goTown` function, except the number 0 should be changed to 1. After this step would be a good time to try out the game so far. You should be able to move between the store and the town square. + +# --hints-- + +See description above for instructions. + +```js +assert(goStore.toString().match(/update\(locations\[1\]\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-046.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-046.md new file mode 100644 index 0000000000..3b2f639d65 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-046.md @@ -0,0 +1,266 @@ +--- +id: 5d68ca40e0696bdec46938ed +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Add a third object in the `locations` array with the same properties as the other two objects. + +Set `name` to "cave". Set the elements in the `"button text"` array to \["Fight slime", "Fight fanged beast", and "Go to town square". Set te elements in the `"button functions"` array to be "fightSlime", "fightBeast", and "goTown". Set the value of the `text` property to "You enter the cave. You see some monsters.". + +# --hints-- + +See description above for instructions. + +```js +assert.deepStrictEqual(locations[2], { + 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.' +}); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+ +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-047.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-047.md new file mode 100644 index 0000000000..1091cf5c3a --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-047.md @@ -0,0 +1,265 @@ +--- +id: 5d68d3f7e0696bdec46938ee +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Now update the `goCave` function using the pattern from `goTown` and `goCave`. + +# --hints-- + +See description above for instructions. + +```js +assert(goCave.toString().match(/update\(locations\[2\]\)\;?/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+ +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-048.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-048.md new file mode 100644 index 0000000000..cb840ef9dd --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-048.md @@ -0,0 +1,266 @@ +--- +id: 5d68d4fde0696bdec46938ef +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Create two more empty functions: `fightSlime` and `fightBeast`. + +# --hints-- + +See description above for instructions. + +```js +assert(typeof fightSlime === 'function' && typeof fightBeast === 'function'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-049.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-049.md new file mode 100644 index 0000000000..c88c87bf6a --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-049.md @@ -0,0 +1,275 @@ +--- +id: 5d68d631e0696bdec46938f0 +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Now that the store and cave locations are complete, we'll code the actions at those locations. Inside the `buyHealth` function, set `gold` to equal `gold` minus 10. + +For example here is how you would set set `num` to equal 5 less than `num`: `num = num - 5;`. + +# --hints-- + +See description above for instructions. + +```js +buyHealth(), assert(gold === 40); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-050.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-050.md new file mode 100644 index 0000000000..8ad750f1b9 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-050.md @@ -0,0 +1,275 @@ +--- +id: 5d68dbf7e0696bdec46938f1 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +After gold is subtracted, add ten to health. + +# --hints-- + +See description above for instructions. + +```js +buyHealth(), assert(gold === 40 && health === 110); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-051.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-051.md new file mode 100644 index 0000000000..a65269467f --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-051.md @@ -0,0 +1,281 @@ +--- +id: 5d6904b6e0696bdec46938f2 +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +There is a shorthand way to add or subtract from a variable called compound assignment. The long way to add to a variable is `num = num + 5`. The shorthand way is `num += 5`. It works the same way with subtraction. + +Update both lines inside the `buyHealth` function to use compound assignment. + +# --hints-- + +See description above for instructions. + +```js +assert( + buyHealth.toString().match(/gold\s*\-\=\s*10\;?/) && + buyHealth.toString().match(/health\s*\+\=\s*10\;?/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-052.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-052.md new file mode 100644 index 0000000000..157a580c41 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-052.md @@ -0,0 +1,281 @@ +--- +id: 5d6905ace0696bdec46938f3 +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Now that the gold and health variables have been updated, we need to update the values displayed on the screen. Inside the `buyHealth` function, add the line `goldText.innerText = gold;`. Then use the same pattern to update `healthText`. + +# --hints-- + +See description above for instructions. + +```js +assert( + buyHealth.toString().match(/goldText\.innerText\s*\=\s*gold\;?/) && + buyHealth.toString().match(/healthText.innerText\s*\=\s*health\;?/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-053.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-053.md new file mode 100644 index 0000000000..9c29275836 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-053.md @@ -0,0 +1,302 @@ +--- +id: 5d6f6bfc7c812010bf3327cc +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +What if the player doesn't have enough gold to buy health? Put all the code in the `buyHealth` function inside an `if` statement. Here is an example of an `if` statement inside a function: + +```js +function checkMoney() { + if (condition) { + console.log("You have money!"); + } +} +``` + +Note: For now you should use the word "condition" inside the `if` statement but we'll be changing that next. + +# --hints-- + +See description above for instructions. + +```js +assert( + buyHealth + .toString() + .match( + /if\s*\(\s*condition\s*\)\s*\{\s*(gold|health|goldText|healthText)/ + ) && + buyHealth.toString().match(/gold\s*\-\=\s*10\;?/) && + buyHealth.toString().match(/health\s*\+\=\s*10\;?/) && + buyHealth.toString().match(/goldText\.innerText\s*\=\s*gold\;?/) && + buyHealth.toString().match(/healthText\.innerText\s*\=\s*health\;?/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-054.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-054.md new file mode 100644 index 0000000000..716a03a30f --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-054.md @@ -0,0 +1,292 @@ +--- +id: 5d6f6e3c7c812010bf3327cd +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +The word "condition" inside the if statement is just a placeholder. Change the condition to check if the amount of gold the player has 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) { + console.log("Num is greater than or equal to five!"); +} +``` + +# --hints-- + +See description above for instructions. + +```js +assert(buyHealth.toString().match(/if\s*\(\s*gold\s*\>\=\s*10\s*\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-055.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-055.md new file mode 100644 index 0000000000..defcad3336 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-055.md @@ -0,0 +1,295 @@ +--- +id: 5d6f6f747c812010bf3327ce +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Now when a player tries to buy health it will only work if they have enough money. If the player does not have enough money, nothing will happen. Add an `else` statement where you can put code to run if a player dees not have enough money. + +Here is an example of an empty `else` statement: + +```js +if (num >= 5) { + console.log("Num is greater than or equal to five!"); +} else { +} +``` + +# --hints-- + +See description above for instructions. + +```js +assert(buyHealth.toString().match(/\}\s*else\s*\{\s*\}/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-056.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-056.md new file mode 100644 index 0000000000..451150855c --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-056.md @@ -0,0 +1,290 @@ +--- +id: 5d6f70937c812010bf3327cf +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Inside the `else` statement, set `text.innerText` to equal "You do not have enough gold to buy health." + +# --hints-- + +See description above for instructions. + +```js +(gold = 5), + buyHealth(), + assert(text.innerText === 'You do not have enough gold to buy health.'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-057.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-057.md new file mode 100644 index 0000000000..c840db886d --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-057.md @@ -0,0 +1,290 @@ +--- +id: 5d6f72657c812010bf3327d0 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Before we write the code for the `buyWeapon` function, use `const` to create a `weapons` variable right above the `locations` array. Set it to equal an empty array. + +# --hints-- + +See description above for instructions. + +```js +assert.deepStrictEqual(weapons, []); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-058.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-058.md new file mode 100644 index 0000000000..568304eba7 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-058.md @@ -0,0 +1,314 @@ +--- +id: 5d6f736b7c812010bf3327d2 +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Just like in the `locations` array, all the elements in `weapons` will be objects. Add four objects to the `weapons` array, each with two properties: `name` and `power`. The first should be the `name` "stick" with `power` set to 5. Then, "dagger" with set `power` to 30. Next, "claw hammer" with a `power` of 50. Finally, "sword" with a `power` of 100. + +# --hints-- + +See description above for instructions. + +```js +assert.deepStrictEqual(weapons, [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-059.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-059.md new file mode 100644 index 0000000000..2ec39a7f25 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-059.md @@ -0,0 +1,329 @@ +--- +id: 5d6f776c7c812010bf3327d3 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +Inside the `buyWeapon` function, add an `if` statement to check if gold is greater than or equal to 30. + +# --hints-- + +See description above for instructions. + +```js +assert(buyWeapon.toString().match(/if\s*\(\s*gold\s*\>\=\s*30\)\s*\{\s*\}/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-060.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-060.md new file mode 100644 index 0000000000..3be3e1091f --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-060.md @@ -0,0 +1,332 @@ +--- +id: 5d6f785f7c812010bf3327d4 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Similar to in the `buyHealth` function, set `gold` to equal 30 less than its current value. + +# --hints-- + +See description above for instructions. + +```js +(gold = 50), buyWeapon(), assert(gold === 20); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-061.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-061.md new file mode 100644 index 0000000000..fc1252dc9b --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-061.md @@ -0,0 +1,333 @@ +--- +id: 5d6f79667c812010bf3327d6 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +The value of `currentWeapon` 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` since the user is buying the next weapon in the `weapons` array. + +# --hints-- + +See description above for instructions. + +```js +(currentWeapon = 0), buyWeapon(), assert(currentWeapon === 1); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-062.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-062.md new file mode 100644 index 0000000000..b52630d4eb --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-062.md @@ -0,0 +1,342 @@ +--- +id: 5d6f7b917c812010bf3327d7 +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +You can easily increment or add one to a variable with the `++` operator. All three of these statements add one to a number: + +```js +num = num + 1; +num += 1; +num++; +``` + +Change the line `currentWeapon += 1;` to use the `++` operator. + +# --hints-- + +See description above for instructions. + +```js +assert(buyWeapon.toString().match(/currentWeapon\s*\+\+\;?/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-063.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-063.md new file mode 100644 index 0000000000..bda92f3098 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-063.md @@ -0,0 +1,340 @@ +--- +id: 5d6f82da7c812010bf3327d8 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Now update the `innerText` property of `goldText` and `text`. `text` should equal "You now have a new weapon.". + +# --hints-- + +See description above for instructions. + +```js +buyWeapon(), + assert( + goldText.innerText === '20' && + text.innerText === 'You now have a new weapon.' + ); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-064.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-064.md new file mode 100644 index 0000000000..d1890d71eb --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-064.md @@ -0,0 +1,339 @@ +--- +id: 5d6f919f7c812010bf3327d9 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Let's 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 `newWeapon` to equal `weapons`. + +# --hints-- + +See description above for instructions. + +```js +assert(/let\s*newWeapon\s*\=\s*weapons\;?/.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-065.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-065.md new file mode 100644 index 0000000000..731001d548 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-065.md @@ -0,0 +1,340 @@ +--- +id: 5d6f94347c812010bf3327da +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Right after the word `weapons` (with no space between), add brackets `[]`. In between the brackets put `currentWeapon`, which is the index number of the weapon the player just bought. + +# --hints-- + +See description above for instructions. + +```js +assert(/let\s*newWeapon\s*\=\s*weapons\s?\[currentWeapon\]\;?/.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-066.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-066.md new file mode 100644 index 0000000000..7a252de6cc --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-066.md @@ -0,0 +1,342 @@ +--- +id: 5d6f96747c812010bf3327db +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Get just the name property of the current weapon by adding `.name` at the end of `weapons[currentWeapon]` (don't use a space). + +# --hints-- + +See description above for instructions. + +```js +assert( + /let\s*newWeapon\s*\=\s*weapons\s?\[currentWeapon\]\.name\;?/.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-067.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-067.md new file mode 100644 index 0000000000..ccdab9bfc9 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-067.md @@ -0,0 +1,351 @@ +--- +id: 5d6f98247c812010bf3327dc +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +You can insert variables into a string with the concatenation (`+`) operator. Update the "You now have a new weapon." string so it says "You now have a " and then lists the name of the new weapon. Make sure to add a period at the end of the sentence. + +Here is an example that creates the string "Hello, our name is freeCodeCamp.": + +```js +let ourName = "freeCodeCamp"; +let ourStr = "Hello, our name is " + ourName + "."; +``` + +# --hints-- + +See description above for instructions. + +```js +assert( + buyWeapon + .toString() + .match(/[\'\"\`]You now have a [\'\"\`]\s*\+\s*newWeapon\;?/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-068.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-068.md new file mode 100644 index 0000000000..5b3355b0e9 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-068.md @@ -0,0 +1,348 @@ +--- +id: 5d6f9a4c7c812010bf3327dd +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +Way back at the beginning you created the `inventory` array. Push the `newWeapon` onto the end of the `inventory` array. Here is an example of pushing onto an array: + +```js +let arr = ["first"]; +let next = "second"; +arr.push(next); +// arr now equals ["first", "second"] +``` + +# --hints-- + +See description above for instructions. + +```js +buyWeapon(), assert.deepStrictEqual(inventory, ['stick', 'dagger']); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-069.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-069.md new file mode 100644 index 0000000000..b54c6df1dd --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-069.md @@ -0,0 +1,349 @@ +--- +id: 5d70850e066dac7142a6d797 +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Up to this point, anytime `text.innerText` was updated, the old text was erased. This time, use the `+=` operator instead of 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 end). + +# --hints-- + +See description above for instructions. + +```js +assert( + buyWeapon + .toString() + .match( + /text\.innerText\s*\+\=\s*[\'\"\`] In your inventory you have\: [\'\"\`]\;?/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-070.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-070.md new file mode 100644 index 0000000000..0e2ac994f0 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-070.md @@ -0,0 +1,350 @@ +--- +id: 5d70862e066dac7142a6d798 +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +At the end of the string you just added after the ending quote mark, add `+ inventory` to add the contents of the inventory to the end of the string. + +# --hints-- + +See description above for instructions. + +```js +assert( + buyWeapon + .toString() + .match( + /text\.innerText\s*\+\=\s*[\'\"\`] In your inventory you have\: [\'\"\`]\s*\+\s*inventory\;?/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-071.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-071.md new file mode 100644 index 0000000000..babc6b929d --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-071.md @@ -0,0 +1,352 @@ +--- +id: 5d7086d4066dac7142a6d799 +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +At the end of the `if` statement inside the `buyWeapon` function, add an `else` statement. Inside the `else` statement, set `text.innerText` to equal "You do not have enough gold to buy a weapon.". + +# --hints-- + +See description above for instructions. + +```js +assert( + buyWeapon + .toString() + .match( + /\}\s*else\s*\{\s*text\.innerText\s*\=\s*[\'\"\`]You do not have enough gold to buy a weapon\.?[\'\"\`]\;?\s*\}/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-072.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-072.md new file mode 100644 index 0000000000..b37944ae9c --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-072.md @@ -0,0 +1,361 @@ +--- +id: 5d7088d2066dac7142a6d79a +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Once a player has the best weapon, they can't buy another one. Wrap all the code in the `buyWeapon` function inside another `if` statement. The condition should check if `currentWeapon` is less than 3 (the index of the last weapon). + +# --hints-- + +See description above for instructions. + +```js +assert( + buyWeapon + .toString() + .match( + /if\s*\(\s*currentWeapon\s*\<\s*3\s*\)\s*\{\s*if\s*\(\s*gold\s*\>\=\s*30\s*\)\s*\{/ + ) && + buyWeapon + .toString() + .match( + /\}\s*else\s*\{\s*text\.innerText\s*\=\s*[\'\"\`]You do not have enough gold to buy a weapon\.?[\'\"\`]\;?\s*\}\s*\}/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-073.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-073.md new file mode 100644 index 0000000000..433ce22270 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-073.md @@ -0,0 +1,358 @@ +--- +id: 5d708ab5066dac7142a6d79b +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +At some point in the future, you may want to add more weapons. Instead of checking if `currentWeapon` is less than three, check if `currentWeapon` is less than the length of the `weapons` array. For example, here is how you would get the length of an array called `arr`: `arr.length`. + +# --hints-- + +See description above for instructions. + +```js +assert( + buyWeapon + .toString() + .match( + /if\s*\(\s*currentWeapon\s*\<\s*weapons\.length\s*\)\s*\{\s*if\s*\(\s*gold\s*\>\=\s*30\s*\)\s*\{/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-074.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-074.md new file mode 100644 index 0000000000..7e8fcaa74d --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-074.md @@ -0,0 +1,358 @@ +--- +id: 5d708be9066dac7142a6d79c +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +We have to fix an error. The `currentWeapon` variable is the array index. Array indexing starts at zero. The index of the last element in an array is one less than the length of the array. In the `if` condition you are working on, change `weapons.length` to `weapons.length - 1`. + +# --hints-- + +See description above for instructions. + +```js +assert( + buyWeapon + .toString() + .match( + /if\s*\(\s*currentWeapon\s*\<\s*weapons\.length\s*\-\s*1\s*\)\s*\{\s*if\s*\(\s*gold\s*\>\=\s*30\s*\)\s*\{/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-075.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-075.md new file mode 100644 index 0000000000..9848920007 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-075.md @@ -0,0 +1,360 @@ +--- +id: 5d708c9a066dac7142a6d79d +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Add an `else` statement on the end of the outer `if` statement. Inside the `else` statement, set `text.innerText` to "You already have the most powerful weapon!". + +# --hints-- + +See description above for instructions. + +```js +assert( + buyWeapon + .toString() + .match( + /\}\s*else\s*\{\s*text\.innerText\s*\=\s*[\'\"\`]You do not have enough gold to buy a weapon\.?[\'\"\`]\;?\s*\}\s*\}\s*else\s*\{\s*text\.innerText\s*\=\s*[\'\"\`]You already have the most powerful weapon\![\'\"\`]\;?\s*\}/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-076.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-076.md new file mode 100644 index 0000000000..3cff5bdd08 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-076.md @@ -0,0 +1,364 @@ +--- +id: 5d708dd7066dac7142a6d79e +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Once a player has the most powerful weapon, we'll give them the ability to sell their older weapons back. In the else statement, set `button2.innerText` to equal "Sell weapon for 15 gold". Also, set `button2.onclick` to the function name `sellWeapon`. + +# --hints-- + +See description above for instructions. + +```js +assert( + buyWeapon + .toString() + .match( + /else\s*\{\s*text\.innerText\s*\=\s*[\'\"\`]You already have the most powerful weapon\![\'\"\`]\;?\s*button2\.innerText\s*\=\s*[\'\"\`]Sell weapon for 15 gold\.?[\'\"\`]\;?\s*button2\.onclick\s*\=\s*sellWeapon\;?\s*\}/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-077.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-077.md new file mode 100644 index 0000000000..1059b13bbb --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-077.md @@ -0,0 +1,363 @@ +--- +id: 5d708fae066dac7142a6d79f +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +After the `buyWeapon` function, create an empty function called `sellWeapon`. + +# --hints-- + +See description above for instructions. + +```js +assert(typeof sellWeapon === 'function'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-078.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-078.md new file mode 100644 index 0000000000..588c67330a --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-078.md @@ -0,0 +1,373 @@ +--- +id: 5d709664066dac7142a6d7a0 +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --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 one. + +# --hints-- + +See description above for instructions. + +```js +assert( + sellWeapon + .toString() + .match(/if\s*\(\s*inventory\.length\s*\>\s*1\s*\)\s*\{\s*\}/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-079.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-079.md new file mode 100644 index 0000000000..2ced20d3e9 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-079.md @@ -0,0 +1,386 @@ +--- +id: 5d709bbc066dac7142a6d7a2 +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +Inside the `if` statement, set `gold` equal to 15 more than its current value. Also, update `goldText.innerText` to the new value. + +# --hints-- + +See description above for instructions. + +```js +assert( + (() => { + gold = 50; + inventory = ['stick']; + sellWeapon(); + return gold === 50 && goldText.innerText === '50'; + })() && + (() => { + gold = 50; + inventory = ['stick', 'dagger']; + sellWeapon(); + return gold === 65 && goldText.innerText === '65'; + })() +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-080.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-080.md new file mode 100644 index 0000000000..3ded9ccae9 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-080.md @@ -0,0 +1,379 @@ +--- +id: 5d71b58b848f6914ab89897d +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Use the `let` keyword to create a variable named `currentWeapon`. Don't set it equal to anything yet. Notice that we already have a `currentWeapon` variable from earlier. Since the `let` keyword is used instead of `var`, this new version of `currentWeapon` is scoped only to this `if` statement. At the close of the `if` statement, the old version of `currentWeapon` will be used again. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.match( + /if\s*\(\s*inventory\.length\s*\>\s*1\s*\)\s*\{\s*(.\s*)*let\s*currentWeapon\;?/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-081.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-081.md new file mode 100644 index 0000000000..1b72cd17ca --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-081.md @@ -0,0 +1,388 @@ +--- +id: 5d71bdca848f6914ab89897e +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +Use the `shift()` method on the `inventory` array to remove the first element and return that removed element. Set `currentWeapon` to equal returned element. + +Here is an example: + +```js +let arr = ["one", "two", "three"]; +let firstElement = arr.shift(); +// arr now equals ["two", "three"] and firstElement now equals "one" +``` + +# --hints-- + +See description above for instructions. + +```js +assert( + code.match( + /if\s*\(\s*inventory\.length\s*\>\s*1\s*\)\s*\{\s*(.\s*)*let\s*currentWeapon\s*\=\s*inventory\.shift\(\s*\)\;?/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-082.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-082.md new file mode 100644 index 0000000000..8118625971 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-082.md @@ -0,0 +1,380 @@ +--- +id: 5d71bfdf848f6914ab89897f +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +After the line that creates the `currentWeapon` variable, set `text.innerText` to equal `"You sold a " + currentWeapon + "."` + +# --hints-- + +See description above for instructions. + +```js +(inventory = ['potato', 'carrot']), + sellWeapon(), + assert(text.innerText === 'You sold a potato.' && inventory[0] === 'carrot'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-083.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-083.md new file mode 100644 index 0000000000..88ff205e6c --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-083.md @@ -0,0 +1,384 @@ +--- +id: 5d71c20f848f6914ab898980 +title: Step 83 +challengeType: 0 +dashedName: step-83 +--- + +# --description-- + +Now use the `+=` operator to add to `text.innerText`. Add the string " In your inventory you have: " (with spaces at the beginning and end). Then add the `inventory` variable to the end of the string. + +# --hints-- + +See description above for instructions. + +```js +(inventory = ['potato', 'carrot']), + sellWeapon(), + assert( + text.innerText === 'You sold a potato. In your inventory you have: carrot' + ); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-084.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-084.md new file mode 100644 index 0000000000..be2e8cdefe --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-084.md @@ -0,0 +1,387 @@ +--- +id: 5d71c80e848f6914ab898981 +title: Step 84 +challengeType: 0 +dashedName: step-84 +--- + +# --description-- + +Add code so that if the length of the inventory is NOT more than one, then a text message appears that says "Don't sell your only weapon!". + +# --hints-- + +See description above for instructions. + +```js +(inventory = ['potato']), + sellWeapon(), + assert( + inventory[0] === 'potato' && + text.innerText === "Don't sell your only weapon!" + ); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-085.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-085.md new file mode 100644 index 0000000000..29a6280c7e --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-085.md @@ -0,0 +1,408 @@ +--- +id: 5d71cab4f27e5122af9f1178 +title: Step 85 +challengeType: 0 +dashedName: step-85 +--- + +# --description-- + +Now we'll start working on fighting monsters. Organize your code by moving the `fightDragon` function to the bottom of the code near the other fight functions. + +Below where the `weapons` array is defined, define a `monsters` array. Set the contents of the `monsters` array to: `{ name: "slime", level: 2, health: 15 }, {name: "fanged beast", level: 8, health: 60 }, { name: "dragon", level: 20, health: 300 }`. Space out the code similar to the `weapons` array so that it is easier to read. + +# --hints-- + +See description above for instructions. + +```js +assert.deepStrictEqual(monsters, [ + { name: 'slime', level: 2, health: 15 }, + { name: 'fanged beast', level: 8, health: 60 }, + { name: 'dragon', level: 20, health: 300 } +]); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-086.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-086.md new file mode 100644 index 0000000000..76ab742e7e --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-086.md @@ -0,0 +1,423 @@ +--- +id: 5d71ea30f27e5122af9f1179 +title: Step 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +Fighting each type of monster will be very similar so all three fighting functions will call a function named `goFight`. At the end of the code, add an empty function named `goFight`. + +# --hints-- + +See description above for instructions. + +```js +assert(typeof goFight === 'function'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-087.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-087.md new file mode 100644 index 0000000000..1e3795ea67 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-087.md @@ -0,0 +1,430 @@ +--- +id: 5d71eb0bf27e5122af9f117a +title: Step 87 +challengeType: 0 +dashedName: step-87 +--- + +# --description-- + +Inside the `fightSlime` function, set `fighting` to equal 0 (which is the index of the slime in the `monsters` array). On the next line, call the `goFight` function. + +As a reminder, here is how you would call a function named `myFunc`: `myFunc();`. + +# --hints-- + +See description above for instructions. + +```js +assert(fightSlime.toString().match(/fighting\s*\=\s*0\;?\s*goFight\(\s*\)\;?/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-088.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-088.md new file mode 100644 index 0000000000..93cc8a7f20 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-088.md @@ -0,0 +1,436 @@ +--- +id: 5d71f787e39bedcf8f0998ff +title: Step 88 +challengeType: 0 +dashedName: step-88 +--- + +# --description-- + +Write the code for the `fightBeast` and `fightDragon` functions, using the `fightSlime` function as an example. Make sure to delete the line that is already in the `fightDragon` function. + +# --hints-- + +See description above for instructions. + +```js +assert( + fightBeast.toString().match(/fighting\s*\=\s*1\;?\s*goFight\(\s*\)\;?/) && + fightDragon.toString().match(/fighting\s*\=\s*2\;?\s*goFight\(\s*\)\;?/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-089.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-089.md new file mode 100644 index 0000000000..01570e01fd --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-089.md @@ -0,0 +1,452 @@ +--- +id: 5d71ed88f27e5122af9f117b +title: Step 89 +challengeType: 0 +dashedName: step-89 +--- + +# --description-- + +Add a new object in the `locations` array with all the same properties as the other objects in the array. Set `name` to "fight". Set `"button text"` to `["Attack", "Dodge", "Run"]`. Set `"button functions"` to `[attack, dodge, goTown]`. And set `text` to "You are fighting a monster.". + +# --hints-- + +See description above for instructions. + +```js +assert.deepStrictEqual(locations[3], { + name: 'fight', + 'button text': ['Attack', 'Dodge', 'Run'], + 'button functions': [attack, dodge, goTown], + text: 'You are fighting a monster.' +}); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+ +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-090.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-090.md new file mode 100644 index 0000000000..8a95485338 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-090.md @@ -0,0 +1,454 @@ +--- +id: 5d71f217e39bedcf8f0998fd +title: Step 90 +challengeType: 0 +dashedName: step-90 +--- + +# --description-- + +At the end of the code create empty functions named `attack` and `dodge`. + +# --hints-- + +See description above for instructions. + +```js +assert(typeof attack === 'function' && typeof dodge === 'function'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-091.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-091.md new file mode 100644 index 0000000000..e03aa3c88c --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-091.md @@ -0,0 +1,461 @@ +--- +id: 5d71f669e39bedcf8f0998fe +title: Step 91 +challengeType: 0 +dashedName: step-91 +--- + +# --description-- + +In the `goFight` function, call the `update` function and pass it `locations[3]`. + +# --hints-- + +See description above for instructions. + +```js +assert(goFight.toString().match(/update\(\s*locations\[\s*3\s*\]\s*\)\;?/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-092.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-092.md new file mode 100644 index 0000000000..52eaee7eeb --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-092.md @@ -0,0 +1,476 @@ +--- +id: 5d72027ce39bedcf8f099900 +title: Step 92 +challengeType: 0 +dashedName: step-92 +--- + +# --description-- + +Next in the `goFight` function, set `monsterHealth` to equal the health of the current monster. You can get the health of the current monster with `monsters[fighting].health`. Try to understand that line before continuing. + +# --hints-- + +See description above for instructions. + +```js +assert( + (() => { + fightSlime(); + return monsterHealth === 15; + })() && + (() => { + fightBeast(); + return monsterHealth === 60; + })() && + (() => { + fightDragon(); + return monsterHealth === 300; + })() +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-093.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-093.md new file mode 100644 index 0000000000..fac7bcb4c0 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-093.md @@ -0,0 +1,471 @@ +--- +id: 5d721925e39bedcf8f099901 +title: Step 93 +challengeType: 0 +dashedName: step-93 +--- + +# --description-- + +The HTML that shows the monster stats that has been hidden using CSS. Display the `monsterStats` HTML element by updating its CSS `display` property to equal `block`. + +Here is an example of updating the `display` property of an element named `myElement`: `myElement.style.display = "block";` + +# --hints-- + +See description above for instructions. + +```js +assert( + goFight + .toString() + .match(/^\s*monsterStats\.style\.display\s*\=\s*[\'\"\`]block[\'\"\`]\;?/m) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-094.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-094.md new file mode 100644 index 0000000000..3a18583def --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-094.md @@ -0,0 +1,483 @@ +--- +id: 5d7dea508360d21c6826a9af +title: Step 94 +challengeType: 0 +dashedName: step-94 +--- + +# --description-- + +Now set the `innerText` property of `monsterNameText` to equal `monsters[fighting].name`. Also, set the `innerText` property of `monsterHealthText` to equal `monsterHealth`. + +# --hints-- + +See description above for instructions. + +```js +assert( + (() => { + fightBeast(); + return ( + monsterNameText.innerText === 'fanged beast' && + monsterHealthText.innerText === '60' + ); + })() && + (() => { + fightDragon(); + return ( + monsterNameText.innerText === 'dragon' && + monsterHealthText.innerText === '300' + ); + })() +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-095.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-095.md new file mode 100644 index 0000000000..01e3fbca48 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-095.md @@ -0,0 +1,471 @@ +--- +id: 5d7deecc8360d21c6826a9b0 +title: Step 95 +challengeType: 0 +dashedName: step-95 +--- + +# --description-- + +We'll build out the `attack` function now. For the first line in the function, update the text message to say "The \[monster name] attacks." but replace "\[monster name]" with the actual name of the monster. Remember, you can get the monster name with `monsters[fighting].name`. + +# --hints-- + +See description above for instructions. + +```js +fightDragon(), attack(), assert(text.innerText === 'The dragon attacks.'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-096.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-096.md new file mode 100644 index 0000000000..dcfee0cabf --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-096.md @@ -0,0 +1,478 @@ +--- +id: 5d7df0458360d21c6826a9b1 +title: Step 96 +challengeType: 0 +dashedName: step-96 +--- + +# --description-- + +Now use the `+=` operator to append more text to `text.innerText`. Add the text " You attack it with your \[weapon name]." but replace "\[weapon name]" with the actual weapon name. Remember, you can get the weapon name with `weapons[currentWeapon].name`. + +# --hints-- + +See description above for instructions. + +```js +(currentWeapon = 3), + fightDragon(), + attack(), + assert( + text.innerText === 'The dragon attacks. You attack it with your sword.' + ); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-097.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-097.md new file mode 100644 index 0000000000..a89180ed3a --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-097.md @@ -0,0 +1,475 @@ +--- +id: 5d7df2a68360d21c6826a9b2 +title: Step 97 +challengeType: 0 +dashedName: step-97 +--- + +# --description-- + +Next, set `health` to equal `health` minus the monster's level. You can get the monster's level with `monsters[fighting].level`. + +# --hints-- + +See description above for instructions. + +```js +(health = 50), fightDragon(), attack(), assert(health === 30); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-098.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-098.md new file mode 100644 index 0000000000..63702caa25 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-098.md @@ -0,0 +1,477 @@ +--- +id: 5d7df41a8360d21c6826a9b3 +title: Step 98 +challengeType: 0 +dashedName: step-98 +--- + +# --description-- + +Set `monsterHealth` to `monsterHealth` minus the power of the current weapon (`weapons[currentWeapon].power`). + +# --hints-- + +See description above for instructions. + +```js +fightDragon(), (monsterHealth = 20), attack(), assert(monsterHealth === 15); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-099.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-099.md new file mode 100644 index 0000000000..45ab968fd0 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-099.md @@ -0,0 +1,484 @@ +--- +id: 5d7df75a8360d21c6826a9b4 +title: Step 99 +challengeType: 0 +dashedName: step-99 +--- + +# --description-- + +At the end of that line, add a random number between one and the value of `xp`. Here is the formula to get a random number between 1 and 5: `Math.floor(Math.random() * 5) + 1`. + +`Math.random()` returns a decimal or floating point number between 0 and 1, and `Math.floor()` rounds a given number down to the nearest integer. + +# --hints-- + +See description above for instructions. + +```js +(xp = 1), + fightDragon(), + (monsterHealth = 20), + attack(), + assert(monsterHealth === 14); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-100.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-100.md new file mode 100644 index 0000000000..b01e1e19a4 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-100.md @@ -0,0 +1,485 @@ +--- +id: 5d7dfb908360d21c6826a9b5 +title: Step 100 +challengeType: 0 +dashedName: step-100 +--- + +# --description-- + +Update `healthText.innerText` and `monsterHealthText.innerText` to equal `health` and `monsterHealth`. + +# --hints-- + +See description above for instructions. + +```js +(xp = 1), + (health = 50), + fightDragon(), + (monsterHealth = 20), + attack(), + assert(monsterHealthText.innerText === '14' && healthText.innerText === '30'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-101.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-101.md new file mode 100644 index 0000000000..89c199a1f0 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-101.md @@ -0,0 +1,489 @@ +--- +id: 5d7e02c88360d21c6826a9b7 +title: Step 101 +challengeType: 0 +dashedName: step-101 +--- + +# --description-- + +Check if health is less than or equal to zero. If it is, call the `lose()` function. + +# --hints-- + +See description above for instructions. + +```js +assert( + attack + .toString() + .match(/^\s*if\s*\(\s*health\s*\<\=\s*0\s*\)\s*\{\s*lose\(\s*\);?\s*\}/m) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-102.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-102.md new file mode 100644 index 0000000000..eefaad7d5d --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-102.md @@ -0,0 +1,508 @@ +--- +id: 5d7e06728360d21c6826a9b8 +title: Step 102 +challengeType: 0 +dashedName: step-102 +--- + +# --description-- + +An `else` statement can be conditional with an `else if` statement. At the end of the `if` statement, add an `else if` statement to check if `monsterHealth` is less than or equal to zero. Inside the `else if` block, call the `defeatMonster()` function. + +Here is an example of an `if` statement with `else if` and `else`: + +```js +if (num > 15) { + return "Bigger than 15"; +} else if (num < 5) { + return "Smaller than 5"; +} else { + return "Between 5 and 15"; +} +``` + +# --hints-- + +See description above for instructions. + +```js +assert( + attack + .toString() + .match( + /^\s*if\s*\(\s*health\s*\<\=\s*0\s*\)\s*\{\s*lose\(\s*\);?\s*\}\s*else if\s*\(\s*monsterHealth\s*\<\=\s*0\s*\)\s*\{\s*defeatMonster\(\s*\)\;?\s*\}/m + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-103.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-103.md new file mode 100644 index 0000000000..8005af3c3c --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-103.md @@ -0,0 +1,498 @@ +--- +id: 5d7e077e8360d21c6826a9b9 +title: Step 103 +challengeType: 0 +dashedName: step-103 +--- + +# --description-- + +At the end of the code add two empty functions named `defeatMonster` and `lose`. + +# --hints-- + +See description above for instructions. + +```js +assert(typeof defeatMonster === 'function' && typeof lose === 'function'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-104.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-104.md new file mode 100644 index 0000000000..69d4298116 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-104.md @@ -0,0 +1,507 @@ +--- +id: 5d7e13798360d21c6826a9bb +title: Step 104 +challengeType: 0 +dashedName: step-104 +--- + +# --description-- + +Inside the `dodge` function, set `text.innerText` equal to "You dodge the attack from the \[monster's name]." Instead of "\[monster's name]", get the monster's name with `monsters[fighting].name`. + +# --hints-- + +See description above for instructions. + +```js +fightDragon(), + dodge(), + assert(text.innerText === 'You dodge the attack from the dragon.'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-105.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-105.md new file mode 100644 index 0000000000..229ceffc51 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-105.md @@ -0,0 +1,509 @@ +--- +id: 5d7f3b6c7c4263f469c36b17 +title: Step 105 +challengeType: 0 +dashedName: step-105 +--- + +# --description-- + +In the `defeatMonster` function, set `gold` to equal `gold` plus the monster's level times 6.7. You can get the monster's level with `monsters[fighting].level`. + +Here is how you would set `num` to equal `num` plus five times eight: `num += 5 * 8`. Remember that `Math.floor()` rounds any number passed to it down to the nearest whole number. + +# --hints-- + +See description above for instructions. + +```js +(gold = 10), fightSlime(), defeatMonster(), assert(gold === 23); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-106.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-106.md new file mode 100644 index 0000000000..7bd670e908 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-106.md @@ -0,0 +1,509 @@ +--- +id: 5d7f405c7c4263f469c36b18 +title: Step 106 +challengeType: 0 +dashedName: step-106 +--- + +# --description-- + +Set `xp` to equal `xp` plus the monster's level. + +# --hints-- + +See description above for instructions. + +```js +(xp = 10), fightSlime(), defeatMonster(), assert(xp === 12); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-107.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-107.md new file mode 100644 index 0000000000..8eb68ab2e6 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-107.md @@ -0,0 +1,516 @@ +--- +id: 5d7f410b7c4263f469c36b19 +title: Step 107 +challengeType: 0 +dashedName: step-107 +--- + +# --description-- + +Now set the `innerText` properties of `goldText` and `xpText` to the updated values. + +# --hints-- + +See description above for instructions. + +```js +(xp = 10), + (gold = 10), + fightSlime(), + defeatMonster(), + assert(goldText.innerText === '23' && xpText.innerText === '12'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-108.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-108.md new file mode 100644 index 0000000000..b12f8e745d --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-108.md @@ -0,0 +1,518 @@ +--- +id: 5d7f41fa7c4263f469c36b1a +title: Step 108 +challengeType: 0 +dashedName: step-108 +--- + +# --description-- + +Finish the `defeatMonster` function by calling the `update()` function and pass in `locations[4]`. + +# --hints-- + +See description above for instructions. + +```js +assert( + defeatMonster.toString().match(/^\s*update\(\s*locations\[\s*4\s*\]\s*\)/m) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-109.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-109.md new file mode 100644 index 0000000000..ce8171b118 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-109.md @@ -0,0 +1,532 @@ +--- +id: 5d7f43947c4263f469c36b1b +title: Step 109 +challengeType: 0 +dashedName: step-109 +--- + +# --description-- + +Add a new object in the `locations` array with all the same properties as the other objects in the array. Set `name` to "kill monster". Set `"button text"` to `["Go to town square", "Go to town square", "Go to town square"]`. Set `"button functions"` to `[goTown, goTown, goTown]`. And set `text` to "The monster screams Arg! as it dies. You gain experience points and find gold.". + +# --hints-- + +See description above for instructions. + +```js +assert.deepStrictEqual(locations[4], { + name: 'kill monster', + 'button text': [ + 'Go to town square', + 'Go to town square', + 'Go to town square' + ], + 'button functions': [goTown, goTown, goTown], + text: + 'The monster screams Arg! as it dies. You gain experience points and find gold.' +}); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-110.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-110.md new file mode 100644 index 0000000000..5ee8837d7a --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-110.md @@ -0,0 +1,538 @@ +--- +id: 5d7f44ac7c4263f469c36b1c +title: Step 110 +challengeType: 0 +dashedName: step-110 +--- + +# --description-- + +The word "Arg!" should have quotes around it. Besides escaping quotes, there is another way you can include quote marks inside a quote. Change the double quotes to single quotes around the sentence, "The monster screams Arg! as it dies. You gain experience points and find gold". Then add double quotes around "Arg!" + +# --hints-- + +See description above for instructions. + +```js +assert.deepStrictEqual(locations[4], { + name: 'kill monster', + 'button text': [ + 'Go to town square', + 'Go to town square', + 'Go to town square' + ], + 'button functions': [goTown, goTown, goTown], + text: + 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' +}); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-111.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-111.md new file mode 100644 index 0000000000..d9bb21f1ff --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-111.md @@ -0,0 +1,542 @@ +--- +id: 5d7f459421b11cdaa3f6b15f +title: Step 111 +challengeType: 0 +dashedName: step-111 +--- + +# --description-- + +While you're working in the `locations` array, add another object at the end. Set `name` to "lose". Set `"button text"` to `["REPLAY?", "REPLAY?", "REPLAY?"]`. Set `"button functions"` to `[restart, restart, restart]`. And set `text` to "You die. ☠️". + +# --hints-- + +See description above for instructions. + +```js +assert.deepStrictEqual(locations[5], { + name: 'lose', + 'button text': ['REPLAY?', 'REPLAY?', 'REPLAY?'], + 'button functions': [restart, restart, restart], + text: 'You die. ☠️' +}); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+ +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-112.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-112.md new file mode 100644 index 0000000000..89c8db19de --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-112.md @@ -0,0 +1,544 @@ +--- +id: 5d7f4d9421b11cdaa3f6b160 +title: Step 112 +challengeType: 0 +dashedName: step-112 +--- + +# --description-- + +After a monster is defeated the monster stat box should no longer display. On the first line of the `update` function add: `monsterStats.style.display = "none";`. + +# --hints-- + +See description above for instructions. + +```js +fightSlime(), defeatMonster(), assert(monsterStats.style.display === 'none'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+ +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-113.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-113.md new file mode 100644 index 0000000000..1a58f40c2b --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-113.md @@ -0,0 +1,546 @@ +--- +id: 5d80c1d821b11cdaa3f6b164 +title: Step 113 +challengeType: 0 +dashedName: step-113 +--- + +# --description-- + +In the `lose` function, call the `update` function and pass in `locations[5]`. + +# --hints-- + +See description above for instructions. + +```js +update(locations[0]), lose(), assert(text.innerText === 'You die. ☠️'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+ +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-114.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-114.md new file mode 100644 index 0000000000..fc16a45a17 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-114.md @@ -0,0 +1,575 @@ +--- +id: 5d80c3c021b11cdaa3f6b165 +title: Step 114 +challengeType: 0 +dashedName: step-114 +--- + +# --description-- + +At the end of the code, create a `restart` function. Inside the function, set `xp` to 0, set `health` to 100, set `gold` to 50, set `currentWeapon` to 0, and set `inventory` to `["stick"]`. Also, update the `innerText` properties of `goldText`, `healthText`, and `xpText` to their current values. Finally, call the `goTown()` function. + +After this step is a good time to test the game so far. + +# --hints-- + +See description above for instructions. + +```js +(currentWeapon = 1), + (inventory = ['stick', 'dagger']), + fightSlime(), + attack(), + defeatMonster(), + restart(), + assert( + xp === 0 && + gold === 50 && + currentWeapon === 0 && + inventory[0] === 'stick' && + inventory.length === 1 && + goldText.innerText === '50' && + healthText.innerText === '100' && + xpText.innerText === '0' && + text.innerText === + 'You are in the town square. You see a sign that says "Store."' + ); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-115.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-115.md new file mode 100644 index 0000000000..197d2294c8 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-115.md @@ -0,0 +1,578 @@ +--- +id: 5d80d20d21b11cdaa3f6b166 +title: Step 115 +challengeType: 0 +dashedName: step-115 +--- + +# --description-- + +Inside the `attack` function, update the contents of the `else if` statement. Instead of calling the `defeatMonster` function right away, create an `if` statement with an `else` statement. If the player is fighting the dragon (`fighting === 2`), then call the `winGame` function. Else, call the `defeatMonster` function. + +# --hints-- + +See description above for instructions. + +```js +assert( + attack + .toString() + .match( + /^\s*\}\s*else\s*if\s*\(\s*monsterHealth\s*\<\=\s*0\s*\)\s*\{\s*if\s*\(\s*fighting\s*===\s*2\)\s*\{\s*winGame\(\s*\)\;?\s*\}\s*else\s*\{\s*defeatMonster\(\s*\)\;?\s*\}\s*\}/m + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-116.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-116.md new file mode 100644 index 0000000000..54eb6bd66e --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-116.md @@ -0,0 +1,592 @@ +--- +id: 5d80d67021b11cdaa3f6b167 +title: Step 116 +challengeType: 0 +dashedName: step-116 +--- + +# --description-- + +The conditional operator, also called the ternary operator, can be used as a one line if-else expression. The syntax is: `condition ? statement-if-true : statement-if-false;`. + +Change the if-else expression from the last challenge to use the ternary operator instead. Here is an example: + +```js +if (age >= 18) { + adultFunction(); +} else { + kidFunction(); +} + +// The above if-else expression does the same thing as the following line + +age >= 18 ? adultFunction() : kidFunction(); +``` + +# --hints-- + +See description above for instructions. + +```js +assert( + attack + .toString() + .match( + /^\s*\}\s*else\s*if\s*\(\s*monsterHealth\s*\<\=\s*0\s*\)\s*\{\s*fighting\s*\=\=\=\s*2\s*\?\s*winGame\(\s*\)\s*\:\s*defeatMonster\(\s*\)\;?\s*\}/m + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-117.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-117.md new file mode 100644 index 0000000000..f69b37cc63 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-117.md @@ -0,0 +1,572 @@ +--- +id: 5d80da7521b11cdaa3f6b168 +title: Step 117 +challengeType: 0 +dashedName: step-117 +--- + +# --description-- + +After the `lose` function, create a function called `winGame`. Inside the `winGame` function, call the `update` function and pass in `locations[6]`. + +# --hints-- + +See description above for instructions. + +```js +assert(winGame.toString().replace(/\s/g, '').includes('update(locations[6])')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-118.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-118.md new file mode 100644 index 0000000000..68c165507a --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-118.md @@ -0,0 +1,587 @@ +--- +id: 5dbab6d36ef5fe3a704f848c +title: Step 118 +challengeType: 0 +dashedName: step-118 +--- + +# --description-- + +Add another object in the `locations` array. Everything should be the same as the "lose" element, except the `name` should be "win" and the text should be "You defeat the dragon! YOU WIN THE GAME! 🎉" + +# --hints-- + +See description above for instructions. + +```js +assert.deepStrictEqual(locations[6], { + name: 'win', + 'button text': ['Fight slime', 'Fight fanged beast', 'Go to town square'], + 'button functions': [restart, restart, restart], + text: 'You defeat the dragon! YOU WIN THE GAME! 🎉' +}); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-119.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-119.md new file mode 100644 index 0000000000..2b93d6ae76 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-119.md @@ -0,0 +1,595 @@ +--- +id: 5dbabb746ef5fe3a704f848d +title: Step 119 +challengeType: 0 +dashedName: step-119 +--- + +# --description-- + +The game could be complete now, but let's make it more interesting. + +Inside the `attack` function, change the line `health -= monsters[fighting].level;` to `health -= getMonsterAttackValue(monsters[fighting].level);` This sets `health` to equal `health` minus the return value of the `getMonsterAttackValue` function. Also, pass the level of the monster to `getMonsterAttackValue` as an argument. + +# --hints-- + +See description above for instructions. + +```js +assert( + attack + .toString() + .replace(/\s/g, '') + .includes('health-=getMonsterAttackValue(monsters[fighting].level') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-120.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-120.md new file mode 100644 index 0000000000..7b31e33093 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-120.md @@ -0,0 +1,594 @@ +--- +id: 5dbac08e6ef5fe3a704f848f +title: Step 120 +challengeType: 0 +dashedName: step-120 +--- + +# --description-- + +Under the `attack` function, create a function with name `getMonsterAttackValue` that takes `level` as a parameter. + +# --hints-- + +See description above for instructions. + +```js +assert( + getMonsterAttackValue.toString().replace(/\s/g, '') === + 'functiongetMonsterAttackValue(level){}' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-121.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-121.md new file mode 100644 index 0000000000..36181879eb --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-121.md @@ -0,0 +1,601 @@ +--- +id: 5dbac0c86ef5fe3a704f8490 +title: Step 121 +challengeType: 0 +dashedName: step-121 +--- + +# --description-- + +The attack of the monster will be based on the monster's level and player's `xp`. In the `getMonsterAttackValue` function, use `const` to create a variable called `hit`. Set it to equal the equation `(level * 5) - (Math.floor(Math.random() * xp))`. + +# --hints-- + +See description above for instructions. + +```js +assert( + getMonsterAttackValue + .toString() + .replace(/\s/g, '') + .includes('varhit=level*5-Math.floor(Math.random()*xp)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-122.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-122.md new file mode 100644 index 0000000000..d09e12b2d2 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-122.md @@ -0,0 +1,604 @@ +--- +id: 5dbac1f16ef5fe3a704f8491 +title: Step 122 +challengeType: 0 +dashedName: step-122 +--- + +# --description-- + +Log the value of `hit` to the console to use in debugging. + +Here is how to log the value of `num` to the console: `console.log(num);`. + +# --hints-- + +See description above for instructions. + +```js +assert( + getMonsterAttackValue + .toString() + .replace(/\s/g, '') + .includes('console.log(hit)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-123.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-123.md new file mode 100644 index 0000000000..c57171f741 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-123.md @@ -0,0 +1,611 @@ +--- +id: 5dbac2b06ef5fe3a704f8492 +title: Step 123 +challengeType: 0 +dashedName: step-123 +--- + +# --description-- + +Now return `hit` from the `getMonsterAttackValue` function. The return value of this function is used in the `attack` function. + +Here is an example of a function that returns a value: + +```js +function plusThree(num) { + let numPlusThree = num + 3; + return numPlusThree; +} + +const answer = plusThree(5); // 8 +``` + +# --hints-- + +See description above for instructions. + +```js +assert( + getMonsterAttackValue.toString().replace(/\s/g, '').includes('returnhit') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-124.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-124.md new file mode 100644 index 0000000000..1a7e97dc6a --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-124.md @@ -0,0 +1,614 @@ +--- +id: 5dbbb5076ef5fe3a704f849d +title: Step 124 +challengeType: 0 +dashedName: step-124 +--- + +# --description-- + +If you play the game in its current state you might notice a bug. If your `xp` is high enough, the `getMonsterAttackValue` function will sometimes return a negative number, which will actually add to your total health when fighting a monster! + +In `getMonsterAttackValue`, change `return hit` to a ternary operator that returns `hit` if `hit` is greater than 0, or returns 0 if it is not. + +For example, here's a function that returns 5 if `tickets` is greater than 3, or returns 0 if it is not: + +```js +function applyDiscount(tickets) { + return tickets > 2 : 5 : 0; +} +``` + +# --hints-- + +See description above for instructions. + +```js +assert( + getMonsterAttackValue + .toString() + .replace(/\s/g, '') + .includes('returnhit>0?hit:0') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-125.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-125.md new file mode 100644 index 0000000000..2161e069e1 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-125.md @@ -0,0 +1,609 @@ +--- +id: 5dbac6176ef5fe3a704f8493 +title: Step 125 +challengeType: 0 +dashedName: step-125 +--- + +# --description-- + +In the `attack` function after the line `health -= getMonsterAttackValue(monsters[fighting].level);`, create an empty if expression. For the condition, put the function call `isMonsterHit()`. + +Here is an example of an empty if expression with a function call as the condition: + +```js +if (isTrue()) { + +} +``` + +# --hints-- + +See description above for instructions. + +```js +assert(attack.toString().replace(/\s/g, '').includes('if(isMonsterHit()){}')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-126.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-126.md new file mode 100644 index 0000000000..6051ca5b45 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-126.md @@ -0,0 +1,620 @@ +--- +id: 5dbaca566ef5fe3a704f8494 +title: Step 126 +challengeType: 0 +dashedName: step-126 +--- + +# --description-- + +In the `attack` function, move the line `monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;` into the `if` block. + +Here is an example of code in an `if` block that logs a message to the console: + +```js +if (isTrue()) { + console.log("It's true!"); +} +``` + +# --hints-- + +See description above for instructions. + +```js +assert( + attack + .toString() + .replace(/\s/g, '') + .match( + /if\(isMonsterHit\(\)\)\{monsterHealth\-\=weapons\[currentWeapon\]\.power\+Math\.floor\(Math\.random\(\)\*xp\)\+1;?\}/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-127.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-127.md new file mode 100644 index 0000000000..057b92ae41 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-127.md @@ -0,0 +1,614 @@ +--- +id: 5dbae0446ef5fe3a704f8495 +title: Step 127 +challengeType: 0 +dashedName: step-127 +--- + +# --description-- + +Add an `else` expression to the `if` expression. Use the `+=` operator to add the text " You miss." onto the end of `text.innerText`. + +# --hints-- + +See description above for instructions. + +```js +assert( + attack + .toString() + .replace(/\s/g, '') + .match( + /if\(isMonsterHit\(\)\)\{monsterHealth\-\=weapons\[currentWeapon\]\.power\+Math\.floor\(Math\.random\(\)\*xp\)\+1;?\}else\{text\.innerText\+\=[\'\"\`]Youmiss.[\'\"\`]\;?\}/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-128.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-128.md new file mode 100644 index 0000000000..aefeb675e5 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-128.md @@ -0,0 +1,630 @@ +--- +id: 5dbae1f66ef5fe3a704f8496 +title: Step 128 +challengeType: 0 +dashedName: step-128 +--- + +# --description-- + +Now create the `isMonsterHit` function. It will return a boolean to be used in the `if` expression. Return the result of the comparison `Math.random() > .2`. + +Here is a function that returns the result of a comparison: + +```js +function flipHeads() { + return Math.random() > .5; +} +``` + +# --hints-- + +See description above for instructions. + +```js +assert( + isMonsterHit + .toString() + .replace(/\s/g, '') + .includes('returnMath.random()>.2') || + isMonsterHit + .toString() + .replace(/\s/g, '') + .includes('returnMath.random()>0.2') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-129.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-129.md new file mode 100644 index 0000000000..ec2e5921e6 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-129.md @@ -0,0 +1,628 @@ +--- +id: 5dbba5716ef5fe3a704f8497 +title: Step 129 +challengeType: 0 +dashedName: step-129 +--- + +# --description-- + +The player should hit if either `Math.random() > .2` OR if the player's health is less than 20. At the end of the return statement, add the "logical or" operator (`||`) and then check if `health` is less than 20. + +Here is an example that returns true if either a number is less than 10 or more than 20: `num < 10 || num > 20`. + +# --hints-- + +See description above for instructions. + +```js +assert( + isMonsterHit + .toString() + .replace(/\s/g, '') + .includes('returnMath.random()>.2||health<20') || + isMonsterHit + .toString() + .replace(/\s/g, '') + .includes('returnMath.random()>0.2||health<20') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-130.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-130.md new file mode 100644 index 0000000000..8be3534931 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-130.md @@ -0,0 +1,625 @@ +--- +id: 5dbba70e6ef5fe3a704f8498 +title: Step 130 +challengeType: 0 +dashedName: step-130 +--- + +# --description-- + +On every attack, there should be a small chance that the player's weapon breaks. At the end of the `attack` function, add an empty `if` expression with the condition `Math.random() <= .1`. + +# --hints-- + +See description above for instructions. + +```js +assert( + attack.toString().replace(/\s/g, '').includes('if(Math.random()<=.1){}') || + isMonsterHit + .toString() + .replace(/\s/g, '') + .includes('if(Math.random()<=0.1){}') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-131.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-131.md new file mode 100644 index 0000000000..fd2d242e61 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-131.md @@ -0,0 +1,646 @@ +--- +id: 5dbba89e6ef5fe3a704f8499 +title: Step 131 +challengeType: 0 +dashedName: step-131 +--- + +# --description-- + +Use the `+=` operator to add "Your \[last item in inventory array] breaks." to the end of `text.innerText`. Instead of the bracketed text, it should show the actual item name. + +Use `inventory.pop()` to both remove the last element from the array AND return that element. For example: + +```js +let shoppingList = ["milk", "apples", "cereal"]; +console.log("I bought " + shoppingList.pop() + "."); // Logs "I bought cereal." +// shoppingList now equals ["milk", "apples"] +``` + +# --hints-- + +See description above for instructions. + +```js +assert( + attack + .toString() + .replace(/\s/g, '') + .match( + /if\(Math\.random\(\)\<\=0?\.1\)\{text\.innerText\+\=\"Your\"\+inventory\.pop\(\)\+\"breaks\.\"\;?\}/ + ) || + attack + .toString() + .replace(/\s/g, '') + .match( + /if\(Math\.random\(\)\<\=0?\.1\)\{text\.innerText\+\=\"Your\"\.concat\(inventory\.pop\(\)\,\"breaks\.\"\)\;?\}/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-132.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-132.md new file mode 100644 index 0000000000..df68f2bb8d --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-132.md @@ -0,0 +1,632 @@ +--- +id: 5dbbaeb56ef5fe3a704f849a +title: Step 132 +challengeType: 0 +dashedName: step-132 +--- + +# --description-- + +Decrement the value of `currentWeapon` using `--`. For example, say `num` equals 5. After running `num--`, `num` now equals 4. + +# --hints-- + +See description above for instructions. + +```js +assert( + attack + .toString() + .replace(/\s/g, '') + .match( + /if\(Math\.random\(\)\<\=0?\.1\)\{text\.innerText\+\=\"Your\"\+inventory\.pop\(\)\+\"breaks\.\"\;?currentWeapon--\;?\}/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-133.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-133.md new file mode 100644 index 0000000000..2ee219c7db --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-133.md @@ -0,0 +1,643 @@ +--- +id: 5dbbb00e6ef5fe3a704f849b +title: Step 133 +challengeType: 0 +dashedName: step-133 +--- + +# --description-- + +We don't want a player's only weapon to break. + +Use the "logical and" operator (`&&`) to add a second condition to the `if` expression you just wrote. A player's weapon should only be able to break if `inventory.length` does not equal (`!==`) one. + +Here is an example of an `if` expression with the conditions that `firstName` equals "Quincy" AND `lastName` does NOT equal "Larson". With `&&`, both conditions must be true or else the entire statement evaluates to false. + +```js +if (firstName === "Quincy" && lastName !== "Larson") { + console.log("Cool name but not the creator of freeCodeCamp.org.") +} +``` + +# --hints-- + +See description above for instructions. + +```js +assert( + attack + .toString() + .replace(/\s/g, '') + .match( + /if\(Math\.random\(\)\<\=0?\.1\&\&inventory\.length\!\=\=1\)\{text\.innerText\+\=\"Your\"\+inventory\.pop\(\)\+\"breaks\.\"\;?currentWeapon--\;?\}/ + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-134.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-134.md new file mode 100644 index 0000000000..9deeb2dc71 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-134.md @@ -0,0 +1,637 @@ +--- +id: 5dbbb1466ef5fe3a704f849c +title: Step 134 +challengeType: 0 +dashedName: step-134 +--- + +# --description-- + +The only thing left to add is a mini-game easter egg (a hidden feature). + +Add a new function called `easterEgg` that calls the `update` function and passes in `locations[7]` as an argument. + +# --hints-- + +See description above for instructions. + +```js +assert( + easterEgg + .toString() + .replace(/\s/g, '') + .match(/functioneasterEgg\(\)\{(return)?update\(locations\[7\]\)\;?}/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-135.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-135.md new file mode 100644 index 0000000000..3bffb22d93 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-135.md @@ -0,0 +1,651 @@ +--- +id: 5dbbf3796ef5fe3a704f849e +title: Step 135 +challengeType: 0 +dashedName: step-135 +--- + +# --description-- + +Add a new object to the `locations` array. + +Set `name` to "easter egg", `"button text"` to `["2", "8", "Go to town square?"]`, `"button functions"` to `[pickTwo, pickEight, goTown]`, and `text` to "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!" + +# --hints-- + +See description above for instructions. + +```js +assert.deepStrictEqual(locations[7], { + name: 'easter egg', + 'button text': ['2', '8', 'Go to town square?'], + 'button functions': [pickTwo, pickEight, goTown], + text: + 'You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!' +}); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+ +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-136.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-136.md new file mode 100644 index 0000000000..4fea2ef564 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-136.md @@ -0,0 +1,662 @@ +--- +id: 5dbbf8d86ef5fe3a704f849f +title: Step 136 +challengeType: 0 +dashedName: step-136 +--- + +# --description-- + +At the end of the code, add two new functions named `pickTwo` and `pickEight`. + +Inside each function call the `pick()` function. Pass either "2" or "8" as arguments to `pick` depending on the function name. + +# --hints-- + +See description above for instructions. + +```js +assert( + pickTwo.toString().replace(/\s/g, '').includes('pick(2)') && + pickEight.toString().replace(/\s/g, '').includes('pick(8)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+ +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-137.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-137.md new file mode 100644 index 0000000000..0e4bee4261 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-137.md @@ -0,0 +1,664 @@ +--- +id: 5dbc23a66ef5fe3a704f84a0 +title: Step 137 +challengeType: 0 +dashedName: step-137 +--- + +# --description-- + +Add a `pick` function with a parameter named "guess". + +# --hints-- + +See description above for instructions. + +```js +assert(pick.toString().replace(/\s/g, '').includes('functionpick(guess){}')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-138.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-138.md new file mode 100644 index 0000000000..e398bc4a25 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-138.md @@ -0,0 +1,675 @@ +--- +id: 5dbc2c506ef5fe3a704f84a1 +title: Step 138 +challengeType: 0 +dashedName: step-138 +--- + +# --description-- + +Inside `pick`, use `let` to initialize a variable named "numbers" and set it to an empty array. + +# --hints-- + +See description above for instructions. + +```js +assert( + pick + .toString() + .replace(/\s/g, '') + .match(/functionpick\(guess\)\{varnumbers\=\[\]\;?\}/) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-139.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-139.md new file mode 100644 index 0000000000..4dd13fa1ee --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-139.md @@ -0,0 +1,692 @@ +--- +id: 5dbc2d056ef5fe3a704f84a2 +title: Step 139 +challengeType: 0 +dashedName: step-139 +--- + +# --description-- + +Inside `pick`, create a `while` loop to run the same code multiple times. The code inside the `while` loop should keep repeating while `numbers.length` is less than 10 and stop once that condition is no longer true. + +Here is an example of a while loop that repeats code inside the loop while `i` is less than five. + +```js +let ourArray = []; +let i = 0; +while(i < 5) { + ourArray.push(i); + i++; +} +// ourArray now equals [0,1,2,3,4] +``` + +# --hints-- + +See description above for instructions. + +```js +assert( + pick + .toString() + .replace(/\s/g, '') + .includes( + 'while(numbers.length<10){if(_LPC++%2000===0&&Date.now()-_LP>1500){' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-140.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-140.md new file mode 100644 index 0000000000..7149f55359 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-140.md @@ -0,0 +1,681 @@ +--- +id: 5dbc2f2d6ef5fe3a704f84a3 +title: Step 140 +challengeType: 0 +dashedName: step-140 +--- + +# --description-- + +Inside the `while` loop, push a random number between 0 and 10 onto the end of the `numbers` array. Get the random number with `Math.floor(Math.random() * 11)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + pick + .toString() + .replace(/\s/g, '') + .includes('numbers.push(Math.floor(Math.random()*11));}') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-141.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-141.md new file mode 100644 index 0000000000..6c0daac029 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-141.md @@ -0,0 +1,679 @@ +--- +id: 5dbc33956ef5fe3a704f84a4 +title: Step 141 +challengeType: 0 +dashedName: step-141 +--- + +# --description-- + +After the `while` loop, set `text.innerText` to equal "You picked \[guess]. Here are the random numbers:". Replace \[guess] with the actual guess. + +# --hints-- + +See description above for instructions. + +```js +pickTwo(), + assert(text.innerText === 'You picked 2. Here are the random numbers:'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-142.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-142.md new file mode 100644 index 0000000000..aed0ef7d3f --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-142.md @@ -0,0 +1,693 @@ +--- +id: 5dbc35326ef5fe3a704f84a5 +title: Step 142 +challengeType: 0 +dashedName: step-142 +--- + +# --description-- + +Before the final end quote in the string you just added, insert the new line escape sequence (`\n`). This will cause the next part you add to `text.innerText` to appear on a new line. + +# --hints-- + +See description above for instructions. + +```js +assert( + pick + .toString() + .replace(/\s/g, '') + .includes( + 'text.innerText="Youpicked"+guess+".Herearetherandomnumbers:\\n";' + ) || + pick + .toString() + .replace(/\s/g, '') + .includes( + 'text.innerText="Youpicked".concat(guess,".Herearetherandomnumbers:\\n");' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-143.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-143.md new file mode 100644 index 0000000000..90b855592d --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-143.md @@ -0,0 +1,692 @@ +--- +id: 5dbfced07736e5ee7d235544 +title: Step 143 +challengeType: 0 +dashedName: step-143 +--- + +# --description-- + +A `for` loop runs "for" a specific number of times. + +We will go over how for loops work in the next several steps. In the meantime, just copy the for loop below and paste it at the end of the `pick` function: + +```js +for (let x = 1; x < 5; x++) { + +} +``` + +# --hints-- + +See description above for instructions. + +```js +assert(pick.toString().replace(/\s/g, '').includes('for(varx=1;x<5;x++){')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-144.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-144.md new file mode 100644 index 0000000000..0b8e6e76c4 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-144.md @@ -0,0 +1,692 @@ +--- +id: 5dbfd4837736e5ee7d235545 +title: Step 144 +challengeType: 0 +dashedName: step-144 +--- + +# --description-- + +For loops are declared with three optional expressions separated by semicolons: `for ([initialization]; [condition]; [final-expression])`. + +The initialization statement is executed only one time before the loop starts and is often used to define and set up the loop variable. Think of it like declaring a variable to use as a counter in your `for` loop. + +Many `for` loops use `i` as an initializer and start from 0, so change `let x = 1;` to `let i = 0;`. + +# --hints-- + +See description above for instructions. + +```js +assert(pick.toString().replace(/\s/g, '').includes('for(vari=0;x<5;x++){')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-145.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-145.md new file mode 100644 index 0000000000..26e18a7c56 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-145.md @@ -0,0 +1,690 @@ +--- +id: 5dbfdb737736e5ee7d235546 +title: Step 145 +challengeType: 0 +dashedName: step-145 +--- + +# --description-- + +The second statement in a `for` loop, the condition statement, is evaluated at the beginning of every loop iteration. The loop will continue as long as it evaluates to true. + +We want the loop to run 10 times, so change `x < 5` to `i < 10`. + +# --hints-- + +See description above for instructions. + +```js +assert(pick.toString().replace(/\s/g, '').includes('for(vari=0;i<10;x++){')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-146.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-146.md new file mode 100644 index 0000000000..48e91cf293 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-146.md @@ -0,0 +1,690 @@ +--- +id: 5dbfdc377736e5ee7d235547 +title: Step 146 +challengeType: 0 +dashedName: step-146 +--- + +# --description-- + +The last statement in a `for` loop is the final-expression, and is executed at the end of each loop iteration. + +Since we changed the initializer from `x` to `i`, change `x++` to `i++`. This will iterate the initializer `i` by 1 after each loop. + +# --hints-- + +See description above for instructions. + +```js +assert(pick.toString().replace(/\s/g, '').includes('for(vari=0;i<10;i++){')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-147.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-147.md new file mode 100644 index 0000000000..42649e01c7 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-147.md @@ -0,0 +1,693 @@ +--- +id: 5dbfe2f37736e5ee7d235548 +title: Step 147 +challengeType: 0 +dashedName: step-147 +--- + +# --description-- + +Inside the for loop, use the `+=` operator to add to the end of `text.innerText`. Add the the number at index `i` in the `numbers` array with `numbers[i]`. Then add a new line. So the entire line inside the for loop should look like: `text.innerText += numbers[i] + "\n";` + +# --hints-- + +See description above for instructions. + +```js +assert( + pick + .toString() + .replace(/\s/g, '') + .includes('text.innerText+=numbers[i]+"\\n";}}') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-148.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-148.md new file mode 100644 index 0000000000..ef905ff4f7 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-148.md @@ -0,0 +1,699 @@ +--- +id: 5dbfeffe7736e5ee7d235549 +title: Step 148 +challengeType: 0 +dashedName: step-148 +--- + +# --description-- + +The `indexOf()` array method returns the first index at which a given element can be found in the array, or -1 if it is not present. + +After the for loop, add an `if` expression to check if the guessed number is in the `numbers` array. The condition of the `if` expression should check if `numbers.indexOf(guess) !== -1`. + +# --hints-- + +See description above for instructions. + +```js +assert( + pick + .toString() + .replace(/\s/g, '') + .includes('if(numbers.indexOf(guess)!==-1){}') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-149.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-149.md new file mode 100644 index 0000000000..001a33b853 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-149.md @@ -0,0 +1,705 @@ +--- +id: 5dbff18d7736e5ee7d23554a +title: Step 149 +challengeType: 0 +dashedName: step-149 +--- + +# --description-- + +Inside the `if` expression, add the following string to the end of `text.innerText`: "Right! You win 20 gold!" Also, add 20 to the value of `gold` and update `goldText.innerText`. + +# --hints-- + +See description above for instructions. + +```js +assert( + pick + .toString() + .replace(/\s/g, '') + .includes('text.innerText+="Right!Youwin20gold!";') && + pick.toString().replace(/\s/g, '').includes('gold+=20;') && + pick.toString().replace(/\s/g, '').includes('goldText.innerText=gold;') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-150.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-150.md new file mode 100644 index 0000000000..4cbeb36e55 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-150.md @@ -0,0 +1,712 @@ +--- +id: 5dbff2d07736e5ee7d23554b +title: Step 150 +challengeType: 0 +dashedName: step-150 +--- + +# --description-- + +Add an `else` expression. Inside add "Wrong! You lose 10 health!" to the end of `text.innerText`. Also, subtract 10 from `health` and update `healthText.innerText`. + +# --hints-- + +See description above for instructions. + +```js +assert( + pick.toString().replace(/\s/g, '').includes('else{') && + pick + .toString() + .replace(/\s/g, '') + .includes('text.innerText+="Wrong!Youlose10health!";') && + pick.toString().replace(/\s/g, '').includes('health-=10;') && + pick.toString().replace(/\s/g, '').includes('healthText.innerText=health;') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-151.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-151.md new file mode 100644 index 0000000000..426f6020e2 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-151.md @@ -0,0 +1,718 @@ +--- +id: 5dbffd907736e5ee7d23554c +title: Step 151 +challengeType: 0 +dashedName: step-151 +--- + +# --description-- + +At the end of the `else` statement, check if `health` is less than or equal to zero. If so, call the `lose()` function. + +# --hints-- + +See description above for instructions. + +```js +assert( + pick + .toString() + .replace(/\s/g, '') + .includes( + 'else{text.innerText+="Wrong!Youlose10health!";health-=10;healthText.innerText=health;if(health<=0){lose();}}' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-152.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-152.md new file mode 100644 index 0000000000..dd5e0b96b4 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-152.md @@ -0,0 +1,724 @@ +--- +id: 5dbffe887736e5ee7d23554d +title: Step 152 +challengeType: 0 +dashedName: step-152 +--- + +# --description-- + +Inside the `locations` array, on the `kill monster` object, "button functions" is currently set to `[goTown, goTown, goTown]`. Change the third `goTown` to `easterEgg`. This is how a player will access the hidden feature of the game. + +# --hints-- + +See description above for instructions. + +```js +assert.deepStrictEqual(locations[4], { + name: 'kill monster', + 'button text': [ + 'Go to town square', + 'Go to town square', + 'Go to town square' + ], + 'button functions': [goTown, goTown, easterEgg], + text: + 'The monster screams "Arg!" as it dies. You gain experience points and find gold.' +}); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-153.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-153.md new file mode 100644 index 0000000000..8566d5e8d1 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/step-153.md @@ -0,0 +1,714 @@ +--- +id: 5dc01a727736e5ee7d23554f +title: Step 153 +challengeType: 0 +dashedName: step-153 +--- + +# --description-- + +Congratulations! You are finished! Now try out the game. + +# --hints-- + +See description above for instructions. + +```js + +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-001.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-001.md deleted file mode 100644 index a07d71fd5f..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-001.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -id: 5d79253297c0ebb149ea9fed -title: Part 1 -challengeType: 0 -dashedName: part-1 ---- - -# --description-- - -In functional programming, we prefer immutable values over mutable values. - -Mutable values (declared with `var` or `let`) can lead to unexpected behaviors and bugs. Values declared with `const` cannot be reassigned, which makes using them easier because you don't have to keep track of their values. - -Start by creating an empty `infixToFunction` object using `const`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constinfixToFunction={}')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-002.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-002.md deleted file mode 100644 index d606fa81f6..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-002.md +++ /dev/null @@ -1,78 +0,0 @@ ---- -id: 5d7925323be8848dbc58a07a -title: Part 2 -challengeType: 0 -dashedName: part-2 ---- - -# --description-- - -Above `infixToFunction`, define an empty function `add` using the `function` keyword. It should accept two parameters, `x` and `y`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('functionadd(x,y){}')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-003.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-003.md deleted file mode 100644 index 647d15759d..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-003.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: 5d792532f631702ae6d23e11 -title: Part 3 -challengeType: 0 -dashedName: part-3 ---- - -# --description-- - -Now return the sum of `x` and `y` using the `return` keyword. - -# --hints-- - -See description above for instructions. - -```js -assert(add(1, 2) === 3 && add(100, 2000) === 2100); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-004.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-004.md deleted file mode 100644 index dae790c420..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-004.md +++ /dev/null @@ -1,86 +0,0 @@ ---- -id: 5d7925329445167ecc2ac9c9 -title: Part 4 -challengeType: 0 -dashedName: part-4 ---- - -# --description-- - -In JavaScript, functions are first class. This means that they can be used like any other values - for example, they can be assigned to variables. - -Assign `add` to a new variable `addVar`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddVar=add')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-005.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-005.md deleted file mode 100644 index af810c3b9a..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-005.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -id: 5d792532b07918c3a5904913 -title: Part 5 -challengeType: 0 -dashedName: part-5 ---- - -# --description-- - -Anonymous functions are functions without names - they are used only once and then forgotten. The syntax is the same as for normal functions but without the name: - -```js -function(x) { - return x -} -``` - -First, remove the `addVar` definition. - -# --hints-- - -See description above for instructions. - -```js -assert(!code.replace(/\s/g, '').includes('constaddVar=add')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-006.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-006.md deleted file mode 100644 index de60cac762..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-006.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -id: 5d792533cc8b18b6c133edc7 -title: Part 6 -challengeType: 0 -dashedName: part-6 ---- - -# --description-- - -Anonymous functions are often passed as arguments to other functions, but what if you want to call one later? You can assign anonymous functions to variables and call them with the variable's name: - -```js -const fn = function(x) { - return x; -} - -fn(); -``` - -Assign the anonymous function to the variable `addVar`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddVar=function(x,y){returnx+y')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-007.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-007.md deleted file mode 100644 index d0b9f3ab38..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-007.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: 5d7925337954ed57a565a135 -title: Part 7 -challengeType: 0 -dashedName: part-7 ---- - -# --description-- - -This is possible because the anonymous function has been immediately assigned to a value - this is effectively the same as using a named function. - -Rewrite `addVar` using ES6's arrow syntax: - -```js -const fn = (x, y) => x; -``` - -Note that the value is returned implicitly. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddVar=(x,y)=>x+y')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-008.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-008.md deleted file mode 100644 index 1251a61d04..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-008.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -id: 5d79253352e33dd59ec2f6de -title: Part 8 -challengeType: 0 -dashedName: part-8 ---- - -# --description-- - -Add the key `+` to `infixToFunction` and assign it the value `addVar`. - -# --hints-- - -See description above for instructions. - -```js -assert(infixToFunction['+'].toString() === addVar.toString()); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-009.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-009.md deleted file mode 100644 index b7b8112705..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-009.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -id: 5d792533d31e4f7fad33011d -title: Part 9 -challengeType: 0 -dashedName: part-9 ---- - -# --description-- - -In `infixToFunction`, replace `addVar` with `(x, y) => x + y`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/\+["']:\(x,y\)=>x\+y/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-010.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-010.md deleted file mode 100644 index f9b66cf731..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-010.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -id: 5d792533e7707b9645d7b540 -title: Part 10 -challengeType: 0 -dashedName: part-10 ---- - -# --description-- - -Remove the now redundant `addVar` definition. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof addVar === 'undefined'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-011.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-011.md deleted file mode 100644 index 90a6a432c3..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-011.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -id: 5d79253378595ec568f70ab6 -title: Part 11 -challengeType: 0 -dashedName: part-11 ---- - -# --description-- - -Add similar definitions for `-`, `*` and `/` in `infixToFunction`. - -# --hints-- - -See description above for instructions. - -```js -assert( - infixToFunction['-'](10, 2) === 8 && - infixToFunction['*'](10, 10) === 100 && - infixToFunction['/'](100, 10) === 10 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-012.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-012.md deleted file mode 100644 index 8fa7ce4708..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-012.md +++ /dev/null @@ -1,90 +0,0 @@ ---- -id: 5d7925330918ae4a2f282e7e -title: Part 12 -challengeType: 0 -dashedName: part-12 ---- - -# --description-- - -Use arrow function syntax to define a function `infixEval` which takes `str` and `regex` as arguments and returns `str.replace(regex, "")`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constinfixEval=\(str,regex\)=>str\.replace\(regex,['"]{2}\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-013.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-013.md deleted file mode 100644 index c4d07bd668..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-013.md +++ /dev/null @@ -1,96 +0,0 @@ ---- -id: 5d792533ed00e75d129e1b18 -title: Part 13 -challengeType: 0 -dashedName: part-13 ---- - -# --description-- - -`replace` is a higher order function because it can take a function as argument (higher order functions can also return functions). - -Pass the `+` function from `infixToFunction` to the `replace` method as the second argument. - -This is how you would pass the `-` function: - -```js -str.replace(regex, infixToFunction["-"]) -``` - -# --hints-- - -See description above for instructions. - -```js -assert(infixEval('ab', /(a)b/) === 'aba'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-014.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-014.md deleted file mode 100644 index 68c6d5ee0c..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-014.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -id: 5d792533a5c42fb4d1a4b70d -title: Part 14 -challengeType: 0 -dashedName: part-14 ---- - -# --description-- - -Replace the second argument of `str.replace` with an anonymous function, which takes `match`, `arg1`, `fn`, and `arg2`, and returns `infixToFunction["+"]`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('str.replace(regex,(match,arg1,fn,arg2)=>infixToFunction["+"])') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-015.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-015.md deleted file mode 100644 index 822205dcc1..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-015.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: 5d79253358e8f646cbeb2bb0 -title: Part 15 -challengeType: 0 -dashedName: part-15 ---- - -# --description-- - -Change the `"+"` in the call to `infixToFunction` to `fn`. - -`fn` is the operator that the user inputs (`+`, `-`, `*` or `/`) - we use `infixToFunction` to get the function that corresponds to it. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('str.replace(regex,(match,arg1,fn,arg2)=>infixToFunction[fn])') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-016.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-016.md deleted file mode 100644 index fafef384b9..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-016.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -id: 5d792533bb38fab70b27f527 -title: Part 16 -challengeType: 0 -dashedName: part-16 ---- - -# --description-- - -`arg1` and `arg2` are the numbers input by the user in a string such as "1+3". - -Pass `parseFloat(arg1)` and `parseFloat(arg2)` as the arguments to `infixToFunction[fn]` (remember `infixToFunction[fn]` is a function). - -# --hints-- - -See description above for instructions. - -```js -const regex = /([0-9.]+)([+-\/*])([0-9.]+)/; -assert( - infixEval('23+35', regex) === '58' && - infixEval('100-20', regex) === '80' && - infixEval('10*10', regex) === '100' && - infixEval('120/6', regex) === '20' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-017.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-017.md deleted file mode 100644 index 239bec2a6c..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-017.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 5d79253386060ed9eb04a070 -title: Part 17 -challengeType: 0 -dashedName: part-17 ---- - -# --description-- - -The `match` parameter is currently unused, which can lead to unused variable warnings in some linters. - -To fix this, prefix or replace it with an underscore (`_`) - both ways signal to the reader and linter that you're aware you don't need this. - -Note that a single underscore can only be used once in a function and may conflict with some libraries (Lodash, Underscore.js). - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('str.replace(regex,(_')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-018.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-018.md deleted file mode 100644 index a741e0099b..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-018.md +++ /dev/null @@ -1,101 +0,0 @@ ---- -id: 5d792533717672657b81aa69 -title: Part 18 -challengeType: 0 -dashedName: part-18 ---- - -# --description-- - -When defining an arrow function with a single argument, the parentheses can be omitted: - -```js -const greeting = name => `Hello !`; -``` - -Define a function `highPrecedence` which takes a single argument `str` and returns it. - -# --hints-- - -See description above for instructions. - -```js -assert(highPrecedence('a') === 'a'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-019.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-019.md deleted file mode 100644 index df724f07d5..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-019.md +++ /dev/null @@ -1,108 +0,0 @@ ---- -id: 5d7925335ab63018dcec11fe -title: Part 19 -challengeType: 0 -dashedName: part-19 ---- - -# --description-- - -Arrow functions can have multiple statements: - -```js -const fn = (x, y) => { - const result = x + y; - return result; // explicit return statement required -}; -``` - -Use this syntax for the `highPrecedence` function. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('highPrecedence=str=>{returnstr')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-020.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-020.md deleted file mode 100644 index 65d7ed32a9..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-020.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: 5d7925330f300c342315066d -title: Part 20 -challengeType: 0 -dashedName: part-20 ---- - -# --description-- - -In `highPrecedence`, define `regex` to be `/([0-9.]+)([*\/])([0-9.]+)/`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('regex=/([0-9.]+)([*\\/])([0-9.]+)/')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-021.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-021.md deleted file mode 100644 index 677a211245..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-021.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -id: 5d792533aa6443215c9b16bf -title: Part 21 -challengeType: 0 -dashedName: part-21 ---- - -# --description-- - -Now, assign the result of calling `infixEval` with `str` and `regex` to `str2`. Return `str2`. - -# --hints-- - -See description above for instructions. - -```js -assert(highPrecedence('7*6') === '42' && highPrecedence('50/25') === '2'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-022.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-022.md deleted file mode 100644 index 0b9f1a5302..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-022.md +++ /dev/null @@ -1,118 +0,0 @@ ---- -id: 5d7925334c5e22586dd72962 -title: Part 22 -challengeType: 0 -dashedName: part-22 ---- - -# --description-- - -The ternary operator has the following syntax: - -```js -const result = condition ? valueIfTrue : valueIfFalse; -const result = 1 === 1 ? 1 : 0; // 1 -const result = 9 > 10 ? "Yes" : "No"; // "No" -``` - -Use this operator to return `str` if `str === str2`, and an empty string (`""`) otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert( - highPrecedence('2*2') === '' && - highPrecedence('2+2') === '2+2' && - code.includes('?') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-023.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-023.md deleted file mode 100644 index a04e721fb2..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-023.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -id: 5d79253307ecd49e030bdcd1 -title: Part 23 -challengeType: 0 -dashedName: part-23 ---- - -# --description-- - -Recursion is when a function calls itself. We often use it instead of `while`/`for` loops, as loops usually involve mutable state. - -Replace the empty string in `highPrecedence` with a call to `highPrecedence` with `str2` as argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - highPrecedence('2*2*2') === '8' && - highPrecedence('2*2') === '4' && - highPrecedence('2+2') === '2+2' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-024.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-024.md deleted file mode 100644 index 2aa72f9fde..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-024.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -id: 5d792534257122211d3043af -title: Part 24 -challengeType: 0 -dashedName: part-24 ---- - -# --description-- - -Define an object `spreadsheetFunctions`, with a single key - an empty string (`""`). The corresponding value should be the function `x => x`. - -# --hints-- - -See description above for instructions. - -```js -assert(spreadsheetFunctions['']('x') === 'x'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-025.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-025.md deleted file mode 100644 index f568ad3feb..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-025.md +++ /dev/null @@ -1,118 +0,0 @@ ---- -id: 5d7925346f4f2da6df4354a6 -title: Part 25 -challengeType: 0 -dashedName: part-25 ---- - -# --description-- - -Define an empty function `applyFn` which takes an argument `str`. Use the curly brace syntax with an anonymous function. Do not wrap parentheses around the parameter. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constapplyFn=str=>{}')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-026.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-026.md deleted file mode 100644 index 8a2bfc2bc6..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-026.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -id: 5d792534cac2dbe0a719ea7a -title: Part 26 -challengeType: 0 -dashedName: part-26 ---- - -# --description-- - -Set `noHigh` to `highPrecedence(str)` in `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constapplyFn=str=>{constnoHigh=highPrecedence(str)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-027.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-027.md deleted file mode 100644 index 34bc2b288d..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-027.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -id: 5d792534857332d07ccba3ad -title: Part 27 -challengeType: 0 -dashedName: part-27 ---- - -# --description-- - -Set `infix` to `/([0-9.]+)([+-])([0-9.]+)/` in `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constapplyFn=str=>{constnoHigh=highPrecedence(str);constinfix=/([0-9.]+)([+-])([0-9.]+)/' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-028.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-028.md deleted file mode 100644 index 2e5c445af1..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-028.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -id: 5d792534d586ef495ea9df90 -title: Part 28 -challengeType: 0 -dashedName: part-28 ---- - -# --description-- - -Set `str2` to `infixEval(noHigh, infix)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constapplyFn=str=>{constnoHigh=highPrecedence(str);constinfix=/([0-9.]+)([+-])([0-9.]+)/;conststr2=infixEval(noHigh,infix)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-029.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-029.md deleted file mode 100644 index c151c5f91b..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-029.md +++ /dev/null @@ -1,132 +0,0 @@ ---- -id: 5d79253410532e13d13fe574 -title: Part 29 -challengeType: 0 -dashedName: part-29 ---- - -# --description-- - -Set `regex` to `/([a-z]*)\(([0-9., ]*)\)(?!.*\()/i` in `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert( - applyFn - .toString() - .replace(/\s/g, '') - .includes('varregex=/([a-z]*)\\(([0-9.,]*)\\)(?!.*\\()/i') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-030.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-030.md deleted file mode 100644 index 6c0b270973..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-030.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -id: 5d7925342415527083bd6667 -title: Part 30 -challengeType: 0 -dashedName: part-30 ---- - -# --description-- - -The `split` method returns an array of strings from a larger string by using its argument to determine where to make each split: - -```js -"a b c".split(" "); // ["a", "b", "c"]; -``` - -Add a function `toNumberList` (inside `applyFn`) which takes an argument `args` and splits it by commas. Return `toNumberList`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(applyFn('')('foo,baz,bar')) === '["foo","baz","bar"]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-031.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-031.md deleted file mode 100644 index 5496e05313..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-031.md +++ /dev/null @@ -1,140 +0,0 @@ ---- -id: 5d792534c3d26890ac1484d4 -title: Part 31 -challengeType: 0 -dashedName: part-31 ---- - -# --description-- - -The `map` method takes a function and for each element of an array, it passes the element to the function and replace the element with the return value: - -```js -[1, 2, 3].map(x => x + 1); // [2, 3, 4] -``` - -In `toNumberList`, chain the `map` method to `args.split(",")` and pass it `parseFloat` to parse each element of the array into a number. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('consttoNumberList=args=>args.split(",").map(parseFloat)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-032.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-032.md deleted file mode 100644 index 0ebf9a35f9..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-032.md +++ /dev/null @@ -1,137 +0,0 @@ ---- -id: 5d792534b92f3d1cd4410ce3 -title: Part 32 -challengeType: 0 -dashedName: part-32 ---- - -# --description-- - -Define a new function `applyFunction` (inside `applyFn`). It should take two arguments: `fn` and `args`, and should return `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-033.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-033.md deleted file mode 100644 index cf487c21e0..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-033.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: 5d7925341193948dfe6d76b4 -title: Part 33 -challengeType: 0 -dashedName: part-33 ---- - -# --description-- - -Now, instead of returning `spreadsheetFunctions`, use bracket notation and `fn.toLowerCase()` to get a specific function from `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions[fn.toLowerCase()]' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-034.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-034.md deleted file mode 100644 index 67d0591b16..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-034.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -id: 5d792534cf81365cfca58794 -title: Part 34 -challengeType: 0 -dashedName: part-34 ---- - -# --description-- - -Apply `toNumberList(args)` to `spreadsheetFunctions[fn.toLowerCase()]`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions[fn.toLowerCase()](toNumberList(args))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-035.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-035.md deleted file mode 100644 index 7ec1032c24..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-035.md +++ /dev/null @@ -1,137 +0,0 @@ ---- -id: 5d7925348ee084278ff15556 -title: Part 35 -challengeType: 0 -dashedName: part-35 ---- - -# --description-- - -Note that `applyFunction` can access `toNumberList` from outside of itself. This is called lexical scoping - inner functions can access variables from outer functions. - -Now return `str2.replace(regex, "")` at the end of `applyFn`. - -# --hints-- - -See description above for instructions. - -```js -assert(applyFn('2*2fn(1, 2, 3.3)') === '4'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-036.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-036.md deleted file mode 100644 index 14f81423a7..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-036.md +++ /dev/null @@ -1,140 +0,0 @@ ---- -id: 5d7925348a6a41c32f7a4e3e -title: Part 36 -challengeType: 0 -dashedName: part-36 ---- - -# --description-- - -Replace the `""` in `str2.replace(regex, "")` with a function which takes `match`, `fn` and `args` as arguments and returns `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('returnstr2.replace(regex,(match,fn,args)=>spreadsheetFunctions)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-037.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-037.md deleted file mode 100644 index e96d38723a..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-037.md +++ /dev/null @@ -1,148 +0,0 @@ ---- -id: 5d792534408c5be896b0a46e -title: Part 37 -challengeType: 0 -dashedName: part-37 ---- - -# --description-- - -The `hasOwnProperty` method checks if a key exists in an object. So `spreadsheetFunctions.hasOwnProperty("")` would return `true`, but replacing `""` with anything else would make it return `false`. - -Chain `hasOwnProperty` to `spreadsheetFunctions` to check if the `fn.toLowerCase()` key exists in `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'returnstr2.replace(regex,(match,fn,args)=>spreadsheetFunctions.hasOwnProperty(fn.toLowerCase()))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-038.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-038.md deleted file mode 100644 index 910fe39b53..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-038.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -id: 5d792534f0eda837510e9192 -title: Part 38 -challengeType: 0 -dashedName: part-38 ---- - -# --description-- - -Now use the ternary operator in the last line to return `applyFunction(fn, args)` if the statement is true, and `match` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert(applyFn('2+2*2') === '6' && applyFn('(2+2)*2') === '4*2'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-039.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-039.md deleted file mode 100644 index e8ddd4a988..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-039.md +++ /dev/null @@ -1,148 +0,0 @@ ---- -id: 5d7925346b911fce161febaf -title: Part 39 -challengeType: 0 -dashedName: part-39 ---- - -# --description-- - -Now define an empty function `range` which takes `start` and `end` as arguments (define it in the global scope). - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constrange=(start,end)=>')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-040.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-040.md deleted file mode 100644 index 32c88b8d2b..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-040.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 5d79253483eada4dd69258eb -title: Part 40 -challengeType: 0 -dashedName: part-40 ---- - -# --description-- - -`range` should set `arr` to `[start]` and should then return `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constarr=[start]') && - JSON.stringify(range(1)) === '[1]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-041.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-041.md deleted file mode 100644 index 843c12b735..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-041.md +++ /dev/null @@ -1,155 +0,0 @@ ---- -id: 5d7925342b2b993ef18cd45f -title: Part 41 -challengeType: 0 -dashedName: part-41 ---- - -# --description-- - -After declaring `arr`, but before returning it, `range` should use the `push` method to add `end` onto `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(range(1, 2)) === '[1,2]' && code.includes('push')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-042.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-042.md deleted file mode 100644 index 9ddaa8e8c4..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-042.md +++ /dev/null @@ -1,168 +0,0 @@ ---- -id: 5d7925341747ad42b12f8e68 -title: Part 42 -challengeType: 0 -dashedName: part-42 ---- - -# --description-- - -This is still valid because we're modifying `arr` in place instead of reassigning to it (which is invalid with the `const` keyword). But doing this still modifies state, and we don't want to do that in functional programming. - -The `concat` method returns a new array instead of modifying an existing one: - -```js -[1,2,3].concat(4); // [1, 2, 3, 4] -[1,2,3].concat(4, 5); // [1, 2, 3, 4, 5] -``` - -Use `concat` instead of `push` to return the result of adding `end` to `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(range(1, 2)) === '[1,2]' && - code.includes('concat') && - !code.includes('push') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-043.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-043.md deleted file mode 100644 index 9ddf9141d3..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-043.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -id: 5d792535b0b3c198ee3ed6f9 -title: Part 43 -challengeType: 0 -dashedName: part-43 ---- - -# --description-- - -The `concat` method can also accept arrays: - -```js -[1,2,3].concat([4, 5]); // [1, 2, 3, 4, 5] -[1,2,3].concat([4, 5], [6, 7]); // [1, 2, 3, 4, 5, 6, 7] -``` - -Use this form of `concat` by passing an array with just `end` to it: `arr.concat([end])`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('returnarr.concat([end])')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-044.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-044.md deleted file mode 100644 index 4fd31514d2..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-044.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 5d7925357a0533eb221b005d -title: Part 44 -challengeType: 0 -dashedName: part-44 ---- - -# --description-- - -Replace the call to `arr` in `arr.concat([end])` with `[start]` and remove the `arr` variable and its definition. - -# --hints-- - -See description above for instructions. - -```js -assert( - !code.includes('arr') && - code.replace(/\s/g, '').includes('[start].concat([end])') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-045.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-045.md deleted file mode 100644 index b099301946..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-045.md +++ /dev/null @@ -1,155 +0,0 @@ ---- -id: 5d792535591db67ee15b4106 -title: Part 45 -challengeType: 0 -dashedName: part-45 ---- - -# --description-- - -Use the ternary operator to return `[]` if `start > end` and `[start].concat([end])` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(range(3, 2)) === '[]' && - JSON.stringify(range(1, 3)) === '[1,3]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-046.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-046.md deleted file mode 100644 index 44e09a7c9c..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-046.md +++ /dev/null @@ -1,152 +0,0 @@ ---- -id: 5d792535f1f7adf77de5831d -title: Part 46 -challengeType: 0 -dashedName: part-46 ---- - -# --description-- - -Replace `[end]` with a recursive call to `range`: `[start].concat(range(start + 1, end))` - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(range(1, 5)) === '[1,2,3,4,5]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-047.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-047.md deleted file mode 100644 index c47ac9594f..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-047.md +++ /dev/null @@ -1,157 +0,0 @@ ---- -id: 5d7925353d2c505eafd50cd9 -title: Part 47 -challengeType: 0 -dashedName: part-47 ---- - -# --description-- - -Remove the curly braces and `return` keyword from `range`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constrange=(start,end)=>start>end?[]:[start].concat(range(start+1,end))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-048.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-048.md deleted file mode 100644 index 288bfd4f20..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-048.md +++ /dev/null @@ -1,152 +0,0 @@ ---- -id: 5d79253539b5e944ba3e314c -title: Part 48 -challengeType: 0 -dashedName: part-48 ---- - -# --description-- - -Define a function `charRange` which takes `start` and `end` as arguments. It should return `start`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constcharRange=(start,end)=>start')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-049.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-049.md deleted file mode 100644 index f04d998459..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-049.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5d792535a4f1cbff7a8b9a0b -title: Part 49 -challengeType: 0 -dashedName: part-49 ---- - -# --description-- - -Make `charRange` return `range(start, end)`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(charRange(1, 5)) === '[1,2,3,4,5]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-050.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-050.md deleted file mode 100644 index b8ff79a3c1..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-050.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -id: 5d792535e3304f15a8890162 -title: Part 50 -challengeType: 0 -dashedName: part-50 ---- - -# --description-- - -Use the `charCodeAt(0)` method on `start` and `end` in `charRange`, like this: `start.charCodeAt(0)`. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(charRange('A', 'C')) === '[65,66,67]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-051.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-051.md deleted file mode 100644 index 2c1249ec71..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-051.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 5d792535a40ea5ac549d6804 -title: Part 51 -challengeType: 0 -dashedName: part-51 ---- - -# --description-- - -Chain `map` onto `range(start.charCodeAt(0), end.charCodeAt(0))`, with `x => x` as the argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('range(start.charCodeAt(0),end.charCodeAt(0)).map(x=>x)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-052.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-052.md deleted file mode 100644 index 8040420634..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-052.md +++ /dev/null @@ -1,157 +0,0 @@ ---- -id: 5d7925358c220e5b2998909e -title: Part 52 -challengeType: 0 -dashedName: part-52 ---- - -# --description-- - -Now, pass `x` to `String.fromCharCode` in the arrow function. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(charRange('A', 'C')) === '["A","B","C"]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-053.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-053.md deleted file mode 100644 index bf05e022cb..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-053.md +++ /dev/null @@ -1,171 +0,0 @@ ---- -id: 5d7925357729e183a49498aa -title: Part 53 -challengeType: 0 -dashedName: part-53 ---- - -# --description-- - -Create a new function `evalFormula` which takes a single argument, `x`. Set `/([A-J])([1-9][0-9]?):([A-J])([1-9][0-9]?)/gi` to a variable named `rangeRegex`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constevalFormula=x=>{constrangeRegex=/([A-J])([1-9][0-9]?):([A-J])([1-9][0-9]?)/gi' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-054.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-054.md deleted file mode 100644 index ccb38b4bed..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-054.md +++ /dev/null @@ -1,174 +0,0 @@ ---- -id: 5d79253555aa652afbb68086 -title: Part 54 -challengeType: 0 -dashedName: part-54 ---- - -# --description-- - -Define a function `rangeFromString` in `evalFormula` which takes `n1` and `n2` as arguments and returns `n1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constrangeFromString=\(n1,n2\)=>n1/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-055.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-055.md deleted file mode 100644 index 71fc1817d8..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-055.md +++ /dev/null @@ -1,174 +0,0 @@ ---- -id: 5d79253582be306d339564f6 -title: Part 55 -challengeType: 0 -dashedName: part-55 ---- - -# --description-- - -Replace the `n1` return value in `rangeFromString` with `range(n1, n2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constrangeFromString=\(n1,n2\)=>range\(n1,n2\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-056.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-056.md deleted file mode 100644 index 49dc821958..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-056.md +++ /dev/null @@ -1,174 +0,0 @@ ---- -id: 5d7925352047e5c54882c436 -title: Part 56 -challengeType: 0 -dashedName: part-56 ---- - -# --description-- - -As `n1` and `n2` are actually strings, replace `n1` and `n2` with `parseInt(n1)` and `parseInt(n2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constrangeFromString=\(n1,n2\)=>range\(parseInt\(n1\),parseInt\(n2\)\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-057.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-057.md deleted file mode 100644 index 0156dce11a..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-057.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -id: 5d79253568e441c0adf9db9f -title: Part 57 -challengeType: 0 -dashedName: part-57 ---- - -# --description-- - -Now define a function `elemValue`, which takes an argument `n` and returns `n`. Use the curly brace arrow function syntax. - -# --hints-- - -See description above for instructions. - -```js -assert( - /evalFormula.*constelemValue=n=>\{returnn;?\}/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-058.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-058.md deleted file mode 100644 index c3d88365c9..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-058.md +++ /dev/null @@ -1,181 +0,0 @@ ---- -id: 5d7925356ab117923b80c9cd -title: Part 58 -challengeType: 0 -dashedName: part-58 ---- - -# --description-- - -Inside `elemValue`, define `fn` to be a function which takes `c` as argument and returns `document.getElementById(c + n).value`. Return `fn` instead of `n`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /elemValue.*constfn=\(?c\)?=>document\.getElementById\(c\+n\)\.value;?returnfn;?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-059.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-059.md deleted file mode 100644 index 90717f38f7..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-059.md +++ /dev/null @@ -1,181 +0,0 @@ ---- -id: 5d792535e54a8cd729a0d708 -title: Part 59 -challengeType: 0 -dashedName: part-59 ---- - -# --description-- - -Now define `fn` to be `elemValue("1")` (inside `evalFormula` but outside `elemValue`). As `elemValue` returns a function, `fn` is also a function. - -# --hints-- - -See description above for instructions. - -```js -assert( - /elemValue.*constfn=elemValue\(['"]1['"]\);?\}/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-060.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-060.md deleted file mode 100644 index c640a7157d..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-060.md +++ /dev/null @@ -1,185 +0,0 @@ ---- -id: 5d7925353b307724a462b06b -title: Part 60 -challengeType: 0 -dashedName: part-60 ---- - -# --description-- - -Finally, return `fn("A")`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /elemValue.*constfn=elemValue\(['"]1['"]\);?returnfn\(['"]A['"]\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-061.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-061.md deleted file mode 100644 index dcda220719..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-061.md +++ /dev/null @@ -1,187 +0,0 @@ ---- -id: 5d792536735f71d746ee5d99 -title: Part 61 -challengeType: 0 -dashedName: part-61 ---- - -# --description-- - -You might think that this wouldn't work because `fn` wouldn't have access to `n` after `elemValue` has finished executing. However, this works because of closures - functions have access to all variables declared at their time of creation. - -Inside `elemValue`, remove the variable `fn` and its definition, and replace `return fn` with `return c => document.getElementById(c + n).value`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constelemValue=n=>{returnc=>document.getElementById(c+n).value') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-062.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-062.md deleted file mode 100644 index 4688244267..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-062.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 5d792536ad340d9dff2e4a96 -title: Part 62 -challengeType: 0 -dashedName: part-62 ---- - -# --description-- - -Now, remove the curly braces and return statement. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constelemValue=n=>\(?c=>document\.getElementById\(c\+n\)\.value/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-063.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-063.md deleted file mode 100644 index 1591ad51d1..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-063.md +++ /dev/null @@ -1,181 +0,0 @@ ---- -id: 5d7925369614afd92d01fed5 -title: Part 63 -challengeType: 0 -dashedName: part-63 ---- - -# --description-- - -You also don't need the parentheses in `elemValue` - it's parsed this way automatically. Remove them. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constelemValue=n=>c=>document\.getElementById\(c\+n\)\.value/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-064.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-064.md deleted file mode 100644 index fcadae3262..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-064.md +++ /dev/null @@ -1,180 +0,0 @@ ---- -id: 5d792536504e68254fe02236 -title: Part 64 -challengeType: 0 -dashedName: part-64 ---- - -# --description-- - -The technique we just used is called currying - instead of taking multiple arguments, a function takes a single argument and return another function, which also takes a single argument. - -Define a new curried function, `addChars`, and set it equal to `c1 => c2 => c1 + c2`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>c1+c2')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-065.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-065.md deleted file mode 100644 index 5f1361ce97..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-065.md +++ /dev/null @@ -1,184 +0,0 @@ ---- -id: 5d792536c8d2f0fdfad768fe -title: Part 65 -challengeType: 0 -dashedName: part-65 ---- - -# --description-- - -You can add more arguments by simply adding another arrow with another argument name: - -```js -const manyArguments = a => b => c => d => [a, b, c, d] -``` - -Add another argument to `addChars` and add it to the sum: `c1 => c2 => n => c1 + c2 + n`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>n=>c1+c2+n')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-066.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-066.md deleted file mode 100644 index ed6ce2aece..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-066.md +++ /dev/null @@ -1,180 +0,0 @@ ---- -id: 5d79253639028b8ec56afcda -title: Part 66 -challengeType: 0 -dashedName: part-66 ---- - -# --description-- - -Replace the body of `addChars`, so that instead of adding the arguments, it returns a `charRange` between the first two arguments: `c1 => c2 => n => charRange(c1, c2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>n=>charRange(c1,c2)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-067.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-067.md deleted file mode 100644 index 002ac9edb4..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-067.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 5d792536834f2fd93e84944f -title: Part 67 -challengeType: 0 -dashedName: part-67 ---- - -# --description-- - -You call curried functions like this: - -```js -const result = add(1)(2); -``` - -Use `map` on the `charRange` in `addChars`, passing in `x => elemValue(n)(x)` as the argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constaddChars=c1=>c2=>n=>charRange(c1,c2).map(x=>elemValue(n)(x))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-068.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-068.md deleted file mode 100644 index 34db17da4a..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-068.md +++ /dev/null @@ -1,184 +0,0 @@ ---- -id: 5d792536ddff9ea73c90a994 -title: Part 68 -challengeType: 0 -dashedName: part-68 ---- - -# --description-- - -However, you don't need an arrow function. As `elemValue(n)` is a function, you can pass it to `map` directly. - -Change `x => elemValue(n)(x)` to `elemValue(n)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constaddChars=c1=>c2=>n=>charRange(c1,c2).map(elemValue(n))') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-069.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-069.md deleted file mode 100644 index b8e784be5e..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-069.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -id: 5d7925361596f84067904f7f -title: Part 69 -challengeType: 0 -dashedName: part-69 ---- - -# --description-- - -Remove the `fn` declaration and return statement. Set `varRangeExpanded` to the result of using the `replace` method on `x`, with `rangeRegex` as the first argument and `""` as the second argument. Then, return it. - -# --hints-- - -See description above for instructions. - -```js -assert( - !code.includes('const fn') && - code.includes('varRangeExpanded') && - evalFormula('A1:J133') === '3' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-070.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-070.md deleted file mode 100644 index 68526cac21..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-070.md +++ /dev/null @@ -1,186 +0,0 @@ ---- -id: 5d792536dd8a4daf255488ac -title: Part 70 -challengeType: 0 -dashedName: part-70 ---- - -# --description-- - -Replace the `""` in `varRangeExpanded` with a function, which takes `match`, `c1`, `n1`, `c2` and `n2` as arguments, and returns `n1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>n1)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-071.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-071.md deleted file mode 100644 index ab3dcf48bb..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-071.md +++ /dev/null @@ -1,188 +0,0 @@ ---- -id: 5d792536449c73004f265fb1 -title: Part 71 -challengeType: 0 -dashedName: part-71 ---- - -# --description-- - -Replace the `n1` return value in `varRangeExpanded` with `rangeFromString(n1, n2)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>rangeFromString(n1,n2))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-072.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-072.md deleted file mode 100644 index b80a304f66..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-072.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -id: 5d79253685fc69b8fe60a0d2 -title: Part 72 -challengeType: 0 -dashedName: part-72 ---- - -# --description-- - -Chain the `map` method to `rangeFromString(n1, n2)` and pass it `addChars(c1)(c2)` as an argument. - -This returns an `addChars` function, which has `c1` and `c2` (the characters) preset, and only needs a number (`n`) to be passed to it (which we get from the `rangeFromString` array). - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>rangeFromString(n1,n2).map(addChars(c1)(c2)))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-073.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-073.md deleted file mode 100644 index fff03229b8..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-073.md +++ /dev/null @@ -1,186 +0,0 @@ ---- -id: 5d792536dc6e3ab29525de9e -title: Part 73 -challengeType: 0 -dashedName: part-73 ---- - -# --description-- - -The function in `varRangeExpanded` contains an unused argument. Replace or prefix it with an underscore. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constvarRangeExpanded=x.replace(rangeRegex,(_') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-074.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-074.md deleted file mode 100644 index 5c4dc2d246..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-074.md +++ /dev/null @@ -1,188 +0,0 @@ ---- -id: 5d792536cfd0fd893c630abb -title: Part 74 -challengeType: 0 -dashedName: part-74 ---- - -# --description-- - -Set `varRegex` to `/[A-J][1-9][0-9]?/gi`. Then set `varExpanded` to the result of replacing `varRegex` with an empty string in `varRangeExpanded`. Return `varExpanded`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.includes('varRegex') && - code.includes('varExpanded') && - evalFormula('aC12bc') === 'abc' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-075.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-075.md deleted file mode 100644 index 1f391b442e..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-075.md +++ /dev/null @@ -1,195 +0,0 @@ ---- -id: 5d7925366a5ff428fb483b40 -title: Part 75 -challengeType: 0 -dashedName: part-75 ---- - -# --description-- - -Replace the `""` in `varExpanded` with `match => document.getElementById(match.toUpperCase()).value`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constvarExpanded=varRangeExpanded.replace(varRegex,match=>document.getElementById(match.toUpperCase()).value)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-076.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-076.md deleted file mode 100644 index 891d4a5da5..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-076.md +++ /dev/null @@ -1,193 +0,0 @@ ---- -id: 5d7925365d4035eeb2e395fd -title: Part 76 -challengeType: 0 -dashedName: part-76 ---- - -# --description-- - -Set `functionExpanded` to `applyFn(varExpanded)` in `evalFormula`. Return `functionExpanded`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.includes('functionExpanded') && applyFn('2+2') === '4'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-077.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-077.md deleted file mode 100644 index 5bb94f0fc4..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-077.md +++ /dev/null @@ -1,198 +0,0 @@ ---- -id: 5d7925364c106e9aaf05a16f -title: Part 77 -challengeType: 0 -dashedName: part-77 ---- - -# --description-- - -`evalFormula` should return the value passed to it if this value remained unchanged. Otherwise, it should call itself with the latest value. - -Use the ternary operator in the last line of `evalFormula` to return `functionExpanded` if `x === functionExpanded` and `evalFormula(functionExpanded)` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert(evalFormula('(2+2)*2') === '8'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-078.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-078.md deleted file mode 100644 index 9247a03aec..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-078.md +++ /dev/null @@ -1,206 +0,0 @@ ---- -id: 5d792536970cd8e819cc8a96 -title: Part 78 -challengeType: 0 -dashedName: part-78 ---- - -# --description-- - -You can define arrow functions without arguments: - -```js -const two = () => 2; -``` - -Define an empty arrow function without arguments and assign it to `window.onload`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('window.onload=()=>')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-079.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-079.md deleted file mode 100644 index 35d843ba73..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-079.md +++ /dev/null @@ -1,209 +0,0 @@ ---- -id: 5d792536e33baeaa60129e0a -title: Part 79 -challengeType: 0 -dashedName: part-79 ---- - -# --description-- - -In `window.onload`, assign `document.getElementById("container")` to `container`. Also assign `charRange("A", "J")` to `letters`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload=\(\)=>\{constcontainer=document\.getElementById\(["']container["']\);?constletters=charRange\(["']A["'],["']J["']\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-080.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-080.md deleted file mode 100644 index 151b312b28..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-080.md +++ /dev/null @@ -1,215 +0,0 @@ ---- -id: 5d7925379e2a488f333e2d43 -title: Part 80 -challengeType: 0 -dashedName: part-80 ---- - -# --description-- - -Now define a function `createLabel` which takes an argument `name` and has an empty body. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-081.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-081.md deleted file mode 100644 index 9c02544fa7..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-081.md +++ /dev/null @@ -1,218 +0,0 @@ ---- -id: 5d7925379000785f6d8d9af3 -title: Part 81 -challengeType: 0 -dashedName: part-81 ---- - -# --description-- - -Inside `createLabel`, assign `document.createElement("div")` to `label`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{constlabel=document\.createElement\(["']div["']\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-082.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-082.md deleted file mode 100644 index 73130f37af..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-082.md +++ /dev/null @@ -1,227 +0,0 @@ ---- -id: 5d79253791391b0acddd0ac5 -title: Part 82 -challengeType: 0 -dashedName: part-82 ---- - -# --description-- - -Add the following code to `createLabel`: - -```js -label.className = "label"; -label.textContent = name; -container.appendChild(label); -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{constlabel=document\.createElement\(["']div["']\);?label\.className=["']label["'];?label\.textContent=name;?container\.appendChild\(label\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-083.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-083.md deleted file mode 100644 index 2696ccf13a..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-083.md +++ /dev/null @@ -1,223 +0,0 @@ ---- -id: 5d7925373104ae5ae83f20a5 -title: Part 83 -challengeType: 0 -dashedName: part-83 ---- - -# --description-- - -The `forEach` method takes a function and calls it with each element of the array. - -Chain `forEach` to `letters` and pass it the `createLabel` function to create a label for each of the letters. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('letters.forEach(createLabel)')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-084.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-084.md deleted file mode 100644 index 616f9e9eef..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-084.md +++ /dev/null @@ -1,223 +0,0 @@ ---- -id: 5d7925373b7127cfaeb50c26 -title: Part 84 -challengeType: 0 -dashedName: part-84 ---- - -# --description-- - -Add `range(1, 99)` to the end of `window.onload` (the result will be discarded for now). - -# --hints-- - -See description above for instructions. - -```js -assert(/window\.onload[\s\S]*range\(1,99\);?\}/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-085.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-085.md deleted file mode 100644 index b7e36eaffc..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-085.md +++ /dev/null @@ -1,228 +0,0 @@ ---- -id: 5d792537cb3a5cd6baca5e1a -title: Part 85 -challengeType: 0 -dashedName: part-85 ---- - -# --description-- - -Chain `forEach` onto `range(1, 99)`, passing in `createLabel` as an argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(createLabel\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-086.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-086.md deleted file mode 100644 index 4fcb97a978..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-086.md +++ /dev/null @@ -1,230 +0,0 @@ ---- -id: 5d79253742f3313d55db981f -title: Part 86 -challengeType: 0 -dashedName: part-86 ---- - -# --description-- - -Replace `createLabel` with an arrow function with a block body. This would allow us to add more statements. The arrow function should take an argument `x`, and call `createLabel(x)`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-087.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-087.md deleted file mode 100644 index 5f58399a0c..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-087.md +++ /dev/null @@ -1,235 +0,0 @@ ---- -id: 5d7925379e0180a438ce7f95 -title: Part 87 -challengeType: 0 -dashedName: part-87 ---- - -# --description-- - -Inside the `range` `forEach`, use the `forEach` method on `letters`, passing in a function with argument `x` and an empty body. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload.*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{\}\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-088.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-088.md deleted file mode 100644 index 2c508883bc..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-088.md +++ /dev/null @@ -1,238 +0,0 @@ ---- -id: 5d792537c80984dfa5501b96 -title: Part 88 -challengeType: 0 -dashedName: part-88 ---- - -# --description-- - -Inside `letters.forEach`, assign `document.createElement("input")` to `input`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{constinput=document\.createElement\(["']input["']\);?\}\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-089.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-089.md deleted file mode 100644 index 3e7d194a12..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-089.md +++ /dev/null @@ -1,249 +0,0 @@ ---- -id: 5d7925377b54d8a76efb5657 -title: Part 89 -challengeType: 0 -dashedName: part-89 ---- - -# --description-- - -Add the following code to `letters.forEach`: - -```js -input.type = "text"; -input.id = y + x; -input.onchange = update; -container.appendChild(input); -``` - -# --hints-- - -See description above for instructions. - -```js -assert( - /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{constinput=document\.createElement\(["']input["']\);?input\.type=["']text["'];?input\.id=y\+x;?input\.onchange=update;?container\.appendChild\(input\);?\}\);?\}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-090.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-090.md deleted file mode 100644 index 6a62000c17..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-090.md +++ /dev/null @@ -1,250 +0,0 @@ ---- -id: 5d7925371398513549bb6395 -title: Part 90 -challengeType: 0 -dashedName: part-90 ---- - -# --description-- - -In the global scope, define a function called `update` which takes `event` as argument. It should define a variable, `element`, setting it to `event.target`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{?constelement=event\.target;?\}?/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-091.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-091.md deleted file mode 100644 index faf192a0ff..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-091.md +++ /dev/null @@ -1,255 +0,0 @@ ---- -id: 5d792537ea3eaf302bf2d359 -title: Part 91 -challengeType: 0 -dashedName: part-91 ---- - -# --description-- - -Now set `value` to `element.value.replace(/\s/g, "")`. This removes all whitespace from `element` so that we can ignore it. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-092.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-092.md deleted file mode 100644 index 4ec531ba10..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-092.md +++ /dev/null @@ -1,259 +0,0 @@ ---- -id: 5d792537533b1c7843bfd029 -title: Part 92 -challengeType: 0 -dashedName: part-92 ---- - -# --description-- - -The `includes` method works on a string and checks if the argument is its substring. - -Add an empty if statement to `update` which executes if `element.id` is **not** a substring of `value`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?\)\{\}\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-093.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-093.md deleted file mode 100644 index fb6bff3d44..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-093.md +++ /dev/null @@ -1,258 +0,0 @@ ---- -id: 5d792537dc0fe84345d4f19e -title: Part 93 -challengeType: 0 -dashedName: part-93 ---- - -# --description-- - -Add another condition to the if statement so that it only executes if the first character of `value` is `=`. Do this by adding `&& value[0] === "="` to the if statement. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?&&value\[0\]===["']=["']\)\{\}\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-094.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-094.md deleted file mode 100644 index 7a28fe467f..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-094.md +++ /dev/null @@ -1,258 +0,0 @@ ---- -id: 5d792537b6cadae0f4b0cda1 -title: Part 94 -challengeType: 0 -dashedName: part-94 ---- - -# --description-- - -The `slice` method takes two arguments. It extracts characters from the string from the index specified by the first argument up to (but not including) the second argument. The index starts at 0. - -Use the `slice` method to log the first two letters of `value` to the console. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('console.log(value.slice(0,2))')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-095.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-095.md deleted file mode 100644 index c40d4d980a..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-095.md +++ /dev/null @@ -1,260 +0,0 @@ ---- -id: 5d79253770083fb730c93a93 -title: Part 95 -challengeType: 0 -dashedName: part-95 ---- - -# --description-- - -You don't have to specify the second argument in `slice`. If you don't, then `slice` will extract from the first argument to the end of the string. - -Change the call to `slice` to log all characters except the first instead. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('console.log(value.slice(1))')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-096.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-096.md deleted file mode 100644 index bb8ebca7b9..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-096.md +++ /dev/null @@ -1,264 +0,0 @@ ---- -id: 5d792537fef76b226b63b93b -title: Part 96 -challengeType: 0 -dashedName: part-96 ---- - -# --description-- - -Now change the if statement to set `element.value` to the result of passing `value.slice(1)` to `evalFormula`. There is no need to use `const` because we're modifying `element.value`, not declaring it. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?&&value\[0\]===["']=["']\)\{element\.value=evalFormula\(value\.slice\(1\)\);?\}\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-097.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-097.md deleted file mode 100644 index d4603ffabc..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-097.md +++ /dev/null @@ -1,271 +0,0 @@ ---- -id: 5d79253760fca25ccbbd8990 -title: Part 97 -challengeType: 0 -dashedName: part-97 ---- - -# --description-- - -The array destructuring syntax can be used to extract values from arrays: - -```js -const [x, y] = [1, 2]; // in variables -const fn = ([x, y]) => x + y // in functions -``` - -Use this syntax to define a function `random` in `spreadsheetFunctions` which takes the array `[x, y]` and returns `x`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /["']?random["']?:\(\[x,y\]\)=>x/.test(code.replace(/\s/g, '')) && - spreadsheetFunctions['random']([1, 2]) === 1 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-098.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-098.md deleted file mode 100644 index f7d670d94d..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-098.md +++ /dev/null @@ -1,265 +0,0 @@ ---- -id: 5d7925374321824cba309875 -title: Part 98 -challengeType: 0 -dashedName: part-98 ---- - -# --description-- - -Change the `random` function so that it returns `Math.floor(Math.random() * y + x)`. It now returns a random number within a range. - -# --hints-- - -See description above for instructions. - -```js -assert( - /["']?random["']?:\(\[x,y\]\)=>Math\.floor\(Math\.random\(\)\*y\+x\)/.test( - code.replace(/\s/g, '') - ) && spreadsheetFunctions['random']([1, 1]) === 1 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-099.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-099.md deleted file mode 100644 index 261e0347ad..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-099.md +++ /dev/null @@ -1,274 +0,0 @@ ---- -id: 5d7925381e8565a5c50ba7f1 -title: Part 99 -challengeType: 0 -dashedName: part-99 ---- - -# --description-- - -In functional programming, we strive to use a type of function called "pure functions" as much as possible. The first property of pure functions is that they always return the same value for the same arguments. - -You can check if this is the case by comparing a call to a function with another call (with the same arguments): - -```js -console.log(f(2) === f(2)); // always true for pure functions -``` - -Use this technique to check if the `random` function in `spreadsheetFunctions` is pure by passing in the following array: `[1, 1000]`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /(spreadsheetFunctions\[["']random["']\]\(1,1000\))===\1/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-100.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-100.md deleted file mode 100644 index 2774488c54..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-100.md +++ /dev/null @@ -1,269 +0,0 @@ ---- -id: 5d7925383f1b77db7f1ff59e -title: Part 100 -challengeType: 0 -dashedName: part-100 ---- - -# --description-- - -This is (probably) false, so `random` is certainly impure. - -The second property of pure functions is that they perform no side effects, which are state and I/O modifications. If you call a function without assigning the result to a variable, and it does something, then it's an impure function. - -Call `window.onload()` in `update`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /update=\(?event\)?=>\{.*window\.onload\(\).*\}/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-101.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-101.md deleted file mode 100644 index 55429a76f9..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-101.md +++ /dev/null @@ -1,266 +0,0 @@ ---- -id: 5d792538de9fa3f298bcd5f6 -title: Part 101 -challengeType: 0 -dashedName: part-101 ---- - -# --description-- - -Now try calling `highPrecedence` and pass it the string `"2*2"` without assigning it to a variable in `update`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /update=\(?event\)?=>\{.*highPrecedence\((['"])2\*2\1\).*\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-102.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-102.md deleted file mode 100644 index 056a6ffaf1..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-102.md +++ /dev/null @@ -1,268 +0,0 @@ ---- -id: 5d7925385b74f69642e1fea5 -title: Part 102 -challengeType: 0 -dashedName: part-102 ---- - -# --description-- - -Obviously, this was ignored, as all `highPrecedence` does is return a value and this value is ignored. - -Now compare `highPrecedence("2*2")` with `highPrecedence("2*2")`, and `console.log` the result. - -# --hints-- - -See description above for instructions. - -```js -assert( - /update=\(?event\)?=>\{.*console\.log\((highPrecedence\(['"]2\*2['"]\))===\1\).*\}/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-103.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-103.md deleted file mode 100644 index 12dce03c77..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-103.md +++ /dev/null @@ -1,263 +0,0 @@ ---- -id: 5d7925380ea76d55b2c97d7b -title: Part 103 -challengeType: 0 -dashedName: part-103 ---- - -# --description-- - -This is true, so `highPrecedence` might be a pure function. If you inspect it, you can see that it indeed performs no I/O and doesn't use functions like `Math.random()` - so it's pure. - -Remove the `console.log` statement. - -# --hints-- - -See description above for instructions. - -```js -assert(!code.includes('console.log')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-104.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-104.md deleted file mode 100644 index c6d66c4b42..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-104.md +++ /dev/null @@ -1,265 +0,0 @@ ---- -id: 5d792538be4fe331f1a6c008 -title: Part 104 -challengeType: 0 -dashedName: part-104 ---- - -# --description-- - -Unfortunately, impure functions are necessary - if you don't use them, the application won't perform any I/O so won't do anything. - -But we have an impure function that could be pure - `evalFormula`. It calls `document.getElementById(c + n).value`, but this value can change, even if the arguments don't. - -Change these calls to `""` - the function is now pure but doesn't work. - -# --hints-- - -See description above for instructions. - -```js -const nos = code.replace(/\s/g, ''); -assert(nos.includes('elemValue=n=>c=>""') && nos.includes('match=>""')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-105.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-105.md deleted file mode 100644 index 56b0b86f55..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-105.md +++ /dev/null @@ -1,262 +0,0 @@ ---- -id: 5d792538d169f33142175b95 -title: Part 105 -challengeType: 0 -dashedName: part-105 ---- - -# --description-- - -To make this function pure, instead of depending on application state implicitly, we can pass it down explicitly as an argument. - -Add an argument `cells` to `evalFormula`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('evalFormula=(x,cells)=>{')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-106.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-106.md deleted file mode 100644 index 719f380dee..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-106.md +++ /dev/null @@ -1,270 +0,0 @@ ---- -id: 5d792538e48b5a2c6e5bbe12 -title: Part 106 -challengeType: 0 -dashedName: part-106 ---- - -# --description-- - -When calling `evalFormula` in `update`, pass in `Array.from(document.getElementById("container").children)` as the `cells` argument. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'evalFormula(value.slice(1),Array.from(document.getElementById("container").children))' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-107.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-107.md deleted file mode 100644 index 4c60fed38f..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-107.md +++ /dev/null @@ -1,266 +0,0 @@ ---- -id: 5d7925387f3e9da5ec856dbe -title: Part 107 -challengeType: 0 -dashedName: part-107 ---- - -# --description-- - -Update the recursive call to `evalFormula` by passing in `cells` as the second argument. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('evalFormula(functionExpanded,cells)')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-108.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-108.md deleted file mode 100644 index 7afc00435c..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-108.md +++ /dev/null @@ -1,267 +0,0 @@ ---- -id: 5d79253824ae9b4a6e6f3108 -title: Part 108 -challengeType: 0 -dashedName: part-108 ---- - -# --description-- - -Add a function `idToText` to `evalFormula`, which takes the argument `id` and returns `cells`. - -# --hints-- - -See description above for instructions. - -```js -assert(/constidToText=\(?id\)?=>cells/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-109.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-109.md deleted file mode 100644 index d8de61d2a8..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-109.md +++ /dev/null @@ -1,273 +0,0 @@ ---- -id: 5d7925383f122a279f4c54ad -title: Part 109 -challengeType: 0 -dashedName: part-109 ---- - -# --description-- - -The `find` method returns the first element of an array that satisfies the function passed to it. - -Chain `find` onto `cells` and pass it `cell => cell === id`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell===id\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-110.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-110.md deleted file mode 100644 index d9cd4ea910..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-110.md +++ /dev/null @@ -1,270 +0,0 @@ ---- -id: 5d7925387b682e962f209269 -title: Part 110 -challengeType: 0 -dashedName: part-110 ---- - -# --description-- - -In `idToText`, use the `id` property of `cell` to make sure the argument is equal to the cell's id rather than the cell itself. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell\.id===id\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-111.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-111.md deleted file mode 100644 index 6010072093..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-111.md +++ /dev/null @@ -1,270 +0,0 @@ ---- -id: 5d792538de774217b173288e -title: Part 111 -challengeType: 0 -dashedName: part-111 ---- - -# --description-- - -Use the `value` property on the result of `idToText` to return the text inside the cell, rather than the cell itself. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell\.id===id\)\.value/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-112.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-112.md deleted file mode 100644 index c9e7086ced..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-112.md +++ /dev/null @@ -1,267 +0,0 @@ ---- -id: 5d79253891d93585323d1f3c -title: Part 112 -challengeType: 0 -dashedName: part-112 ---- - -# --description-- - -Change the empty string in `elemValue` to the result of calling `idToText` with `c + n`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').includes('elemValue=n=>c=>idToText(c+n)')); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-113.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-113.md deleted file mode 100644 index 2060ef06b0..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-113.md +++ /dev/null @@ -1,269 +0,0 @@ ---- -id: 5d7925384e34e944ecb4612d -title: Part 113 -challengeType: 0 -dashedName: part-113 ---- - -# --description-- - -Change the empty string in `varExpanded` to the result of calling `idToText` with `match.toUpperCase()`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('match=>idToText(match.toUpperCase())') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-114.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-114.md deleted file mode 100644 index 40978e5993..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-114.md +++ /dev/null @@ -1,271 +0,0 @@ ---- -id: 5d792538631844ad0bdfb4c3 -title: Part 114 -challengeType: 0 -dashedName: part-114 ---- - -# --description-- - -`evalFormula` is now pure, as it now has no external dependencies, and as before, performs no side effects. - -Now define a new function, `increment` inside `spreadsheetFunctions`, which takes `nums` as argument and uses `map` to increment each value of `nums` by 1. - -# --hints-- - -See description above for instructions. - -```js -assert(JSON.stringify(spreadsheetFunctions.increment([1, 5, 3])) === '[2,6,4]'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-115.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-115.md deleted file mode 100644 index e111bcb79b..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-115.md +++ /dev/null @@ -1,277 +0,0 @@ ---- -id: 5d792538e2a8d20cc580d481 -title: Part 115 -challengeType: 0 -dashedName: part-115 ---- - -# --description-- - -The `slice` method can also work on arrays. - -Add a method `firsttwo` to `spreadsheetFunctions` which takes `arr` as argument and uses `slice` to return the first two elements of `arr`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.firsttwo([2, 6, 1, 4, 3])) === '[2,6]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-116.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-116.md deleted file mode 100644 index 13e96fed7a..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-116.md +++ /dev/null @@ -1,283 +0,0 @@ ---- -id: 5d792538f5004390d6678554 -title: Part 116 -challengeType: 0 -dashedName: part-116 ---- - -# --description-- - -You can also pass in a negative argument to `slice` to specify that index from the end: - -```js -[2, 4, 6, 8, 10].slice(-3); // [6, 8, 10] -``` - -Use a negative index to add a function `lasttwo` which returns the last two elements of an array. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.lasttwo([2, 6, 1, 4, 3])) === '[4,3]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-117.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-117.md deleted file mode 100644 index 5fb13c0ed6..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-117.md +++ /dev/null @@ -1,286 +0,0 @@ ---- -id: 5d792539dd4fd4c96fd85f7e -title: Part 117 -challengeType: 0 -dashedName: part-117 ---- - -# --description-- - -The `%` operator returns the remainder: - -```js -4 % 3; // 1 -5 % 3; // 2 -6 % 3; // 0 -``` - -Add an `isEven` function (to the global scope) which returns whether the number passed to it is even. - -# --hints-- - -See description above for instructions. - -```js -assert(isEven(20) && !isEven(31)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-118.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-118.md deleted file mode 100644 index 1d587b4bd9..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-118.md +++ /dev/null @@ -1,290 +0,0 @@ ---- -id: 5d79253949802f8587c8bbd3 -title: Part 118 -challengeType: 0 -dashedName: part-118 ---- - -# --description-- - -The `filter` method keeps only the elements of an array that satisfy the function passed to it: - -```js -[1, 10, 8, 3, 4, 5].filter(x > 3); // [10, 8, 4, 5] -``` - -Use `filter` to add a function called `even` to `spreadsheetFunctions`, which returns all the even elements of an array, `nums`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.even([2, 3, 5, 6, 9, 4])) === '[2,6,4]' && - code.includes('filter') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-119.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-119.md deleted file mode 100644 index e14a03d3f2..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-119.md +++ /dev/null @@ -1,295 +0,0 @@ ---- -id: 5d7925395888767e9304c082 -title: Part 119 -challengeType: 0 -dashedName: part-119 ---- - -# --description-- - -The `reduce` method takes a function with an accumulator and the current value. The accumulator is initially set to the value at index 0. - -The `reduce` method then goes through each element of the array after that, passing in the element as the current value and the result of the last call as the accumulator. - -For example, here's how to multiply all the value in an array: - -```js -[2, 3, 4].reduce((a, x) => a * x); // 24 -``` - -Using `reduce`, add a function `sum` to `spreadsheetFunctions`, which sums all values in the array passed to it. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.sum([10, 5, 1, 3]) === 19 && code.includes('reduce') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-120.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-120.md deleted file mode 100644 index 404b2270b5..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-120.md +++ /dev/null @@ -1,289 +0,0 @@ ---- -id: 5d7925393b30099e37a34668 -title: Part 120 -challengeType: 0 -dashedName: part-120 ---- - -# --description-- - -The `includes` method checks if an element is in an array. - -Add a `has2` function to `spreadsheetFunctions` which checks if the inputted array has the number 2 in it. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.has2([2, 3, 5]) && !spreadsheetFunctions.has2([1, 3, 10]) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-121.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-121.md deleted file mode 100644 index f6911f04f2..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-121.md +++ /dev/null @@ -1,299 +0,0 @@ ---- -id: 5d7925398157757b23730fdd -title: Part 121 -challengeType: 0 -dashedName: part-121 ---- - -# --description-- - -The `reduce` method can take a second argument (in addition to the function), specifying the initial accumulator value. In this case, the current value starts from index 0 rather than index 1: - -```js -[1, [1, 2, 3], [3, 4, 5]].reduce((a, x) => a.concat(x), []); // [1, 1, 2, 3, 3, 4, 5] -// without the second argument, it first tries 1.concat([1, 2, 3]), but 1 is not an array -// now it first tries [].concat(1) which works -``` - -Add a function `nodups` to `spreadsheetFunctions`, with the value `arr => arr.reduce((a, x) => a.includes(x), [])`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /nodups['"]?:arr=>arr\.reduce\(\(a,x\)=>a\.includes\(x\),\[\]\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-122.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-122.md deleted file mode 100644 index e8d2eeace5..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-122.md +++ /dev/null @@ -1,291 +0,0 @@ ---- -id: 5d792539de4b9ac14dd40409 -title: Part 122 -challengeType: 0 -dashedName: part-122 ---- - -# --description-- - -Use the ternary operator in `nodups` to return `a` if `a.includes(x)` and `a.concat(x)` otherwise. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.nodups([1, 3, 1, 5, 7, 7, 9, 7])) === - '[1,3,5,7,9]' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-123.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-123.md deleted file mode 100644 index 384148b218..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-123.md +++ /dev/null @@ -1,296 +0,0 @@ ---- -id: 5d792539534f1bf991bb987f -title: Part 123 -challengeType: 0 -dashedName: part-123 ---- - -# --description-- - -ES6 introduced a shorthand object literal syntax: - -```js -const a = 10; -const myObject = { a }; -console.log(myObject); // { a: 10 } -``` - -First, move `sum` outside of `spreadsheetFunctions`. `sum` should be a function expression similar to `isEven`. - -# --hints-- - -See description above for instructions. - -```js -assert(sum([1, 2, 3]) === 6); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-124.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-124.md deleted file mode 100644 index acae8adba0..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-124.md +++ /dev/null @@ -1,291 +0,0 @@ ---- -id: 5d7925394089b762f93ffa52 -title: Part 124 -challengeType: 0 -dashedName: part-124 ---- - -# --description-- - -Now use the shorthand syntax to reference `sum` inside of `spreadsheetFunctions`. - -This both adds it to the functions you can use in the spreadsheet, and allows you to use it throughout your program. - -# --hints-- - -See description above for instructions. - -```js -assert(/[{,]sum[,}]/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-125.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-125.md deleted file mode 100644 index e997b64fbb..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-125.md +++ /dev/null @@ -1,296 +0,0 @@ ---- -id: 5d792539ec758d45a6900173 -title: Part 125 -challengeType: 0 -dashedName: part-125 ---- - -# --description-- - -The `length` property returns the length of an array. Use this property with the `sum` function to define an `average` function. - -As with `sum`, add this function to both the global scope and to `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - average([1, 5, 12]) === 6 && spreadsheetFunctions.average([1, 20, 3, 8]) === 8 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-126.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-126.md deleted file mode 100644 index 2c5eb36952..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-126.md +++ /dev/null @@ -1,306 +0,0 @@ ---- -id: 5d7925398d525f61a9ff3a79 -title: Part 126 -challengeType: 0 -dashedName: part-126 ---- - -# --description-- - -The spread operator allow you to pass multiple arguments instead of an array: - -```js -const arr = [1, 2, 3]; -const sum3 = (a, b, c) => a + b + c; -sum3(...arr); // 6 -``` - -Use the spread operator to add `range` to `spreadsheetFunctions`. - -# --hints-- - -See description above for instructions. - -```js -assert( - JSON.stringify(spreadsheetFunctions.range([1, 5])) === '[1,2,3,4,5]' && - code.includes('...') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-127.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-127.md deleted file mode 100644 index de3c69ec7f..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-127.md +++ /dev/null @@ -1,298 +0,0 @@ ---- -id: 5d792539a222f385c5c17d2b -title: Part 127 -challengeType: 0 -dashedName: part-127 ---- - -# --description-- - -Now define a `median` function which takes an argument `nums` (in the global scope). - -# --hints-- - -See description above for instructions. - -```js -assert(/constmedian=\(?nums\)?=>/.test(code.replace(/\s/g, ''))); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-128.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-128.md deleted file mode 100644 index 548c01e3da..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-128.md +++ /dev/null @@ -1,310 +0,0 @@ ---- -id: 5d7925398a7184b41b12a0e0 -title: Part 128 -challengeType: 0 -dashedName: part-128 ---- - -# --description-- - -The `sort` method sorts an array alphabetically: - -```js -["B", "C", "A"].sort(); // ["A", "B", "C"] -``` - -Assign the sorted `nums` to `sorted` in `median`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constmedian=nums=>{constsorted=nums.sort()') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-129.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-129.md deleted file mode 100644 index 6e638ef7db..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-129.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 5d7925399afb905c34730a75 -title: Part 129 -challengeType: 0 -dashedName: part-129 ---- - -# --description-- - -But our function takes an array of numbers, not strings. Luckily, you can pass a function `fn` as argument to sort: - -```js -[2, 9, 10, 15].sort((a, b) => b - a); // [10, 9, 5, 2] -``` - -If `b - a` is less than 0, then `a` will be placed before `b`. As a result, this sorts the array in descending order. - -Use `sort` to sort `nums` in ascending order. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constmedian=nums=>\{constsorted=nums\.sort\(\((.+),(.+)\)=>\1-\2\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-130.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-130.md deleted file mode 100644 index 7c7978b4ff..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-130.md +++ /dev/null @@ -1,310 +0,0 @@ ---- -id: 5d792539728d1aa7788e2c9b -title: Part 130 -challengeType: 0 -dashedName: part-130 ---- - -# --description-- - -Unfortunately, `sort` not only returns a new array, but also modifies the existing one. So our function also modifies the array passed to it - it is impure. - -You can fix this by adding `.slice()` between `nums` and `sort` - this creates a new array, that is equivalent to `nums`, but is immediately discarded, so it doesn't matter if it changes. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constmedian=nums=>\{constsorted=nums\.slice\(\)\.sort\(\((.+),(.+)\)=>\1-\2\)/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-131.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-131.md deleted file mode 100644 index 08f1fb59b9..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-131.md +++ /dev/null @@ -1,310 +0,0 @@ ---- -id: 5d79253939434a2724c0ec41 -title: Part 131 -challengeType: 0 -dashedName: part-131 ---- - -# --description-- - -Now define two variable: `length` which is `sorted.length` and `middle` which is `length / 2 - 1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constmedian=nums=>\{constsorted=nums\.slice\(\)\.sort\(\((.+),(.+)\)=>\1-\2\);?constlength=sorted\.length;?constmiddle=length\/2-1/.test( - code.replace(/\s/g, '') - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-132.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-132.md deleted file mode 100644 index ffad944ec9..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-132.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -id: 5d792539b9e1d3c54d8fe94a -title: Part 132 -challengeType: 0 -dashedName: part-132 ---- - -# --description-- - -Add a return statement to `median` so that it returns `isEven(length)`. - -# --hints-- - -See description above for instructions. - -```js -assert(median([1, 2, 3, 4]) && !median([1, 2, 3])); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-133.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-133.md deleted file mode 100644 index 1c5e09a840..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-133.md +++ /dev/null @@ -1,314 +0,0 @@ ---- -id: 5d792539b2e0bd8f9e8213e4 -title: Part 133 -challengeType: 0 -dashedName: part-133 ---- - -# --description-- - -Use the ternary operator to return `average([sorted[middle], sorted[middle + 1]])` if `length` is even, and `sorted[middle + 0.5]` otherwise. - -Note that the `middle` variable is close to the middle but is not actually the middle. - -# --hints-- - -See description above for instructions. - -```js -assert(median([1, 20, 3]) === 3 && median([27, 7, 20, 10]) === 15); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-134.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-134.md deleted file mode 100644 index 3e509e7c06..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-134.md +++ /dev/null @@ -1,318 +0,0 @@ ---- -id: 5d792539239148965a1a59a5 -title: Part 134 -challengeType: 0 -dashedName: part-134 ---- - -# --description-- - -Now add `median` to `spreadsheetFunctions`, just like you added `sum` and `average`. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.median([1, 20, 3]) === 3 && - spreadsheetFunctions.median([27, 7, 20, 10]) === 15 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-135.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-135.md deleted file mode 100644 index 6986d1e317..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-135.md +++ /dev/null @@ -1,323 +0,0 @@ ---- -id: 5d792539e1446045d0df6d28 -title: Part 135 -challengeType: 0 -dashedName: part-135 ---- - -# --description-- - -The `some` method checks if any element of the array satisfies the provided testing function. - -Add `someeven` to `spreadsheetFunctions`, which checks if any of the items passed in are even. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.someeven([1, 5, 4, 3]) && - !spreadsheetFunctions.someeven([3, 5, 9]) && - code.includes('.some') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-136.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-136.md deleted file mode 100644 index 77fd516850..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-136.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: 5d79253a2febbb77098730b9 -title: Part 136 -challengeType: 0 -dashedName: part-136 ---- - -# --description-- - -The `every` method checks if all elements of an array satisfy the provided testing function. - -Use it to add an `everyeven` function to `spreadsheetFunctions` which checks if all values passed in are even`spreadsheetFunctions` which checks if all values passed in are even. - -# --hints-- - -See description above for instructions. - -```js -assert( - spreadsheetFunctions.everyeven([2, 6, 4, 0, 20]) && - !spreadsheetFunctions.everyeven([10, 0, 9, 2]) && - code.includes('.every') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-137.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-137.md deleted file mode 100644 index 0ca5e5edcb..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-137.md +++ /dev/null @@ -1,326 +0,0 @@ ---- -id: 5d79253a98bd9fdf7ce68d0a -title: Part 137 -challengeType: 0 -dashedName: part-137 ---- - -# --description-- - -We've used recursion in `range`, but recursion can have performance issues in JavaScript. If performance is an issue, you should try to use a higher order function like `reduce`, and if you can't do that, you'll probably have to use a for/while loop. - -While we don't expect the user to enter particularly large numbers so that performance is an issue, we're going to refactor `range` as an exercise. - -Replace the body of `range` with `start`. - -# --hints-- - -See description above for instructions. - -```js -assert( - /constrange=\(start,end\)=>start(;|const)/.test(code.replace(/\s/g, '')) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-138.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-138.md deleted file mode 100644 index 986d8afd6e..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-138.md +++ /dev/null @@ -1,322 +0,0 @@ ---- -id: 5d79253a1e9abf29de64c177 -title: Part 138 -challengeType: 0 -dashedName: part-138 ---- - -# --description-- - -The `Array` function takes an argument `x` and creates an array of size `x` filled with `undefined`. - -Make `range` return an array of `undefined` with size `end - start + 1`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').includes('constrange=(start,end)=>Array(end-start+1)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-139.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-139.md deleted file mode 100644 index 6421781e30..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-139.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: 5d79253a8b29d78984369e4b -title: Part 139 -challengeType: 0 -dashedName: part-139 ---- - -# --description-- - -The `fill` method takes an argument and replaces all elements of the array with that argument. - -Use it on the array in `range` to replace everything with `start`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes('constrange=(start,end)=>Array(end-start+1).fill(start)') -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-140.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-140.md deleted file mode 100644 index 1ef0f5e749..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-140.md +++ /dev/null @@ -1,328 +0,0 @@ ---- -id: 5d79253ad297a31cbe073718 -title: Part 140 -challengeType: 0 -dashedName: part-140 ---- - -# --description-- - -The function in the `map` method can actually take a second argument: the index of the element. - -This is why you need an arrow function in `charRange` - if you don't use one, then the index will be passed to `String.fromCharCode` as the second argument, leading to unexpected results. However, it is safe for functions like `parseFloat` which take only one argument (but not for `parseInt`). - -Chain `.map((x, i) => x + i)` to `.fill(start)` to add its index to every element in the array in `range`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .includes( - 'constrange=(start,end)=>Array(end-start+1).fill(start).map((x,i)=>x+i)' - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-141.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-141.md deleted file mode 100644 index 97decd495b..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-141.md +++ /dev/null @@ -1,316 +0,0 @@ ---- -id: 5dc10b8b93704f41d279eb5b -title: Part 141 -challengeType: 0 -dashedName: part-141 ---- - -# --description-- - -Congratulations, you've finished your functional programming spreadsheet! Now test it out by crunching some numbers. - -# --hints-- - -See description above for instructions. - -```js - -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - Spreadsheet - - - -
-
-
-``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-001.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-001.md new file mode 100644 index 0000000000..ffd55741e8 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-001.md @@ -0,0 +1,76 @@ +--- +id: 5d79253297c0ebb149ea9fed +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +In functional programming, we prefer immutable values over mutable values. + +Mutable values (declared with `var` or `let`) can lead to unexpected behaviors and bugs. Values declared with `const` cannot be reassigned, which makes using them easier because you don't have to keep track of their values. + +Start by creating an empty `infixToFunction` object using `const`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constinfixToFunction={}')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-002.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-002.md new file mode 100644 index 0000000000..b47354b1de --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-002.md @@ -0,0 +1,78 @@ +--- +id: 5d7925323be8848dbc58a07a +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Above `infixToFunction`, define an empty function `add` using the `function` keyword. It should accept two parameters, `x` and `y`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('functionadd(x,y){}')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-003.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-003.md new file mode 100644 index 0000000000..0cfa096594 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-003.md @@ -0,0 +1,82 @@ +--- +id: 5d792532f631702ae6d23e11 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Now return the sum of `x` and `y` using the `return` keyword. + +# --hints-- + +See description above for instructions. + +```js +assert(add(1, 2) === 3 && add(100, 2000) === 2100); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-004.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-004.md new file mode 100644 index 0000000000..731f9c76f1 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-004.md @@ -0,0 +1,86 @@ +--- +id: 5d7925329445167ecc2ac9c9 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +In JavaScript, functions are first class. This means that they can be used like any other values - for example, they can be assigned to variables. + +Assign `add` to a new variable `addVar`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constaddVar=add')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-005.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-005.md new file mode 100644 index 0000000000..1bf015919c --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-005.md @@ -0,0 +1,92 @@ +--- +id: 5d792532b07918c3a5904913 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Anonymous functions are functions without names - they are used only once and then forgotten. The syntax is the same as for normal functions but without the name: + +```js +function(x) { + return x +} +``` + +First, remove the `addVar` definition. + +# --hints-- + +See description above for instructions. + +```js +assert(!code.replace(/\s/g, '').includes('constaddVar=add')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-006.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-006.md new file mode 100644 index 0000000000..62b4545124 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-006.md @@ -0,0 +1,92 @@ +--- +id: 5d792533cc8b18b6c133edc7 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Anonymous functions are often passed as arguments to other functions, but what if you want to call one later? You can assign anonymous functions to variables and call them with the variable's name: + +```js +const fn = function(x) { + return x; +} + +fn(); +``` + +Assign the anonymous function to the variable `addVar`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constaddVar=function(x,y){returnx+y')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-007.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-007.md new file mode 100644 index 0000000000..25ffd362fd --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-007.md @@ -0,0 +1,88 @@ +--- +id: 5d7925337954ed57a565a135 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +This is possible because the anonymous function has been immediately assigned to a value - this is effectively the same as using a named function. + +Rewrite `addVar` using ES6's arrow syntax: + +```js +const fn = (x, y) => x; +``` + +Note that the value is returned implicitly. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constaddVar=(x,y)=>x+y')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-008.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-008.md new file mode 100644 index 0000000000..2e0caf85bb --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-008.md @@ -0,0 +1,80 @@ +--- +id: 5d79253352e33dd59ec2f6de +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Add the key `+` to `infixToFunction` and assign it the value `addVar`. + +# --hints-- + +See description above for instructions. + +```js +assert(infixToFunction['+'].toString() === addVar.toString()); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-009.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-009.md new file mode 100644 index 0000000000..53cf0d29cf --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-009.md @@ -0,0 +1,82 @@ +--- +id: 5d792533d31e4f7fad33011d +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +In `infixToFunction`, replace `addVar` with `(x, y) => x + y`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/\+["']:\(x,y\)=>x\+y/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-010.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-010.md new file mode 100644 index 0000000000..40fb188871 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-010.md @@ -0,0 +1,80 @@ +--- +id: 5d792533e7707b9645d7b540 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Remove the now redundant `addVar` definition. + +# --hints-- + +See description above for instructions. + +```js +assert(typeof addVar === 'undefined'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-011.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-011.md new file mode 100644 index 0000000000..cd9ba50e3f --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-011.md @@ -0,0 +1,85 @@ +--- +id: 5d79253378595ec568f70ab6 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Add similar definitions for `-`, `*` and `/` in `infixToFunction`. + +# --hints-- + +See description above for instructions. + +```js +assert( + infixToFunction['-'](10, 2) === 8 && + infixToFunction['*'](10, 10) === 100 && + infixToFunction['/'](100, 10) === 10 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-012.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-012.md new file mode 100644 index 0000000000..14f83e7b6c --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-012.md @@ -0,0 +1,90 @@ +--- +id: 5d7925330918ae4a2f282e7e +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Use arrow function syntax to define a function `infixEval` which takes `str` and `regex` as arguments and returns `str.replace(regex, "")`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constinfixEval=\(str,regex\)=>str\.replace\(regex,['"]{2}\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-013.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-013.md new file mode 100644 index 0000000000..0da0feb538 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-013.md @@ -0,0 +1,96 @@ +--- +id: 5d792533ed00e75d129e1b18 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +`replace` is a higher order function because it can take a function as argument (higher order functions can also return functions). + +Pass the `+` function from `infixToFunction` to the `replace` method as the second argument. + +This is how you would pass the `-` function: + +```js +str.replace(regex, infixToFunction["-"]) +``` + +# --hints-- + +See description above for instructions. + +```js +assert(infixEval('ab', /(a)b/) === 'aba'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-014.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-014.md new file mode 100644 index 0000000000..ca1c93273c --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-014.md @@ -0,0 +1,95 @@ +--- +id: 5d792533a5c42fb4d1a4b70d +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Replace the second argument of `str.replace` with an anonymous function, which takes `match`, `arg1`, `fn`, and `arg2`, and returns `infixToFunction["+"]`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('str.replace(regex,(match,arg1,fn,arg2)=>infixToFunction["+"])') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-015.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-015.md new file mode 100644 index 0000000000..98e9e74f2b --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-015.md @@ -0,0 +1,100 @@ +--- +id: 5d79253358e8f646cbeb2bb0 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Change the `"+"` in the call to `infixToFunction` to `fn`. + +`fn` is the operator that the user inputs (`+`, `-`, `*` or `/`) - we use `infixToFunction` to get the function that corresponds to it. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('str.replace(regex,(match,arg1,fn,arg2)=>infixToFunction[fn])') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-016.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-016.md new file mode 100644 index 0000000000..d96b6a2d9b --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-016.md @@ -0,0 +1,102 @@ +--- +id: 5d792533bb38fab70b27f527 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +`arg1` and `arg2` are the numbers input by the user in a string such as "1+3". + +Pass `parseFloat(arg1)` and `parseFloat(arg2)` as the arguments to `infixToFunction[fn]` (remember `infixToFunction[fn]` is a function). + +# --hints-- + +See description above for instructions. + +```js +const regex = /([0-9.]+)([+-\/*])([0-9.]+)/; +assert( + infixEval('23+35', regex) === '58' && + infixEval('100-20', regex) === '80' && + infixEval('10*10', regex) === '100' && + infixEval('120/6', regex) === '20' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-017.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-017.md new file mode 100644 index 0000000000..bb7bfb098b --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-017.md @@ -0,0 +1,98 @@ +--- +id: 5d79253386060ed9eb04a070 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +The `match` parameter is currently unused, which can lead to unused variable warnings in some linters. + +To fix this, prefix or replace it with an underscore (`_`) - both ways signal to the reader and linter that you're aware you don't need this. + +Note that a single underscore can only be used once in a function and may conflict with some libraries (Lodash, Underscore.js). + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('str.replace(regex,(_')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-018.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-018.md new file mode 100644 index 0000000000..0b5eeae3de --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-018.md @@ -0,0 +1,101 @@ +--- +id: 5d792533717672657b81aa69 +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +When defining an arrow function with a single argument, the parentheses can be omitted: + +```js +const greeting = name => `Hello !`; +``` + +Define a function `highPrecedence` which takes a single argument `str` and returns it. + +# --hints-- + +See description above for instructions. + +```js +assert(highPrecedence('a') === 'a'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-019.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-019.md new file mode 100644 index 0000000000..c66eaf246d --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-019.md @@ -0,0 +1,108 @@ +--- +id: 5d7925335ab63018dcec11fe +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Arrow functions can have multiple statements: + +```js +const fn = (x, y) => { + const result = x + y; + return result; // explicit return statement required +}; +``` + +Use this syntax for the `highPrecedence` function. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('highPrecedence=str=>{returnstr')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-020.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-020.md new file mode 100644 index 0000000000..8ba07d3a77 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-020.md @@ -0,0 +1,103 @@ +--- +id: 5d7925330f300c342315066d +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +In `highPrecedence`, define `regex` to be `/([0-9.]+)([*\/])([0-9.]+)/`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('regex=/([0-9.]+)([*\\/])([0-9.]+)/')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-021.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-021.md new file mode 100644 index 0000000000..fdcf69e7ef --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-021.md @@ -0,0 +1,105 @@ +--- +id: 5d792533aa6443215c9b16bf +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Now, assign the result of calling `infixEval` with `str` and `regex` to `str2`. Return `str2`. + +# --hints-- + +See description above for instructions. + +```js +assert(highPrecedence('7*6') === '42' && highPrecedence('50/25') === '2'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-022.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-022.md new file mode 100644 index 0000000000..a1b5ab7037 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-022.md @@ -0,0 +1,118 @@ +--- +id: 5d7925334c5e22586dd72962 +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +The ternary operator has the following syntax: + +```js +const result = condition ? valueIfTrue : valueIfFalse; +const result = 1 === 1 ? 1 : 0; // 1 +const result = 9 > 10 ? "Yes" : "No"; // "No" +``` + +Use this operator to return `str` if `str === str2`, and an empty string (`""`) otherwise. + +# --hints-- + +See description above for instructions. + +```js +assert( + highPrecedence('2*2') === '' && + highPrecedence('2+2') === '2+2' && + code.includes('?') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-023.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-023.md new file mode 100644 index 0000000000..1692c3fe03 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-023.md @@ -0,0 +1,112 @@ +--- +id: 5d79253307ecd49e030bdcd1 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Recursion is when a function calls itself. We often use it instead of `while`/`for` loops, as loops usually involve mutable state. + +Replace the empty string in `highPrecedence` with a call to `highPrecedence` with `str2` as argument. + +# --hints-- + +See description above for instructions. + +```js +assert( + highPrecedence('2*2*2') === '8' && + highPrecedence('2*2') === '4' && + highPrecedence('2+2') === '2+2' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-024.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-024.md new file mode 100644 index 0000000000..052946797d --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-024.md @@ -0,0 +1,110 @@ +--- +id: 5d792534257122211d3043af +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Define an object `spreadsheetFunctions`, with a single key - an empty string (`""`). The corresponding value should be the function `x => x`. + +# --hints-- + +See description above for instructions. + +```js +assert(spreadsheetFunctions['']('x') === 'x'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-025.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-025.md new file mode 100644 index 0000000000..872da7e596 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-025.md @@ -0,0 +1,118 @@ +--- +id: 5d7925346f4f2da6df4354a6 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Define an empty function `applyFn` which takes an argument `str`. Use the curly brace syntax with an anonymous function. Do not wrap parentheses around the parameter. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constapplyFn=str=>{}')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-026.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-026.md new file mode 100644 index 0000000000..ed92a28819 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-026.md @@ -0,0 +1,126 @@ +--- +id: 5d792534cac2dbe0a719ea7a +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Set `noHigh` to `highPrecedence(str)` in `applyFn`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('constapplyFn=str=>{constnoHigh=highPrecedence(str)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-027.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-027.md new file mode 100644 index 0000000000..db4e0001ae --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-027.md @@ -0,0 +1,129 @@ +--- +id: 5d792534857332d07ccba3ad +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Set `infix` to `/([0-9.]+)([+-])([0-9.]+)/` in `applyFn`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constapplyFn=str=>{constnoHigh=highPrecedence(str);constinfix=/([0-9.]+)([+-])([0-9.]+)/' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-028.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-028.md new file mode 100644 index 0000000000..6bb77acacc --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-028.md @@ -0,0 +1,131 @@ +--- +id: 5d792534d586ef495ea9df90 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Set `str2` to `infixEval(noHigh, infix)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constapplyFn=str=>{constnoHigh=highPrecedence(str);constinfix=/([0-9.]+)([+-])([0-9.]+)/;conststr2=infixEval(noHigh,infix)' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-029.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-029.md new file mode 100644 index 0000000000..3b99b32278 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-029.md @@ -0,0 +1,132 @@ +--- +id: 5d79253410532e13d13fe574 +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Set `regex` to `/([a-z]*)\(([0-9., ]*)\)(?!.*\()/i` in `applyFn`. + +# --hints-- + +See description above for instructions. + +```js +assert( + applyFn + .toString() + .replace(/\s/g, '') + .includes('varregex=/([a-z]*)\\(([0-9.,]*)\\)(?!.*\\()/i') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-030.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-030.md new file mode 100644 index 0000000000..fa189f8f58 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-030.md @@ -0,0 +1,136 @@ +--- +id: 5d7925342415527083bd6667 +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +The `split` method returns an array of strings from a larger string by using its argument to determine where to make each split: + +```js +"a b c".split(" "); // ["a", "b", "c"]; +``` + +Add a function `toNumberList` (inside `applyFn`) which takes an argument `args` and splits it by commas. Return `toNumberList`. + +# --hints-- + +See description above for instructions. + +```js +assert(JSON.stringify(applyFn('')('foo,baz,bar')) === '["foo","baz","bar"]'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-031.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-031.md new file mode 100644 index 0000000000..107b32385a --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-031.md @@ -0,0 +1,140 @@ +--- +id: 5d792534c3d26890ac1484d4 +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +The `map` method takes a function and for each element of an array, it passes the element to the function and replace the element with the return value: + +```js +[1, 2, 3].map(x => x + 1); // [2, 3, 4] +``` + +In `toNumberList`, chain the `map` method to `args.split(",")` and pass it `parseFloat` to parse each element of the array into a number. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('consttoNumberList=args=>args.split(",").map(parseFloat)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-032.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-032.md new file mode 100644 index 0000000000..05b9268651 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-032.md @@ -0,0 +1,137 @@ +--- +id: 5d792534b92f3d1cd4410ce3 +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Define a new function `applyFunction` (inside `applyFn`). It should take two arguments: `fn` and `args`, and should return `spreadsheetFunctions`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-033.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-033.md new file mode 100644 index 0000000000..1bdfaa22af --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-033.md @@ -0,0 +1,138 @@ +--- +id: 5d7925341193948dfe6d76b4 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +Now, instead of returning `spreadsheetFunctions`, use bracket notation and `fn.toLowerCase()` to get a specific function from `spreadsheetFunctions`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions[fn.toLowerCase()]' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-034.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-034.md new file mode 100644 index 0000000000..651c4641a9 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-034.md @@ -0,0 +1,139 @@ +--- +id: 5d792534cf81365cfca58794 +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Apply `toNumberList(args)` to `spreadsheetFunctions[fn.toLowerCase()]`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions[fn.toLowerCase()](toNumberList(args))' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-035.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-035.md new file mode 100644 index 0000000000..52041a7353 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-035.md @@ -0,0 +1,137 @@ +--- +id: 5d7925348ee084278ff15556 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Note that `applyFunction` can access `toNumberList` from outside of itself. This is called lexical scoping - inner functions can access variables from outer functions. + +Now return `str2.replace(regex, "")` at the end of `applyFn`. + +# --hints-- + +See description above for instructions. + +```js +assert(applyFn('2*2fn(1, 2, 3.3)') === '4'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-036.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-036.md new file mode 100644 index 0000000000..69bdad89bb --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-036.md @@ -0,0 +1,140 @@ +--- +id: 5d7925348a6a41c32f7a4e3e +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Replace the `""` in `str2.replace(regex, "")` with a function which takes `match`, `fn` and `args` as arguments and returns `spreadsheetFunctions`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('returnstr2.replace(regex,(match,fn,args)=>spreadsheetFunctions)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-037.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-037.md new file mode 100644 index 0000000000..a03de8d5a5 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-037.md @@ -0,0 +1,148 @@ +--- +id: 5d792534408c5be896b0a46e +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +The `hasOwnProperty` method checks if a key exists in an object. So `spreadsheetFunctions.hasOwnProperty("")` would return `true`, but replacing `""` with anything else would make it return `false`. + +Chain `hasOwnProperty` to `spreadsheetFunctions` to check if the `fn.toLowerCase()` key exists in `spreadsheetFunctions`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'returnstr2.replace(regex,(match,fn,args)=>spreadsheetFunctions.hasOwnProperty(fn.toLowerCase()))' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-038.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-038.md new file mode 100644 index 0000000000..0c8a1d7a02 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-038.md @@ -0,0 +1,144 @@ +--- +id: 5d792534f0eda837510e9192 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Now use the ternary operator in the last line to return `applyFunction(fn, args)` if the statement is true, and `match` otherwise. + +# --hints-- + +See description above for instructions. + +```js +assert(applyFn('2+2*2') === '6' && applyFn('(2+2)*2') === '4*2'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-039.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-039.md new file mode 100644 index 0000000000..b21e077c60 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-039.md @@ -0,0 +1,148 @@ +--- +id: 5d7925346b911fce161febaf +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Now define an empty function `range` which takes `start` and `end` as arguments (define it in the global scope). + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constrange=(start,end)=>')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-040.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-040.md new file mode 100644 index 0000000000..ccfc587e5f --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-040.md @@ -0,0 +1,156 @@ +--- +id: 5d79253483eada4dd69258eb +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +`range` should set `arr` to `[start]` and should then return `arr`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').includes('constarr=[start]') && + JSON.stringify(range(1)) === '[1]' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-041.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-041.md new file mode 100644 index 0000000000..09bb2e5d37 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-041.md @@ -0,0 +1,155 @@ +--- +id: 5d7925342b2b993ef18cd45f +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +After declaring `arr`, but before returning it, `range` should use the `push` method to add `end` onto `arr`. + +# --hints-- + +See description above for instructions. + +```js +assert(JSON.stringify(range(1, 2)) === '[1,2]' && code.includes('push')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-042.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-042.md new file mode 100644 index 0000000000..d086d56e69 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-042.md @@ -0,0 +1,168 @@ +--- +id: 5d7925341747ad42b12f8e68 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +This is still valid because we're modifying `arr` in place instead of reassigning to it (which is invalid with the `const` keyword). But doing this still modifies state, and we don't want to do that in functional programming. + +The `concat` method returns a new array instead of modifying an existing one: + +```js +[1,2,3].concat(4); // [1, 2, 3, 4] +[1,2,3].concat(4, 5); // [1, 2, 3, 4, 5] +``` + +Use `concat` instead of `push` to return the result of adding `end` to `arr`. + +# --hints-- + +See description above for instructions. + +```js +assert( + JSON.stringify(range(1, 2)) === '[1,2]' && + code.includes('concat') && + !code.includes('push') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-043.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-043.md new file mode 100644 index 0000000000..49bfe428ac --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-043.md @@ -0,0 +1,161 @@ +--- +id: 5d792535b0b3c198ee3ed6f9 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +The `concat` method can also accept arrays: + +```js +[1,2,3].concat([4, 5]); // [1, 2, 3, 4, 5] +[1,2,3].concat([4, 5], [6, 7]); // [1, 2, 3, 4, 5, 6, 7] +``` + +Use this form of `concat` by passing an array with just `end` to it: `arr.concat([end])`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('returnarr.concat([end])')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-044.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-044.md new file mode 100644 index 0000000000..31a88c59e4 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-044.md @@ -0,0 +1,156 @@ +--- +id: 5d7925357a0533eb221b005d +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Replace the call to `arr` in `arr.concat([end])` with `[start]` and remove the `arr` variable and its definition. + +# --hints-- + +See description above for instructions. + +```js +assert( + !code.includes('arr') && + code.replace(/\s/g, '').includes('[start].concat([end])') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-045.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-045.md new file mode 100644 index 0000000000..20613db9d1 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-045.md @@ -0,0 +1,155 @@ +--- +id: 5d792535591db67ee15b4106 +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Use the ternary operator to return `[]` if `start > end` and `[start].concat([end])` otherwise. + +# --hints-- + +See description above for instructions. + +```js +assert( + JSON.stringify(range(3, 2)) === '[]' && + JSON.stringify(range(1, 3)) === '[1,3]' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-046.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-046.md new file mode 100644 index 0000000000..c384f5ca0f --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-046.md @@ -0,0 +1,152 @@ +--- +id: 5d792535f1f7adf77de5831d +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Replace `[end]` with a recursive call to `range`: `[start].concat(range(start + 1, end))` + +# --hints-- + +See description above for instructions. + +```js +assert(JSON.stringify(range(1, 5)) === '[1,2,3,4,5]'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-047.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-047.md new file mode 100644 index 0000000000..752367617d --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-047.md @@ -0,0 +1,157 @@ +--- +id: 5d7925353d2c505eafd50cd9 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Remove the curly braces and `return` keyword from `range`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constrange=(start,end)=>start>end?[]:[start].concat(range(start+1,end))' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-048.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-048.md new file mode 100644 index 0000000000..bf876bd195 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-048.md @@ -0,0 +1,152 @@ +--- +id: 5d79253539b5e944ba3e314c +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Define a function `charRange` which takes `start` and `end` as arguments. It should return `start`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constcharRange=(start,end)=>start')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-049.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-049.md new file mode 100644 index 0000000000..c735a41df3 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-049.md @@ -0,0 +1,154 @@ +--- +id: 5d792535a4f1cbff7a8b9a0b +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Make `charRange` return `range(start, end)`. + +# --hints-- + +See description above for instructions. + +```js +assert(JSON.stringify(charRange(1, 5)) === '[1,2,3,4,5]'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-050.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-050.md new file mode 100644 index 0000000000..8b84baf135 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-050.md @@ -0,0 +1,154 @@ +--- +id: 5d792535e3304f15a8890162 +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Use the `charCodeAt(0)` method on `start` and `end` in `charRange`, like this: `start.charCodeAt(0)`. + +# --hints-- + +See description above for instructions. + +```js +assert(JSON.stringify(charRange('A', 'C')) === '[65,66,67]'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-051.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-051.md new file mode 100644 index 0000000000..8cb76cd848 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-051.md @@ -0,0 +1,158 @@ +--- +id: 5d792535a40ea5ac549d6804 +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Chain `map` onto `range(start.charCodeAt(0), end.charCodeAt(0))`, with `x => x` as the argument. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('range(start.charCodeAt(0),end.charCodeAt(0)).map(x=>x)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-052.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-052.md new file mode 100644 index 0000000000..517026af41 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-052.md @@ -0,0 +1,157 @@ +--- +id: 5d7925358c220e5b2998909e +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Now, pass `x` to `String.fromCharCode` in the arrow function. + +# --hints-- + +See description above for instructions. + +```js +assert(JSON.stringify(charRange('A', 'C')) === '["A","B","C"]'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-053.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-053.md new file mode 100644 index 0000000000..d7378d0072 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-053.md @@ -0,0 +1,171 @@ +--- +id: 5d7925357729e183a49498aa +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Create a new function `evalFormula` which takes a single argument, `x`. Set `/([A-J])([1-9][0-9]?):([A-J])([1-9][0-9]?)/gi` to a variable named `rangeRegex`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constevalFormula=x=>{constrangeRegex=/([A-J])([1-9][0-9]?):([A-J])([1-9][0-9]?)/gi' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-054.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-054.md new file mode 100644 index 0000000000..6eebcffd5f --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-054.md @@ -0,0 +1,174 @@ +--- +id: 5d79253555aa652afbb68086 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Define a function `rangeFromString` in `evalFormula` which takes `n1` and `n2` as arguments and returns `n1`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /evalFormula.*constrangeFromString=\(n1,n2\)=>n1/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-055.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-055.md new file mode 100644 index 0000000000..158a2274a3 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-055.md @@ -0,0 +1,174 @@ +--- +id: 5d79253582be306d339564f6 +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Replace the `n1` return value in `rangeFromString` with `range(n1, n2)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /evalFormula.*constrangeFromString=\(n1,n2\)=>range\(n1,n2\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-056.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-056.md new file mode 100644 index 0000000000..473a93c34f --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-056.md @@ -0,0 +1,174 @@ +--- +id: 5d7925352047e5c54882c436 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +As `n1` and `n2` are actually strings, replace `n1` and `n2` with `parseInt(n1)` and `parseInt(n2)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /evalFormula.*constrangeFromString=\(n1,n2\)=>range\(parseInt\(n1\),parseInt\(n2\)\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-057.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-057.md new file mode 100644 index 0000000000..af791b45fc --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-057.md @@ -0,0 +1,175 @@ +--- +id: 5d79253568e441c0adf9db9f +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Now define a function `elemValue`, which takes an argument `n` and returns `n`. Use the curly brace arrow function syntax. + +# --hints-- + +See description above for instructions. + +```js +assert( + /evalFormula.*constelemValue=n=>\{returnn;?\}/.test(code.replace(/\s/g, '')) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-058.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-058.md new file mode 100644 index 0000000000..ca5d12eae9 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-058.md @@ -0,0 +1,181 @@ +--- +id: 5d7925356ab117923b80c9cd +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Inside `elemValue`, define `fn` to be a function which takes `c` as argument and returns `document.getElementById(c + n).value`. Return `fn` instead of `n`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /elemValue.*constfn=\(?c\)?=>document\.getElementById\(c\+n\)\.value;?returnfn;?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-059.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-059.md new file mode 100644 index 0000000000..a6d28884b1 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-059.md @@ -0,0 +1,181 @@ +--- +id: 5d792535e54a8cd729a0d708 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +Now define `fn` to be `elemValue("1")` (inside `evalFormula` but outside `elemValue`). As `elemValue` returns a function, `fn` is also a function. + +# --hints-- + +See description above for instructions. + +```js +assert( + /elemValue.*constfn=elemValue\(['"]1['"]\);?\}/.test(code.replace(/\s/g, '')) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-060.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-060.md new file mode 100644 index 0000000000..9241625b17 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-060.md @@ -0,0 +1,185 @@ +--- +id: 5d7925353b307724a462b06b +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Finally, return `fn("A")`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /elemValue.*constfn=elemValue\(['"]1['"]\);?returnfn\(['"]A['"]\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-061.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-061.md new file mode 100644 index 0000000000..ebe10aa851 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-061.md @@ -0,0 +1,187 @@ +--- +id: 5d792536735f71d746ee5d99 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +You might think that this wouldn't work because `fn` wouldn't have access to `n` after `elemValue` has finished executing. However, this works because of closures - functions have access to all variables declared at their time of creation. + +Inside `elemValue`, remove the variable `fn` and its definition, and replace `return fn` with `return c => document.getElementById(c + n).value`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('constelemValue=n=>{returnc=>document.getElementById(c+n).value') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-062.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-062.md new file mode 100644 index 0000000000..b9dfb010cd --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-062.md @@ -0,0 +1,182 @@ +--- +id: 5d792536ad340d9dff2e4a96 +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Now, remove the curly braces and return statement. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constelemValue=n=>\(?c=>document\.getElementById\(c\+n\)\.value/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-063.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-063.md new file mode 100644 index 0000000000..47b7eddbc2 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-063.md @@ -0,0 +1,181 @@ +--- +id: 5d7925369614afd92d01fed5 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +You also don't need the parentheses in `elemValue` - it's parsed this way automatically. Remove them. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constelemValue=n=>c=>document\.getElementById\(c\+n\)\.value/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-064.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-064.md new file mode 100644 index 0000000000..76c4337f25 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-064.md @@ -0,0 +1,180 @@ +--- +id: 5d792536504e68254fe02236 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +The technique we just used is called currying - instead of taking multiple arguments, a function takes a single argument and return another function, which also takes a single argument. + +Define a new curried function, `addChars`, and set it equal to `c1 => c2 => c1 + c2`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>c1+c2')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-065.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-065.md new file mode 100644 index 0000000000..bc42958112 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-065.md @@ -0,0 +1,184 @@ +--- +id: 5d792536c8d2f0fdfad768fe +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +You can add more arguments by simply adding another arrow with another argument name: + +```js +const manyArguments = a => b => c => d => [a, b, c, d] +``` + +Add another argument to `addChars` and add it to the sum: `c1 => c2 => n => c1 + c2 + n`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>n=>c1+c2+n')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-066.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-066.md new file mode 100644 index 0000000000..d5c45eb00c --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-066.md @@ -0,0 +1,180 @@ +--- +id: 5d79253639028b8ec56afcda +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Replace the body of `addChars`, so that instead of adding the arguments, it returns a `charRange` between the first two arguments: `c1 => c2 => n => charRange(c1, c2)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>n=>charRange(c1,c2)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-067.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-067.md new file mode 100644 index 0000000000..c27bafcbec --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-067.md @@ -0,0 +1,190 @@ +--- +id: 5d792536834f2fd93e84944f +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +You call curried functions like this: + +```js +const result = add(1)(2); +``` + +Use `map` on the `charRange` in `addChars`, passing in `x => elemValue(n)(x)` as the argument. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constaddChars=c1=>c2=>n=>charRange(c1,c2).map(x=>elemValue(n)(x))' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-068.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-068.md new file mode 100644 index 0000000000..43b2a70734 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-068.md @@ -0,0 +1,184 @@ +--- +id: 5d792536ddff9ea73c90a994 +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +However, you don't need an arrow function. As `elemValue(n)` is a function, you can pass it to `map` directly. + +Change `x => elemValue(n)(x)` to `elemValue(n)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('constaddChars=c1=>c2=>n=>charRange(c1,c2).map(elemValue(n))') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-069.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-069.md new file mode 100644 index 0000000000..fc4da1fea3 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-069.md @@ -0,0 +1,182 @@ +--- +id: 5d7925361596f84067904f7f +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Remove the `fn` declaration and return statement. Set `varRangeExpanded` to the result of using the `replace` method on `x`, with `rangeRegex` as the first argument and `""` as the second argument. Then, return it. + +# --hints-- + +See description above for instructions. + +```js +assert( + !code.includes('const fn') && + code.includes('varRangeExpanded') && + evalFormula('A1:J133') === '3' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-070.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-070.md new file mode 100644 index 0000000000..64235330d9 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-070.md @@ -0,0 +1,186 @@ +--- +id: 5d792536dd8a4daf255488ac +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Replace the `""` in `varRangeExpanded` with a function, which takes `match`, `c1`, `n1`, `c2` and `n2` as arguments, and returns `n1`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>n1)' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-071.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-071.md new file mode 100644 index 0000000000..75f967b2bc --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-071.md @@ -0,0 +1,188 @@ +--- +id: 5d792536449c73004f265fb1 +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +Replace the `n1` return value in `varRangeExpanded` with `rangeFromString(n1, n2)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>rangeFromString(n1,n2))' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-072.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-072.md new file mode 100644 index 0000000000..6706176427 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-072.md @@ -0,0 +1,190 @@ +--- +id: 5d79253685fc69b8fe60a0d2 +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Chain the `map` method to `rangeFromString(n1, n2)` and pass it `addChars(c1)(c2)` as an argument. + +This returns an `addChars` function, which has `c1` and `c2` (the characters) preset, and only needs a number (`n`) to be passed to it (which we get from the `rangeFromString` array). + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>rangeFromString(n1,n2).map(addChars(c1)(c2)))' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-073.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-073.md new file mode 100644 index 0000000000..ed74ae0d69 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-073.md @@ -0,0 +1,186 @@ +--- +id: 5d792536dc6e3ab29525de9e +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +The function in `varRangeExpanded` contains an unused argument. Replace or prefix it with an underscore. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('constvarRangeExpanded=x.replace(rangeRegex,(_') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-074.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-074.md new file mode 100644 index 0000000000..9bf1af734f --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-074.md @@ -0,0 +1,188 @@ +--- +id: 5d792536cfd0fd893c630abb +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Set `varRegex` to `/[A-J][1-9][0-9]?/gi`. Then set `varExpanded` to the result of replacing `varRegex` with an empty string in `varRangeExpanded`. Return `varExpanded`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.includes('varRegex') && + code.includes('varExpanded') && + evalFormula('aC12bc') === 'abc' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-075.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-075.md new file mode 100644 index 0000000000..8d174ebda3 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-075.md @@ -0,0 +1,195 @@ +--- +id: 5d7925366a5ff428fb483b40 +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Replace the `""` in `varExpanded` with `match => document.getElementById(match.toUpperCase()).value`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constvarExpanded=varRangeExpanded.replace(varRegex,match=>document.getElementById(match.toUpperCase()).value)' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-076.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-076.md new file mode 100644 index 0000000000..b4ec84d098 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-076.md @@ -0,0 +1,193 @@ +--- +id: 5d7925365d4035eeb2e395fd +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +Set `functionExpanded` to `applyFn(varExpanded)` in `evalFormula`. Return `functionExpanded`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.includes('functionExpanded') && applyFn('2+2') === '4'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-077.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-077.md new file mode 100644 index 0000000000..cec5c45210 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-077.md @@ -0,0 +1,198 @@ +--- +id: 5d7925364c106e9aaf05a16f +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +`evalFormula` should return the value passed to it if this value remained unchanged. Otherwise, it should call itself with the latest value. + +Use the ternary operator in the last line of `evalFormula` to return `functionExpanded` if `x === functionExpanded` and `evalFormula(functionExpanded)` otherwise. + +# --hints-- + +See description above for instructions. + +```js +assert(evalFormula('(2+2)*2') === '8'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-078.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-078.md new file mode 100644 index 0000000000..a1ed6f267e --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-078.md @@ -0,0 +1,206 @@ +--- +id: 5d792536970cd8e819cc8a96 +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +You can define arrow functions without arguments: + +```js +const two = () => 2; +``` + +Define an empty arrow function without arguments and assign it to `window.onload`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('window.onload=()=>')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-079.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-079.md new file mode 100644 index 0000000000..99fc2eab60 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-079.md @@ -0,0 +1,209 @@ +--- +id: 5d792536e33baeaa60129e0a +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +In `window.onload`, assign `document.getElementById("container")` to `container`. Also assign `charRange("A", "J")` to `letters`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload=\(\)=>\{constcontainer=document\.getElementById\(["']container["']\);?constletters=charRange\(["']A["'],["']J["']\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-080.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-080.md new file mode 100644 index 0000000000..fde11b78b6 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-080.md @@ -0,0 +1,215 @@ +--- +id: 5d7925379e2a488f333e2d43 +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Now define a function `createLabel` which takes an argument `name` and has an empty body. + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-081.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-081.md new file mode 100644 index 0000000000..bc1aa82c44 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-081.md @@ -0,0 +1,218 @@ +--- +id: 5d7925379000785f6d8d9af3 +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +Inside `createLabel`, assign `document.createElement("div")` to `label`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{constlabel=document\.createElement\(["']div["']\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-082.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-082.md new file mode 100644 index 0000000000..a3df1c553d --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-082.md @@ -0,0 +1,227 @@ +--- +id: 5d79253791391b0acddd0ac5 +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +Add the following code to `createLabel`: + +```js +label.className = "label"; +label.textContent = name; +container.appendChild(label); +``` + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{constlabel=document\.createElement\(["']div["']\);?label\.className=["']label["'];?label\.textContent=name;?container\.appendChild\(label\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-083.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-083.md new file mode 100644 index 0000000000..26e46c2878 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-083.md @@ -0,0 +1,223 @@ +--- +id: 5d7925373104ae5ae83f20a5 +title: Step 83 +challengeType: 0 +dashedName: step-83 +--- + +# --description-- + +The `forEach` method takes a function and calls it with each element of the array. + +Chain `forEach` to `letters` and pass it the `createLabel` function to create a label for each of the letters. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('letters.forEach(createLabel)')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-084.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-084.md new file mode 100644 index 0000000000..34669dffcc --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-084.md @@ -0,0 +1,223 @@ +--- +id: 5d7925373b7127cfaeb50c26 +title: Step 84 +challengeType: 0 +dashedName: step-84 +--- + +# --description-- + +Add `range(1, 99)` to the end of `window.onload` (the result will be discarded for now). + +# --hints-- + +See description above for instructions. + +```js +assert(/window\.onload[\s\S]*range\(1,99\);?\}/.test(code.replace(/\s/g, ''))); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-085.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-085.md new file mode 100644 index 0000000000..fd72df15dd --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-085.md @@ -0,0 +1,228 @@ +--- +id: 5d792537cb3a5cd6baca5e1a +title: Step 85 +challengeType: 0 +dashedName: step-85 +--- + +# --description-- + +Chain `forEach` onto `range(1, 99)`, passing in `createLabel` as an argument. + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload[\s\S]*range\(1,99\)\.forEach\(createLabel\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-086.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-086.md new file mode 100644 index 0000000000..e060befc16 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-086.md @@ -0,0 +1,230 @@ +--- +id: 5d79253742f3313d55db981f +title: Step 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +Replace `createLabel` with an arrow function with a block body. This would allow us to add more statements. The arrow function should take an argument `x`, and call `createLabel(x)`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?\}\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-087.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-087.md new file mode 100644 index 0000000000..37097ee823 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-087.md @@ -0,0 +1,235 @@ +--- +id: 5d7925379e0180a438ce7f95 +title: Step 87 +challengeType: 0 +dashedName: step-87 +--- + +# --description-- + +Inside the `range` `forEach`, use the `forEach` method on `letters`, passing in a function with argument `x` and an empty body. + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload.*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{\}\);?\}\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-088.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-088.md new file mode 100644 index 0000000000..24b1c85aa1 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-088.md @@ -0,0 +1,238 @@ +--- +id: 5d792537c80984dfa5501b96 +title: Step 88 +challengeType: 0 +dashedName: step-88 +--- + +# --description-- + +Inside `letters.forEach`, assign `document.createElement("input")` to `input`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{constinput=document\.createElement\(["']input["']\);?\}\);?\}\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-089.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-089.md new file mode 100644 index 0000000000..b580f6d81d --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-089.md @@ -0,0 +1,249 @@ +--- +id: 5d7925377b54d8a76efb5657 +title: Step 89 +challengeType: 0 +dashedName: step-89 +--- + +# --description-- + +Add the following code to `letters.forEach`: + +```js +input.type = "text"; +input.id = y + x; +input.onchange = update; +container.appendChild(input); +``` + +# --hints-- + +See description above for instructions. + +```js +assert( + /window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{constinput=document\.createElement\(["']input["']\);?input\.type=["']text["'];?input\.id=y\+x;?input\.onchange=update;?container\.appendChild\(input\);?\}\);?\}\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-090.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-090.md new file mode 100644 index 0000000000..4b4bd9a354 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-090.md @@ -0,0 +1,250 @@ +--- +id: 5d7925371398513549bb6395 +title: Step 90 +challengeType: 0 +dashedName: step-90 +--- + +# --description-- + +In the global scope, define a function called `update` which takes `event` as argument. It should define a variable, `element`, setting it to `event.target`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constupdate=\(?event\)?=>\{?constelement=event\.target;?\}?/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-091.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-091.md new file mode 100644 index 0000000000..88170b3d70 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-091.md @@ -0,0 +1,255 @@ +--- +id: 5d792537ea3eaf302bf2d359 +title: Step 91 +challengeType: 0 +dashedName: step-91 +--- + +# --description-- + +Now set `value` to `element.value.replace(/\s/g, "")`. This removes all whitespace from `element` so that we can ignore it. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-092.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-092.md new file mode 100644 index 0000000000..33de7a0ac0 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-092.md @@ -0,0 +1,259 @@ +--- +id: 5d792537533b1c7843bfd029 +title: Step 92 +challengeType: 0 +dashedName: step-92 +--- + +# --description-- + +The `includes` method works on a string and checks if the argument is its substring. + +Add an empty if statement to `update` which executes if `element.id` is **not** a substring of `value`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?\)\{\}\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-093.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-093.md new file mode 100644 index 0000000000..78d77f353f --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-093.md @@ -0,0 +1,258 @@ +--- +id: 5d792537dc0fe84345d4f19e +title: Step 93 +challengeType: 0 +dashedName: step-93 +--- + +# --description-- + +Add another condition to the if statement so that it only executes if the first character of `value` is `=`. Do this by adding `&& value[0] === "="` to the if statement. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?&&value\[0\]===["']=["']\)\{\}\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-094.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-094.md new file mode 100644 index 0000000000..96aa8385b8 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-094.md @@ -0,0 +1,258 @@ +--- +id: 5d792537b6cadae0f4b0cda1 +title: Step 94 +challengeType: 0 +dashedName: step-94 +--- + +# --description-- + +The `slice` method takes two arguments. It extracts characters from the string from the index specified by the first argument up to (but not including) the second argument. The index starts at 0. + +Use the `slice` method to log the first two letters of `value` to the console. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('console.log(value.slice(0,2))')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-095.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-095.md new file mode 100644 index 0000000000..73c51a143e --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-095.md @@ -0,0 +1,260 @@ +--- +id: 5d79253770083fb730c93a93 +title: Step 95 +challengeType: 0 +dashedName: step-95 +--- + +# --description-- + +You don't have to specify the second argument in `slice`. If you don't, then `slice` will extract from the first argument to the end of the string. + +Change the call to `slice` to log all characters except the first instead. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('console.log(value.slice(1))')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-096.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-096.md new file mode 100644 index 0000000000..3b8fda0fd5 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-096.md @@ -0,0 +1,264 @@ +--- +id: 5d792537fef76b226b63b93b +title: Step 96 +challengeType: 0 +dashedName: step-96 +--- + +# --description-- + +Now change the if statement to set `element.value` to the result of passing `value.slice(1)` to `evalFormula`. There is no need to use `const` because we're modifying `element.value`, not declaring it. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?&&value\[0\]===["']=["']\)\{element\.value=evalFormula\(value\.slice\(1\)\);?\}\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-097.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-097.md new file mode 100644 index 0000000000..376ff4df09 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-097.md @@ -0,0 +1,271 @@ +--- +id: 5d79253760fca25ccbbd8990 +title: Step 97 +challengeType: 0 +dashedName: step-97 +--- + +# --description-- + +The array destructuring syntax can be used to extract values from arrays: + +```js +const [x, y] = [1, 2]; // in variables +const fn = ([x, y]) => x + y // in functions +``` + +Use this syntax to define a function `random` in `spreadsheetFunctions` which takes the array `[x, y]` and returns `x`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /["']?random["']?:\(\[x,y\]\)=>x/.test(code.replace(/\s/g, '')) && + spreadsheetFunctions['random']([1, 2]) === 1 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-098.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-098.md new file mode 100644 index 0000000000..873138bf43 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-098.md @@ -0,0 +1,265 @@ +--- +id: 5d7925374321824cba309875 +title: Step 98 +challengeType: 0 +dashedName: step-98 +--- + +# --description-- + +Change the `random` function so that it returns `Math.floor(Math.random() * y + x)`. It now returns a random number within a range. + +# --hints-- + +See description above for instructions. + +```js +assert( + /["']?random["']?:\(\[x,y\]\)=>Math\.floor\(Math\.random\(\)\*y\+x\)/.test( + code.replace(/\s/g, '') + ) && spreadsheetFunctions['random']([1, 1]) === 1 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-099.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-099.md new file mode 100644 index 0000000000..ab7a997ab2 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-099.md @@ -0,0 +1,274 @@ +--- +id: 5d7925381e8565a5c50ba7f1 +title: Step 99 +challengeType: 0 +dashedName: step-99 +--- + +# --description-- + +In functional programming, we strive to use a type of function called "pure functions" as much as possible. The first property of pure functions is that they always return the same value for the same arguments. + +You can check if this is the case by comparing a call to a function with another call (with the same arguments): + +```js +console.log(f(2) === f(2)); // always true for pure functions +``` + +Use this technique to check if the `random` function in `spreadsheetFunctions` is pure by passing in the following array: `[1, 1000]`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /(spreadsheetFunctions\[["']random["']\]\(1,1000\))===\1/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-100.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-100.md new file mode 100644 index 0000000000..21632d6a97 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-100.md @@ -0,0 +1,269 @@ +--- +id: 5d7925383f1b77db7f1ff59e +title: Step 100 +challengeType: 0 +dashedName: step-100 +--- + +# --description-- + +This is (probably) false, so `random` is certainly impure. + +The second property of pure functions is that they perform no side effects, which are state and I/O modifications. If you call a function without assigning the result to a variable, and it does something, then it's an impure function. + +Call `window.onload()` in `update`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /update=\(?event\)?=>\{.*window\.onload\(\).*\}/.test(code.replace(/\s/g, '')) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-101.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-101.md new file mode 100644 index 0000000000..456fdf7b03 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-101.md @@ -0,0 +1,266 @@ +--- +id: 5d792538de9fa3f298bcd5f6 +title: Step 101 +challengeType: 0 +dashedName: step-101 +--- + +# --description-- + +Now try calling `highPrecedence` and pass it the string `"2*2"` without assigning it to a variable in `update`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /update=\(?event\)?=>\{.*highPrecedence\((['"])2\*2\1\).*\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-102.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-102.md new file mode 100644 index 0000000000..0689327cf3 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-102.md @@ -0,0 +1,268 @@ +--- +id: 5d7925385b74f69642e1fea5 +title: Step 102 +challengeType: 0 +dashedName: step-102 +--- + +# --description-- + +Obviously, this was ignored, as all `highPrecedence` does is return a value and this value is ignored. + +Now compare `highPrecedence("2*2")` with `highPrecedence("2*2")`, and `console.log` the result. + +# --hints-- + +See description above for instructions. + +```js +assert( + /update=\(?event\)?=>\{.*console\.log\((highPrecedence\(['"]2\*2['"]\))===\1\).*\}/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-103.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-103.md new file mode 100644 index 0000000000..b58e849934 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-103.md @@ -0,0 +1,263 @@ +--- +id: 5d7925380ea76d55b2c97d7b +title: Step 103 +challengeType: 0 +dashedName: step-103 +--- + +# --description-- + +This is true, so `highPrecedence` might be a pure function. If you inspect it, you can see that it indeed performs no I/O and doesn't use functions like `Math.random()` - so it's pure. + +Remove the `console.log` statement. + +# --hints-- + +See description above for instructions. + +```js +assert(!code.includes('console.log')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-104.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-104.md new file mode 100644 index 0000000000..54223c093b --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-104.md @@ -0,0 +1,265 @@ +--- +id: 5d792538be4fe331f1a6c008 +title: Step 104 +challengeType: 0 +dashedName: step-104 +--- + +# --description-- + +Unfortunately, impure functions are necessary - if you don't use them, the application won't perform any I/O so won't do anything. + +But we have an impure function that could be pure - `evalFormula`. It calls `document.getElementById(c + n).value`, but this value can change, even if the arguments don't. + +Change these calls to `""` - the function is now pure but doesn't work. + +# --hints-- + +See description above for instructions. + +```js +const nos = code.replace(/\s/g, ''); +assert(nos.includes('elemValue=n=>c=>""') && nos.includes('match=>""')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-105.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-105.md new file mode 100644 index 0000000000..98e4e37e01 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-105.md @@ -0,0 +1,262 @@ +--- +id: 5d792538d169f33142175b95 +title: Step 105 +challengeType: 0 +dashedName: step-105 +--- + +# --description-- + +To make this function pure, instead of depending on application state implicitly, we can pass it down explicitly as an argument. + +Add an argument `cells` to `evalFormula`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('evalFormula=(x,cells)=>{')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-106.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-106.md new file mode 100644 index 0000000000..fc0177c41e --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-106.md @@ -0,0 +1,270 @@ +--- +id: 5d792538e48b5a2c6e5bbe12 +title: Step 106 +challengeType: 0 +dashedName: step-106 +--- + +# --description-- + +When calling `evalFormula` in `update`, pass in `Array.from(document.getElementById("container").children)` as the `cells` argument. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'evalFormula(value.slice(1),Array.from(document.getElementById("container").children))' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-107.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-107.md new file mode 100644 index 0000000000..5333439073 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-107.md @@ -0,0 +1,266 @@ +--- +id: 5d7925387f3e9da5ec856dbe +title: Step 107 +challengeType: 0 +dashedName: step-107 +--- + +# --description-- + +Update the recursive call to `evalFormula` by passing in `cells` as the second argument. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('evalFormula(functionExpanded,cells)')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-108.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-108.md new file mode 100644 index 0000000000..b375fce419 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-108.md @@ -0,0 +1,267 @@ +--- +id: 5d79253824ae9b4a6e6f3108 +title: Step 108 +challengeType: 0 +dashedName: step-108 +--- + +# --description-- + +Add a function `idToText` to `evalFormula`, which takes the argument `id` and returns `cells`. + +# --hints-- + +See description above for instructions. + +```js +assert(/constidToText=\(?id\)?=>cells/.test(code.replace(/\s/g, ''))); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-109.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-109.md new file mode 100644 index 0000000000..8b37349d79 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-109.md @@ -0,0 +1,273 @@ +--- +id: 5d7925383f122a279f4c54ad +title: Step 109 +challengeType: 0 +dashedName: step-109 +--- + +# --description-- + +The `find` method returns the first element of an array that satisfies the function passed to it. + +Chain `find` onto `cells` and pass it `cell => cell === id`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell===id\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-110.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-110.md new file mode 100644 index 0000000000..9a2e4c945c --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-110.md @@ -0,0 +1,270 @@ +--- +id: 5d7925387b682e962f209269 +title: Step 110 +challengeType: 0 +dashedName: step-110 +--- + +# --description-- + +In `idToText`, use the `id` property of `cell` to make sure the argument is equal to the cell's id rather than the cell itself. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell\.id===id\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-111.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-111.md new file mode 100644 index 0000000000..9136d27069 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-111.md @@ -0,0 +1,270 @@ +--- +id: 5d792538de774217b173288e +title: Step 111 +challengeType: 0 +dashedName: step-111 +--- + +# --description-- + +Use the `value` property on the result of `idToText` to return the text inside the cell, rather than the cell itself. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell\.id===id\)\.value/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-112.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-112.md new file mode 100644 index 0000000000..f9ff4444c9 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-112.md @@ -0,0 +1,267 @@ +--- +id: 5d79253891d93585323d1f3c +title: Step 112 +challengeType: 0 +dashedName: step-112 +--- + +# --description-- + +Change the empty string in `elemValue` to the result of calling `idToText` with `c + n`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').includes('elemValue=n=>c=>idToText(c+n)')); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-113.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-113.md new file mode 100644 index 0000000000..b2517f72eb --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-113.md @@ -0,0 +1,269 @@ +--- +id: 5d7925384e34e944ecb4612d +title: Step 113 +challengeType: 0 +dashedName: step-113 +--- + +# --description-- + +Change the empty string in `varExpanded` to the result of calling `idToText` with `match.toUpperCase()`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').includes('match=>idToText(match.toUpperCase())') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-114.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-114.md new file mode 100644 index 0000000000..db61c0941a --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-114.md @@ -0,0 +1,271 @@ +--- +id: 5d792538631844ad0bdfb4c3 +title: Step 114 +challengeType: 0 +dashedName: step-114 +--- + +# --description-- + +`evalFormula` is now pure, as it now has no external dependencies, and as before, performs no side effects. + +Now define a new function, `increment` inside `spreadsheetFunctions`, which takes `nums` as argument and uses `map` to increment each value of `nums` by 1. + +# --hints-- + +See description above for instructions. + +```js +assert(JSON.stringify(spreadsheetFunctions.increment([1, 5, 3])) === '[2,6,4]'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-115.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-115.md new file mode 100644 index 0000000000..2abd01c55f --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-115.md @@ -0,0 +1,277 @@ +--- +id: 5d792538e2a8d20cc580d481 +title: Step 115 +challengeType: 0 +dashedName: step-115 +--- + +# --description-- + +The `slice` method can also work on arrays. + +Add a method `firsttwo` to `spreadsheetFunctions` which takes `arr` as argument and uses `slice` to return the first two elements of `arr`. + +# --hints-- + +See description above for instructions. + +```js +assert( + JSON.stringify(spreadsheetFunctions.firsttwo([2, 6, 1, 4, 3])) === '[2,6]' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-116.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-116.md new file mode 100644 index 0000000000..2918340f31 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-116.md @@ -0,0 +1,283 @@ +--- +id: 5d792538f5004390d6678554 +title: Step 116 +challengeType: 0 +dashedName: step-116 +--- + +# --description-- + +You can also pass in a negative argument to `slice` to specify that index from the end: + +```js +[2, 4, 6, 8, 10].slice(-3); // [6, 8, 10] +``` + +Use a negative index to add a function `lasttwo` which returns the last two elements of an array. + +# --hints-- + +See description above for instructions. + +```js +assert( + JSON.stringify(spreadsheetFunctions.lasttwo([2, 6, 1, 4, 3])) === '[4,3]' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-117.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-117.md new file mode 100644 index 0000000000..d2948614d4 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-117.md @@ -0,0 +1,286 @@ +--- +id: 5d792539dd4fd4c96fd85f7e +title: Step 117 +challengeType: 0 +dashedName: step-117 +--- + +# --description-- + +The `%` operator returns the remainder: + +```js +4 % 3; // 1 +5 % 3; // 2 +6 % 3; // 0 +``` + +Add an `isEven` function (to the global scope) which returns whether the number passed to it is even. + +# --hints-- + +See description above for instructions. + +```js +assert(isEven(20) && !isEven(31)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-118.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-118.md new file mode 100644 index 0000000000..f8929ce339 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-118.md @@ -0,0 +1,290 @@ +--- +id: 5d79253949802f8587c8bbd3 +title: Step 118 +challengeType: 0 +dashedName: step-118 +--- + +# --description-- + +The `filter` method keeps only the elements of an array that satisfy the function passed to it: + +```js +[1, 10, 8, 3, 4, 5].filter(x > 3); // [10, 8, 4, 5] +``` + +Use `filter` to add a function called `even` to `spreadsheetFunctions`, which returns all the even elements of an array, `nums`. + +# --hints-- + +See description above for instructions. + +```js +assert( + JSON.stringify(spreadsheetFunctions.even([2, 3, 5, 6, 9, 4])) === '[2,6,4]' && + code.includes('filter') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-119.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-119.md new file mode 100644 index 0000000000..97a6be5ef9 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-119.md @@ -0,0 +1,295 @@ +--- +id: 5d7925395888767e9304c082 +title: Step 119 +challengeType: 0 +dashedName: step-119 +--- + +# --description-- + +The `reduce` method takes a function with an accumulator and the current value. The accumulator is initially set to the value at index 0. + +The `reduce` method then goes through each element of the array after that, passing in the element as the current value and the result of the last call as the accumulator. + +For example, here's how to multiply all the value in an array: + +```js +[2, 3, 4].reduce((a, x) => a * x); // 24 +``` + +Using `reduce`, add a function `sum` to `spreadsheetFunctions`, which sums all values in the array passed to it. + +# --hints-- + +See description above for instructions. + +```js +assert( + spreadsheetFunctions.sum([10, 5, 1, 3]) === 19 && code.includes('reduce') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-120.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-120.md new file mode 100644 index 0000000000..41dd0fed65 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-120.md @@ -0,0 +1,289 @@ +--- +id: 5d7925393b30099e37a34668 +title: Step 120 +challengeType: 0 +dashedName: step-120 +--- + +# --description-- + +The `includes` method checks if an element is in an array. + +Add a `has2` function to `spreadsheetFunctions` which checks if the inputted array has the number 2 in it. + +# --hints-- + +See description above for instructions. + +```js +assert( + spreadsheetFunctions.has2([2, 3, 5]) && !spreadsheetFunctions.has2([1, 3, 10]) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-121.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-121.md new file mode 100644 index 0000000000..28fec42a1d --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-121.md @@ -0,0 +1,299 @@ +--- +id: 5d7925398157757b23730fdd +title: Step 121 +challengeType: 0 +dashedName: step-121 +--- + +# --description-- + +The `reduce` method can take a second argument (in addition to the function), specifying the initial accumulator value. In this case, the current value starts from index 0 rather than index 1: + +```js +[1, [1, 2, 3], [3, 4, 5]].reduce((a, x) => a.concat(x), []); // [1, 1, 2, 3, 3, 4, 5] +// without the second argument, it first tries 1.concat([1, 2, 3]), but 1 is not an array +// now it first tries [].concat(1) which works +``` + +Add a function `nodups` to `spreadsheetFunctions`, with the value `arr => arr.reduce((a, x) => a.includes(x), [])`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /nodups['"]?:arr=>arr\.reduce\(\(a,x\)=>a\.includes\(x\),\[\]\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-122.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-122.md new file mode 100644 index 0000000000..abb7002b4d --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-122.md @@ -0,0 +1,291 @@ +--- +id: 5d792539de4b9ac14dd40409 +title: Step 122 +challengeType: 0 +dashedName: step-122 +--- + +# --description-- + +Use the ternary operator in `nodups` to return `a` if `a.includes(x)` and `a.concat(x)` otherwise. + +# --hints-- + +See description above for instructions. + +```js +assert( + JSON.stringify(spreadsheetFunctions.nodups([1, 3, 1, 5, 7, 7, 9, 7])) === + '[1,3,5,7,9]' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-123.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-123.md new file mode 100644 index 0000000000..7b9224fb8d --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-123.md @@ -0,0 +1,296 @@ +--- +id: 5d792539534f1bf991bb987f +title: Step 123 +challengeType: 0 +dashedName: step-123 +--- + +# --description-- + +ES6 introduced a shorthand object literal syntax: + +```js +const a = 10; +const myObject = { a }; +console.log(myObject); // { a: 10 } +``` + +First, move `sum` outside of `spreadsheetFunctions`. `sum` should be a function expression similar to `isEven`. + +# --hints-- + +See description above for instructions. + +```js +assert(sum([1, 2, 3]) === 6); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-124.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-124.md new file mode 100644 index 0000000000..73e8f89288 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-124.md @@ -0,0 +1,291 @@ +--- +id: 5d7925394089b762f93ffa52 +title: Step 124 +challengeType: 0 +dashedName: step-124 +--- + +# --description-- + +Now use the shorthand syntax to reference `sum` inside of `spreadsheetFunctions`. + +This both adds it to the functions you can use in the spreadsheet, and allows you to use it throughout your program. + +# --hints-- + +See description above for instructions. + +```js +assert(/[{,]sum[,}]/.test(code.replace(/\s/g, ''))); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-125.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-125.md new file mode 100644 index 0000000000..326042ff90 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-125.md @@ -0,0 +1,296 @@ +--- +id: 5d792539ec758d45a6900173 +title: Step 125 +challengeType: 0 +dashedName: step-125 +--- + +# --description-- + +The `length` property returns the length of an array. Use this property with the `sum` function to define an `average` function. + +As with `sum`, add this function to both the global scope and to `spreadsheetFunctions`. + +# --hints-- + +See description above for instructions. + +```js +assert( + average([1, 5, 12]) === 6 && spreadsheetFunctions.average([1, 20, 3, 8]) === 8 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-126.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-126.md new file mode 100644 index 0000000000..6565a565de --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-126.md @@ -0,0 +1,306 @@ +--- +id: 5d7925398d525f61a9ff3a79 +title: Step 126 +challengeType: 0 +dashedName: step-126 +--- + +# --description-- + +The spread operator allow you to pass multiple arguments instead of an array: + +```js +const arr = [1, 2, 3]; +const sum3 = (a, b, c) => a + b + c; +sum3(...arr); // 6 +``` + +Use the spread operator to add `range` to `spreadsheetFunctions`. + +# --hints-- + +See description above for instructions. + +```js +assert( + JSON.stringify(spreadsheetFunctions.range([1, 5])) === '[1,2,3,4,5]' && + code.includes('...') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-127.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-127.md new file mode 100644 index 0000000000..f0911314b9 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-127.md @@ -0,0 +1,298 @@ +--- +id: 5d792539a222f385c5c17d2b +title: Step 127 +challengeType: 0 +dashedName: step-127 +--- + +# --description-- + +Now define a `median` function which takes an argument `nums` (in the global scope). + +# --hints-- + +See description above for instructions. + +```js +assert(/constmedian=\(?nums\)?=>/.test(code.replace(/\s/g, ''))); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-128.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-128.md new file mode 100644 index 0000000000..2e3f7b143a --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-128.md @@ -0,0 +1,310 @@ +--- +id: 5d7925398a7184b41b12a0e0 +title: Step 128 +challengeType: 0 +dashedName: step-128 +--- + +# --description-- + +The `sort` method sorts an array alphabetically: + +```js +["B", "C", "A"].sort(); // ["A", "B", "C"] +``` + +Assign the sorted `nums` to `sorted` in `median`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').includes('constmedian=nums=>{constsorted=nums.sort()') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-129.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-129.md new file mode 100644 index 0000000000..53dd43a54d --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-129.md @@ -0,0 +1,316 @@ +--- +id: 5d7925399afb905c34730a75 +title: Step 129 +challengeType: 0 +dashedName: step-129 +--- + +# --description-- + +But our function takes an array of numbers, not strings. Luckily, you can pass a function `fn` as argument to sort: + +```js +[2, 9, 10, 15].sort((a, b) => b - a); // [10, 9, 5, 2] +``` + +If `b - a` is less than 0, then `a` will be placed before `b`. As a result, this sorts the array in descending order. + +Use `sort` to sort `nums` in ascending order. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constmedian=nums=>\{constsorted=nums\.sort\(\((.+),(.+)\)=>\1-\2\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-130.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-130.md new file mode 100644 index 0000000000..ec13141552 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-130.md @@ -0,0 +1,310 @@ +--- +id: 5d792539728d1aa7788e2c9b +title: Step 130 +challengeType: 0 +dashedName: step-130 +--- + +# --description-- + +Unfortunately, `sort` not only returns a new array, but also modifies the existing one. So our function also modifies the array passed to it - it is impure. + +You can fix this by adding `.slice()` between `nums` and `sort` - this creates a new array, that is equivalent to `nums`, but is immediately discarded, so it doesn't matter if it changes. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constmedian=nums=>\{constsorted=nums\.slice\(\)\.sort\(\((.+),(.+)\)=>\1-\2\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-131.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-131.md new file mode 100644 index 0000000000..2b72acbdab --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-131.md @@ -0,0 +1,310 @@ +--- +id: 5d79253939434a2724c0ec41 +title: Step 131 +challengeType: 0 +dashedName: step-131 +--- + +# --description-- + +Now define two variable: `length` which is `sorted.length` and `middle` which is `length / 2 - 1`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constmedian=nums=>\{constsorted=nums\.slice\(\)\.sort\(\((.+),(.+)\)=>\1-\2\);?constlength=sorted\.length;?constmiddle=length\/2-1/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-132.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-132.md new file mode 100644 index 0000000000..ad2c669369 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-132.md @@ -0,0 +1,309 @@ +--- +id: 5d792539b9e1d3c54d8fe94a +title: Step 132 +challengeType: 0 +dashedName: step-132 +--- + +# --description-- + +Add a return statement to `median` so that it returns `isEven(length)`. + +# --hints-- + +See description above for instructions. + +```js +assert(median([1, 2, 3, 4]) && !median([1, 2, 3])); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-133.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-133.md new file mode 100644 index 0000000000..be42edb6ea --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-133.md @@ -0,0 +1,314 @@ +--- +id: 5d792539b2e0bd8f9e8213e4 +title: Step 133 +challengeType: 0 +dashedName: step-133 +--- + +# --description-- + +Use the ternary operator to return `average([sorted[middle], sorted[middle + 1]])` if `length` is even, and `sorted[middle + 0.5]` otherwise. + +Note that the `middle` variable is close to the middle but is not actually the middle. + +# --hints-- + +See description above for instructions. + +```js +assert(median([1, 20, 3]) === 3 && median([27, 7, 20, 10]) === 15); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-134.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-134.md new file mode 100644 index 0000000000..09507ec067 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-134.md @@ -0,0 +1,318 @@ +--- +id: 5d792539239148965a1a59a5 +title: Step 134 +challengeType: 0 +dashedName: step-134 +--- + +# --description-- + +Now add `median` to `spreadsheetFunctions`, just like you added `sum` and `average`. + +# --hints-- + +See description above for instructions. + +```js +assert( + spreadsheetFunctions.median([1, 20, 3]) === 3 && + spreadsheetFunctions.median([27, 7, 20, 10]) === 15 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-135.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-135.md new file mode 100644 index 0000000000..a837859f96 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-135.md @@ -0,0 +1,323 @@ +--- +id: 5d792539e1446045d0df6d28 +title: Step 135 +challengeType: 0 +dashedName: step-135 +--- + +# --description-- + +The `some` method checks if any element of the array satisfies the provided testing function. + +Add `someeven` to `spreadsheetFunctions`, which checks if any of the items passed in are even. + +# --hints-- + +See description above for instructions. + +```js +assert( + spreadsheetFunctions.someeven([1, 5, 4, 3]) && + !spreadsheetFunctions.someeven([3, 5, 9]) && + code.includes('.some') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-136.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-136.md new file mode 100644 index 0000000000..a7fa4cb7a4 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-136.md @@ -0,0 +1,325 @@ +--- +id: 5d79253a2febbb77098730b9 +title: Step 136 +challengeType: 0 +dashedName: step-136 +--- + +# --description-- + +The `every` method checks if all elements of an array satisfy the provided testing function. + +Use it to add an `everyeven` function to `spreadsheetFunctions` which checks if all values passed in are even`spreadsheetFunctions` which checks if all values passed in are even. + +# --hints-- + +See description above for instructions. + +```js +assert( + spreadsheetFunctions.everyeven([2, 6, 4, 0, 20]) && + !spreadsheetFunctions.everyeven([10, 0, 9, 2]) && + code.includes('.every') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-137.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-137.md new file mode 100644 index 0000000000..d8697d4b11 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-137.md @@ -0,0 +1,326 @@ +--- +id: 5d79253a98bd9fdf7ce68d0a +title: Step 137 +challengeType: 0 +dashedName: step-137 +--- + +# --description-- + +We've used recursion in `range`, but recursion can have performance issues in JavaScript. If performance is an issue, you should try to use a higher order function like `reduce`, and if you can't do that, you'll probably have to use a for/while loop. + +While we don't expect the user to enter particularly large numbers so that performance is an issue, we're going to refactor `range` as an exercise. + +Replace the body of `range` with `start`. + +# --hints-- + +See description above for instructions. + +```js +assert( + /constrange=\(start,end\)=>start(;|const)/.test(code.replace(/\s/g, '')) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-138.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-138.md new file mode 100644 index 0000000000..0c1547c2f4 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-138.md @@ -0,0 +1,322 @@ +--- +id: 5d79253a1e9abf29de64c177 +title: Step 138 +challengeType: 0 +dashedName: step-138 +--- + +# --description-- + +The `Array` function takes an argument `x` and creates an array of size `x` filled with `undefined`. + +Make `range` return an array of `undefined` with size `end - start + 1`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code.replace(/\s/g, '').includes('constrange=(start,end)=>Array(end-start+1)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-139.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-139.md new file mode 100644 index 0000000000..d124cc81ec --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-139.md @@ -0,0 +1,325 @@ +--- +id: 5d79253a8b29d78984369e4b +title: Step 139 +challengeType: 0 +dashedName: step-139 +--- + +# --description-- + +The `fill` method takes an argument and replaces all elements of the array with that argument. + +Use it on the array in `range` to replace everything with `start`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes('constrange=(start,end)=>Array(end-start+1).fill(start)') +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-140.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-140.md new file mode 100644 index 0000000000..4c3ad2c702 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-140.md @@ -0,0 +1,328 @@ +--- +id: 5d79253ad297a31cbe073718 +title: Step 140 +challengeType: 0 +dashedName: step-140 +--- + +# --description-- + +The function in the `map` method can actually take a second argument: the index of the element. + +This is why you need an arrow function in `charRange` - if you don't use one, then the index will be passed to `String.fromCharCode` as the second argument, leading to unexpected results. However, it is safe for functions like `parseFloat` which take only one argument (but not for `parseInt`). + +Chain `.map((x, i) => x + i)` to `.fill(start)` to add its index to every element in the array in `range`. + +# --hints-- + +See description above for instructions. + +```js +assert( + code + .replace(/\s/g, '') + .includes( + 'constrange=(start,end)=>Array(end-start+1).fill(start).map((x,i)=>x+i)' + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-141.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-141.md new file mode 100644 index 0000000000..7531f12a5a --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/step-141.md @@ -0,0 +1,316 @@ +--- +id: 5dc10b8b93704f41d279eb5b +title: Step 141 +challengeType: 0 +dashedName: step-141 +--- + +# --description-- + +Congratulations, you've finished your functional programming spreadsheet! Now test it out by crunching some numbers. + +# --hints-- + +See description above for instructions. + +```js + +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + Spreadsheet + + + +
+
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-001.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-001.md deleted file mode 100644 index 11916a0bd1..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-001.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44d9a -title: Part 1 -challengeType: 0 -dashedName: part-1 ---- - -# --description-- - -When a browser loads a page, it creates a Document Object Model (DOM) representation of the page which includes all of the HTML elements in a tree structure. - -In JavaScript, you can access the DOM by referencing the global `document` object. - -To view the DOM, log it to the console with `console.log(document)`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/console\.log\(document\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
-
-

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

-
- Sex -
- - - -
- - -
-
-
-
- Breakfast -
- Lunch -
- Dinner -
- - - -
-
-
- - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-011.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-011.md deleted file mode 100644 index 5308378f39..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-011.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44da4 -title: Part 11 -challengeType: 0 -dashedName: part-11 ---- - -# --description-- - -Log `meal.value` to the console, enter a number in the Breakfast input and hit the Calculate button. You'll notice that it displays what you entered. - -# --hints-- - -See description above for instructions. - -```js - -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
-
-

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

-
- Sex -
- - - -
- - -
-
-
-
- Breakfast -
- Lunch -
- Dinner -
- - - -
-
-
- - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-036.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-036.md deleted file mode 100644 index 909fc5870e..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-036.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbb -title: Part 36 -challengeType: 0 -dashedName: part-36 ---- - -# --description-- - -Now you can append the `resultText` to the `result` with the `appendChild()` method, like this: - -```js -result.appendChild(resultText); -``` - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/result\.appendChild\(resultText\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
-
-

Calorie Counter

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

Calorie Counter

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

Calorie Counter

-
- Sex -
- - - -
- - -
-
-
-
- Breakfast -
- Lunch -
- Dinner -
- - - -
-
-
- - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-039.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-039.md deleted file mode 100644 index 206d1898de..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-039.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dbe -title: Part 39 -challengeType: 0 -dashedName: part-39 ---- - -# --description-- - -Add the `line` to the `output` element using the `appendChild()` method. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(line\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
-
-

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

-
- Sex -
- - - -
- - -
-
-
-
- Breakfast -
- Lunch -
- Dinner -
- - - -
-
-
- - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-043.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-043.md deleted file mode 100644 index 863a2f9bce..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-043.md +++ /dev/null @@ -1,173 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc2 -title: Part 43 -challengeType: 0 -dashedName: part-43 ---- - -# --description-- - -Append the `recommendedText` node to the `recommended` element. - -This is similar to how the `resultText` is appended to `result` previously. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/recommended\.appendChild\(recommendedText\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
-
-

Calorie Counter

-
- Sex -
- - - -
- - -
-
-
-
- Breakfast -
- Lunch -
- Dinner -
- - - -
-
-
- - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-044.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-044.md deleted file mode 100644 index 3a86333103..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-044.md +++ /dev/null @@ -1,172 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc3 -title: Part 44 -challengeType: 0 -dashedName: part-44 ---- - -# --description-- - -Append the `recommended` element to `output`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(recommended\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
-
-

Calorie Counter

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

Calorie Counter

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

Calorie Counter

-
- Sex -
- - - -
- - -
-
-
-
- Breakfast -
- Lunch -
- Dinner -
- - - -
-
-
- - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-047.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-047.md deleted file mode 100644 index 0ccaa018c3..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-047.md +++ /dev/null @@ -1,180 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dc6 -title: Part 47 -challengeType: 0 -dashedName: part-47 ---- - -# --description-- - -Append the `consumed` element to `output`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/output\.appendChild\(consumed\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
-
-

Calorie Counter

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

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

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

Calorie Counter

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

Calorie Counter

-
- Sex -
- - - -
- - -
-
-
-
- Breakfast -
- Lunch -
- Dinner -
- - - -
-
-
- - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-054.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-054.md deleted file mode 100644 index 862dd108b7..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-054.md +++ /dev/null @@ -1,202 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dcd -title: Part 54 -challengeType: 0 -dashedName: part-54 ---- - -# --description-- - -Set the `placeholder` property of the `foodInput` equal to `'food name'`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match(/foodInput\.placeholder\=[\'\"\`]foodname[\'\"\`]/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
-
-

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

-
- Sex -
- - - -
- - -
-
-
-
- Breakfast -
- Lunch -
- Dinner -
- - - -
-
-
- - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-059.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-059.md deleted file mode 100644 index 348da09429..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-059.md +++ /dev/null @@ -1,218 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd2 -title: Part 59 -challengeType: 0 -dashedName: part-59 ---- - -# --description-- - -The `calorieInput` element should only accept numbers that are 0 or above. - -Set the `min` attribute of `calorieInput` to `0`. - -# --hints-- - -See description above for instructions. - -```js -assert( - code - .replace(/\s/g, '') - .match( - /calorieInput\.setAttribute\([\'\"\`]min[\'\"\`]\,[\'\"\`]0[\'\"\`]\)/ - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
-
-

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

-
- Sex -
- - - -
- - -
-
-
-
- Breakfast -
- Lunch -
- Dinner -
- - - -
-
-
- - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-064.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-064.md deleted file mode 100644 index 331871b746..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-064.md +++ /dev/null @@ -1,224 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd7 -title: Part 64 -challengeType: 0 -dashedName: part-64 ---- - -# --description-- - -Inside the `function` body, instruct your code to call two other functions, `clearOutput()` and `clearForm()`. We will create these functions shortly. - -# --hints-- - -See description above for instructions. - -```js -assert(/clearOutput\(\)/.test(code) && /clearForm\(\)/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
-
-

Calorie Counter

-
- Sex -
- - - -
- - -
-
-
-
- Breakfast -
- Lunch -
- Dinner -
- - - -
-
-
- - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-065.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-065.md deleted file mode 100644 index 4484fa0236..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-065.md +++ /dev/null @@ -1,235 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dd8 -title: Part 65 -challengeType: 0 -dashedName: part-65 ---- - -# --description-- - -Create a variable named `clearOutput` and set it equal to a blank arrow function: - -```js -const clearOutput = () => {} -``` - -This is similar to `function clearOutput () {}`. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof clearOutput === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
-
-

Calorie Counter

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

Calorie Counter

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

Calorie Counter

-
- Sex -
- - - -
- - -
-
-
-
- Breakfast -
- Lunch -
- Dinner -
- - - -
-
-
- - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-068.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-068.md deleted file mode 100644 index 11754ad575..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-068.md +++ /dev/null @@ -1,241 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddb -title: Part 68 -challengeType: 0 -dashedName: part-68 ---- - -# --description-- - -The `clearOutput` function is called when the user clicks the "Clear" button. But it also needs to be run when the user clicks the "Calculate" button. - -In the `calculate()` function, right after `event.preventDefault()`, call the `clearOutput` function. - -# --hints-- - -See description above for instructions. - -```js -assert(calculate.toString().match(/clearOutput\(\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
-
-

Calorie Counter

-
- Sex -
- - - -
- - -
-
-
-
- Breakfast -
- Lunch -
- Dinner -
- - - -
-
-
- - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-069.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-069.md deleted file mode 100644 index f6d8088b08..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-069.md +++ /dev/null @@ -1,241 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44ddc -title: Part 69 -challengeType: 0 -dashedName: part-69 ---- - -# --description-- - -Create a variable named `clearForm` and set it equal to a blank arrow function like you did with `clearOutput`. - -# --hints-- - -See description above for instructions. - -```js -assert(typeof clearForm === 'function'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
-
-

Calorie Counter

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

Calorie Counter

-
- Sex -
- - - -
- - -
-
-
-
- Breakfast -
- Lunch -
- Dinner -
- - - -
-
-
- - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-071.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-071.md deleted file mode 100644 index 3019af35d3..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-071.md +++ /dev/null @@ -1,255 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44dde -title: Part 71 -challengeType: 0 -dashedName: part-71 ---- - -# --description-- - -To remove the items `foodInputs` array, we will iterate through them by using the `forEach()` function. - -Add `foodInputs.forEach()`. - -# --hints-- - -See description above for instructions. - -```js -assert(code.replace(/\s/g, '').match(/foodInputs.forEach\(\)/)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
-
-

Calorie Counter

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

Calorie Counter

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

Calorie Counter

-
- Sex -
- - - -
- - -
-
-
-
- Breakfast -
- Lunch -
- Dinner -
- - - -
-
-
- - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-074.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-074.md deleted file mode 100644 index 247b4c93eb..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-074.md +++ /dev/null @@ -1,267 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de1 -title: Part 74 -challengeType: 0 -dashedName: part-74 ---- - -# --description-- - -Similar to how you removed each `foodInputs` elements, use the `forEach()` function to remove each `calInputs` element. - -# --hints-- - -See description above for instructions. - -```js -assert( - code.replace(/\s/g, '').match(/calInputs.forEach\(input=>input.remove\(\)\)/) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
-
-

Calorie Counter

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

Calorie Counter

-
- Sex -
- - - -
- - -
-
-
-
- Breakfast -
- Lunch -
- Dinner -
- - - -
-
-
- - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-076.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-076.md deleted file mode 100644 index d740ed6a26..0000000000 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-076.md +++ /dev/null @@ -1,185 +0,0 @@ ---- -id: 5ddb965c65d27e1512d44de3 -title: Part 76 -challengeType: 0 -dashedName: part-76 ---- - -# --description-- - -Congratulations! Have fun playing with your completed calorie counter. - -# --hints-- - -See description above for instructions. - -```js - -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - - - - - - - -
-
-

Calorie Counter

-
- Sex -
- - - -
- - -
-
-
-
- Breakfast -
- Lunch -
- Dinner -
- - - -
-
-
- - -``` - -## --after-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-001.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-001.md new file mode 100644 index 0000000000..71481007a6 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-001.md @@ -0,0 +1,98 @@ +--- +id: 5ddb965c65d27e1512d44d9a +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +When a browser loads a page, it creates a Document Object Model (DOM) representation of the page which includes all of the HTML elements in a tree structure. + +In JavaScript, you can access the DOM by referencing the global `document` object. + +To view the DOM, log it to the console with `console.log(document)`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/console\.log\(document\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-011.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-011.md new file mode 100644 index 0000000000..37dbc37897 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-011.md @@ -0,0 +1,115 @@ +--- +id: 5ddb965c65d27e1512d44da4 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Log `meal.value` to the console, enter a number in the Breakfast input and hit the Calculate button. You'll notice that it displays what you entered. + +# --hints-- + +See description above for instructions. + +```js + +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-036.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-036.md new file mode 100644 index 0000000000..9ab54a78c0 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-036.md @@ -0,0 +1,151 @@ +--- +id: 5ddb965c65d27e1512d44dbb +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Now you can append the `resultText` to the `result` with the `appendChild()` method, like this: + +```js +result.appendChild(resultText); +``` + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/result\.appendChild\(resultText\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

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

Calorie Counter

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

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-039.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-039.md new file mode 100644 index 0000000000..042fb45dd0 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-039.md @@ -0,0 +1,156 @@ +--- +id: 5ddb965c65d27e1512d44dbe +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Add the `line` to the `output` element using the `appendChild()` method. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/output\.appendChild\(line\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-044.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-044.md new file mode 100644 index 0000000000..695206f70e --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-044.md @@ -0,0 +1,172 @@ +--- +id: 5ddb965c65d27e1512d44dc3 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Append the `recommended` element to `output`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/output\.appendChild\(recommended\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

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

Calorie Counter

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

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-047.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-047.md new file mode 100644 index 0000000000..551b2c80ce --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-047.md @@ -0,0 +1,180 @@ +--- +id: 5ddb965c65d27e1512d44dc6 +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Append the `consumed` element to `output`. + +# --hints-- + +See description above for instructions. + +```js +assert(code.replace(/\s/g, '').match(/output\.appendChild\(consumed\)/)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

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

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-069.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-069.md new file mode 100644 index 0000000000..93c715f236 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/step-069.md @@ -0,0 +1,241 @@ +--- +id: 5ddb965c65d27e1512d44ddc +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +Create a variable named `clearForm` and set it equal to a blank arrow function like you did with `clearOutput`. + +# --hints-- + +See description above for instructions. + +```js +assert(typeof clearForm === 'function'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + + + + + + + +
+
+

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

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

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-001.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-001.md deleted file mode 100644 index 63cbcbf8a5..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-001.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9de -title: Part 1 -challengeType: 0 -dashedName: part-1 ---- - -# --description-- - -Welcome to the dashboard project! You will be using the JavaScript data visualization library, D3, to build a visualization of your social media followers. It will consist of a line graph, a pie chart, and a legend. - -First, you need to create the HTML file. Start by adding the `` declaration at the top of the file to tell the browser what type of document it's reading. - -# --hints-- - -test-text - -```js -assert(//gi.test(code)); -``` - -# --seed-- - -## --seed-contents-- - -```html -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-002.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-002.md deleted file mode 100644 index 8217f0cb0b..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-002.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9df -title: Part 2 -challengeType: 0 -dashedName: part-2 ---- - -# --description-- - -Next, add opening and closing `html`, `head` and `body` tags below the doctype. Be sure to nest them properly. - -# --hints-- - -test-text - -```js -assert( - /\s*\s*\s*<\/head\s*>\s*\s*<\/body\s*>\s*<\/html\s*>/gi.test( - code - ) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - - - - - - - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-003.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-003.md deleted file mode 100644 index 17dd77aaba..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-003.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9e0 -title: Part 3 -challengeType: 0 -dashedName: part-3 ---- - -# --description-- - -In the head, add a `title` of `D3 Dashboard`. - -# --hints-- - -test-text - -```js -assert( - /\s*D3 Dashboard<\/title\s*>\s*<\/head\s*>/g.test(code) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - - - - -``` - -# --solutions-- - -```html - - - - D3 Dashboard - - - - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-004.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-004.md deleted file mode 100644 index c4df481a13..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-004.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9e1 -title: Part 4 -challengeType: 0 -dashedName: part-4 ---- - -# --description-- - -Below the title, link to your external stylesheet by adding a `link` element with a `rel` attribute of `stylesheet` and an `href` attribute of `./dashboard.css`. Remember that link elements do not need a closing tag. You will be adding some styles to this file shortly. - -# --hints-- - -test-text - -```js -const link = code.match(/]>/gi)[0]; -assert( - /rel\s*=\s*('|")\s*stylesheet\s*\1/gi.test(link) && - /href\s*=\s*('|")\s*(.\/)?dashboard\.css\s*\1/gi.test(link) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - D3 Dashboard - - - - - - - -``` - -# --solutions-- - -```html - - - - D3 Dashboard - - - - - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-005.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-005.md deleted file mode 100644 index cb9d694707..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-005.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9e2 -title: Part 5 -challengeType: 0 -dashedName: part-5 ---- - -# --description-- - -Next, add a container for the dashboard. Put an empty `div` element in the body with class of `dashboard`. You will be appending all the dashboard elements to this div. - -# --hints-- - -test-text - -```js -assert($('div.dashboard').length === 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - D3 Dashboard - - - - - - - - -``` - -# --solutions-- - -```html - - - - D3 Dashboard - - - - - - -
- - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-006.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-006.md deleted file mode 100644 index a3528d92d1..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-006.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9e3 -title: Part 6 -challengeType: 0 -dashedName: part-6 ---- - -# --description-- - -You are now looking at the stylesheet that you linked to earlier. At the top of this file, target the `body` of the HTML document and give it a `background-color` of `#ccc`. - -# --hints-- - -test-text - -```js -const body = code.match(/body\s*{[\s\S]+?[^}]}/g)[0]; -assert(/background-color\s*:\s*#ccc\s*(;|})/gi.test(body)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - -
- - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-007.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-007.md deleted file mode 100644 index 2268fc1bd6..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-007.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9e4 -title: Part 7 -challengeType: 0 -dashedName: part-7 ---- - -# --description-- - -Next, target the `dashboard` class you created and give it a `width` of `980px` and a `height` of `500px`. - -# --hints-- - -test-text - -```js -const dashboard = $('.dashboard'); -assert( - dashboard.css('width') === '980px' && dashboard.css('height') === '500px' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - -
- - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-008.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-008.md deleted file mode 100644 index 6b8e174e01..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-008.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9e5 -title: Part 8 -challengeType: 0 -dashedName: part-8 ---- - -# --description-- - -Give the dashboard a `background-color` of `white` and a `box-shadow` of `5px 5px 5px 5px #888` to give it a little depth. - -# --hints-- - -test-text - -```js -const dashboard = $('.dashboard'); -assert( - dashboard.css('background-color') === 'rgb(255, 255, 255)' && - dashboard.css('box-shadow') === 'rgb(136, 136, 136) 5px 5px 5px 5px' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - -
- - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-009.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-009.md deleted file mode 100644 index 210943e452..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-009.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9e6 -title: Part 9 -challengeType: 0 -dashedName: part-9 ---- - -# --description-- - -Now you can see your dashboard element. Center it by adding a `margin` of `auto` to it. - -# --hints-- - -test-text - -```js -const dashboard = code.match(/.dashboard\s*{[\s\S]+?[^}]}/g)[0]; -assert(/margin\s*:\s*auto\s*(;|})/g.test(dashboard)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - -
- - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-010.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-010.md deleted file mode 100644 index 2144211195..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-010.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9e7 -title: Part 10 -challengeType: 0 -dashedName: part-10 ---- - -# --description-- - -Give the container some space by adding a `padding` of `100px 10px` to the `body` element. - -# --hints-- - -test-text - -```js -const body = code.match(/body\s*{[\s\S]+?[^}]}/g)[0]; -assert(/padding\s*:\s*100px\s*10px\s*(;|})/g.test(body)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - -
- - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-011.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-011.md deleted file mode 100644 index 511106ee13..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-011.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9e8 -title: Part 11 -challengeType: 0 -dashedName: part-11 ---- - -# --description-- - -Later on, you will be adding more elements to the dashboard container. Set the `display` to `flex` and the `align-items` to `center` so those items will be vertically centered. - -# --hints-- - -test-text - -```js -const dashboard = $('.dashboard'); -assert( - dashboard.css('display') === 'flex' && - dashboard.css('align-items') === 'center' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - -
- - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-012.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-012.md deleted file mode 100644 index 18c1bd58cf..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-012.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9e9 -title: Part 12 -challengeType: 0 -dashedName: part-12 ---- - -# --description-- - -Back in the HTML file, add a `script` tag at the bottom of the head element and give it a `src` attribute of `./d3-5.9.2.min.js`. Don't forget the closing tag. This will add the D3 library to your project from a downloaded copy. - -# --hints-- - -test-text - -```js -const script = code.match(/]>\s*<\/script\s*>/gi)[0]; -assert(/src\s*=\s*('|")\s*(\.\/)?d3-5.9.2.min.js\s*\1/gi.test(script)); -``` - -# --seed-- - -## --before-user-code-- - -```html - -``` - -## --seed-contents-- - -```html - - - - D3 Dashboard - - - - - - -
- - -``` - -# --solutions-- - -```html - - - - D3 Dashboard - - - - - - - -
- - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-013.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-013.md deleted file mode 100644 index d37a6a0bd4..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-013.md +++ /dev/null @@ -1,96 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9ea -title: Part 13 -challengeType: 0 -dashedName: part-13 ---- - -# --description-- - -Add another `script` below the one you just added. Give it a `src` attribute of `./data.js`. - -This adds a `data` variable to your project that contains your number of social media followers, it is an array of objects. Each object has the year and your followers for three different platforms. You will see what it looks like shortly. - -# --hints-- - -test-text - -```js -const script = code.match(/]>\s*<\/script\s*>/gi)[1]; -assert(/src\s*=\s*('|")\s*(\.\/)?data.js\s*\1/gi.test(script)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - - - - D3 Dashboard - - - - - - - -
- - -``` - -# --solutions-- - -```html - - - - D3 Dashboard - - - - - - -
- - - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-014.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-014.md deleted file mode 100644 index 97d9c04dfa..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-014.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9eb -title: Part 14 -challengeType: 0 -dashedName: part-14 ---- - -# --description-- - -Add a third script just before the closing body tag. It will be the JavaScript file you will use to create the rest of the dashboard. Give the script a `src` of `./dashboard.js`. - -# --hints-- - -test-text - -```js -const script = code.match(/]>\s*<\/script\s*>/gi)[2]; -assert(/src\s*=\s*('|")\s*(\.\/)?dashboard.js\s*\1/gi.test(script)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - - - - D3 Dashboard - - - - - - -
- - - - -``` - -# --solutions-- - -```html - - - - D3 Dashboard - - - - - - -
- - - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-015.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-015.md deleted file mode 100644 index fe6efc7f29..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-015.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9ec -title: Part 15 -challengeType: 0 -dashedName: part-15 ---- - -# --description-- - -The script at the top is the `data.js` file you added. I have placed it here so you can see the data and recommend taking a look at it. The second script is the one you just added and where you will build the rest of the project. - -In the second script, create three `const` variables; `svgMargin` with a value of `70`, `svgWidth` with a value of `700`, and `svgHeight` equal to `500`. The first part of the dashboard will be a line graph. It will use these variables as its dimensions. - -The line graph will have the years from your data variable across the bottom, and a scale on the left to show the numbers of followers. Each platform will have a line going across the graph that shows how many followers you had for each year. - -# --hints-- - -test-text - -```js -assert(svgMargin === 70 && svgWidth === 700 && svgHeight === 500); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-016.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-016.md deleted file mode 100644 index 6926b11aee..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-016.md +++ /dev/null @@ -1,108 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9ed -title: Part 16 -challengeType: 0 -dashedName: part-16 ---- - -# --description-- - -Add three more variables; `twitterColor` with a value of `#7cd9d1`, `tumblrColor` equal to `#f6dd71`, and `instagramColor` at `#fd9b98`. Make sure those Hex values are strings. These will be colors used to represent the different platforms throughout the project. - -# --hints-- - -test-text - -```js -assert( - twitterColor === '#7cd9d1' && - tumblrColor === '#f6dd71' && - instagramColor === '#fd9b98' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-017.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-017.md deleted file mode 100644 index 82a2efd50c..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-017.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9ee -title: Part 17 -challengeType: 0 -dashedName: part-17 ---- - -# --description-- - -When you added the D3 library earlier, it put an object named `d3` in your project with a bunch of functions. One of them is `select`; you can use dot notation to access this and the other functions from the object. Create a new variable named `lineGraph` and use `d3.select` to select the `.dashboard` element. Here's an example of something similar: - -```js -const variableName = d3.select('.className') -``` - -# --hints-- - -test-text - -```js -assert(lineGraph._groups[0][0] === $('.dashboard')[0]); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-018.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-018.md deleted file mode 100644 index d358d508c9..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-018.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9ef -title: Part 18 -challengeType: 0 -dashedName: part-18 ---- - -# --description-- - -Your dashboard element is now "selected". D3 has a number of functions for working with a selection; one of them is `append`. It is used to add an element. Chain the `append` function to your selection and use it to add an `svg` element. Here's an example of how that might be done: - -```js -const variableName = d3.select('selectedElement') - .append('elementToAdd') -``` - -# --hints-- - -test-text - -```js -assert(lineGraph._groups[0][0] === $('svg')[0]); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-019.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-019.md deleted file mode 100644 index d55cc0b777..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-019.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9f0 -title: Part 19 -challengeType: 0 -dashedName: part-19 ---- - -# --description-- - -You can't see it, but there is now an `svg` element nested in your dashboard container. When you appended it, it became the "selection" for this area of code. Any functions you chain after it will be used on this selection. - -`attr` is a function to set attributes. You need to pass it the attribute you want to set, and the value you want to give it. Here's an example of how to chain `attr` to a selection: - -```js -const variableName = d3.select('element') - .append('element') - .attr('attribute', 'value') -``` - -Chain an `attr` function to the selection that sets the `width` as the `svgWidth` variable you created earlier. When using a variable as a value, you do not need to put it in any kind of quotations. - -# --hints-- - -test-text - -```js -assert($('svg')[0].attributes.width.value === '700'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-020.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-020.md deleted file mode 100644 index 73034422e9..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-020.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9f1 -title: Part 20 -challengeType: 0 -dashedName: part-20 ---- - -# --description-- - -Chain another `attr` function that sets the `height` as the `svgHeight` variable you created. - -# --hints-- - -test-text - -```js -assert($('svg')[0].attributes.height.value === '500'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-021.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-021.md deleted file mode 100644 index ad1b8a3e0a..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-021.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9f2 -title: Part 21 -challengeType: 0 -dashedName: part-21 ---- - -# --description-- - -Your line graph needs some scales so it knows how to translate the data into visual distances. The first one is the scale for the y-axis. It will be to show the number of followers. D3 has many utilities for creating scales. You want to use it's `scaleLinear` method for this scale. - -Create a new `const` named `yScale`, and set it equal to `d3.scaleLinear()`. - -# --hints-- - -test-text - -```js -assert( - typeof yScale === 'function' && /yScale\s*=\s*d3\.scaleLinear/.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-022.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-022.md deleted file mode 100644 index 65b5d9a684..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-022.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9f3 -title: Part 22 -challengeType: 0 -dashedName: part-22 ---- - -# --description-- - -D3 has a bunch of functions for working with scales as well. One of them is `domain`. It takes an array that is used to describe the highest and lowest values of the data for this scale. After a quick look at the data, the values of the "followers" go from about 0 to 5000. Chain the `domain` function to the `yScale` and pass it the array `[0, 5000]`. - -# --hints-- - -test-text - -```js -const domain = yScale.domain(); -assert(domain.length === 2 && domain[0] === 0 && domain[1] === 5000); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-023.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-023.md deleted file mode 100644 index fef2d72f1b..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-023.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9f4 -title: Part 23 -challengeType: 0 -dashedName: part-23 ---- - -# --description-- - -The `range` function describes how to map the domain values for display on the graph. For example, a value of 5000 followers can't use 5000 as it y-coordinate on the SVG or it would be off the graph. You need to tell the range where the top and bottom of the graph is so the scale can give appropriate values for the y-coordinate. - -Chain the `range` function below the `domain` and pass it an array with `svgHeight - svgMargin` and `svgMargin` as the values. That will translate to `[430, 70]`. This is where the top and bottom of the graph are. So a data point of 5000 followers will map to a value of 430 to use as its y-coordinate and 0 followers will use 70 as its y-coordinate. Any value in between will scale linearly. - -Your graph will have a margin around it for things like axes and labels. The actual line data will display on the inside of this margin area, which is why you use those values. This will become more clear as you progress through the project. - -# --hints-- - -test-text - -```js -const range = yScale.range(); -assert(range.length === 2 && range[0] === 430 && range[1] === 70); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-024.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-024.md deleted file mode 100644 index 1cbbe6313f..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-024.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9f5 -title: Part 24 -challengeType: 0 -dashedName: part-24 ---- - -# --description-- - -Create a new `const` named `xScale`. Use it to create another linear scale like you did for the y-scale. This will be the horizontal or "x" axis. - -# --hints-- - -test-text - -```js -assert( - typeof xScale === 'function' && /xScale\s*=\s*d3\.scaleLinear/.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-025.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-025.md deleted file mode 100644 index 3d66e7f8c2..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-025.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9f6 -title: Part 25 -challengeType: 0 -dashedName: part-25 ---- - -# --description-- - -The `year` values of your data will be used for the x-scale. Chain the `domain` function to `xScale` and pass it an array with the first and last years of your data. - -# --hints-- - -test-text - -```js -const domain = xScale.domain(); -assert(domain.length === 2 && domain[0] === 2012 && domain[1] === 2020); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-026.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-026.md deleted file mode 100644 index 339cb6906b..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-026.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9f7 -title: Part 26 -challengeType: 0 -dashedName: part-26 ---- - -# --description-- - -The range for this scale will go from the left of your graph to the right, with 2012 on the left and 2020 on the right. Add the `range` function to the `xScale` and pass it an array with the values: `svgMargin` and `svgWidth - svgMargin`. This will translate to `[70, 630]`. So 2012 will use 70 as is x-coordinate and 2020 will use 630 as its x-coordinate. - -# --hints-- - -test-text - -```js -const range = xScale.range(); -assert(range.length === 2 && range[0] === 70 && range[1] === 630); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-027.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-027.md deleted file mode 100644 index 022abdca4b..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-027.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9f8 -title: Part 27 -challengeType: 0 -dashedName: part-27 ---- - -# --description-- - -The two scales you defined will be used to create the axes and lines. First is the y-axis, it will be a line with some labels on the left of the graph. Create a new `const` named `yAxis` and set it equal to `d3.axisLeft(yScale)`. This will use the information from the `yScale` variable to build the axis. - -# --hints-- - -test-text - -```js -assert( - typeof yAxis === 'function' && - /yAxis\s*=\s*d3\.axisLeft\(\s*yScale\)/.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-028.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-028.md deleted file mode 100644 index 4fbb726a6e..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-028.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9f9 -title: Part 28 -challengeType: 0 -dashedName: part-28 ---- - -# --description-- - -Create a new `const` named `xAxis` and set the value equal to `d3.axisBottom(xScale)`. This will create another axis for the bottom of the graph using the information from `xScale`. Although the axes do not display yet, they have the information they need to display correctly. - -# --hints-- - -test-text - -```js -assert( - typeof xAxis === 'function' && - /xAxis\s*=\s*d3\.axisBottom\(\s*xScale\)/.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-029.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-029.md deleted file mode 100644 index cf95b345c5..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-029.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9fa -title: Part 29 -challengeType: 0 -dashedName: part-29 ---- - -# --description-- - -On a new line, append a new `g` element to your `lineGraph` variable. `lineGraph.append('g')` will do that for you. This will add a `g` to your SVG and be for displaying the y-axis. `g` is an SVG element that stands for "group". - -# --hints-- - -test-text - -```js -assert($('svg')[0].children[0] === $('g')[0] && $('g').length === 1); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-030.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-030.md deleted file mode 100644 index 2ff020ff1a..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-030.md +++ /dev/null @@ -1,147 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9fb -title: Part 30 -challengeType: 0 -dashedName: part-30 ---- - -# --description-- - -`call` is another function to use with selections. Chain a `call` function to the selection and pass your `yAxis` variable to it. This will draw your y-axis on the SVG. - -# --hints-- - -test-text - -```js -assert($('.tick').length === 11 && /\.call\(\s*yAxis\s*\)/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-031.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-031.md deleted file mode 100644 index d5d5ea704c..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-031.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9fc -title: Part 31 -challengeType: 0 -dashedName: part-31 ---- - -# --description-- - -After all that work, something is finally displayed on the graph. It's the y-axis and all the numbers are hidden on the left. - -Move the axis your `svgMargin` to the right by chaining an `attr` function to the selection. Use it to set the `transform` to `translate(${svgMargin}, 0)`. Use a template literal (backticks) to set the value so you can put your variable in there. - -# --hints-- - -test-text - -```js -assert($('g')[0].attributes.transform.nodeValue === 'translate(70, 0)'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-032.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-032.md deleted file mode 100644 index 75ba3f4f93..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-032.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9fd -title: Part 32 -challengeType: 0 -dashedName: part-32 ---- - -# --description-- - -`style` is a function similar to `attr`, but is more for manipulating CSS styles rather than element attributes. Add a `style` function to the selection that sets the `font` to `10px verdana`. - -# --hints-- - -test-text - -```js -assert($('g')[0].attributes.style.nodeValue === 'font: 10px verdana;'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-033.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-033.md deleted file mode 100644 index acb146f6fd..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-033.md +++ /dev/null @@ -1,153 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9fe -title: Part 33 -challengeType: 0 -dashedName: part-33 ---- - -# --description-- - -On a new line, append another `g` element to your `lineGraph` variable like you did before. This one will be for the x-axis. - -# --hints-- - -test-text - -```js -assert($('g').length === 13); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-034.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-034.md deleted file mode 100644 index 16484edb39..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-034.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9ff -title: Part 34 -challengeType: 0 -dashedName: part-34 ---- - -# --description-- - -Use the `call` function to draw the x-axis onto the SVG like you did for the y-axis. - -# --hints-- - -test-text - -```js -assert($('g').length === 22); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-035.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-035.md deleted file mode 100644 index 9bf085e53a..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-035.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca00 -title: Part 35 -challengeType: 0 -dashedName: part-35 ---- - -# --description-- - -The axis has the right size and labels, but needs to be moved down. Use the `attr` function to set the `transform` like you did before. This time move it down your `svgHeight` minus the `svgMargin`. - -# --hints-- - -test-text - -```js -assert($('svg > g')[1].attributes.transform.nodeValue === 'translate(0, 430)'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-036.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-036.md deleted file mode 100644 index 195a51db40..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-036.md +++ /dev/null @@ -1,168 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca01 -title: Part 36 -challengeType: 0 -dashedName: part-36 ---- - -# --description-- - -The axis labels are `text` elements within the `g`, you can use the `selectAll` function to select them. Chain the `selectAll` function to select the `text` elements in this group. You can do that like this: - -```js -.selectAll('element') -``` - -# --hints-- - -test-text - -```js -assert( - /\.attr\('transform', `translate\(0, \$\{svgHeight - svgMargin\}\)`\)\s*\.selectAll\s*\(\s*('|"|`)text\1\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-037.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-037.md deleted file mode 100644 index 0b758f6fc0..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-037.md +++ /dev/null @@ -1,168 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca02 -title: Part 37 -challengeType: 0 -dashedName: part-37 ---- - -# --description-- - -I want the text elements to be rotated slightly. Chain the `style` function to set the `transform` to `translate(-12px, 0) rotate(-50deg)`. This will put them at an angle. - -# --hints-- - -test-text - -```js -assert( - $('.tick > text').filter( - (node, index) => - index.style.transform === 'translate(-12px) rotate(-50deg)' || - index.style.transform === 'translate(-12px, 0px) rotate(-50deg)' - ).length === 9 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-038.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-038.md deleted file mode 100644 index 5322ee5fe7..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-038.md +++ /dev/null @@ -1,168 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca03 -title: Part 38 -challengeType: 0 -dashedName: part-38 ---- - -# --description-- - -Add another `style` function to set the `text-anchor` to `end`. This will change the spot that each text element rotates around to the `end` of the element so they will align better. - -# --hints-- - -test-text - -```js -assert( - $('.tick > text').filter( - (node, index) => index.style['text-anchor'] === 'end' - ).length === 9 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-039.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-039.md deleted file mode 100644 index 93a1681382..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-039.md +++ /dev/null @@ -1,173 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca04 -title: Part 39 -challengeType: 0 -dashedName: part-39 ---- - -# --description-- - -Add two more `style` functions; one to set the `cursor` to `pointer`, and another to set the `font` to `10px verdana`. - -You will add some hover effects later, so the pointer will make for a better experience. - -# --hints-- - -test-text - -```js -assert( - $('.tick > text').filter( - (node, index) => - index.style.cursor === 'pointer' && index.style.font === '10px verdana' - ).length === 9 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-040.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-040.md deleted file mode 100644 index ff7ddccaef..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-040.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca05 -title: Part 40 -challengeType: 0 -dashedName: part-40 ---- - -# --description-- - -There are a number of D3 functions to work with how the "ticks" or your axis labels are displayed; one of them is `ticks`. Go back to where you defined the `yAxis` variable and chain a `ticks` function to it and pass it these two arguments: `6, '~s'`. - -The `6` will set the number of ticks used to 6, and the `~s` will make the labels display the number of thousands followed by a `k`. For example, `4000` will become `4k`. - -# --hints-- - -test-text - -```js -const ticks = $('.tick > text'); -assert( - ticks[0].innerHTML === '0k' && - ticks[1].innerHTML === '1k' && - ticks[2].innerHTML === '2k' && - ticks[3].innerHTML === '3k' && - ticks[4].innerHTML === '4k' && - ticks[5].innerHTML === '5k' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-041.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-041.md deleted file mode 100644 index a0d2f25c86..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-041.md +++ /dev/null @@ -1,171 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca06 -title: Part 41 -challengeType: 0 -dashedName: part-41 ---- - -# --description-- - -Go back to where you defined your `xAis` variable and chain the `tickFormat` function to it. Pass it `d3.format('')`. This will remove the commas in the year labels of the x-axis. - -# --hints-- - -test-text - -```js -const ticks = $('.tick > text'); -assert(ticks[6].innerHTML === '2012' && ticks[14].innerHTML === '2020'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-042.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-042.md deleted file mode 100644 index 0c55ad53c2..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-042.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca07 -title: Part 42 -challengeType: 0 -dashedName: part-42 ---- - -# --description-- - -In the same spot, chain the `tickPadding` function to the `xAxis` and pass it `10`. This will add a little padding to the ticks so the labels are better aligned. - -# --hints-- - -test-text - -```js -assert( - /\.tickFormat\(d3\.format\((''\)\)\s*\.tickPadding\s*\(\s*10\s*\))/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-043.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-043.md deleted file mode 100644 index 383f6dd20f..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-043.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca08 -title: Part 43 -challengeType: 0 -dashedName: part-43 ---- - -# --description-- - -The axes and labels are looking good. Next, you will start to add some of the lines for the data. First is the line for the Twitter data. On a new line, create a new `const` named `twitterLine` and set it equal to `d3.line()`. `line` is a D3 function for creating a line. - -# --hints-- - -test-text - -```js -assert(/const\s*twitterLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-044.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-044.md deleted file mode 100644 index d72f1948ae..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-044.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca09 -title: Part 44 -challengeType: 0 -dashedName: part-44 ---- - -# --description-- - -The line needs x and y values for each point of data. Chain `x` to the line and pass it a "d function". Here's how that will look: - -```js -.x(d => d.year) -``` - -You will be passing your `data` array to this line function, where it will go through each item in the array(`d`) and create an x value based on the year(`d.year`). - -This is the first place you have seen a "d function". These are common in D3 and that is how I will refer to them throughout this project. - -# --hints-- - -test-text - -```js -assert( - /const twitterLine = d3\.line\(\)\s*\.x\s*\(\s*d\s*=>\s*d\.year\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-045.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-045.md deleted file mode 100644 index 260d37d795..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-045.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca0a -title: Part 45 -challengeType: 0 -dashedName: part-45 ---- - -# --description-- - -Instead of simply using the year(`d.year`) for the x-coordinate, you need to pass each year to the `xScale` so it can set the appropriate coordinate based on your scale. - -In the "d function" you created, return `xScale(d.year)` instead of `d.year`. - -# --hints-- - -test-text - -```js -assert(/\.x\s*\(d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-046.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-046.md deleted file mode 100644 index 89137d7597..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-046.md +++ /dev/null @@ -1,189 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca0b -title: Part 46 -challengeType: 0 -dashedName: part-46 ---- - -# --description-- - -Chain the `y` function to the line and pass it a "d function" that returns your `yScale` with `d.followers.twitter` as its argument. - -This is similar to how you set the x values. It will use the values of your Twitter followers and your `yScale` to set the y coordinate for each item. - -These "d functions" use implicit returns. But if you add curly brackets and a return statement, you can put any JavaScript in there that you want. Including `console.log` statements that can be useful for debugging. - -# --hints-- - -test-text - -```js -assert( - /\.y\s*\(\s*d\s*=>\s*yScale\s*\(\s*d\.followers.twitter\s*\)\s*\)/g.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-047.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-047.md deleted file mode 100644 index 07e8df9e86..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-047.md +++ /dev/null @@ -1,189 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca0c -title: Part 47 -challengeType: 0 -dashedName: part-47 ---- - -# --description-- - -The first line is created and ready to be displayed, which will take a couple steps. On a new line, `append` a `path` element to your `lineGraph` variable. This is similar to how you appended the `g` before. - -# --hints-- - -test-text - -```js -assert( - $('svg path').length === 3 && - /lineGraph\.append\((`|'|")path\1\)/gi.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-048.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-048.md deleted file mode 100644 index ec0cb07a7c..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-048.md +++ /dev/null @@ -1,193 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca0d -title: Part 48 -challengeType: 0 -dashedName: part-48 ---- - -# --description-- - -Tell the path what data to use. Add an `attr` function and set the `d` to `twitterLine(data)`. This will the build the path using the `twitterLine` function you created and your data variable. - -Note that the `d` in this case is a path attribute for drawing a line and is different from a "d function". - -After you have added your code, take a look at the data flow to help understand what is happening. You pass the data array to your `twitterLine` function where it sets the x and y values using your "d functions". The "d functions" go through each item in the array, passing part of the item to each scale to find the appropriate coordinates. When it's done, the value you are setting here is created and sent back. The result ends up being a confusing string of numbers and coordinates to tell the path how to be drawn. - -# --hints-- - -test-text - -```js -assert($('svg path')[2].getAttribute('d').length === 151); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-049.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-049.md deleted file mode 100644 index 780407ba26..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-049.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca0e -title: Part 49 -challengeType: 0 -dashedName: part-49 ---- - -# --description-- - -Add three more `attr` functions to the path; one to set the `stroke` to your `twitterColor` variable, another to set the `stroke-width` to `3`, and a third to set the `fill` to `transparent`. - -# --hints-- - -test-text - -```js -const twitterPath = $('svg path')[2]; -assert( - twitterPath.getAttribute('stroke') === '#7cd9d1' && - twitterPath.getAttribute('stroke-width') == '3' && - twitterPath.getAttribute('fill') === 'transparent' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-050.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-050.md deleted file mode 100644 index 48465e56c8..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-050.md +++ /dev/null @@ -1,198 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca0f -title: Part 50 -challengeType: 0 -dashedName: part-50 ---- - -# --description-- - -On a new line, create a new `const` named `tumblrLine` and set it equal to `d3.line()`. - -# --hints-- - -test-text - -```js -assert(/const\s*tumblrLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-051.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-051.md deleted file mode 100644 index 921306d9c8..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-051.md +++ /dev/null @@ -1,204 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca10 -title: Part 51 -challengeType: 0 -dashedName: part-51 ---- - -# --description-- - -Set the `x` values for `tumblrLine` using another "d function". Use your `xScale` and the `d.year` to calculate their values just like you did for the Twitter line. - -# --hints-- - -test-text - -```js -assert( - /const tumblrLine = d3\.line\(\)\s*\.x\s*\(\s*d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-052.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-052.md deleted file mode 100644 index eef39805fc..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-052.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca11 -title: Part 52 -challengeType: 0 -dashedName: part-52 ---- - -# --description-- - -Set the `y` values for `tumblrLine` using a "d function" again. Use your `yScale` and `d.followers.tumblr` to calculate their values just like you did for the Twitter line. - -The x values for each line will be the same, but the y values will use the data from the different platforms. - -# --hints-- - -test-text - -```js -assert( - /\.y\s*\(\s*d\s*=>\s*yScale\s*\(\s*d\.followers.tumblr\s*\)\s*\)/g.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-053.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-053.md deleted file mode 100644 index 88f5b9b4ce..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-053.md +++ /dev/null @@ -1,209 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca12 -title: Part 53 -challengeType: 0 -dashedName: part-53 ---- - -# --description-- - -On a new line, `append` a `path` element to the `lineGraph` variable. This one will be for displaying the `tumblrLine`. - -# --hints-- - -test-text - -```js -assert( - $('svg path').length === 4 && - code.match(/lineGraph\.append\((`|'|")path\1\)/gi).length === 2 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-054.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-054.md deleted file mode 100644 index 5e0ecb4239..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-054.md +++ /dev/null @@ -1,209 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca13 -title: Part 54 -challengeType: 0 -dashedName: part-54 ---- - -# --description-- - -Tell the new path how to be drawn by setting the `d` attribute to `tumblrLine(data)` using the `attr` function. - -# --hints-- - -test-text - -```js -assert($('svg path')[3].getAttribute('d').length === 115); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-055.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-055.md deleted file mode 100644 index 69e492e771..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-055.md +++ /dev/null @@ -1,218 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca14 -title: Part 55 -challengeType: 0 -dashedName: part-55 ---- - -# --description-- - -Add three `attr` functions to the selection; one to set the `stroke` to your `tumblrColor` variable, another to set the `stroke-width` to `3`, and a third to set the `fill` to `transparent`. - -# --hints-- - -test-text - -```js -const tumblrPath = $('svg path')[3]; -assert( - tumblrPath.getAttribute('stroke') === '#f6dd71' && - tumblrPath.getAttribute('stroke-width') == '3' && - tumblrPath.getAttribute('fill') === 'transparent' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-056.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-056.md deleted file mode 100644 index 49da077e90..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-056.md +++ /dev/null @@ -1,218 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca15 -title: Part 56 -challengeType: 0 -dashedName: part-56 ---- - -# --description-- - -Two lines down, only one more to add for the Instagram followers. On a new line, create a new `const` named `instagramLine` and use the D3 `line` function to create another line like you did for the other two. - -# --hints-- - -test-text - -```js -assert(/const\s*instagramLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-057.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-057.md deleted file mode 100644 index 5a0a51555b..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-057.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca16 -title: Part 57 -challengeType: 0 -dashedName: part-57 ---- - -# --description-- - -Appropriately set the `x` values for `instagramLine` like you did for the other two lines. - -# --hints-- - -test-text - -```js -assert( - /const instagramLine = d3\.line\(\)\s*\.x\s*\(\s*d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-058.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-058.md deleted file mode 100644 index 66f4ae49a3..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-058.md +++ /dev/null @@ -1,229 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca17 -title: Part 58 -challengeType: 0 -dashedName: part-58 ---- - -# --description-- - -Appropriately set the `y` values for `instagramLine` like you did for the other two lines. Use the Instagram followers data this time. - -# --hints-- - -test-text - -```js -assert( - /\.y\s*\(\s*d\s*=>\s*yScale\s*\(\s*d\.followers.instagram\s*\)\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-059.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-059.md deleted file mode 100644 index b30967efed..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-059.md +++ /dev/null @@ -1,231 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca18 -title: Part 59 -challengeType: 0 -dashedName: part-59 ---- - -# --description-- - -On a new line, `append` a new `path` for the Instagram line like you did for the other two lines. - -# --hints-- - -test-text - -```js -assert( - $('svg path').length === 5 && - code.match(/lineGraph\.append\((`|'|")path\1\)/gi).length === 3 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-060.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-060.md deleted file mode 100644 index 1d1a2461c9..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-060.md +++ /dev/null @@ -1,230 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca19 -title: Part 60 -challengeType: 0 -dashedName: part-60 ---- - -# --description-- - -Use your `instagramLine` variable and your data to set the `d` attribute for this path like you did for the other two. - -# --hints-- - -test-text - -```js -assert($('svg path')[4].getAttribute('d').length === 171); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-061.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-061.md deleted file mode 100644 index 78de28a793..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-061.md +++ /dev/null @@ -1,239 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca1a -title: Part 61 -challengeType: 0 -dashedName: part-61 ---- - -# --description-- - -Set the `stroke`, `stroke-width`, and `fill` attributes to their appropriate values for this line. The `stroke-width` and `fill` are the same as the other two. - -# --hints-- - -test-text - -```js -const instagramPath = $('svg path')[4]; -assert( - instagramPath.getAttribute('stroke') === '#fd9b98' && - instagramPath.getAttribute('stroke-width') == '3' && - instagramPath.getAttribute('fill') === 'transparent' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-062.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-062.md deleted file mode 100644 index 72e1323994..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-062.md +++ /dev/null @@ -1,247 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca1b -title: Part 62 -challengeType: 0 -dashedName: part-62 ---- - -# --description-- - -Okay, your graph is coming along. All the lines are drawn, but they look a little plain. The next series of code additions will add circles to each point on each line. First is the Twitter line. On a new line, use the `selectAll` function on your `lineGraph` variable and pass it the string `twitter-circles`. It will look like this: - -```js -lineGraph.selectAll('twitter-circles') -``` - -`twitter-circles` don't exist and this selection will be an empty array, but it's needed. For now, you can just think of this string as a reference, similar to a variable name, so you know what elements you are working with. - -# --hints-- - -test-text - -```js -assert( - /lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*twitter-circles\1\s*\)/g.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-063.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-063.md deleted file mode 100644 index c09620b08b..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-063.md +++ /dev/null @@ -1,246 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca1c -title: Part 63 -challengeType: 0 -dashedName: part-63 ---- - -# --description-- - -Add the D3 `data` function to your selection and pass it the data array like this: - -```js -.data(data) -``` - -# --hints-- - -test-text - -```js -assert(/\.data\s*\(\s*data\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-064.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-064.md deleted file mode 100644 index ec2fac2892..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-064.md +++ /dev/null @@ -1,248 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca1d -title: Part 64 -challengeType: 0 -dashedName: part-64 ---- - -# --description-- - -Next, chain the `enter()` function to the selection. - -The enter function identifies elements that need to be added when the data array is longer than the selection array. This is why you wanted the `selectAll` to be an empty array before. - -In this case, the `twitter-circles` selection has a length of 0, and the data array has a length of 9. So nine elements will be added when you use `append` in the next step. - -# --hints-- - -test-text - -```js -assert(/\.data\(data\)\s*\.enter\s*\(\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-065.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-065.md deleted file mode 100644 index 8edf0ab0b8..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-065.md +++ /dev/null @@ -1,246 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca1e -title: Part 65 -challengeType: 0 -dashedName: part-65 ---- - -# --description-- - -Add the `append` function to the selection, and use it to add `circle` elements. This will add the nine `circle` elements for your Twitter circles. They will be invisible to start, but the elements are there. - -# --hints-- - -test-text - -```js -assert($('svg circle').length === 9); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-066.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-066.md deleted file mode 100644 index 81dd24789e..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-066.md +++ /dev/null @@ -1,250 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca1f -title: Part 66 -challengeType: 0 -dashedName: part-66 ---- - -# --description-- - -Each circle needs a `cx` and `cy` attribute so it knows where to display on the SVG. These are similar to the x and y coordinates for the lines and will be calculated in the same way. The difference is that, for circles, the `cx` and `cy` are attributes, so you need to use the `attr` function. - -Use the `attr` function to set the `cx` to `d => xScale(d.year)`. - -# --hints-- - -test-text - -```js -assert($('svg circle')[0].getAttribute('cx') == '70'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-067.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-067.md deleted file mode 100644 index c3828efd81..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-067.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca20 -title: Part 67 -challengeType: 0 -dashedName: part-67 ---- - -# --description-- - -Next, set the `cy` attribute to `d => xScale(d.followers.twitter)`. - -As a reminder, this will pass each value of your Twitter followers to the `xScale` function where it will determine the y coordinate to use. - -# --hints-- - -test-text - -```js -assert($('svg circle')[0].getAttribute('cy') == '243.232'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-068.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-068.md deleted file mode 100644 index 3d5c6c2bc9..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-068.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca21 -title: Part 68 -challengeType: 0 -dashedName: part-68 ---- - -# --description-- - -Circles also need an `r` (radius) attribute so they know how big to be. Use the `attr` function to set the `r` to `6`. - -# --hints-- - -test-text - -```js -assert($('svg circle')[0].getAttribute('r') == '6'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-069.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-069.md deleted file mode 100644 index 20564296fd..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-069.md +++ /dev/null @@ -1,258 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca22 -title: Part 69 -challengeType: 0 -dashedName: part-69 ---- - -# --description-- - -The circles are now visible, but I don't like the color. Use the appropriate function to set the `fill` to `white` and the `stroke` to your `twitterColor` variable. - -# --hints-- - -test-text - -```js -assert( - $('svg circle')[0].getAttribute('fill') === 'white' && - $('svg circle')[0].getAttribute('stroke') === '#7cd9d1' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-070.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-070.md deleted file mode 100644 index 42f78cc15b..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-070.md +++ /dev/null @@ -1,258 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca23 -title: Part 70 -challengeType: 0 -dashedName: part-70 ---- - -# --description-- - -Use the `style` function to set the `cursor` to `pointer`. Like your year labels, this will be an indicator for a hover effect you will add later. - -# --hints-- - -test-text - -```js -assert($('svg circle')[0].style.cursor === 'pointer'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-071.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-071.md deleted file mode 100644 index 56f09feeba..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-071.md +++ /dev/null @@ -1,263 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca24 -title: Part 71 -challengeType: 0 -dashedName: part-71 ---- - -# --description-- - -On a new line, use the `selectAll` function on your `lineGraph` variable again and pass it the string `tumblr-circles` this time. The next few steps will be for adding circles to the Tumblr line. - -# --hints-- - -test-text - -```js -assert( - /lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*tumblr-circles\1\s*\)/g.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-072.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-072.md deleted file mode 100644 index 3161f8adfb..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-072.md +++ /dev/null @@ -1,268 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca25 -title: Part 72 -challengeType: 0 -dashedName: part-72 ---- - -# --description-- - -Add the same `data`, `enter`, and `append` functions here that you added for the `twitter-circles`, passing in the same arguments. Make sure they are in the same order. - -Remember that this will take the difference in length between the `tumblr-circles` selection(0) and the data array(9) and append that many circle elements. - -# --hints-- - -test-text - -```js -assert($('svg circle').length === 18); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-073.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-073.md deleted file mode 100644 index 1f860b9f0f..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-073.md +++ /dev/null @@ -1,274 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca26 -title: Part 73 -challengeType: 0 -dashedName: part-73 ---- - -# --description-- - -Set the `cx` and `cy` attributes for the Tumblr circles to their appropriate values. - -# --hints-- - -test-text - -```js -assert( - $('svg circle')[9].getAttribute('cx') == '70' && - $('svg circle')[9].getAttribute('cy') == '401.128' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-074.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-074.md deleted file mode 100644 index c84eb37bed..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-074.md +++ /dev/null @@ -1,280 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca27 -title: Part 74 -challengeType: 0 -dashedName: part-74 ---- - -# --description-- - -Use the `attr` function to set the `r` to `6`, the `fill` to `white`, and the `stroke` to your `tumblrColor` variable. - -# --hints-- - -test-text - -```js -assert( - $('svg circle')[9].getAttribute('r') == '6' && - $('svg circle')[9].getAttribute('fill') === 'white' && - $('svg circle')[9].getAttribute('stroke') === '#f6dd71' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-075.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-075.md deleted file mode 100644 index 72c22fb688..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-075.md +++ /dev/null @@ -1,280 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca28 -title: Part 75 -challengeType: 0 -dashedName: part-75 ---- - -# --description-- - -Set the `cursor` to `pointer` using the `style` function. - -# --hints-- - -test-text - -```js -assert($('svg circle')[9].style.cursor === 'pointer'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-076.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-076.md deleted file mode 100644 index 5840013fba..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-076.md +++ /dev/null @@ -1,287 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca29 -title: Part 76 -challengeType: 0 -dashedName: part-76 ---- - -# --description-- - -The circles have been added to two of the lines and look good, on to the last one. On a new line, create another empty selection like you did before. Use the string: `instagram-circles` this time. - -# --hints-- - -test-text - -```js -assert( - /lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*instagram-circles\1\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-077.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-077.md deleted file mode 100644 index 038b25fe6f..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-077.md +++ /dev/null @@ -1,288 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca2a -title: Part 77 -challengeType: 0 -dashedName: part-77 ---- - -# --description-- - -Add the three functions necessary to append the new circle elements. Remember that they won't actually be visible yet. - -# --hints-- - -test-text - -```js -assert($('svg circle').length === 27); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-078.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-078.md deleted file mode 100644 index 37dfd3a218..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-078.md +++ /dev/null @@ -1,296 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca2b -title: Part 78 -challengeType: 0 -dashedName: part-78 ---- - -# --description-- - -Appropriately set the `cx` and `cy` attributes for the Instagram circles. - -# --hints-- - -test-text - -```js -assert( - $('svg circle')[18].getAttribute('cx') == '70' && - $('svg circle')[18].getAttribute('cy') == '424.024' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-079.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-079.md deleted file mode 100644 index 050c462974..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-079.md +++ /dev/null @@ -1,302 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca2c -title: Part 79 -challengeType: 0 -dashedName: part-79 ---- - -# --description-- - -Appropriately set the radius (`r`), `fill`, and `stroke` for these circles. - -# --hints-- - -test-text - -```js -assert( - $('svg circle')[18].getAttribute('r') == '6' && - $('svg circle')[18].getAttribute('fill') === 'white' && - $('svg circle')[18].getAttribute('stroke') === '#fd9b98' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-080.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-080.md deleted file mode 100644 index a5d57e2bdc..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-080.md +++ /dev/null @@ -1,302 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca2d -title: Part 80 -challengeType: 0 -dashedName: part-80 ---- - -# --description-- - -Apply the appropriate `cursor` style for these circles. - -# --hints-- - -test-text - -```js -assert($('svg circle')[18].style.cursor === 'pointer'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-081.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-081.md deleted file mode 100644 index 58692f5eb8..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-081.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca2e -title: Part 81 -challengeType: 0 -dashedName: part-81 ---- - -# --description-- - -The line graph is looking good. All the empty space to the right will be for the pie graph and legend. Create a new `const` named `rightDashboard` and set equal to `d3.select('.dashboard')`. This will select your dashboard container again which currently only has the SVG element as a child. - -# --hints-- - -test-text - -```js -assert( - /const\s*rightDashboard\s*=\s*d3\.select\s*\((`|'|")\.dashboard\1\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-082.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-082.md deleted file mode 100644 index 189c7e257e..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-082.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca2f -title: Part 82 -challengeType: 0 -dashedName: part-82 ---- - -# --description-- - -Use `append` to add a `div` element to the selection. This will put a div as another child of the dashboard container to hold the pie graph and legend. - -# --hints-- - -test-text - -```js -assert( - /const rightDashboard = d3\.select\((`|'|")\.dashboard\1\)\s*\.append\s*\(\s*(`|'|")div\2\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-083.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-083.md deleted file mode 100644 index 06544d55f4..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-083.md +++ /dev/null @@ -1,315 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca30 -title: Part 83 -challengeType: 0 -dashedName: part-83 ---- - -# --description-- - -Create a new `const` named `pieGraph` and set it equal to `rightDashboard.append('svg')`. This will add an SVG element for the pie graph as a child of the div you just added. The pie graph will have three slices, one for each platform. It will display a percentage of how many followers each platform has for the displayed year. - -# --hints-- - -test-text - -```js -assert( - /const\s*pieGraph\s*=\s*rightDashboard\s*\.\s*append\s*\((`|'|")svg\1\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-084.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-084.md deleted file mode 100644 index ff5d59d875..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-084.md +++ /dev/null @@ -1,318 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca31 -title: Part 84 -challengeType: 0 -dashedName: part-84 ---- - -# --description-- - -Add two `attr` functions that set the `width` and `height` of the new SVG to `200`. - -# --hints-- - -test-text - -```js -assert( - $('svg')[1].getAttribute('width') == '200' && - $('svg')[1].getAttribute('height') == '200' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-085.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-085.md deleted file mode 100644 index 254821537e..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-085.md +++ /dev/null @@ -1,319 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca32 -title: Part 85 -challengeType: 0 -dashedName: part-85 ---- - -# --description-- - -Create a new `const` named `pieArc` and set it equal to `d3.arc()`. This will be used to create the angles for the lines of the pie chart using the D3 arc generator. - -# --hints-- - -test-text - -```js -assert(/const\s*pieArc\s*=\s*d3\s*\.\s*arc\s*\(\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-086.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-086.md deleted file mode 100644 index 24d2528df9..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-086.md +++ /dev/null @@ -1,324 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca33 -title: Part 86 -challengeType: 0 -dashedName: part-86 ---- - -# --description-- - -Chain the function `outerRadius(100)` to the arc. This will set the outer radius of the pie chart to 100. - -# --hints-- - -test-text - -```js -assert( - /const pieArc = d3\.arc\(\)\s*\.\s*outerRadius\s*\(\s*100\s*\)/g.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-087.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-087.md deleted file mode 100644 index 158785f17c..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-087.md +++ /dev/null @@ -1,328 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca34 -title: Part 87 -challengeType: 0 -dashedName: part-87 ---- - -# --description-- - -Chain `innerRadius` to the arc and pass it `0` (zero). This is set to zero to make a traditional pie chart, you would use a larger inner radius to create a doughnut chart. - -# --hints-- - -test-text - -```js -assert( - /const pieArc = d3\.arc\(\)\s*\.outerRadius\(100\)\s*\.\s*innerRadius\s*\(\s*0\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-088.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-088.md deleted file mode 100644 index 0374b5d205..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-088.md +++ /dev/null @@ -1,329 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca35 -title: Part 88 -challengeType: 0 -dashedName: part-88 ---- - -# --description-- - -The pie chart needs a new scale to set the colors. Create a new `const` named `pieColors` and set it equal to `d3.scaleOrdinal()`. An ordinal scale is for a set of data that will have exactly one item in the range specifically for it. - -In this case, each platform of followers you have will map directly to a single color with nothing in between. - -# --hints-- - -test-text - -```js -assert(/const\s*pieColors\s*=\s*d3\s*\.\s*scaleOrdinal\s*\(\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-089.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-089.md deleted file mode 100644 index d370af97db..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-089.md +++ /dev/null @@ -1,334 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca36 -title: Part 89 -challengeType: 0 -dashedName: part-89 ---- - -# --description-- - -Set the `domain` of the scale to `data[8].followers`. This will be three items, one for each platform. - -# --hints-- - -test-text - -```js -assert( - /const pieColors = d3\.scaleOrdinal\(\)\s*\.\s*domain\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-090.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-090.md deleted file mode 100644 index 2ab27a1292..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-090.md +++ /dev/null @@ -1,336 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca37 -title: Part 90 -challengeType: 0 -dashedName: part-90 ---- - -# --description-- - -Since the domain has three items, the range also needs to have three items. If it had less, the values would repeat, putting the same color on the pie chart multiple times. Add the `range` function to the scale and pass it an array with your three color variables. Put them in the same order in which they are defined. - -# --hints-- - -test-text - -```js -assert( - /\.domain\(data\[8\]\.followers\)\s*\.\s*range\s*\(\s*\[\s*twitterColor\s*,\s*tumblrColor\s*,\s*instagramColor\s*\]\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-091.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-091.md deleted file mode 100644 index ca30c57807..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-091.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca38 -title: Part 91 -challengeType: 0 -dashedName: part-91 ---- - -# --description-- - -Create a new `const` named `pie` and set it equal to `d3.pie()`. This is the D3 pie chart generator. - -# --hints-- - -test-text - -```js -assert(/const\s*pie\s*=\s*d3\s*\.\s*pie\s*\(\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-092.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-092.md deleted file mode 100644 index 78810ee7c2..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-092.md +++ /dev/null @@ -1,344 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca39 -title: Part 92 -challengeType: 0 -dashedName: part-92 ---- - -# --description-- - -Chain a `value` function to `pie` and pass it `d => d.value`. Each piece of data(`d`) will have a `key`(platform) and a `value`(number of followers), you want to return the number of followers here. The pie function will create an array of objects from these values that describe the angles and sizes the pie chart needs. - -In a few steps, you will make an array out of your data variable that will be passed to this function. - -# --hints-- - -test-text - -```js -assert( - /const pie = d3\.pie\(\)\s*\.\s*value\s*\(\s*d\s*=>\s*d\.value\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-093.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-093.md deleted file mode 100644 index d04e9e9cd4..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-093.md +++ /dev/null @@ -1,345 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca3a -title: Part 93 -challengeType: 0 -dashedName: part-93 ---- - -# --description-- - -Create a new `const` named `pieGraphData` and set the value equal to `pieGraph.selectAll('pieSlices')`. This is an empty selection similar circles you created earlier. - -# --hints-- - -test-text - -```js -assert( - /const\s*pieGraphData\s*=\s*pieGraph\s*\.\s*selectAll\s*\(\s*(`|'|")pieSlices\1\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-094.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-094.md deleted file mode 100644 index 2f7ab8d169..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-094.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca3b -title: Part 94 -challengeType: 0 -dashedName: part-94 ---- - -# --description-- - -Add the `data` function to the selection. Pass it your `pie` function with an empty array as its argument for now. The next step will get the correct array to put there. - -# --hints-- - -test-text - -```js -assert( - /const pieGraphData = pieGraph\.selectAll\((`|'|")pieSlices\1\)\s*\.\s*data\s*\(pie\s*\(\s*\[\s*\]\s*\)\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-095.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-095.md deleted file mode 100644 index aa0739df56..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-095.md +++ /dev/null @@ -1,367 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca3c -title: Part 95 -challengeType: 0 -dashedName: part-95 ---- - -# --description-- - -You want the array passed to `pie` to be an array of key/value objects for the 2020 followers. `d3.entries` will build that array for you. Here's how that looks: - -```js -d3.entries(data[8].followers)) -``` - -The array it builds looks like this: - -```js -[ - { key: 'twitter', value: 2845 }, - { key: 'tumblr', value: 2040 }, - { key: 'instagram', value: 4801 } -] -``` - -This is where the `value` comes from in your `pie` variable. - -Add the `d3.entries` function as your `pie` argument. Use it to create the above array. - -# --hints-- - -test-text - -```js -assert( - /const pieGraphData = pieGraph\.selectAll\((`|'|")pieSlices\1\)\s*\.\s*data\s*\(pie\s*\(\s*d3\s*\.\s*entries\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\)\s*\)\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-096.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-096.md deleted file mode 100644 index 9360d253ba..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-096.md +++ /dev/null @@ -1,350 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca3d -title: Part 96 -challengeType: 0 -dashedName: part-96 ---- - -# --description-- - -Add the `enter` function to the current selection. Just like before, the initial selection here has a length of zero and the data has a length of three. So when you append elements in the next step, three will be created; one for each slice of the pie. - -# --hints-- - -test-text - -```js -assert( - /\.data\(pie\(d3\.entries\(data\[8\]\.followers\)\)\)\s*\.\s*enter\s*\(\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-097.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-097.md deleted file mode 100644 index 951024b7ea..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-097.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca3e -title: Part 97 -challengeType: 0 -dashedName: part-97 ---- - -# --description-- - -Use `append` to add three `g` elements for the pie. - -# --hints-- - -test-text - -```js -assert($('svg g').length === 20); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-098.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-098.md deleted file mode 100644 index 50c6cb583e..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-098.md +++ /dev/null @@ -1,351 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca3f -title: Part 98 -challengeType: 0 -dashedName: part-98 ---- - -# --description-- - -On a new line, `append` a `path` element to your `pieGraphData` variable. This is where you will start to draw the pie chart. - -# --hints-- - -test-text - -```js -assert(/pieGraphData\s*\.\s*append\s*\((`|'|")path\1\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-099.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-099.md deleted file mode 100644 index 8955c72ecd..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-099.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca40 -title: Part 99 -challengeType: 0 -dashedName: part-99 ---- - -# --description-- - -Set the `d` attribute to your `pieArc` variable. Just like the `d` in your lines, this is an SVG attribute for path elements that describes how to draw things. Your `pieArc` variable will determine what this value is for you. - -# --hints-- - -test-text - -```js -assert($('.dashboard div svg path')[0].getAttribute('d').length === 94); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-100.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-100.md deleted file mode 100644 index db5e69b6b2..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-100.md +++ /dev/null @@ -1,372 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca41 -title: Part 100 -challengeType: 0 -dashedName: part-100 ---- - -# --description-- - -The pie graph is being drawn at the `0, 0` coordinates of the SVG. Back on your `pieGraphData` variable, add an attribute that changes the `transform` to `translate(100, 100)`. - -Since the pie chart has a radius of 100, and the SVG is 200 by 200, this will move it so it is centered. - -# --hints-- - -test-text - -```js -const transform = $('.dashboard div svg g')[0].getAttribute('transform'); -assert(/translate\s*\(\s*100\s*,\s*100\s*\)/g.test(transform)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-101.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-101.md deleted file mode 100644 index 016740db33..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-101.md +++ /dev/null @@ -1,377 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca42 -title: Part 101 -challengeType: 0 -dashedName: part-101 ---- - -# --description-- - -Back at the bottom, where you draw the chart. Use the `attr` function to set the `fill` to a "d function". In the "d function", use your `pieColors` scale to get the color value for the platform(`d.data.key`). So when each platform is passed to your scale, is will get the appropriate color to use as the fill from the scales range. - -# --hints-- - -test-text - -```js -const pathsArr = $('.dashboard div svg g path'); -assert( - pathsArr[0].getAttribute('fill') === '#7cd9d1' && - pathsArr[1].getAttribute('fill') === '#f6dd71' && - pathsArr[2].getAttribute('fill') === '#fd9b98' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-102.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-102.md deleted file mode 100644 index e7d9c7423c..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-102.md +++ /dev/null @@ -1,364 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca43 -title: Part 102 -challengeType: 0 -dashedName: part-102 ---- - -# --description-- - -Next, set the `stroke` to `white` and the `stroke-width` to `2`. - -# --hints-- - -test-text - -```js -const pathsArr = $('.dashboard div svg g path'); -assert( - pathsArr[0].getAttribute('stroke') === 'white' && - pathsArr[0].getAttribute('stroke-width') == 2 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-103.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-103.md deleted file mode 100644 index 2e7f2196cf..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-103.md +++ /dev/null @@ -1,365 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca44 -title: Part 103 -challengeType: 0 -dashedName: part-103 ---- - -# --description-- - -Your chart needs some labels in each slice. On a new line, append `text` elements to your `pieGraphData` variable. - -# --hints-- - -test-text - -```js -assert(/pieGraphData\s*\.\s*append\s*\((`|'|")text\1\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-104.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-104.md deleted file mode 100644 index 0cb9c6cda4..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-104.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca47 -title: Part 104 -challengeType: 0 -dashedName: part-104 ---- - -# --description-- - -Chain a `text` function to set the text of each pie slice to a percentage. Set the value to a "d function" with curly brackets and leave the function empty for now. It should look like this: - -```js -.text(d => { - -}) -``` - -The method for getting the percent of each slice will take a few steps: - -1. Find the total number of followers for the displayed year -2. Divide the followers of a single platform by that total -3. Turn it into a string to display - -# --hints-- - -test-text - -```js -assert(/\.append\('text'\)\s*\.text\s*\(\s*d\s*=>\s*\{\s*\}\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-105.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-105.md deleted file mode 100644 index 9fe69b81a2..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-105.md +++ /dev/null @@ -1,383 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca48 -title: Part 105 -challengeType: 0 -dashedName: part-105 ---- - -# --description-- - -In the function you just created, create a `const` named `values`. Use the `d3.values` function to get the values of the 2020 followers and set the result to your `values` variable. Here's how to get the values: - -```js -d3.values(data[8].followers) -``` - -It will be an array with the values of the followers for the three platforms in 2020. - -Note that this "d function" has curly brackets. So you could `console.log(values)` in there to see it's value. - -# --hints-- - -test-text - -```js -assert( - /const\s*values\s*=\s*d3\s*\.\s*values\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\);?/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-106.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-106.md deleted file mode 100644 index 0de087f1cc..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-106.md +++ /dev/null @@ -1,372 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca49 -title: Part 106 -challengeType: 0 -dashedName: part-106 ---- - -# --description-- - -Since you want to find what percent each of those `values` is, you first need to add them all up. `d3.sum` will do that for you. Create a new `const` named `sum` and set it equal to `d3.sum(values)`. - -# --hints-- - -test-text - -```js -assert(/const\s*sum\s*=\s*d3\s*\.\s*sum\s*\(\s*values\s*\)\s*;?/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-107.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-107.md deleted file mode 100644 index 9663f711d9..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-107.md +++ /dev/null @@ -1,376 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca4a -title: Part 107 -challengeType: 0 -dashedName: part-107 ---- - -# --description-- - -Create another variable named `percent` and set it equal to `d.data.value` divided by your `sum` variable. - -# --hints-- - -test-text - -```js -assert( - /const\s*percent\s*=\s*d\s*\.\s*data\s*\.\s*value\s*\/\s*sum;?/g.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-108.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-108.md deleted file mode 100644 index 2997d10be6..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-108.md +++ /dev/null @@ -1,388 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca4b -title: Part 108 -challengeType: 0 -dashedName: part-108 ---- - -# --description-- - -Your percent values are numbers less than one. You will need to multiply it by 100, round of the decimals, and add a `%` sign. Use a template literal to return this to the `text` function: - -```js -${Math.round(percent * 100)}% -``` - -Don't forget that you need a `return` statement here since you aren't using an implicit return. - -# --hints-- - -test-text - -```js -assert( - /return\s*`\$\{\s*Math\s*\.\s*round\s*\(\s*percent\s*\*\s*100\s*\)\s*\}%`;?\s*\}\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-109.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-109.md deleted file mode 100644 index 194c4a19ab..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-109.md +++ /dev/null @@ -1,388 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca4c -title: Part 109 -challengeType: 0 -dashedName: part-109 ---- - -# --description-- - -The text elements are at the center of the pie graph, you need to use the `centroid` from the D3 arc API to tell them where to go. Add an `attr` function to set the `transform` to a `d` function that returns this template literal: `translate(${ pieArc.centroid(d) })` - -The `centroid` function will find the midpoint of each slice for each text element. - -# --hints-- - -test-text - -```js -const transform = $('.dashboard div svg g text')[0] - .getAttribute('transform') - .replace('translate(', '') - .replace(')', '') - .split(','); -assert(transform[0] < 39 && transform[1] > 31); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-110.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-110.md deleted file mode 100644 index 731a5184b1..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-110.md +++ /dev/null @@ -1,389 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca4d -title: Part 110 -challengeType: 0 -dashedName: part-110 ---- - -# --description-- - -The function you just added, placed the start of the text at the midpoint of each slice. Change the `style` of the text to give it a `text-anchor` of `middle` so the middle of the text is in the middle of the slice. - -After that, set the `font` to `10px verdana`. - -# --hints-- - -test-text - -```js -const text = $('.dashboard div svg g text')[0]; -assert( - text.style.textAnchor === 'middle' && - text.style.font.toLowerCase() === '10px verdana' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-111.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-111.md deleted file mode 100644 index e191bb7684..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-111.md +++ /dev/null @@ -1,391 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca4e -title: Part 111 -challengeType: 0 -dashedName: part-111 ---- - -# --description-- - -The last component you are going to add is a legend to display the name of each platform and the number of followers for the year. Create a new `const` named `legend` and use it to `append` a `table` to your `rightDashboard` variable. This looks similar to the code where you created your `pieGraph` variable. - -# --hints-- - -test-text - -```js -assert( - /const\s*legend\s*=\s*rightDashboard\s*\.\s*append\s*\(\s*('|"|`)\s*table\s*\1\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-112.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-112.md deleted file mode 100644 index 680c56e08b..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-112.md +++ /dev/null @@ -1,394 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca4f -title: Part 112 -challengeType: 0 -dashedName: part-112 ---- - -# --description-- - -Give the table a `width` of `200` and a `height` of `120` using `attr`. - -# --hints-- - -test-text - -```js -const table = $('.dashboard div table')[0]; -assert( - table.getAttribute('width') == 200 && table.getAttribute('height') == 120 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-113.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-113.md deleted file mode 100644 index c0c7b38cef..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-113.md +++ /dev/null @@ -1,396 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca50 -title: Part 113 -challengeType: 0 -dashedName: part-113 ---- - -# --description-- - -Set the `font` to `12px verdana` using the `style` function. - -# --hints-- - -test-text - -```js -assert( - $('.dashboard div table')[0].style.font.toLowerCase() === '12px verdana' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-114.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-114.md deleted file mode 100644 index 0492d13020..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-114.md +++ /dev/null @@ -1,401 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca51 -title: Part 114 -challengeType: 0 -dashedName: part-114 ---- - -# --description-- - -Create a new `const` named `legendTitle` and use it to `append` a `thead` to your `legend` variable. `thead` is used with the HTML table element and is for the top row of the table. - -# --hints-- - -test-text - -```js -assert( - /const\s*legendTitle\s*=\s*legend\s*\.\s*append\s*\(\s*('|"|`)\s*thead\s*\1\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-115.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-115.md deleted file mode 100644 index 4d4098f707..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-115.md +++ /dev/null @@ -1,401 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca52 -title: Part 115 -challengeType: 0 -dashedName: part-115 ---- - -# --description-- - -`append` a `tr` element to the selection and then append a `th` element right after it. `tr` is for defining a row of the table, and `th` is for defining the header cells of the table. - -# --hints-- - -test-text - -```js -assert($('.dashboard div table thead tr th').length === 1); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-116.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-116.md deleted file mode 100644 index 39ced1543d..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-116.md +++ /dev/null @@ -1,404 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca53 -title: Part 116 -challengeType: 0 -dashedName: part-116 ---- - -# --description-- - -Use the `text` function to set the text of the selection to `2020 followers`. - -# --hints-- - -test-text - -```js -assert($('.dashboard div table thead tr th').text() === '2020 followers'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-117.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-117.md deleted file mode 100644 index bf9e34eda4..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-117.md +++ /dev/null @@ -1,406 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca54 -title: Part 117 -challengeType: 0 -dashedName: part-117 ---- - -# --description-- - -Your table is going to have three columns, one for the platform name, one for the color it is using on your dashboard, and a third to display the number of followers. So you want the title to take up all three columns. Set the `colspan` attribute of the `th` to `3` so it spans all three of these columns. - -# --hints-- - -test-text - -```js -assert($('.dashboard div table thead tr th')[0].getAttribute('colspan') == 3); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-118.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-118.md deleted file mode 100644 index 0c3e750347..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-118.md +++ /dev/null @@ -1,412 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca55 -title: Part 118 -challengeType: 0 -dashedName: part-118 ---- - -# --description-- - -Create a new `const` named `legendRows` and use it to `append` a `tbody` element to your `legend` variable similar to how you added the `thead`. `tbody` is for the main content of an HTML table. - -# --hints-- - -test-text - -```js -assert( - /const\s*legendRows\s*=\s*legend\s*\.\s*append\s*\(\s*('|"|`)\s*tbody\s*\1\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-119.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-119.md deleted file mode 100644 index 68b03ce851..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-119.md +++ /dev/null @@ -1,417 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca56 -title: Part 119 -challengeType: 0 -dashedName: part-119 ---- - -# --description-- - -Add a `selectAll` function to the selection and pass it the string `tr`. - -# --hints-- - -test-text - -```js -assert( - /const legendRows = legend\.append\('tbody\s*'\)\s*\.\s*selectAll\s*\(\s*('|"|`)\s*tr\s*\1\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-120.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-120.md deleted file mode 100644 index aa30807012..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-120.md +++ /dev/null @@ -1,417 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca57 -title: Part 120 -challengeType: 0 -dashedName: part-120 ---- - -# --description-- - -Use the `data` function to set the data for the rows to an array of your 2020 followers. To get the array use `d3.entries(data[8].followers)`. Remember, this will create an array of key/value pairs of your followers for that year. - -# --hints-- - -test-text - -```js -assert( - /\.selectAll\('tr'\)\s*\.\s*data\s*\(\s*d3\s*\.\s*entries\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\)\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-121.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-121.md deleted file mode 100644 index ee08e49dda..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-121.md +++ /dev/null @@ -1,418 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca58 -title: Part 121 -challengeType: 0 -dashedName: part-121 ---- - -# --description-- - -Add the `enter` and `append` functions to the selection. Pass the string `tr` to the append function to add three table row elements. These elements will be for displaying each platform's name. - -# --hints-- - -test-text - -```js -assert($('.dashboard div table tbody tr').length === 3); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-122.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-122.md deleted file mode 100644 index 777a09d553..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-122.md +++ /dev/null @@ -1,422 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca59 -title: Part 122 -challengeType: 0 -dashedName: part-122 ---- - -# --description-- - -On a new line, `append` a `td` to your `legendRows` variable. `td` is for an individual cell in the row of the table. - -# --hints-- - -test-text - -```js -assert($('.dashboard div table tbody tr td').length === 3); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-123.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-123.md deleted file mode 100644 index 562a3d4fd0..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-123.md +++ /dev/null @@ -1,426 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca5a -title: Part 123 -challengeType: 0 -dashedName: part-123 ---- - -# --description-- - -Use the `text` function to set the text of each `td` to the `key` of each data point by using a "d function" to return `d.key`. - -# --hints-- - -test-text - -```js -assert( - $('.dashboard div table tbody tr td').text() === 'twittertumblrinstagram' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-124.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-124.md deleted file mode 100644 index 0e33d97bc6..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-124.md +++ /dev/null @@ -1,431 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca5b -title: Part 124 -challengeType: 0 -dashedName: part-124 ---- - -# --description-- - -This is the first column of your table. Set the `align` attribute to `right` to align the text to the right of each cell. - -# --hints-- - -test-text - -```js -assert( - $('.dashboard div table tbody tr td')[0] - .getAttribute('align') - .toLowerCase() === 'right' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-125.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-125.md deleted file mode 100644 index 915e877e04..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-125.md +++ /dev/null @@ -1,430 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca5c -title: Part 125 -challengeType: 0 -dashedName: part-125 ---- - -# --description-- - -On a new line, append another `td` element to your `legendRows` variable. This will be for colored squares in the center column. - -# --hints-- - -test-text - -```js -assert($('.dashboard div table tbody tr td').length === 6); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-126.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-126.md deleted file mode 100644 index 1acfc7b1f6..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-126.md +++ /dev/null @@ -1,437 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca5d -title: Part 126 -challengeType: 0 -dashedName: part-126 ---- - -# --description-- - -Set the `align` attribute to `center`. - -# --hints-- - -test-text - -```js -assert( - $('.dashboard div table tbody tr td')[1] - .getAttribute('align') - .toLowerCase() === 'center' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-127.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-127.md deleted file mode 100644 index c2d8ad27c4..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-127.md +++ /dev/null @@ -1,435 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca5e -title: Part 127 -challengeType: 0 -dashedName: part-127 ---- - -# --description-- - -Append a `div` element to the selection. Each `div` will be a small square for each color. - -# --hints-- - -test-text - -```js -assert($('.dashboard div table tbody tr td div').length === 3); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-128.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-128.md deleted file mode 100644 index 7a09ef3ed3..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-128.md +++ /dev/null @@ -1,438 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca5f -title: Part 128 -challengeType: 0 -dashedName: part-128 ---- - -# --description-- - -Set the `width` to `16px` and the `height` to `16px` using the `style` function. - -# --hints-- - -test-text - -```js -const div = $('.dashboard div table tbody tr td div')[0]; -assert(div.style.width == '16px' && div.style.height === '16px'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-129.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-129.md deleted file mode 100644 index 992537b3e6..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-129.md +++ /dev/null @@ -1,443 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca60 -title: Part 129 -challengeType: 0 -dashedName: part-129 ---- - -# --description-- - -Using the `style` function again, set the `background-color` of each div to a "d function". Using the "d function", pass the key(`d.key`) of each data point to your `pieColors` scale so it knows what color to use. - -# --hints-- - -test-text - -```js -assert( - $('.dashboard div table tbody tr td div')[0].style.backgroundColor === - 'rgb(124, 217, 209)' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-130.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-130.md deleted file mode 100644 index 2cb143184e..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-130.md +++ /dev/null @@ -1,443 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca61 -title: Part 130 -challengeType: 0 -dashedName: part-130 ---- - -# --description-- - -On a new line, append another `td` to the `legendRows` variable for the last group of items. It will display the number of followers for each platform. - -# --hints-- - -test-text - -```js -assert($('.dashboard div table tbody tr td').length === 9); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-131.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-131.md deleted file mode 100644 index 470b5a68e2..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-131.md +++ /dev/null @@ -1,446 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca62 -title: Part 131 -challengeType: 0 -dashedName: part-131 ---- - -# --description-- - -Set the `text` to a "d function" that returns the value(`d.value`) for each data point. - -# --hints-- - -test-text - -```js -assert($('.dashboard div table tbody tr td')[2].innerHTML === '2845'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-132.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-132.md deleted file mode 100644 index cb3e63813d..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-132.md +++ /dev/null @@ -1,450 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca63 -title: Part 132 -challengeType: 0 -dashedName: part-132 ---- - -# --description-- - -Set the `align` attribute to `left` for this selection. - -# --hints-- - -test-text - -```js -assert( - $('.dashboard div table tbody tr td')[2] - .getAttribute('align') - .toLowerCase() === 'left' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-133.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-133.md deleted file mode 100644 index 0aa86bfb00..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-133.md +++ /dev/null @@ -1,448 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca64 -title: Part 133 -challengeType: 0 -dashedName: part-133 ---- - -# --description-- - -The legend has all the information is needs, but the title looks a little misaligned. Go to where you created your `legendTitle` variable and set the `position` to `relative` and the `left` to `20px` using `style` functions. - -# --hints-- - -test-text - -```js -const th = $('.dashboard div table thead tr th')[0]; -assert(th.style.position === 'relative' && th.style.left === '20px'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-134.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-134.md deleted file mode 100644 index 1daa93dc49..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-134.md +++ /dev/null @@ -1,453 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca65 -title: Part 134 -challengeType: 0 -dashedName: part-134 ---- - -# --description-- - -The legend and pie graph look a little off as well. Go to where you created your `legend` variable and add a `position` of `relative` and a `top` of `30px` using `style` functions. - -# --hints-- - -test-text - -```js -const table = $('.dashboard div table')[0]; -assert(table.style.position === 'relative' && table.style.top === '30px'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-135.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-135.md deleted file mode 100644 index 3acf263d2b..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-135.md +++ /dev/null @@ -1,464 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca66 -title: Part 135 -challengeType: 0 -dashedName: part-135 ---- - -# --description-- - -Lastly, where you created your `pieGraph` variable, add a `position` of `relative` and a `left` of `20px` using `style` functions. - -# --hints-- - -test-text - -```js -const pieGraph = $('.dashboard div svg')[0]; -assert( - pieGraph.style.position === 'relative' && pieGraph.style.left === '20px' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-136.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-136.md deleted file mode 100644 index 6ab6c4a6be..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-136.md +++ /dev/null @@ -1,476 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca67 -title: Part 136 -challengeType: 0 -dashedName: part-136 ---- - -# --description-- - -Finally! You have all the elements displayed and they look good. The last thing you will do is make it so you can see the data from whatever year you want. - -Wrap all the code in the script you've been working with in a function named `drawDashboard` and give it a parameter named `year`. Then, at the bottom of the script, call the function you created and pass it the number `2020`. - -# --hints-- - -test-text - -```js -assert( - typeof drawDashboard === 'function' && - /<\/script>\s* - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-137.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-137.md deleted file mode 100644 index 736bc47dd7..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-137.md +++ /dev/null @@ -1,484 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca68 -title: Part 137 -challengeType: 0 -dashedName: part-137 ---- - -# --description-- - -At the top of the function create a new `const` named `index`. You are going to use it to find the item in the `data` array with the year that is passed to the function. - -Use JavaScript's `findIndex` function to set your `index` variable to the index of the item in the `data` array where the year is the same as the year passed to your `drawDashboard` function. Here's an example: - -```js -array.findIndex(d => - // find the index where the year passed to - // drawDashboard equals the year of the array -) -``` - -After this, you will be able to use `data[index]` to get that item in the array. - -# --hints-- - -test-text - -```js -const script = $('.dashboard').siblings('script')[1].innerHTML; -assert( - /var index = data.findIndex\(function \(d\) \{\s*return (year === d\.year|d.year === year);\s*\}\);/g.test( - script - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-138.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-138.md deleted file mode 100644 index 763f870eeb..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-138.md +++ /dev/null @@ -1,479 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca6a -title: Part 138 -challengeType: 0 -dashedName: part-138 ---- - -# --description-- - -There are four places in the file where you used `data[8]` to set data to the year 2020. Change all five of them to `data[index]` so you can pass in any year to the function to display the data from that year. - -The five spots are: - -1. The `domain` for `pieColors`. -2. The `data` for `pieGraphData`. -3. The `text` for your pie slice text. -4. The `data` for your `legendRows`. - -# --hints-- - -test-text - -```js -assert( - !/data\[8\]/g.test(code) && code.match(/data\s*\[\s*index\s*\]/g).length === 4 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-139.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-139.md deleted file mode 100644 index fa2774a18d..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-139.md +++ /dev/null @@ -1,485 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca6b -title: Part 139 -challengeType: 0 -dashedName: part-139 ---- - -# --description-- - -Go to where you `call` the `xAxis` and create a `mouseover` event for the labels. Chain the `on` function to them, pass it the string `mouseover`, and give it a value of a "d function" that calls `drawDashboard` with `d` as the argument. It will look like this: - -```js -.on('mouseover', d => drawDashboard(d)) -``` - -So now, when you hover a label, the function will be called with the year that is being hovered. - -# --hints-- - -test-text - -```js -const script = $('.dashboard').siblings('script')[1].innerHTML; -assert( - /\.on\(('|"|`)mouseover\1, function \(d\) \{\s*return drawDashboard\(d\);\s*\}\)/g.test( - script - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-140.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-140.md deleted file mode 100644 index de5fea91df..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-140.md +++ /dev/null @@ -1,478 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca6c -title: Part 140 -challengeType: 0 -dashedName: part-140 ---- - -# --description-- - -There's a problem, each time you hover a label it adds all the elements to the container again. If you empty the container at the top of the function, it will redraw them where they need to be. - -Go back to the top of the function and use `d3.select` to select the `.dashboard` element and chain the `html` function to it with an empty string as it parameter. Empty means no spaces. - -# --hints-- - -test-text - -```js -const script = $('.dashboard').siblings('script')[1].innerHTML; -assert(/d3\.select\(('|"|`)\.dashboard\1\)\.html\(('|"|`)\2\)/g.test(script)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-141.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-141.md deleted file mode 100644 index 0e35de8505..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-141.md +++ /dev/null @@ -1,489 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca6d -title: Part 141 -challengeType: 0 -dashedName: part-141 ---- - -# --description-- - -Now when you hover a label, you can see the data for the different years. - -Where you created the `text` elements for the x-axis labels, change the `font` to `bold 10px verdana` for the currently displayed year. - -To do this, create a "d function" in the `font` value area and return the above sting if `d` equals `year`. Otherwise, return the string that is currently there (`10px verdana`). It's easiest to use a ternary operator for this. - -Here's a hint: - -```js -.style('font', d => d === year ? ) -``` - -# --hints-- - -test-text - -```js -assert( - Object.values($('.dashboard svg g text')).filter( - (el) => el.style && el.style.font.toLowerCase() === 'bold 10px verdana' - ).length === 1 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-142.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-142.md deleted file mode 100644 index ca70f946f0..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-142.md +++ /dev/null @@ -1,481 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca6e -title: Part 142 -challengeType: 0 -dashedName: part-142 ---- - -# --description-- - -Create another `mouseover` event for when you hover one of the `twitter-circles`. It will look like the other `mouseover` event you created except the `drawDashboard` function will take `d.year` instead of `d`. - -# --hints-- - -test-text - -```js -const script = $('.dashboard').siblings('script')[1].innerHTML; -assert( - /\.on\(('|"|`)mouseover\1, function \(d\) \{\s*return drawDashboard\(d\.year\);\s*\}\)/g.test( - script - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-143.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-143.md deleted file mode 100644 index adb5ee8ab4..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-143.md +++ /dev/null @@ -1,483 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca6f -title: Part 143 -challengeType: 0 -dashedName: part-143 ---- - -# --description-- - -Similar to how you made the text bold for the label of the displayed year; change the `fill` of the `twitter-circles` to your `twitterColor` for the currently displayed year. To do this, use a "d function" that returns the `twitterColor` when `d.year` equals `year`, and leave it `white` if it doesn't. - -# --hints-- - -test-text - -```js -assert( - Object.values($('.dashboard svg circle')).filter( - (el) => el.getAttribute && el.getAttribute('fill') === '#7cd9d1' - ).length === 1 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-144.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-144.md deleted file mode 100644 index 26ea98aa97..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-144.md +++ /dev/null @@ -1,490 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca70 -title: Part 144 -challengeType: 0 -dashedName: part-144 ---- - -# --description-- - -Add a `mouseover` event to the `tumblr-circles` and `instagram-circles` in the same way that you did for the `twitter-circles`. - -After that, you will be able hover any of the circles or year labels to get the information for that year. - -# --hints-- - -test-text - -```js -const script = $('.dashboard').siblings('script')[1].innerHTML; -assert( - script.match( - /\.on\(('|"|`)mouseover\1, function \(d\) \{\s*return drawDashboard\(d\.year\);\s*\}\)/g - ).length === 3 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-145.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-145.md deleted file mode 100644 index 52d84a5440..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-145.md +++ /dev/null @@ -1,494 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca71 -title: Part 145 -challengeType: 0 -dashedName: part-145 ---- - -# --description-- - -Change the `fill` of the `tumblr-circles` and `instagram-circles` to use a "d function" that returns their respective color variables when `d.year` equals `year`, leave it `white` when they don't. This is similar to how you set the fill of the Twitter circles. - -Then, all of the circles will get filled in for the currently displayed year. - -# --hints-- - -test-text - -```js -const circles = Object.values($('.dashboard svg circle')); -assert( - circles.filter( - (el) => - el.getAttribute && - (el.getAttribute('fill') === '#7cd9d1' || - el.getAttribute('fill') === '#f6dd71' || - el.getAttribute('fill') === '#fd9b98') - ).length === 3 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-146.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-146.md deleted file mode 100644 index 421629433d..0000000000 --- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/part-146.md +++ /dev/null @@ -1,483 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca72 -title: Part 146 -challengeType: 0 -dashedName: part-146 ---- - -# --description-- - -The last thing is that the legend title always shows 2020. Change the `text` of the `legendTitle` to a template literal that shows the currently displayed year followed by a space and `followers`. - -That's it, your dashboard is finished! Don't forget to admire your hard work. - -# --hints-- - -test-text - -```js -assert(/\.text\s*\(\s*`\s*\$\{\s*year\s*\} followers`\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-001.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-001.md new file mode 100644 index 0000000000..737056e934 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-001.md @@ -0,0 +1,33 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9de +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +Welcome to the dashboard project! You will be using the JavaScript data visualization library, D3, to build a visualization of your social media followers. It will consist of a line graph, a pie chart, and a legend. + +First, you need to create the HTML file. Start by adding the `` declaration at the top of the file to tell the browser what type of document it's reading. + +# --hints-- + +test-text + +```js +assert(//gi.test(code)); +``` + +# --seed-- + +## --seed-contents-- + +```html +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-002.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-002.md new file mode 100644 index 0000000000..e69a56a6c3 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-002.md @@ -0,0 +1,43 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9df +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Next, add opening and closing `html`, `head` and `body` tags below the doctype. Be sure to nest them properly. + +# --hints-- + +test-text + +```js +assert( + /\s*\s*\s*<\/head\s*>\s*\s*<\/body\s*>\s*<\/html\s*>/gi.test( + code + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + + + + + + + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-003.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-003.md new file mode 100644 index 0000000000..4060dac9f7 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-003.md @@ -0,0 +1,51 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e0 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +In the head, add a `title` of `D3 Dashboard`. + +# --hints-- + +test-text + +```js +assert( + /\s*D3 Dashboard<\/title\s*>\s*<\/head\s*>/g.test(code) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + + + + +``` + +# --solutions-- + +```html + + + + D3 Dashboard + + + + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-004.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-004.md new file mode 100644 index 0000000000..92d0e9e667 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-004.md @@ -0,0 +1,55 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e1 +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Below the title, link to your external stylesheet by adding a `link` element with a `rel` attribute of `stylesheet` and an `href` attribute of `./dashboard.css`. Remember that link elements do not need a closing tag. You will be adding some styles to this file shortly. + +# --hints-- + +test-text + +```js +const link = code.match(/]>/gi)[0]; +assert( + /rel\s*=\s*('|")\s*stylesheet\s*\1/gi.test(link) && + /href\s*=\s*('|")\s*(.\/)?dashboard\.css\s*\1/gi.test(link) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + D3 Dashboard + + + + + + + +``` + +# --solutions-- + +```html + + + + D3 Dashboard + + + + + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-005.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-005.md new file mode 100644 index 0000000000..126ee1afb7 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-005.md @@ -0,0 +1,55 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e2 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Next, add a container for the dashboard. Put an empty `div` element in the body with class of `dashboard`. You will be appending all the dashboard elements to this div. + +# --hints-- + +test-text + +```js +assert($('div.dashboard').length === 1); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + D3 Dashboard + + + + + + + + +``` + +# --solutions-- + +```html + + + + D3 Dashboard + + + + + + +
+ + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-006.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-006.md new file mode 100644 index 0000000000..8d2dc0f0fc --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-006.md @@ -0,0 +1,55 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e3 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +You are now looking at the stylesheet that you linked to earlier. At the top of this file, target the `body` of the HTML document and give it a `background-color` of `#ccc`. + +# --hints-- + +test-text + +```js +const body = code.match(/body\s*{[\s\S]+?[^}]}/g)[0]; +assert(/background-color\s*:\s*#ccc\s*(;|})/gi.test(body)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + +
+ + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-007.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-007.md new file mode 100644 index 0000000000..9c9637a79d --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-007.md @@ -0,0 +1,66 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e4 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Next, target the `dashboard` class you created and give it a `width` of `980px` and a `height` of `500px`. + +# --hints-- + +test-text + +```js +const dashboard = $('.dashboard'); +assert( + dashboard.css('width') === '980px' && dashboard.css('height') === '500px' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + +
+ + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-008.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-008.md new file mode 100644 index 0000000000..f30f227851 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-008.md @@ -0,0 +1,73 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e5 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Give the dashboard a `background-color` of `white` and a `box-shadow` of `5px 5px 5px 5px #888` to give it a little depth. + +# --hints-- + +test-text + +```js +const dashboard = $('.dashboard'); +assert( + dashboard.css('background-color') === 'rgb(255, 255, 255)' && + dashboard.css('box-shadow') === 'rgb(136, 136, 136) 5px 5px 5px 5px' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + +
+ + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-009.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-009.md new file mode 100644 index 0000000000..a9e92dd79e --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-009.md @@ -0,0 +1,73 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e6 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Now you can see your dashboard element. Center it by adding a `margin` of `auto` to it. + +# --hints-- + +test-text + +```js +const dashboard = code.match(/.dashboard\s*{[\s\S]+?[^}]}/g)[0]; +assert(/margin\s*:\s*auto\s*(;|})/g.test(dashboard)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + +
+ + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-010.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-010.md new file mode 100644 index 0000000000..a5ebf98f5a --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-010.md @@ -0,0 +1,75 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e7 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Give the container some space by adding a `padding` of `100px 10px` to the `body` element. + +# --hints-- + +test-text + +```js +const body = code.match(/body\s*{[\s\S]+?[^}]}/g)[0]; +assert(/padding\s*:\s*100px\s*10px\s*(;|})/g.test(body)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + +
+ + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-011.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-011.md new file mode 100644 index 0000000000..e852c01758 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-011.md @@ -0,0 +1,81 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e8 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Later on, you will be adding more elements to the dashboard container. Set the `display` to `flex` and the `align-items` to `center` so those items will be vertically centered. + +# --hints-- + +test-text + +```js +const dashboard = $('.dashboard'); +assert( + dashboard.css('display') === 'flex' && + dashboard.css('align-items') === 'center' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + +
+ + +``` + +## --seed-contents-- + +```html + +``` + +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-012.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-012.md new file mode 100644 index 0000000000..c087db365e --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-012.md @@ -0,0 +1,79 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9e9 +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Back in the HTML file, add a `script` tag at the bottom of the head element and give it a `src` attribute of `./d3-5.9.2.min.js`. Don't forget the closing tag. This will add the D3 library to your project from a downloaded copy. + +# --hints-- + +test-text + +```js +const script = code.match(/]>\s*<\/script\s*>/gi)[0]; +assert(/src\s*=\s*('|")\s*(\.\/)?d3-5.9.2.min.js\s*\1/gi.test(script)); +``` + +# --seed-- + +## --before-user-code-- + +```html + +``` + +## --seed-contents-- + +```html + + + + D3 Dashboard + + + + + + +
+ + +``` + +# --solutions-- + +```html + + + + D3 Dashboard + + + + + + + +
+ + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-013.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-013.md new file mode 100644 index 0000000000..1900674079 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-013.md @@ -0,0 +1,96 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9ea +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Add another `script` below the one you just added. Give it a `src` attribute of `./data.js`. + +This adds a `data` variable to your project that contains your number of social media followers, it is an array of objects. Each object has the year and your followers for three different platforms. You will see what it looks like shortly. + +# --hints-- + +test-text + +```js +const script = code.match(/]>\s*<\/script\s*>/gi)[1]; +assert(/src\s*=\s*('|")\s*(\.\/)?data.js\s*\1/gi.test(script)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + + + + D3 Dashboard + + + + + + + +
+ + +``` + +# --solutions-- + +```html + + + + D3 Dashboard + + + + + + +
+ + + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-014.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-014.md new file mode 100644 index 0000000000..934305ffeb --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-014.md @@ -0,0 +1,95 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9eb +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Add a third script just before the closing body tag. It will be the JavaScript file you will use to create the rest of the dashboard. Give the script a `src` of `./dashboard.js`. + +# --hints-- + +test-text + +```js +const script = code.match(/]>\s*<\/script\s*>/gi)[2]; +assert(/src\s*=\s*('|")\s*(\.\/)?dashboard.js\s*\1/gi.test(script)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + +``` + +## --seed-contents-- + +```html + + + + D3 Dashboard + + + + + + +
+ + + + +``` + +# --solutions-- + +```html + + + + D3 Dashboard + + + + + + +
+ + + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-015.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-015.md new file mode 100644 index 0000000000..6972bb06c2 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-015.md @@ -0,0 +1,103 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9ec +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +The script at the top is the `data.js` file you added. I have placed it here so you can see the data and recommend taking a look at it. The second script is the one you just added and where you will build the rest of the project. + +In the second script, create three `const` variables; `svgMargin` with a value of `70`, `svgWidth` with a value of `700`, and `svgHeight` equal to `500`. The first part of the dashboard will be a line graph. It will use these variables as its dimensions. + +The line graph will have the years from your data variable across the bottom, and a scale on the left to show the numbers of followers. Each platform will have a line going across the graph that shows how many followers you had for each year. + +# --hints-- + +test-text + +```js +assert(svgMargin === 70 && svgWidth === 700 && svgHeight === 500); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-016.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-016.md new file mode 100644 index 0000000000..c518fc0fd8 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-016.md @@ -0,0 +1,108 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9ed +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Add three more variables; `twitterColor` with a value of `#7cd9d1`, `tumblrColor` equal to `#f6dd71`, and `instagramColor` at `#fd9b98`. Make sure those Hex values are strings. These will be colors used to represent the different platforms throughout the project. + +# --hints-- + +test-text + +```js +assert( + twitterColor === '#7cd9d1' && + tumblrColor === '#f6dd71' && + instagramColor === '#fd9b98' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-017.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-017.md new file mode 100644 index 0000000000..8537b5c634 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-017.md @@ -0,0 +1,113 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9ee +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +When you added the D3 library earlier, it put an object named `d3` in your project with a bunch of functions. One of them is `select`; you can use dot notation to access this and the other functions from the object. Create a new variable named `lineGraph` and use `d3.select` to select the `.dashboard` element. Here's an example of something similar: + +```js +const variableName = d3.select('.className') +``` + +# --hints-- + +test-text + +```js +assert(lineGraph._groups[0][0] === $('.dashboard')[0]); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-018.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-018.md new file mode 100644 index 0000000000..e034d250e5 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-018.md @@ -0,0 +1,117 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9ef +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Your dashboard element is now "selected". D3 has a number of functions for working with a selection; one of them is `append`. It is used to add an element. Chain the `append` function to your selection and use it to add an `svg` element. Here's an example of how that might be done: + +```js +const variableName = d3.select('selectedElement') + .append('elementToAdd') +``` + +# --hints-- + +test-text + +```js +assert(lineGraph._groups[0][0] === $('svg')[0]); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-019.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-019.md new file mode 100644 index 0000000000..71a9b118ed --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-019.md @@ -0,0 +1,124 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f0 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +You can't see it, but there is now an `svg` element nested in your dashboard container. When you appended it, it became the "selection" for this area of code. Any functions you chain after it will be used on this selection. + +`attr` is a function to set attributes. You need to pass it the attribute you want to set, and the value you want to give it. Here's an example of how to chain `attr` to a selection: + +```js +const variableName = d3.select('element') + .append('element') + .attr('attribute', 'value') +``` + +Chain an `attr` function to the selection that sets the `width` as the `svgWidth` variable you created earlier. When using a variable as a value, you do not need to put it in any kind of quotations. + +# --hints-- + +test-text + +```js +assert($('svg')[0].attributes.width.value === '700'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-020.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-020.md new file mode 100644 index 0000000000..64d86709ab --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-020.md @@ -0,0 +1,116 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f1 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Chain another `attr` function that sets the `height` as the `svgHeight` variable you created. + +# --hints-- + +test-text + +```js +assert($('svg')[0].attributes.height.value === '500'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-021.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-021.md new file mode 100644 index 0000000000..06bcb3f243 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-021.md @@ -0,0 +1,123 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f2 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Your line graph needs some scales so it knows how to translate the data into visual distances. The first one is the scale for the y-axis. It will be to show the number of followers. D3 has many utilities for creating scales. You want to use it's `scaleLinear` method for this scale. + +Create a new `const` named `yScale`, and set it equal to `d3.scaleLinear()`. + +# --hints-- + +test-text + +```js +assert( + typeof yScale === 'function' && /yScale\s*=\s*d3\.scaleLinear/.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-022.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-022.md new file mode 100644 index 0000000000..20a021de05 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-022.md @@ -0,0 +1,123 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f3 +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +D3 has a bunch of functions for working with scales as well. One of them is `domain`. It takes an array that is used to describe the highest and lowest values of the data for this scale. After a quick look at the data, the values of the "followers" go from about 0 to 5000. Chain the `domain` function to the `yScale` and pass it the array `[0, 5000]`. + +# --hints-- + +test-text + +```js +const domain = yScale.domain(); +assert(domain.length === 2 && domain[0] === 0 && domain[1] === 5000); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-023.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-023.md new file mode 100644 index 0000000000..e7a769694b --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-023.md @@ -0,0 +1,129 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f4 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +The `range` function describes how to map the domain values for display on the graph. For example, a value of 5000 followers can't use 5000 as it y-coordinate on the SVG or it would be off the graph. You need to tell the range where the top and bottom of the graph is so the scale can give appropriate values for the y-coordinate. + +Chain the `range` function below the `domain` and pass it an array with `svgHeight - svgMargin` and `svgMargin` as the values. That will translate to `[430, 70]`. This is where the top and bottom of the graph are. So a data point of 5000 followers will map to a value of 430 to use as its y-coordinate and 0 followers will use 70 as its y-coordinate. Any value in between will scale linearly. + +Your graph will have a margin around it for things like axes and labels. The actual line data will display on the inside of this margin area, which is why you use those values. This will become more clear as you progress through the project. + +# --hints-- + +test-text + +```js +const range = yScale.range(); +assert(range.length === 2 && range[0] === 430 && range[1] === 70); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-024.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-024.md new file mode 100644 index 0000000000..bfb5cb47cf --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-024.md @@ -0,0 +1,129 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f5 +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Create a new `const` named `xScale`. Use it to create another linear scale like you did for the y-scale. This will be the horizontal or "x" axis. + +# --hints-- + +test-text + +```js +assert( + typeof xScale === 'function' && /xScale\s*=\s*d3\.scaleLinear/.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-025.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-025.md new file mode 100644 index 0000000000..0ad7925481 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-025.md @@ -0,0 +1,131 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f6 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +The `year` values of your data will be used for the x-scale. Chain the `domain` function to `xScale` and pass it an array with the first and last years of your data. + +# --hints-- + +test-text + +```js +const domain = xScale.domain(); +assert(domain.length === 2 && domain[0] === 2012 && domain[1] === 2020); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-026.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-026.md new file mode 100644 index 0000000000..c2eda71b4f --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-026.md @@ -0,0 +1,133 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f7 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +The range for this scale will go from the left of your graph to the right, with 2012 on the left and 2020 on the right. Add the `range` function to the `xScale` and pass it an array with the values: `svgMargin` and `svgWidth - svgMargin`. This will translate to `[70, 630]`. So 2012 will use 70 as is x-coordinate and 2020 will use 630 as its x-coordinate. + +# --hints-- + +test-text + +```js +const range = xScale.range(); +assert(range.length === 2 && range[0] === 70 && range[1] === 630); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-027.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-027.md new file mode 100644 index 0000000000..fadf878831 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-027.md @@ -0,0 +1,138 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f8 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +The two scales you defined will be used to create the axes and lines. First is the y-axis, it will be a line with some labels on the left of the graph. Create a new `const` named `yAxis` and set it equal to `d3.axisLeft(yScale)`. This will use the information from the `yScale` variable to build the axis. + +# --hints-- + +test-text + +```js +assert( + typeof yAxis === 'function' && + /yAxis\s*=\s*d3\.axisLeft\(\s*yScale\)/.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-028.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-028.md new file mode 100644 index 0000000000..3c6e36d9cc --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-028.md @@ -0,0 +1,142 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9f9 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Create a new `const` named `xAxis` and set the value equal to `d3.axisBottom(xScale)`. This will create another axis for the bottom of the graph using the information from `xScale`. Although the axes do not display yet, they have the information they need to display correctly. + +# --hints-- + +test-text + +```js +assert( + typeof xAxis === 'function' && + /xAxis\s*=\s*d3\.axisBottom\(\s*xScale\)/.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-029.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-029.md new file mode 100644 index 0000000000..aae1810fbf --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-029.md @@ -0,0 +1,143 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9fa +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +On a new line, append a new `g` element to your `lineGraph` variable. `lineGraph.append('g')` will do that for you. This will add a `g` to your SVG and be for displaying the y-axis. `g` is an SVG element that stands for "group". + +# --hints-- + +test-text + +```js +assert($('svg')[0].children[0] === $('g')[0] && $('g').length === 1); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-030.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-030.md new file mode 100644 index 0000000000..5a8d451436 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-030.md @@ -0,0 +1,147 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9fb +title: Step 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +`call` is another function to use with selections. Chain a `call` function to the selection and pass your `yAxis` variable to it. This will draw your y-axis on the SVG. + +# --hints-- + +test-text + +```js +assert($('.tick').length === 11 && /\.call\(\s*yAxis\s*\)/.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-031.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-031.md new file mode 100644 index 0000000000..94721751a9 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-031.md @@ -0,0 +1,151 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9fc +title: Step 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +After all that work, something is finally displayed on the graph. It's the y-axis and all the numbers are hidden on the left. + +Move the axis your `svgMargin` to the right by chaining an `attr` function to the selection. Use it to set the `transform` to `translate(${svgMargin}, 0)`. Use a template literal (backticks) to set the value so you can put your variable in there. + +# --hints-- + +test-text + +```js +assert($('g')[0].attributes.transform.nodeValue === 'translate(70, 0)'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-032.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-032.md new file mode 100644 index 0000000000..1482a45c49 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-032.md @@ -0,0 +1,150 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9fd +title: Step 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +`style` is a function similar to `attr`, but is more for manipulating CSS styles rather than element attributes. Add a `style` function to the selection that sets the `font` to `10px verdana`. + +# --hints-- + +test-text + +```js +assert($('g')[0].attributes.style.nodeValue === 'font: 10px verdana;'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-033.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-033.md new file mode 100644 index 0000000000..838f00a1e2 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-033.md @@ -0,0 +1,153 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9fe +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +On a new line, append another `g` element to your `lineGraph` variable like you did before. This one will be for the x-axis. + +# --hints-- + +test-text + +```js +assert($('g').length === 13); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-034.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-034.md new file mode 100644 index 0000000000..ffd84f411a --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-034.md @@ -0,0 +1,156 @@ +--- +id: 5d8a4cfbe6b6180ed9a1c9ff +title: Step 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +Use the `call` function to draw the x-axis onto the SVG like you did for the y-axis. + +# --hints-- + +test-text + +```js +assert($('g').length === 22); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-035.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-035.md new file mode 100644 index 0000000000..e5afa9d868 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-035.md @@ -0,0 +1,158 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca00 +title: Step 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +The axis has the right size and labels, but needs to be moved down. Use the `attr` function to set the `transform` like you did before. This time move it down your `svgHeight` minus the `svgMargin`. + +# --hints-- + +test-text + +```js +assert($('svg > g')[1].attributes.transform.nodeValue === 'translate(0, 430)'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-036.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-036.md new file mode 100644 index 0000000000..61a26b75ff --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-036.md @@ -0,0 +1,168 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca01 +title: Step 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +The axis labels are `text` elements within the `g`, you can use the `selectAll` function to select them. Chain the `selectAll` function to select the `text` elements in this group. You can do that like this: + +```js +.selectAll('element') +``` + +# --hints-- + +test-text + +```js +assert( + /\.attr\('transform', `translate\(0, \$\{svgHeight - svgMargin\}\)`\)\s*\.selectAll\s*\(\s*('|"|`)text\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-037.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-037.md new file mode 100644 index 0000000000..194e3ad318 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-037.md @@ -0,0 +1,168 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca02 +title: Step 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +I want the text elements to be rotated slightly. Chain the `style` function to set the `transform` to `translate(-12px, 0) rotate(-50deg)`. This will put them at an angle. + +# --hints-- + +test-text + +```js +assert( + $('.tick > text').filter( + (node, index) => + index.style.transform === 'translate(-12px) rotate(-50deg)' || + index.style.transform === 'translate(-12px, 0px) rotate(-50deg)' + ).length === 9 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-038.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-038.md new file mode 100644 index 0000000000..b17ce9013b --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-038.md @@ -0,0 +1,168 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca03 +title: Step 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Add another `style` function to set the `text-anchor` to `end`. This will change the spot that each text element rotates around to the `end` of the element so they will align better. + +# --hints-- + +test-text + +```js +assert( + $('.tick > text').filter( + (node, index) => index.style['text-anchor'] === 'end' + ).length === 9 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-039.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-039.md new file mode 100644 index 0000000000..2025374c7a --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-039.md @@ -0,0 +1,173 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca04 +title: Step 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Add two more `style` functions; one to set the `cursor` to `pointer`, and another to set the `font` to `10px verdana`. + +You will add some hover effects later, so the pointer will make for a better experience. + +# --hints-- + +test-text + +```js +assert( + $('.tick > text').filter( + (node, index) => + index.style.cursor === 'pointer' && index.style.font === '10px verdana' + ).length === 9 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-040.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-040.md new file mode 100644 index 0000000000..52d9a027fd --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-040.md @@ -0,0 +1,178 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca05 +title: Step 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +There are a number of D3 functions to work with how the "ticks" or your axis labels are displayed; one of them is `ticks`. Go back to where you defined the `yAxis` variable and chain a `ticks` function to it and pass it these two arguments: `6, '~s'`. + +The `6` will set the number of ticks used to 6, and the `~s` will make the labels display the number of thousands followed by a `k`. For example, `4000` will become `4k`. + +# --hints-- + +test-text + +```js +const ticks = $('.tick > text'); +assert( + ticks[0].innerHTML === '0k' && + ticks[1].innerHTML === '1k' && + ticks[2].innerHTML === '2k' && + ticks[3].innerHTML === '3k' && + ticks[4].innerHTML === '4k' && + ticks[5].innerHTML === '5k' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-041.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-041.md new file mode 100644 index 0000000000..82a3261d9b --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-041.md @@ -0,0 +1,171 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca06 +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Go back to where you defined your `xAis` variable and chain the `tickFormat` function to it. Pass it `d3.format('')`. This will remove the commas in the year labels of the x-axis. + +# --hints-- + +test-text + +```js +const ticks = $('.tick > text'); +assert(ticks[6].innerHTML === '2012' && ticks[14].innerHTML === '2020'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-042.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-042.md new file mode 100644 index 0000000000..aa8a37baf2 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-042.md @@ -0,0 +1,178 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca07 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +In the same spot, chain the `tickPadding` function to the `xAxis` and pass it `10`. This will add a little padding to the ticks so the labels are better aligned. + +# --hints-- + +test-text + +```js +assert( + /\.tickFormat\(d3\.format\((''\)\)\s*\.tickPadding\s*\(\s*10\s*\))/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-043.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-043.md new file mode 100644 index 0000000000..a91e12f41e --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-043.md @@ -0,0 +1,178 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca08 +title: Step 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +The axes and labels are looking good. Next, you will start to add some of the lines for the data. First is the line for the Twitter data. On a new line, create a new `const` named `twitterLine` and set it equal to `d3.line()`. `line` is a D3 function for creating a line. + +# --hints-- + +test-text + +```js +assert(/const\s*twitterLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-044.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-044.md new file mode 100644 index 0000000000..5a93e72d48 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-044.md @@ -0,0 +1,192 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca09 +title: Step 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +The line needs x and y values for each point of data. Chain `x` to the line and pass it a "d function". Here's how that will look: + +```js +.x(d => d.year) +``` + +You will be passing your `data` array to this line function, where it will go through each item in the array(`d`) and create an x value based on the year(`d.year`). + +This is the first place you have seen a "d function". These are common in D3 and that is how I will refer to them throughout this project. + +# --hints-- + +test-text + +```js +assert( + /const twitterLine = d3\.line\(\)\s*\.x\s*\(\s*d\s*=>\s*d\.year\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-045.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-045.md new file mode 100644 index 0000000000..e07ef7245c --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-045.md @@ -0,0 +1,183 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca0a +title: Step 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Instead of simply using the year(`d.year`) for the x-coordinate, you need to pass each year to the `xScale` so it can set the appropriate coordinate based on your scale. + +In the "d function" you created, return `xScale(d.year)` instead of `d.year`. + +# --hints-- + +test-text + +```js +assert(/\.x\s*\(d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-046.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-046.md new file mode 100644 index 0000000000..9ba6b01ac8 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-046.md @@ -0,0 +1,189 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca0b +title: Step 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Chain the `y` function to the line and pass it a "d function" that returns your `yScale` with `d.followers.twitter` as its argument. + +This is similar to how you set the x values. It will use the values of your Twitter followers and your `yScale` to set the y coordinate for each item. + +These "d functions" use implicit returns. But if you add curly brackets and a return statement, you can put any JavaScript in there that you want. Including `console.log` statements that can be useful for debugging. + +# --hints-- + +test-text + +```js +assert( + /\.y\s*\(\s*d\s*=>\s*yScale\s*\(\s*d\.followers.twitter\s*\)\s*\)/g.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-047.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-047.md new file mode 100644 index 0000000000..27b6eb3229 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-047.md @@ -0,0 +1,189 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca0c +title: Step 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +The first line is created and ready to be displayed, which will take a couple steps. On a new line, `append` a `path` element to your `lineGraph` variable. This is similar to how you appended the `g` before. + +# --hints-- + +test-text + +```js +assert( + $('svg path').length === 3 && + /lineGraph\.append\((`|'|")path\1\)/gi.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-048.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-048.md new file mode 100644 index 0000000000..0af7e8110d --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-048.md @@ -0,0 +1,193 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca0d +title: Step 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Tell the path what data to use. Add an `attr` function and set the `d` to `twitterLine(data)`. This will the build the path using the `twitterLine` function you created and your data variable. + +Note that the `d` in this case is a path attribute for drawing a line and is different from a "d function". + +After you have added your code, take a look at the data flow to help understand what is happening. You pass the data array to your `twitterLine` function where it sets the x and y values using your "d functions". The "d functions" go through each item in the array, passing part of the item to each scale to find the appropriate coordinates. When it's done, the value you are setting here is created and sent back. The result ends up being a confusing string of numbers and coordinates to tell the path how to be drawn. + +# --hints-- + +test-text + +```js +assert($('svg path')[2].getAttribute('d').length === 151); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-049.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-049.md new file mode 100644 index 0000000000..880f7b5d0a --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-049.md @@ -0,0 +1,199 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca0e +title: Step 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Add three more `attr` functions to the path; one to set the `stroke` to your `twitterColor` variable, another to set the `stroke-width` to `3`, and a third to set the `fill` to `transparent`. + +# --hints-- + +test-text + +```js +const twitterPath = $('svg path')[2]; +assert( + twitterPath.getAttribute('stroke') === '#7cd9d1' && + twitterPath.getAttribute('stroke-width') == '3' && + twitterPath.getAttribute('fill') === 'transparent' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-050.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-050.md new file mode 100644 index 0000000000..21584d84ad --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-050.md @@ -0,0 +1,198 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca0f +title: Step 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +On a new line, create a new `const` named `tumblrLine` and set it equal to `d3.line()`. + +# --hints-- + +test-text + +```js +assert(/const\s*tumblrLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-051.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-051.md new file mode 100644 index 0000000000..3c1c075018 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-051.md @@ -0,0 +1,204 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca10 +title: Step 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Set the `x` values for `tumblrLine` using another "d function". Use your `xScale` and the `d.year` to calculate their values just like you did for the Twitter line. + +# --hints-- + +test-text + +```js +assert( + /const tumblrLine = d3\.line\(\)\s*\.x\s*\(\s*d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-052.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-052.md new file mode 100644 index 0000000000..74a4638e89 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-052.md @@ -0,0 +1,207 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca11 +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Set the `y` values for `tumblrLine` using a "d function" again. Use your `yScale` and `d.followers.tumblr` to calculate their values just like you did for the Twitter line. + +The x values for each line will be the same, but the y values will use the data from the different platforms. + +# --hints-- + +test-text + +```js +assert( + /\.y\s*\(\s*d\s*=>\s*yScale\s*\(\s*d\.followers.tumblr\s*\)\s*\)/g.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-053.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-053.md new file mode 100644 index 0000000000..746e1ab4b1 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-053.md @@ -0,0 +1,209 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca12 +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +On a new line, `append` a `path` element to the `lineGraph` variable. This one will be for displaying the `tumblrLine`. + +# --hints-- + +test-text + +```js +assert( + $('svg path').length === 4 && + code.match(/lineGraph\.append\((`|'|")path\1\)/gi).length === 2 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-054.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-054.md new file mode 100644 index 0000000000..695da3fee7 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-054.md @@ -0,0 +1,209 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca13 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Tell the new path how to be drawn by setting the `d` attribute to `tumblrLine(data)` using the `attr` function. + +# --hints-- + +test-text + +```js +assert($('svg path')[3].getAttribute('d').length === 115); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-055.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-055.md new file mode 100644 index 0000000000..a200a166f9 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-055.md @@ -0,0 +1,218 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca14 +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Add three `attr` functions to the selection; one to set the `stroke` to your `tumblrColor` variable, another to set the `stroke-width` to `3`, and a third to set the `fill` to `transparent`. + +# --hints-- + +test-text + +```js +const tumblrPath = $('svg path')[3]; +assert( + tumblrPath.getAttribute('stroke') === '#f6dd71' && + tumblrPath.getAttribute('stroke-width') == '3' && + tumblrPath.getAttribute('fill') === 'transparent' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-056.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-056.md new file mode 100644 index 0000000000..c4f7585946 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-056.md @@ -0,0 +1,218 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca15 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Two lines down, only one more to add for the Instagram followers. On a new line, create a new `const` named `instagramLine` and use the D3 `line` function to create another line like you did for the other two. + +# --hints-- + +test-text + +```js +assert(/const\s*instagramLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-057.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-057.md new file mode 100644 index 0000000000..59e2b7b22c --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-057.md @@ -0,0 +1,226 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca16 +title: Step 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Appropriately set the `x` values for `instagramLine` like you did for the other two lines. + +# --hints-- + +test-text + +```js +assert( + /const instagramLine = d3\.line\(\)\s*\.x\s*\(\s*d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-058.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-058.md new file mode 100644 index 0000000000..ad99613e2d --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-058.md @@ -0,0 +1,229 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca17 +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Appropriately set the `y` values for `instagramLine` like you did for the other two lines. Use the Instagram followers data this time. + +# --hints-- + +test-text + +```js +assert( + /\.y\s*\(\s*d\s*=>\s*yScale\s*\(\s*d\.followers.instagram\s*\)\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-059.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-059.md new file mode 100644 index 0000000000..fe46511da3 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-059.md @@ -0,0 +1,231 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca18 +title: Step 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +On a new line, `append` a new `path` for the Instagram line like you did for the other two lines. + +# --hints-- + +test-text + +```js +assert( + $('svg path').length === 5 && + code.match(/lineGraph\.append\((`|'|")path\1\)/gi).length === 3 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-060.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-060.md new file mode 100644 index 0000000000..5863f052f3 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-060.md @@ -0,0 +1,230 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca19 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Use your `instagramLine` variable and your data to set the `d` attribute for this path like you did for the other two. + +# --hints-- + +test-text + +```js +assert($('svg path')[4].getAttribute('d').length === 171); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-061.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-061.md new file mode 100644 index 0000000000..45e97e2ba6 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-061.md @@ -0,0 +1,239 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca1a +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Set the `stroke`, `stroke-width`, and `fill` attributes to their appropriate values for this line. The `stroke-width` and `fill` are the same as the other two. + +# --hints-- + +test-text + +```js +const instagramPath = $('svg path')[4]; +assert( + instagramPath.getAttribute('stroke') === '#fd9b98' && + instagramPath.getAttribute('stroke-width') == '3' && + instagramPath.getAttribute('fill') === 'transparent' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-062.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-062.md new file mode 100644 index 0000000000..82eef8d81e --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-062.md @@ -0,0 +1,247 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca1b +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +Okay, your graph is coming along. All the lines are drawn, but they look a little plain. The next series of code additions will add circles to each point on each line. First is the Twitter line. On a new line, use the `selectAll` function on your `lineGraph` variable and pass it the string `twitter-circles`. It will look like this: + +```js +lineGraph.selectAll('twitter-circles') +``` + +`twitter-circles` don't exist and this selection will be an empty array, but it's needed. For now, you can just think of this string as a reference, similar to a variable name, so you know what elements you are working with. + +# --hints-- + +test-text + +```js +assert( + /lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*twitter-circles\1\s*\)/g.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-063.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-063.md new file mode 100644 index 0000000000..942bc90587 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-063.md @@ -0,0 +1,246 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca1c +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Add the D3 `data` function to your selection and pass it the data array like this: + +```js +.data(data) +``` + +# --hints-- + +test-text + +```js +assert(/\.data\s*\(\s*data\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-064.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-064.md new file mode 100644 index 0000000000..db5343e098 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-064.md @@ -0,0 +1,248 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca1d +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Next, chain the `enter()` function to the selection. + +The enter function identifies elements that need to be added when the data array is longer than the selection array. This is why you wanted the `selectAll` to be an empty array before. + +In this case, the `twitter-circles` selection has a length of 0, and the data array has a length of 9. So nine elements will be added when you use `append` in the next step. + +# --hints-- + +test-text + +```js +assert(/\.data\(data\)\s*\.enter\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-065.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-065.md new file mode 100644 index 0000000000..609632232b --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-065.md @@ -0,0 +1,246 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca1e +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Add the `append` function to the selection, and use it to add `circle` elements. This will add the nine `circle` elements for your Twitter circles. They will be invisible to start, but the elements are there. + +# --hints-- + +test-text + +```js +assert($('svg circle').length === 9); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-066.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-066.md new file mode 100644 index 0000000000..d5291b996d --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-066.md @@ -0,0 +1,250 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca1f +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Each circle needs a `cx` and `cy` attribute so it knows where to display on the SVG. These are similar to the x and y coordinates for the lines and will be calculated in the same way. The difference is that, for circles, the `cx` and `cy` are attributes, so you need to use the `attr` function. + +Use the `attr` function to set the `cx` to `d => xScale(d.year)`. + +# --hints-- + +test-text + +```js +assert($('svg circle')[0].getAttribute('cx') == '70'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-067.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-067.md new file mode 100644 index 0000000000..f8b852ac2b --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-067.md @@ -0,0 +1,252 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca20 +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Next, set the `cy` attribute to `d => xScale(d.followers.twitter)`. + +As a reminder, this will pass each value of your Twitter followers to the `xScale` function where it will determine the y coordinate to use. + +# --hints-- + +test-text + +```js +assert($('svg circle')[0].getAttribute('cy') == '243.232'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-068.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-068.md new file mode 100644 index 0000000000..ad9dfcf5df --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-068.md @@ -0,0 +1,252 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca21 +title: Step 68 +challengeType: 0 +dashedName: step-68 +--- + +# --description-- + +Circles also need an `r` (radius) attribute so they know how big to be. Use the `attr` function to set the `r` to `6`. + +# --hints-- + +test-text + +```js +assert($('svg circle')[0].getAttribute('r') == '6'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-069.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-069.md new file mode 100644 index 0000000000..9d2d9c5b0b --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-069.md @@ -0,0 +1,258 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca22 +title: Step 69 +challengeType: 0 +dashedName: step-69 +--- + +# --description-- + +The circles are now visible, but I don't like the color. Use the appropriate function to set the `fill` to `white` and the `stroke` to your `twitterColor` variable. + +# --hints-- + +test-text + +```js +assert( + $('svg circle')[0].getAttribute('fill') === 'white' && + $('svg circle')[0].getAttribute('stroke') === '#7cd9d1' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-070.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-070.md new file mode 100644 index 0000000000..e8beb17a75 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-070.md @@ -0,0 +1,258 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca23 +title: Step 70 +challengeType: 0 +dashedName: step-70 +--- + +# --description-- + +Use the `style` function to set the `cursor` to `pointer`. Like your year labels, this will be an indicator for a hover effect you will add later. + +# --hints-- + +test-text + +```js +assert($('svg circle')[0].style.cursor === 'pointer'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-071.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-071.md new file mode 100644 index 0000000000..25b5c92d03 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-071.md @@ -0,0 +1,263 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca24 +title: Step 71 +challengeType: 0 +dashedName: step-71 +--- + +# --description-- + +On a new line, use the `selectAll` function on your `lineGraph` variable again and pass it the string `tumblr-circles` this time. The next few steps will be for adding circles to the Tumblr line. + +# --hints-- + +test-text + +```js +assert( + /lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*tumblr-circles\1\s*\)/g.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-072.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-072.md new file mode 100644 index 0000000000..b5eee1874d --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-072.md @@ -0,0 +1,268 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca25 +title: Step 72 +challengeType: 0 +dashedName: step-72 +--- + +# --description-- + +Add the same `data`, `enter`, and `append` functions here that you added for the `twitter-circles`, passing in the same arguments. Make sure they are in the same order. + +Remember that this will take the difference in length between the `tumblr-circles` selection(0) and the data array(9) and append that many circle elements. + +# --hints-- + +test-text + +```js +assert($('svg circle').length === 18); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-073.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-073.md new file mode 100644 index 0000000000..4d3a27e49d --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-073.md @@ -0,0 +1,274 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca26 +title: Step 73 +challengeType: 0 +dashedName: step-73 +--- + +# --description-- + +Set the `cx` and `cy` attributes for the Tumblr circles to their appropriate values. + +# --hints-- + +test-text + +```js +assert( + $('svg circle')[9].getAttribute('cx') == '70' && + $('svg circle')[9].getAttribute('cy') == '401.128' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-074.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-074.md new file mode 100644 index 0000000000..df1221f436 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-074.md @@ -0,0 +1,280 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca27 +title: Step 74 +challengeType: 0 +dashedName: step-74 +--- + +# --description-- + +Use the `attr` function to set the `r` to `6`, the `fill` to `white`, and the `stroke` to your `tumblrColor` variable. + +# --hints-- + +test-text + +```js +assert( + $('svg circle')[9].getAttribute('r') == '6' && + $('svg circle')[9].getAttribute('fill') === 'white' && + $('svg circle')[9].getAttribute('stroke') === '#f6dd71' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-075.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-075.md new file mode 100644 index 0000000000..53c158898b --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-075.md @@ -0,0 +1,280 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca28 +title: Step 75 +challengeType: 0 +dashedName: step-75 +--- + +# --description-- + +Set the `cursor` to `pointer` using the `style` function. + +# --hints-- + +test-text + +```js +assert($('svg circle')[9].style.cursor === 'pointer'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-076.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-076.md new file mode 100644 index 0000000000..dfef7440d2 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-076.md @@ -0,0 +1,287 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca29 +title: Step 76 +challengeType: 0 +dashedName: step-76 +--- + +# --description-- + +The circles have been added to two of the lines and look good, on to the last one. On a new line, create another empty selection like you did before. Use the string: `instagram-circles` this time. + +# --hints-- + +test-text + +```js +assert( + /lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*instagram-circles\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-077.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-077.md new file mode 100644 index 0000000000..5ed00425a7 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-077.md @@ -0,0 +1,288 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca2a +title: Step 77 +challengeType: 0 +dashedName: step-77 +--- + +# --description-- + +Add the three functions necessary to append the new circle elements. Remember that they won't actually be visible yet. + +# --hints-- + +test-text + +```js +assert($('svg circle').length === 27); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-078.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-078.md new file mode 100644 index 0000000000..fea82b1f06 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-078.md @@ -0,0 +1,296 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca2b +title: Step 78 +challengeType: 0 +dashedName: step-78 +--- + +# --description-- + +Appropriately set the `cx` and `cy` attributes for the Instagram circles. + +# --hints-- + +test-text + +```js +assert( + $('svg circle')[18].getAttribute('cx') == '70' && + $('svg circle')[18].getAttribute('cy') == '424.024' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-079.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-079.md new file mode 100644 index 0000000000..36c953d059 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-079.md @@ -0,0 +1,302 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca2c +title: Step 79 +challengeType: 0 +dashedName: step-79 +--- + +# --description-- + +Appropriately set the radius (`r`), `fill`, and `stroke` for these circles. + +# --hints-- + +test-text + +```js +assert( + $('svg circle')[18].getAttribute('r') == '6' && + $('svg circle')[18].getAttribute('fill') === 'white' && + $('svg circle')[18].getAttribute('stroke') === '#fd9b98' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-080.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-080.md new file mode 100644 index 0000000000..08a57df3f2 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-080.md @@ -0,0 +1,302 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca2d +title: Step 80 +challengeType: 0 +dashedName: step-80 +--- + +# --description-- + +Apply the appropriate `cursor` style for these circles. + +# --hints-- + +test-text + +```js +assert($('svg circle')[18].style.cursor === 'pointer'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-081.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-081.md new file mode 100644 index 0000000000..14ffc2dbaf --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-081.md @@ -0,0 +1,309 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca2e +title: Step 81 +challengeType: 0 +dashedName: step-81 +--- + +# --description-- + +The line graph is looking good. All the empty space to the right will be for the pie graph and legend. Create a new `const` named `rightDashboard` and set equal to `d3.select('.dashboard')`. This will select your dashboard container again which currently only has the SVG element as a child. + +# --hints-- + +test-text + +```js +assert( + /const\s*rightDashboard\s*=\s*d3\.select\s*\((`|'|")\.dashboard\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-082.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-082.md new file mode 100644 index 0000000000..ef8009859e --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-082.md @@ -0,0 +1,312 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca2f +title: Step 82 +challengeType: 0 +dashedName: step-82 +--- + +# --description-- + +Use `append` to add a `div` element to the selection. This will put a div as another child of the dashboard container to hold the pie graph and legend. + +# --hints-- + +test-text + +```js +assert( + /const rightDashboard = d3\.select\((`|'|")\.dashboard\1\)\s*\.append\s*\(\s*(`|'|")div\2\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-083.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-083.md new file mode 100644 index 0000000000..43e8ea2299 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-083.md @@ -0,0 +1,315 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca30 +title: Step 83 +challengeType: 0 +dashedName: step-83 +--- + +# --description-- + +Create a new `const` named `pieGraph` and set it equal to `rightDashboard.append('svg')`. This will add an SVG element for the pie graph as a child of the div you just added. The pie graph will have three slices, one for each platform. It will display a percentage of how many followers each platform has for the displayed year. + +# --hints-- + +test-text + +```js +assert( + /const\s*pieGraph\s*=\s*rightDashboard\s*\.\s*append\s*\((`|'|")svg\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-084.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-084.md new file mode 100644 index 0000000000..1e01a5f30f --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-084.md @@ -0,0 +1,318 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca31 +title: Step 84 +challengeType: 0 +dashedName: step-84 +--- + +# --description-- + +Add two `attr` functions that set the `width` and `height` of the new SVG to `200`. + +# --hints-- + +test-text + +```js +assert( + $('svg')[1].getAttribute('width') == '200' && + $('svg')[1].getAttribute('height') == '200' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-085.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-085.md new file mode 100644 index 0000000000..33057ce9ac --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-085.md @@ -0,0 +1,319 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca32 +title: Step 85 +challengeType: 0 +dashedName: step-85 +--- + +# --description-- + +Create a new `const` named `pieArc` and set it equal to `d3.arc()`. This will be used to create the angles for the lines of the pie chart using the D3 arc generator. + +# --hints-- + +test-text + +```js +assert(/const\s*pieArc\s*=\s*d3\s*\.\s*arc\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-086.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-086.md new file mode 100644 index 0000000000..fc228825cc --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-086.md @@ -0,0 +1,324 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca33 +title: Step 86 +challengeType: 0 +dashedName: step-86 +--- + +# --description-- + +Chain the function `outerRadius(100)` to the arc. This will set the outer radius of the pie chart to 100. + +# --hints-- + +test-text + +```js +assert( + /const pieArc = d3\.arc\(\)\s*\.\s*outerRadius\s*\(\s*100\s*\)/g.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-087.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-087.md new file mode 100644 index 0000000000..bf1d3f754d --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-087.md @@ -0,0 +1,328 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca34 +title: Step 87 +challengeType: 0 +dashedName: step-87 +--- + +# --description-- + +Chain `innerRadius` to the arc and pass it `0` (zero). This is set to zero to make a traditional pie chart, you would use a larger inner radius to create a doughnut chart. + +# --hints-- + +test-text + +```js +assert( + /const pieArc = d3\.arc\(\)\s*\.outerRadius\(100\)\s*\.\s*innerRadius\s*\(\s*0\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-088.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-088.md new file mode 100644 index 0000000000..73bf1cd804 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-088.md @@ -0,0 +1,329 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca35 +title: Step 88 +challengeType: 0 +dashedName: step-88 +--- + +# --description-- + +The pie chart needs a new scale to set the colors. Create a new `const` named `pieColors` and set it equal to `d3.scaleOrdinal()`. An ordinal scale is for a set of data that will have exactly one item in the range specifically for it. + +In this case, each platform of followers you have will map directly to a single color with nothing in between. + +# --hints-- + +test-text + +```js +assert(/const\s*pieColors\s*=\s*d3\s*\.\s*scaleOrdinal\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-089.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-089.md new file mode 100644 index 0000000000..20900e4582 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-089.md @@ -0,0 +1,334 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca36 +title: Step 89 +challengeType: 0 +dashedName: step-89 +--- + +# --description-- + +Set the `domain` of the scale to `data[8].followers`. This will be three items, one for each platform. + +# --hints-- + +test-text + +```js +assert( + /const pieColors = d3\.scaleOrdinal\(\)\s*\.\s*domain\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-090.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-090.md new file mode 100644 index 0000000000..a4a80c7f95 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-090.md @@ -0,0 +1,336 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca37 +title: Step 90 +challengeType: 0 +dashedName: step-90 +--- + +# --description-- + +Since the domain has three items, the range also needs to have three items. If it had less, the values would repeat, putting the same color on the pie chart multiple times. Add the `range` function to the scale and pass it an array with your three color variables. Put them in the same order in which they are defined. + +# --hints-- + +test-text + +```js +assert( + /\.domain\(data\[8\]\.followers\)\s*\.\s*range\s*\(\s*\[\s*twitterColor\s*,\s*tumblrColor\s*,\s*instagramColor\s*\]\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-091.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-091.md new file mode 100644 index 0000000000..8a4e9aab0a --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-091.md @@ -0,0 +1,335 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca38 +title: Step 91 +challengeType: 0 +dashedName: step-91 +--- + +# --description-- + +Create a new `const` named `pie` and set it equal to `d3.pie()`. This is the D3 pie chart generator. + +# --hints-- + +test-text + +```js +assert(/const\s*pie\s*=\s*d3\s*\.\s*pie\s*\(\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-092.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-092.md new file mode 100644 index 0000000000..84edb9a949 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-092.md @@ -0,0 +1,344 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca39 +title: Step 92 +challengeType: 0 +dashedName: step-92 +--- + +# --description-- + +Chain a `value` function to `pie` and pass it `d => d.value`. Each piece of data(`d`) will have a `key`(platform) and a `value`(number of followers), you want to return the number of followers here. The pie function will create an array of objects from these values that describe the angles and sizes the pie chart needs. + +In a few steps, you will make an array out of your data variable that will be passed to this function. + +# --hints-- + +test-text + +```js +assert( + /const pie = d3\.pie\(\)\s*\.\s*value\s*\(\s*d\s*=>\s*d\.value\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-093.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-093.md new file mode 100644 index 0000000000..781851c944 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-093.md @@ -0,0 +1,345 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca3a +title: Step 93 +challengeType: 0 +dashedName: step-93 +--- + +# --description-- + +Create a new `const` named `pieGraphData` and set the value equal to `pieGraph.selectAll('pieSlices')`. This is an empty selection similar circles you created earlier. + +# --hints-- + +test-text + +```js +assert( + /const\s*pieGraphData\s*=\s*pieGraph\s*\.\s*selectAll\s*\(\s*(`|'|")pieSlices\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-094.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-094.md new file mode 100644 index 0000000000..58dc3df602 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-094.md @@ -0,0 +1,348 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca3b +title: Step 94 +challengeType: 0 +dashedName: step-94 +--- + +# --description-- + +Add the `data` function to the selection. Pass it your `pie` function with an empty array as its argument for now. The next step will get the correct array to put there. + +# --hints-- + +test-text + +```js +assert( + /const pieGraphData = pieGraph\.selectAll\((`|'|")pieSlices\1\)\s*\.\s*data\s*\(pie\s*\(\s*\[\s*\]\s*\)\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-095.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-095.md new file mode 100644 index 0000000000..857d79ad14 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-095.md @@ -0,0 +1,367 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca3c +title: Step 95 +challengeType: 0 +dashedName: step-95 +--- + +# --description-- + +You want the array passed to `pie` to be an array of key/value objects for the 2020 followers. `d3.entries` will build that array for you. Here's how that looks: + +```js +d3.entries(data[8].followers)) +``` + +The array it builds looks like this: + +```js +[ + { key: 'twitter', value: 2845 }, + { key: 'tumblr', value: 2040 }, + { key: 'instagram', value: 4801 } +] +``` + +This is where the `value` comes from in your `pie` variable. + +Add the `d3.entries` function as your `pie` argument. Use it to create the above array. + +# --hints-- + +test-text + +```js +assert( + /const pieGraphData = pieGraph\.selectAll\((`|'|")pieSlices\1\)\s*\.\s*data\s*\(pie\s*\(\s*d3\s*\.\s*entries\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\)\s*\)\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-096.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-096.md new file mode 100644 index 0000000000..19400c8460 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-096.md @@ -0,0 +1,350 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca3d +title: Step 96 +challengeType: 0 +dashedName: step-96 +--- + +# --description-- + +Add the `enter` function to the current selection. Just like before, the initial selection here has a length of zero and the data has a length of three. So when you append elements in the next step, three will be created; one for each slice of the pie. + +# --hints-- + +test-text + +```js +assert( + /\.data\(pie\(d3\.entries\(data\[8\]\.followers\)\)\)\s*\.\s*enter\s*\(\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-097.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-097.md new file mode 100644 index 0000000000..b94dc14b7b --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-097.md @@ -0,0 +1,348 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca3e +title: Step 97 +challengeType: 0 +dashedName: step-97 +--- + +# --description-- + +Use `append` to add three `g` elements for the pie. + +# --hints-- + +test-text + +```js +assert($('svg g').length === 20); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-098.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-098.md new file mode 100644 index 0000000000..8b1e882f74 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-098.md @@ -0,0 +1,351 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca3f +title: Step 98 +challengeType: 0 +dashedName: step-98 +--- + +# --description-- + +On a new line, `append` a `path` element to your `pieGraphData` variable. This is where you will start to draw the pie chart. + +# --hints-- + +test-text + +```js +assert(/pieGraphData\s*\.\s*append\s*\((`|'|")path\1\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-099.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-099.md new file mode 100644 index 0000000000..7c2fdc874d --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-099.md @@ -0,0 +1,352 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca40 +title: Step 99 +challengeType: 0 +dashedName: step-99 +--- + +# --description-- + +Set the `d` attribute to your `pieArc` variable. Just like the `d` in your lines, this is an SVG attribute for path elements that describes how to draw things. Your `pieArc` variable will determine what this value is for you. + +# --hints-- + +test-text + +```js +assert($('.dashboard div svg path')[0].getAttribute('d').length === 94); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-100.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-100.md new file mode 100644 index 0000000000..ff80e8cbea --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-100.md @@ -0,0 +1,372 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca41 +title: Step 100 +challengeType: 0 +dashedName: step-100 +--- + +# --description-- + +The pie graph is being drawn at the `0, 0` coordinates of the SVG. Back on your `pieGraphData` variable, add an attribute that changes the `transform` to `translate(100, 100)`. + +Since the pie chart has a radius of 100, and the SVG is 200 by 200, this will move it so it is centered. + +# --hints-- + +test-text + +```js +const transform = $('.dashboard div svg g')[0].getAttribute('transform'); +assert(/translate\s*\(\s*100\s*,\s*100\s*\)/g.test(transform)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-101.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-101.md new file mode 100644 index 0000000000..69a67b1c69 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-101.md @@ -0,0 +1,377 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca42 +title: Step 101 +challengeType: 0 +dashedName: step-101 +--- + +# --description-- + +Back at the bottom, where you draw the chart. Use the `attr` function to set the `fill` to a "d function". In the "d function", use your `pieColors` scale to get the color value for the platform(`d.data.key`). So when each platform is passed to your scale, is will get the appropriate color to use as the fill from the scales range. + +# --hints-- + +test-text + +```js +const pathsArr = $('.dashboard div svg g path'); +assert( + pathsArr[0].getAttribute('fill') === '#7cd9d1' && + pathsArr[1].getAttribute('fill') === '#f6dd71' && + pathsArr[2].getAttribute('fill') === '#fd9b98' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-102.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-102.md new file mode 100644 index 0000000000..c35673b433 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-102.md @@ -0,0 +1,364 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca43 +title: Step 102 +challengeType: 0 +dashedName: step-102 +--- + +# --description-- + +Next, set the `stroke` to `white` and the `stroke-width` to `2`. + +# --hints-- + +test-text + +```js +const pathsArr = $('.dashboard div svg g path'); +assert( + pathsArr[0].getAttribute('stroke') === 'white' && + pathsArr[0].getAttribute('stroke-width') == 2 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-103.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-103.md new file mode 100644 index 0000000000..b4d01a9891 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-103.md @@ -0,0 +1,365 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca44 +title: Step 103 +challengeType: 0 +dashedName: step-103 +--- + +# --description-- + +Your chart needs some labels in each slice. On a new line, append `text` elements to your `pieGraphData` variable. + +# --hints-- + +test-text + +```js +assert(/pieGraphData\s*\.\s*append\s*\((`|'|")text\1\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-104.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-104.md new file mode 100644 index 0000000000..f3f23bf2a8 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-104.md @@ -0,0 +1,381 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca47 +title: Step 104 +challengeType: 0 +dashedName: step-104 +--- + +# --description-- + +Chain a `text` function to set the text of each pie slice to a percentage. Set the value to a "d function" with curly brackets and leave the function empty for now. It should look like this: + +```js +.text(d => { + +}) +``` + +The method for getting the percent of each slice will take a few steps: + +1. Find the total number of followers for the displayed year +2. Divide the followers of a single platform by that total +3. Turn it into a string to display + +# --hints-- + +test-text + +```js +assert(/\.append\('text'\)\s*\.text\s*\(\s*d\s*=>\s*\{\s*\}\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-105.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-105.md new file mode 100644 index 0000000000..7dd7bc8f45 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-105.md @@ -0,0 +1,383 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca48 +title: Step 105 +challengeType: 0 +dashedName: step-105 +--- + +# --description-- + +In the function you just created, create a `const` named `values`. Use the `d3.values` function to get the values of the 2020 followers and set the result to your `values` variable. Here's how to get the values: + +```js +d3.values(data[8].followers) +``` + +It will be an array with the values of the followers for the three platforms in 2020. + +Note that this "d function" has curly brackets. So you could `console.log(values)` in there to see it's value. + +# --hints-- + +test-text + +```js +assert( + /const\s*values\s*=\s*d3\s*\.\s*values\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\);?/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-106.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-106.md new file mode 100644 index 0000000000..1e304f5fbb --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-106.md @@ -0,0 +1,372 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca49 +title: Step 106 +challengeType: 0 +dashedName: step-106 +--- + +# --description-- + +Since you want to find what percent each of those `values` is, you first need to add them all up. `d3.sum` will do that for you. Create a new `const` named `sum` and set it equal to `d3.sum(values)`. + +# --hints-- + +test-text + +```js +assert(/const\s*sum\s*=\s*d3\s*\.\s*sum\s*\(\s*values\s*\)\s*;?/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-107.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-107.md new file mode 100644 index 0000000000..9fcc056c46 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-107.md @@ -0,0 +1,376 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca4a +title: Step 107 +challengeType: 0 +dashedName: step-107 +--- + +# --description-- + +Create another variable named `percent` and set it equal to `d.data.value` divided by your `sum` variable. + +# --hints-- + +test-text + +```js +assert( + /const\s*percent\s*=\s*d\s*\.\s*data\s*\.\s*value\s*\/\s*sum;?/g.test(code) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-108.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-108.md new file mode 100644 index 0000000000..124a7abec7 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-108.md @@ -0,0 +1,388 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca4b +title: Step 108 +challengeType: 0 +dashedName: step-108 +--- + +# --description-- + +Your percent values are numbers less than one. You will need to multiply it by 100, round of the decimals, and add a `%` sign. Use a template literal to return this to the `text` function: + +```js +${Math.round(percent * 100)}% +``` + +Don't forget that you need a `return` statement here since you aren't using an implicit return. + +# --hints-- + +test-text + +```js +assert( + /return\s*`\$\{\s*Math\s*\.\s*round\s*\(\s*percent\s*\*\s*100\s*\)\s*\}%`;?\s*\}\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-109.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-109.md new file mode 100644 index 0000000000..de9a309042 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-109.md @@ -0,0 +1,388 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca4c +title: Step 109 +challengeType: 0 +dashedName: step-109 +--- + +# --description-- + +The text elements are at the center of the pie graph, you need to use the `centroid` from the D3 arc API to tell them where to go. Add an `attr` function to set the `transform` to a `d` function that returns this template literal: `translate(${ pieArc.centroid(d) })` + +The `centroid` function will find the midpoint of each slice for each text element. + +# --hints-- + +test-text + +```js +const transform = $('.dashboard div svg g text')[0] + .getAttribute('transform') + .replace('translate(', '') + .replace(')', '') + .split(','); +assert(transform[0] < 39 && transform[1] > 31); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-110.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-110.md new file mode 100644 index 0000000000..cfe0599478 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-110.md @@ -0,0 +1,389 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca4d +title: Step 110 +challengeType: 0 +dashedName: step-110 +--- + +# --description-- + +The function you just added, placed the start of the text at the midpoint of each slice. Change the `style` of the text to give it a `text-anchor` of `middle` so the middle of the text is in the middle of the slice. + +After that, set the `font` to `10px verdana`. + +# --hints-- + +test-text + +```js +const text = $('.dashboard div svg g text')[0]; +assert( + text.style.textAnchor === 'middle' && + text.style.font.toLowerCase() === '10px verdana' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-111.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-111.md new file mode 100644 index 0000000000..5a6cda0ba5 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-111.md @@ -0,0 +1,391 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca4e +title: Step 111 +challengeType: 0 +dashedName: step-111 +--- + +# --description-- + +The last component you are going to add is a legend to display the name of each platform and the number of followers for the year. Create a new `const` named `legend` and use it to `append` a `table` to your `rightDashboard` variable. This looks similar to the code where you created your `pieGraph` variable. + +# --hints-- + +test-text + +```js +assert( + /const\s*legend\s*=\s*rightDashboard\s*\.\s*append\s*\(\s*('|"|`)\s*table\s*\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-112.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-112.md new file mode 100644 index 0000000000..be844c9e21 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-112.md @@ -0,0 +1,394 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca4f +title: Step 112 +challengeType: 0 +dashedName: step-112 +--- + +# --description-- + +Give the table a `width` of `200` and a `height` of `120` using `attr`. + +# --hints-- + +test-text + +```js +const table = $('.dashboard div table')[0]; +assert( + table.getAttribute('width') == 200 && table.getAttribute('height') == 120 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-113.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-113.md new file mode 100644 index 0000000000..439b742b88 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-113.md @@ -0,0 +1,396 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca50 +title: Step 113 +challengeType: 0 +dashedName: step-113 +--- + +# --description-- + +Set the `font` to `12px verdana` using the `style` function. + +# --hints-- + +test-text + +```js +assert( + $('.dashboard div table')[0].style.font.toLowerCase() === '12px verdana' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-114.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-114.md new file mode 100644 index 0000000000..1be90df8df --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-114.md @@ -0,0 +1,401 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca51 +title: Step 114 +challengeType: 0 +dashedName: step-114 +--- + +# --description-- + +Create a new `const` named `legendTitle` and use it to `append` a `thead` to your `legend` variable. `thead` is used with the HTML table element and is for the top row of the table. + +# --hints-- + +test-text + +```js +assert( + /const\s*legendTitle\s*=\s*legend\s*\.\s*append\s*\(\s*('|"|`)\s*thead\s*\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-115.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-115.md new file mode 100644 index 0000000000..df269c6462 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-115.md @@ -0,0 +1,401 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca52 +title: Step 115 +challengeType: 0 +dashedName: step-115 +--- + +# --description-- + +`append` a `tr` element to the selection and then append a `th` element right after it. `tr` is for defining a row of the table, and `th` is for defining the header cells of the table. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table thead tr th').length === 1); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-116.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-116.md new file mode 100644 index 0000000000..eb6c7d0918 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-116.md @@ -0,0 +1,404 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca53 +title: Step 116 +challengeType: 0 +dashedName: step-116 +--- + +# --description-- + +Use the `text` function to set the text of the selection to `2020 followers`. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table thead tr th').text() === '2020 followers'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-117.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-117.md new file mode 100644 index 0000000000..7c19f3dcae --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-117.md @@ -0,0 +1,406 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca54 +title: Step 117 +challengeType: 0 +dashedName: step-117 +--- + +# --description-- + +Your table is going to have three columns, one for the platform name, one for the color it is using on your dashboard, and a third to display the number of followers. So you want the title to take up all three columns. Set the `colspan` attribute of the `th` to `3` so it spans all three of these columns. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table thead tr th')[0].getAttribute('colspan') == 3); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-118.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-118.md new file mode 100644 index 0000000000..0cfe9b5a70 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-118.md @@ -0,0 +1,412 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca55 +title: Step 118 +challengeType: 0 +dashedName: step-118 +--- + +# --description-- + +Create a new `const` named `legendRows` and use it to `append` a `tbody` element to your `legend` variable similar to how you added the `thead`. `tbody` is for the main content of an HTML table. + +# --hints-- + +test-text + +```js +assert( + /const\s*legendRows\s*=\s*legend\s*\.\s*append\s*\(\s*('|"|`)\s*tbody\s*\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-119.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-119.md new file mode 100644 index 0000000000..bcdec5c533 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-119.md @@ -0,0 +1,417 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca56 +title: Step 119 +challengeType: 0 +dashedName: step-119 +--- + +# --description-- + +Add a `selectAll` function to the selection and pass it the string `tr`. + +# --hints-- + +test-text + +```js +assert( + /const legendRows = legend\.append\('tbody\s*'\)\s*\.\s*selectAll\s*\(\s*('|"|`)\s*tr\s*\1\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-120.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-120.md new file mode 100644 index 0000000000..4ee832321f --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-120.md @@ -0,0 +1,417 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca57 +title: Step 120 +challengeType: 0 +dashedName: step-120 +--- + +# --description-- + +Use the `data` function to set the data for the rows to an array of your 2020 followers. To get the array use `d3.entries(data[8].followers)`. Remember, this will create an array of key/value pairs of your followers for that year. + +# --hints-- + +test-text + +```js +assert( + /\.selectAll\('tr'\)\s*\.\s*data\s*\(\s*d3\s*\.\s*entries\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\)\s*\)/g.test( + code + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-121.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-121.md new file mode 100644 index 0000000000..e03bdbdb79 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-121.md @@ -0,0 +1,418 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca58 +title: Step 121 +challengeType: 0 +dashedName: step-121 +--- + +# --description-- + +Add the `enter` and `append` functions to the selection. Pass the string `tr` to the append function to add three table row elements. These elements will be for displaying each platform's name. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table tbody tr').length === 3); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-122.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-122.md new file mode 100644 index 0000000000..ed855f5024 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-122.md @@ -0,0 +1,422 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca59 +title: Step 122 +challengeType: 0 +dashedName: step-122 +--- + +# --description-- + +On a new line, `append` a `td` to your `legendRows` variable. `td` is for an individual cell in the row of the table. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table tbody tr td').length === 3); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-123.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-123.md new file mode 100644 index 0000000000..7c8fd63c36 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-123.md @@ -0,0 +1,426 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca5a +title: Step 123 +challengeType: 0 +dashedName: step-123 +--- + +# --description-- + +Use the `text` function to set the text of each `td` to the `key` of each data point by using a "d function" to return `d.key`. + +# --hints-- + +test-text + +```js +assert( + $('.dashboard div table tbody tr td').text() === 'twittertumblrinstagram' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-124.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-124.md new file mode 100644 index 0000000000..721d442809 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-124.md @@ -0,0 +1,431 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca5b +title: Step 124 +challengeType: 0 +dashedName: step-124 +--- + +# --description-- + +This is the first column of your table. Set the `align` attribute to `right` to align the text to the right of each cell. + +# --hints-- + +test-text + +```js +assert( + $('.dashboard div table tbody tr td')[0] + .getAttribute('align') + .toLowerCase() === 'right' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-125.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-125.md new file mode 100644 index 0000000000..565a8dc72f --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-125.md @@ -0,0 +1,430 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca5c +title: Step 125 +challengeType: 0 +dashedName: step-125 +--- + +# --description-- + +On a new line, append another `td` element to your `legendRows` variable. This will be for colored squares in the center column. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table tbody tr td').length === 6); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-126.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-126.md new file mode 100644 index 0000000000..cb21e05cc6 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-126.md @@ -0,0 +1,437 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca5d +title: Step 126 +challengeType: 0 +dashedName: step-126 +--- + +# --description-- + +Set the `align` attribute to `center`. + +# --hints-- + +test-text + +```js +assert( + $('.dashboard div table tbody tr td')[1] + .getAttribute('align') + .toLowerCase() === 'center' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-127.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-127.md new file mode 100644 index 0000000000..90544de2a7 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-127.md @@ -0,0 +1,435 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca5e +title: Step 127 +challengeType: 0 +dashedName: step-127 +--- + +# --description-- + +Append a `div` element to the selection. Each `div` will be a small square for each color. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table tbody tr td div').length === 3); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-128.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-128.md new file mode 100644 index 0000000000..bd8711a89b --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-128.md @@ -0,0 +1,438 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca5f +title: Step 128 +challengeType: 0 +dashedName: step-128 +--- + +# --description-- + +Set the `width` to `16px` and the `height` to `16px` using the `style` function. + +# --hints-- + +test-text + +```js +const div = $('.dashboard div table tbody tr td div')[0]; +assert(div.style.width == '16px' && div.style.height === '16px'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-129.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-129.md new file mode 100644 index 0000000000..3c351a7399 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-129.md @@ -0,0 +1,443 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca60 +title: Step 129 +challengeType: 0 +dashedName: step-129 +--- + +# --description-- + +Using the `style` function again, set the `background-color` of each div to a "d function". Using the "d function", pass the key(`d.key`) of each data point to your `pieColors` scale so it knows what color to use. + +# --hints-- + +test-text + +```js +assert( + $('.dashboard div table tbody tr td div')[0].style.backgroundColor === + 'rgb(124, 217, 209)' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-130.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-130.md new file mode 100644 index 0000000000..bace7d9779 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-130.md @@ -0,0 +1,443 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca61 +title: Step 130 +challengeType: 0 +dashedName: step-130 +--- + +# --description-- + +On a new line, append another `td` to the `legendRows` variable for the last group of items. It will display the number of followers for each platform. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table tbody tr td').length === 9); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-131.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-131.md new file mode 100644 index 0000000000..e508369e16 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-131.md @@ -0,0 +1,446 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca62 +title: Step 131 +challengeType: 0 +dashedName: step-131 +--- + +# --description-- + +Set the `text` to a "d function" that returns the value(`d.value`) for each data point. + +# --hints-- + +test-text + +```js +assert($('.dashboard div table tbody tr td')[2].innerHTML === '2845'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-132.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-132.md new file mode 100644 index 0000000000..d3f68fb936 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-132.md @@ -0,0 +1,450 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca63 +title: Step 132 +challengeType: 0 +dashedName: step-132 +--- + +# --description-- + +Set the `align` attribute to `left` for this selection. + +# --hints-- + +test-text + +```js +assert( + $('.dashboard div table tbody tr td')[2] + .getAttribute('align') + .toLowerCase() === 'left' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-133.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-133.md new file mode 100644 index 0000000000..6fe0e8de95 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-133.md @@ -0,0 +1,448 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca64 +title: Step 133 +challengeType: 0 +dashedName: step-133 +--- + +# --description-- + +The legend has all the information is needs, but the title looks a little misaligned. Go to where you created your `legendTitle` variable and set the `position` to `relative` and the `left` to `20px` using `style` functions. + +# --hints-- + +test-text + +```js +const th = $('.dashboard div table thead tr th')[0]; +assert(th.style.position === 'relative' && th.style.left === '20px'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-134.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-134.md new file mode 100644 index 0000000000..03e36d189a --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-134.md @@ -0,0 +1,453 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca65 +title: Step 134 +challengeType: 0 +dashedName: step-134 +--- + +# --description-- + +The legend and pie graph look a little off as well. Go to where you created your `legend` variable and add a `position` of `relative` and a `top` of `30px` using `style` functions. + +# --hints-- + +test-text + +```js +const table = $('.dashboard div table')[0]; +assert(table.style.position === 'relative' && table.style.top === '30px'); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-135.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-135.md new file mode 100644 index 0000000000..a6c4b6fb87 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-135.md @@ -0,0 +1,464 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca66 +title: Step 135 +challengeType: 0 +dashedName: step-135 +--- + +# --description-- + +Lastly, where you created your `pieGraph` variable, add a `position` of `relative` and a `left` of `20px` using `style` functions. + +# --hints-- + +test-text + +```js +const pieGraph = $('.dashboard div svg')[0]; +assert( + pieGraph.style.position === 'relative' && pieGraph.style.left === '20px' +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-136.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-136.md new file mode 100644 index 0000000000..139d0e87f6 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-136.md @@ -0,0 +1,476 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca67 +title: Step 136 +challengeType: 0 +dashedName: step-136 +--- + +# --description-- + +Finally! You have all the elements displayed and they look good. The last thing you will do is make it so you can see the data from whatever year you want. + +Wrap all the code in the script you've been working with in a function named `drawDashboard` and give it a parameter named `year`. Then, at the bottom of the script, call the function you created and pass it the number `2020`. + +# --hints-- + +test-text + +```js +assert( + typeof drawDashboard === 'function' && + /<\/script>\s* + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-137.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-137.md new file mode 100644 index 0000000000..5c905cd713 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-137.md @@ -0,0 +1,484 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca68 +title: Step 137 +challengeType: 0 +dashedName: step-137 +--- + +# --description-- + +At the top of the function create a new `const` named `index`. You are going to use it to find the item in the `data` array with the year that is passed to the function. + +Use JavaScript's `findIndex` function to set your `index` variable to the index of the item in the `data` array where the year is the same as the year passed to your `drawDashboard` function. Here's an example: + +```js +array.findIndex(d => + // find the index where the year passed to + // drawDashboard equals the year of the array +) +``` + +After this, you will be able to use `data[index]` to get that item in the array. + +# --hints-- + +test-text + +```js +const script = $('.dashboard').siblings('script')[1].innerHTML; +assert( + /var index = data.findIndex\(function \(d\) \{\s*return (year === d\.year|d.year === year);\s*\}\);/g.test( + script + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-138.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-138.md new file mode 100644 index 0000000000..054da5d15a --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-138.md @@ -0,0 +1,479 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca6a +title: Step 138 +challengeType: 0 +dashedName: step-138 +--- + +# --description-- + +There are four places in the file where you used `data[8]` to set data to the year 2020. Change all five of them to `data[index]` so you can pass in any year to the function to display the data from that year. + +The five spots are: + +1. The `domain` for `pieColors`. +2. The `data` for `pieGraphData`. +3. The `text` for your pie slice text. +4. The `data` for your `legendRows`. + +# --hints-- + +test-text + +```js +assert( + !/data\[8\]/g.test(code) && code.match(/data\s*\[\s*index\s*\]/g).length === 4 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-139.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-139.md new file mode 100644 index 0000000000..ae5f5717da --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-139.md @@ -0,0 +1,485 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca6b +title: Step 139 +challengeType: 0 +dashedName: step-139 +--- + +# --description-- + +Go to where you `call` the `xAxis` and create a `mouseover` event for the labels. Chain the `on` function to them, pass it the string `mouseover`, and give it a value of a "d function" that calls `drawDashboard` with `d` as the argument. It will look like this: + +```js +.on('mouseover', d => drawDashboard(d)) +``` + +So now, when you hover a label, the function will be called with the year that is being hovered. + +# --hints-- + +test-text + +```js +const script = $('.dashboard').siblings('script')[1].innerHTML; +assert( + /\.on\(('|"|`)mouseover\1, function \(d\) \{\s*return drawDashboard\(d\);\s*\}\)/g.test( + script + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-140.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-140.md new file mode 100644 index 0000000000..d08a07430d --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-140.md @@ -0,0 +1,478 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca6c +title: Step 140 +challengeType: 0 +dashedName: step-140 +--- + +# --description-- + +There's a problem, each time you hover a label it adds all the elements to the container again. If you empty the container at the top of the function, it will redraw them where they need to be. + +Go back to the top of the function and use `d3.select` to select the `.dashboard` element and chain the `html` function to it with an empty string as it parameter. Empty means no spaces. + +# --hints-- + +test-text + +```js +const script = $('.dashboard').siblings('script')[1].innerHTML; +assert(/d3\.select\(('|"|`)\.dashboard\1\)\.html\(('|"|`)\2\)/g.test(script)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-141.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-141.md new file mode 100644 index 0000000000..0c9593756d --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-141.md @@ -0,0 +1,489 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca6d +title: Step 141 +challengeType: 0 +dashedName: step-141 +--- + +# --description-- + +Now when you hover a label, you can see the data for the different years. + +Where you created the `text` elements for the x-axis labels, change the `font` to `bold 10px verdana` for the currently displayed year. + +To do this, create a "d function" in the `font` value area and return the above sting if `d` equals `year`. Otherwise, return the string that is currently there (`10px verdana`). It's easiest to use a ternary operator for this. + +Here's a hint: + +```js +.style('font', d => d === year ? ) +``` + +# --hints-- + +test-text + +```js +assert( + Object.values($('.dashboard svg g text')).filter( + (el) => el.style && el.style.font.toLowerCase() === 'bold 10px verdana' + ).length === 1 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-142.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-142.md new file mode 100644 index 0000000000..b7d124fcc7 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-142.md @@ -0,0 +1,481 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca6e +title: Step 142 +challengeType: 0 +dashedName: step-142 +--- + +# --description-- + +Create another `mouseover` event for when you hover one of the `twitter-circles`. It will look like the other `mouseover` event you created except the `drawDashboard` function will take `d.year` instead of `d`. + +# --hints-- + +test-text + +```js +const script = $('.dashboard').siblings('script')[1].innerHTML; +assert( + /\.on\(('|"|`)mouseover\1, function \(d\) \{\s*return drawDashboard\(d\.year\);\s*\}\)/g.test( + script + ) +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-143.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-143.md new file mode 100644 index 0000000000..0cfeac007d --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-143.md @@ -0,0 +1,483 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca6f +title: Step 143 +challengeType: 0 +dashedName: step-143 +--- + +# --description-- + +Similar to how you made the text bold for the label of the displayed year; change the `fill` of the `twitter-circles` to your `twitterColor` for the currently displayed year. To do this, use a "d function" that returns the `twitterColor` when `d.year` equals `year`, and leave it `white` if it doesn't. + +# --hints-- + +test-text + +```js +assert( + Object.values($('.dashboard svg circle')).filter( + (el) => el.getAttribute && el.getAttribute('fill') === '#7cd9d1' + ).length === 1 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-144.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-144.md new file mode 100644 index 0000000000..084a682013 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-144.md @@ -0,0 +1,490 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca70 +title: Step 144 +challengeType: 0 +dashedName: step-144 +--- + +# --description-- + +Add a `mouseover` event to the `tumblr-circles` and `instagram-circles` in the same way that you did for the `twitter-circles`. + +After that, you will be able hover any of the circles or year labels to get the information for that year. + +# --hints-- + +test-text + +```js +const script = $('.dashboard').siblings('script')[1].innerHTML; +assert( + script.match( + /\.on\(('|"|`)mouseover\1, function \(d\) \{\s*return drawDashboard\(d\.year\);\s*\}\)/g + ).length === 3 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-145.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-145.md new file mode 100644 index 0000000000..3bf1fb49e1 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-145.md @@ -0,0 +1,494 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca71 +title: Step 145 +challengeType: 0 +dashedName: step-145 +--- + +# --description-- + +Change the `fill` of the `tumblr-circles` and `instagram-circles` to use a "d function" that returns their respective color variables when `d.year` equals `year`, leave it `white` when they don't. This is similar to how you set the fill of the Twitter circles. + +Then, all of the circles will get filled in for the currently displayed year. + +# --hints-- + +test-text + +```js +const circles = Object.values($('.dashboard svg circle')); +assert( + circles.filter( + (el) => + el.getAttribute && + (el.getAttribute('fill') === '#7cd9d1' || + el.getAttribute('fill') === '#f6dd71' || + el.getAttribute('fill') === '#fd9b98') + ).length === 3 +); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-146.md b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-146.md new file mode 100644 index 0000000000..d9c3208306 --- /dev/null +++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-146.md @@ -0,0 +1,483 @@ +--- +id: 5d8a4cfbe6b6180ed9a1ca72 +title: Step 146 +challengeType: 0 +dashedName: step-146 +--- + +# --description-- + +The last thing is that the legend title always shows 2020. Change the `text` of the `legendTitle` to a template literal that shows the currently displayed year followed by a space and `followers`. + +That's it, your dashboard is finished! Don't forget to admire your hard work. + +# --hints-- + +test-text + +```js +assert(/\.text\s*\(\s*`\s*\$\{\s*year\s*\} followers`\s*\)/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- + +```html + + + + D3 Dashboard + + + + +
+ + +``` + +## --seed-contents-- + +```html + + +``` + +# --solutions-- + +```html + + +``` diff --git a/curriculum/test/utils/challengeTitles.js b/curriculum/test/utils/challengeTitles.js index 2063fd285e..823aa57a56 100644 --- a/curriculum/test/utils/challengeTitles.js +++ b/curriculum/test/utils/challengeTitles.js @@ -14,7 +14,7 @@ class ChallengeTitles { } // reassign titleToCheck if challenge is part of the project // based curriculum - const isProjectCurriculumChallenge = title.match(/^Part\s*\d+$/); + const isProjectCurriculumChallenge = title.match(/^Step\s*\d+$/); titleToCheck = isProjectCurriculumChallenge ? pathAndTitle : titleToCheck; const isKnown = this.knownTitles.includes(titleToCheck); if (isKnown) { diff --git a/tools/challenge-helper-scripts/create-project.ts b/tools/challenge-helper-scripts/create-project.ts index de2257270a..82a116328c 100644 --- a/tools/challenge-helper-scripts/create-project.ts +++ b/tools/challenge-helper-scripts/create-project.ts @@ -151,7 +151,7 @@ async function createMetaJson( newMeta.order = order; newMeta.superOrder = superBlocks.indexOf(superBlock) + 1; newMeta.superBlock = superBlock; - newMeta.challengeOrder = [[challengeId, 'Part 1']]; + newMeta.challengeOrder = [[challengeId, 'Step 1']]; const newMetaDir = path.resolve(metaDir, block); if (!existsSync(newMetaDir)) { await fs.mkdir(newMetaDir); diff --git a/tools/challenge-helper-scripts/create-step-between.js b/tools/challenge-helper-scripts/create-step-between.js index 91caa916be..75d171cd3e 100644 --- a/tools/challenge-helper-scripts/create-step-between.js +++ b/tools/challenge-helper-scripts/create-step-between.js @@ -24,7 +24,7 @@ if (!allStepsExist(existingSteps, [start, end])) { } const challengeSeeds = getChallengeSeeds( - `${projectPath}part-${padWithLeadingZeros(start)}.md` + `${projectPath}step-${padWithLeadingZeros(start)}.md` ); createStepFile({ stepNum: start, diff --git a/tools/challenge-helper-scripts/delete-step.js b/tools/challenge-helper-scripts/delete-step.js index 8f1e4b0d9c..d5e65d306d 100644 --- a/tools/challenge-helper-scripts/delete-step.js +++ b/tools/challenge-helper-scripts/delete-step.js @@ -22,7 +22,7 @@ if (!stepExists(existingSteps, num)) { throw `Step # ${num} not deleted because it does not exist.`; } -const stepFileToDelete = `${projectPath}part-${padWithLeadingZeros(num)}.md`; +const stepFileToDelete = `${projectPath}step-${padWithLeadingZeros(num)}.md`; try { fs.unlinkSync(stepFileToDelete); console.log(`Sucessfully deleted step #${num}`); diff --git a/tools/challenge-helper-scripts/helpers/get-existing-step-nums.js b/tools/challenge-helper-scripts/helpers/get-existing-step-nums.js index 02c7c2938b..44effdf56c 100644 --- a/tools/challenge-helper-scripts/helpers/get-existing-step-nums.js +++ b/tools/challenge-helper-scripts/helpers/get-existing-step-nums.js @@ -2,8 +2,8 @@ const fs = require('fs'); const path = require('path'); // Generates an array with the output of processing filenames with an expected -// format (`part-###.md`). -// ['part-001.md', 'part-002.md'] => [1, 2] +// format (`step-###.md`). +// ['step-001.md', 'step-002.md'] => [1, 2] function getExistingStepNums(projectPath) { return fs.readdirSync(projectPath).reduce((stepNums, fileName) => { if ( diff --git a/tools/challenge-helper-scripts/helpers/get-existing-step-nums.test.js b/tools/challenge-helper-scripts/helpers/get-existing-step-nums.test.js index e0b57dd403..ea3979d327 100644 --- a/tools/challenge-helper-scripts/helpers/get-existing-step-nums.test.js +++ b/tools/challenge-helper-scripts/helpers/get-existing-step-nums.test.js @@ -10,8 +10,8 @@ describe('getExistingStepNums helper', () => { it('should return the number portion of the project paths', () => { mock({ 'mock-project': { - 'part-001.md': 'Lorem ipsum...', - 'part-002.md': 'Lorem ipsum...' + 'step-001.md': 'Lorem ipsum...', + 'step-002.md': 'Lorem ipsum...' } }); @@ -26,7 +26,7 @@ describe('getExistingStepNums helper', () => { mock({ 'mock-project': { 'final.md': 'Lorem ipsum...', - 'part-001.md': 'Lorem ipsum...' + 'step-001.md': 'Lorem ipsum...' } }); @@ -40,9 +40,9 @@ describe('getExistingStepNums helper', () => { it('should throw if file names do not follow naming convention', () => { mock({ 'mock-project': { - 'part-001.md': 'Lorem ipsum...', - 'part-002.md': 'Lorem ipsum...', - 'part002.md': 'Lorem ipsum...' + 'step-001.md': 'Lorem ipsum...', + 'step-002.md': 'Lorem ipsum...', + 'step002.md': 'Lorem ipsum...' } }); @@ -56,8 +56,8 @@ describe('getExistingStepNums helper', () => { it('should return empty array if there are no markdown files', () => { mock({ 'mock-project': { - 'part-001.js': 'Lorem ipsum...', - 'part-002.css': 'Lorem ipsum...' + 'step-001.js': 'Lorem ipsum...', + 'step-002.css': 'Lorem ipsum...' } }); diff --git a/tools/challenge-helper-scripts/helpers/get-last-step-file-content.js b/tools/challenge-helper-scripts/helpers/get-last-step-file-content.js index 022c153037..f553df1285 100644 --- a/tools/challenge-helper-scripts/helpers/get-last-step-file-content.js +++ b/tools/challenge-helper-scripts/helpers/get-last-step-file-content.js @@ -3,7 +3,7 @@ const path = require('path'); const { getChallengeSeeds } = require('../utils'); const { getProjectPath } = require('./get-project-path'); -// Looks up the last file found with format `part-###.md` in a directory and +// Looks up the last file found with format `step-###.md` in a directory and // returns associated information to it. At the same time validates that the // number of files match the names used to name these. function getLastStepFileContent() { diff --git a/tools/challenge-helper-scripts/helpers/get-last-step-file-content.test.js b/tools/challenge-helper-scripts/helpers/get-last-step-file-content.test.js index 6eadf6604c..b80e0cb8a2 100644 --- a/tools/challenge-helper-scripts/helpers/get-last-step-file-content.test.js +++ b/tools/challenge-helper-scripts/helpers/get-last-step-file-content.test.js @@ -21,8 +21,8 @@ describe('getLastStepFileContent helper', () => { it('should throw if last step count does not match with numbers of steps', () => { mock({ 'mock-project/': { - 'part-001.md': 'Lorem ipsum...', - 'part-004.md': 'Lorem ipsum...', + 'step-001.md': 'Lorem ipsum...', + 'step-004.md': 'Lorem ipsum...', 'final.md': 'Lorem ipsum...' } }); @@ -37,8 +37,8 @@ describe('getLastStepFileContent helper', () => { it('should return information if steps count is correct', () => { mock({ 'mock-project': { - 'part-001.md': 'Lorem ipsum...', - 'part-002.md': 'Lorem ipsum...', + 'step-001.md': 'Lorem ipsum...', + 'step-002.md': 'Lorem ipsum...', 'final.md': 'Lorem ipsum...' } }); diff --git a/tools/challenge-helper-scripts/helpers/get-step-template.js b/tools/challenge-helper-scripts/helpers/get-step-template.js index 02705886e5..180e897062 100644 --- a/tools/challenge-helper-scripts/helpers/get-step-template.js +++ b/tools/challenge-helper-scripts/helpers/get-step-template.js @@ -58,9 +58,9 @@ function getStepTemplate({ return ( `--- id: ${challengeId} -title: Part ${stepNum} +title: Step ${stepNum} challengeType: 0 -dashedName: part-${stepNum} +dashedName: step-${stepNum} --- # --description-- diff --git a/tools/challenge-helper-scripts/helpers/get-step-template.test.js b/tools/challenge-helper-scripts/helpers/get-step-template.test.js index 2909126e17..b9f33277e5 100644 --- a/tools/challenge-helper-scripts/helpers/get-step-template.test.js +++ b/tools/challenge-helper-scripts/helpers/get-step-template.test.js @@ -6,9 +6,9 @@ describe('getStepTemplate util', () => { it('should be able to create a markdown', () => { const baseOutput = `--- id: 60d4ebe4801158d1abe1b18f -title: Part 5 +title: Step 5 challengeType: 0 -dashedName: part-5 +dashedName: step-5 --- # --description-- diff --git a/tools/challenge-helper-scripts/utils.js b/tools/challenge-helper-scripts/utils.js index 4e613ca4d9..712f1151a2 100644 --- a/tools/challenge-helper-scripts/utils.js +++ b/tools/challenge-helper-scripts/utils.js @@ -29,7 +29,7 @@ const createStepFile = ({ stepNum }); - fs.writeFileSync(`${projectPath}part-${finalStepNum}.md`, template); + fs.writeFileSync(`${projectPath}step-${finalStepNum}.md`, template); return challengeId; }; @@ -69,7 +69,7 @@ const reorderSteps = () => { const newStepNum = i + 1; const newFileName = fileName !== 'final.md' - ? `part-${padWithLeadingZeros(newStepNum)}.md` + ? `step-${padWithLeadingZeros(newStepNum)}.md` : 'final.md'; return { oldFileName: fileName, @@ -89,8 +89,8 @@ const reorderSteps = () => { const frontMatter = matter.read(filePath); const challengeID = frontMatter.data.id || ObjectID(); const title = - newFileName === 'final.md' ? 'Final Prototype' : `Part ${newStepNum}`; - const dashedName = `part-${newStepNum}`; + newFileName === 'final.md' ? 'Final Prototype' : `Step ${newStepNum}`; + const dashedName = `step-${newStepNum}`; challengeOrder.push(['' + challengeID, title]); const newData = { ...frontMatter.data, diff --git a/tools/challenge-helper-scripts/utils.test.js b/tools/challenge-helper-scripts/utils.test.js index 489a80c884..3fe34e6a8e 100644 --- a/tools/challenge-helper-scripts/utils.test.js +++ b/tools/challenge-helper-scripts/utils.test.js @@ -57,8 +57,8 @@ describe('Challenge utils helper scripts', () => { it('should create next step and return its identifier', () => { mock({ 'project/': { - 'part-001.md': 'Lorem ipsum...', - 'part-002.md': 'Lorem ipsum...' + 'step-001.md': 'Lorem ipsum...', + 'step-002.md': 'Lorem ipsum...' } }); @@ -78,9 +78,9 @@ describe('Challenge utils helper scripts', () => { const files = glob.sync(`project/*.md`); expect(files).toEqual([ - `project/part-001.md`, - `project/part-002.md`, - `project/part-003.md` + `project/step-001.md`, + `project/step-002.md`, + `project/step-003.md` ]); mock.restore(); @@ -94,9 +94,9 @@ describe('Challenge utils helper scripts', () => { 'meta.json': 'Lorem ipsum meta content...' }, 'project/': { - 'part-001.md': 'Lorem ipsum 1...', - 'part-002.md': 'Lorem ipsum 2...', - 'part-002b.md': 'Lorem ipsum 3...' + 'step-001.md': 'Lorem ipsum 1...', + 'step-002.md': 'Lorem ipsum 2...', + 'step-002b.md': 'Lorem ipsum 3...' } }); @@ -106,9 +106,9 @@ describe('Challenge utils helper scripts', () => { const files = glob.sync(`project/*.md`); expect(files).toEqual([ - 'project/part-001.md', - 'project/part-002.md', - 'project/part-003.md' + 'project/step-001.md', + 'project/step-002.md', + 'project/step-003.md' ]); const result = fs.readFileSync('_meta/project/meta.json', 'utf8'); @@ -118,15 +118,15 @@ describe('Challenge utils helper scripts', () => { "challengeOrder": [ [ "60d35cf3fe32df2ce8e31b03", - "Part 1" + "Step 1" ], [ "60d35cf3fe32df2ce8e31b03", - "Part 2" + "Step 2" ], [ "60d35cf3fe32df2ce8e31b03", - "Part 3" + "Step 3" ] ] }`;