diff --git a/curriculum/challenges/_meta/basic-css-cafe-menu/meta.json b/curriculum/challenges/_meta/basic-css-cafe-menu/meta.json index 52dd938f71..e2e4965cf9 100644 --- a/curriculum/challenges/_meta/basic-css-cafe-menu/meta.json +++ b/curriculum/challenges/_meta/basic-css-cafe-menu/meta.json @@ -223,163 +223,159 @@ "Part 53" ], [ - "5f3ef6e0086dc80481f8cb03", + "5f3ef6e0eaa7da26e3d34d78", "Part 54" ], [ - "5f3ef6e0eaa7da26e3d34d78", + "5f3ef6e050279c7a4a7101d3", "Part 55" ], [ - "5f3ef6e050279c7a4a7101d3", + "5f3ef6e04559b939080db057", "Part 56" ], [ - "5f3ef6e04559b939080db057", + "5f3ef6e03d719d5ac4738993", "Part 57" ], [ - "5f3ef6e03d719d5ac4738993", + "5f3ef6e05473f91f948724ab", "Part 58" ], [ - "5f3ef6e05473f91f948724ab", + "5f3ef6e056bdde6ae6892ba2", "Part 59" ], [ - "5f3ef6e056bdde6ae6892ba2", + "5f3ef6e0e9629bad967cd71e", "Part 60" ], [ - "5f3ef6e0e9629bad967cd71e", + "5f3ef6e06d34faac0447fc44", "Part 61" ], [ - "5f3ef6e06d34faac0447fc44", + "5f3ef6e087d56ed3ffdc36be", "Part 62" ], [ - "5f3ef6e087d56ed3ffdc36be", + "5f3ef6e0f8c230bdd2349716", "Part 63" ], [ - "5f3ef6e0f8c230bdd2349716", + "5f3ef6e07276f782bb46b93d", "Part 64" ], [ - "5f3ef6e07276f782bb46b93d", + "5f3ef6e0a81099d9a697b550", "Part 65" ], [ - "5f3ef6e0a81099d9a697b550", + "5f3ef6e0b431cc215bb16f55", "Part 66" ], [ - "5f3ef6e0b431cc215bb16f55", + "5f3ef6e01f288a026d709587", "Part 67" ], [ - "5f3ef6e01f288a026d709587", + "5f3f26fa39591db45e5cd7a0", "Part 68" ], [ - "5f3f26fa39591db45e5cd7a0", + "5f459225127805351a6ad057", "Part 69" ], [ - "5f459225127805351a6ad057", + "5f459a7ceb8b5c446656d88b", "Part 70" ], [ - "5f459a7ceb8b5c446656d88b", + "5f459cf202c2a3472fae6a9f", "Part 71" ], [ - "5f459cf202c2a3472fae6a9f", + "5f459fd48bdc98491ca6d1a3", "Part 72" ], [ - "5f459fd48bdc98491ca6d1a3", + "5f45a05977e2fa49d9119437", "Part 73" ], [ - "5f45a05977e2fa49d9119437", + "5f45a276c093334f0f6e9df4", "Part 74" ], [ - "5f45a276c093334f0f6e9df4", + "5f45a5a7c49a8251f0bdb527", "Part 75" ], [ - "5f45a5a7c49a8251f0bdb527", + "5f46fc57528aa1c4b5ea7c2e", "Part 76" ], [ - "5f46fc57528aa1c4b5ea7c2e", + "5f4701b942c824109626c3d8", "Part 77" ], [ - "5f4701b942c824109626c3d8", + "5f46ede1ff8fec5ba656b44c", "Part 78" ], [ - "5f46ede1ff8fec5ba656b44c", + "5f45a66d4a2b0453301e5a26", "Part 79" ], [ - "5f45a66d4a2b0453301e5a26", + "5f45b0731d39e15d54df4dfc", "Part 80" ], [ - "5f45b0731d39e15d54df4dfc", + "5f45b25e7ec2405f166b9de1", "Part 81" ], [ - "5f45b25e7ec2405f166b9de1", + "5f45b3c93c027860d9298dbd", "Part 82" ], [ - "5f45b3c93c027860d9298dbd", + "5f45b45d099f3e621fbbb256", "Part 83" ], [ - "5f45b45d099f3e621fbbb256", + "5f45b4c81cea7763550e40df", "Part 84" ], [ - "5f45b4c81cea7763550e40df", + "5f45b715301bbf667badc04a", "Part 85" ], [ - "5f45b715301bbf667badc04a", + "5f46e270702a8456a664f0df", "Part 86" ], [ - "5f46e270702a8456a664f0df", + "5f46e36e745ead58487aabf2", "Part 87" ], [ - "5f46e36e745ead58487aabf2", + "5f46e7a4750dd05b5a673920", "Part 88" ], [ - "5f46e7a4750dd05b5a673920", + "5f46e8284aae155c83015dee", "Part 89" ], [ - "5f46e8284aae155c83015dee", + "5f475bb508746c16c9431d42", "Part 90" ], [ - "5f475bb508746c16c9431d42", + "5f475e1c7f71a61d913836c6", "Part 91" ], - [ - "5f475e1c7f71a61d913836c6", - "Part 92" - ], [ "5f47fe7e31980053a8d4403b", - "Part 93" + "Part 92" ] ]} 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 index d5ed25087c..cf1bfa7b34 100644 --- 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 @@ -7,16 +7,28 @@ dashedName: part-1 # --description-- -As you learned in the last few steps of the Cat Photo App, there is a basic structure need to start building your web page. +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 `` and an `html` element. +Add the `` tag, and an `html` element. # --hints-- -Test 1 +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-- @@ -27,5 +39,5 @@ Test 1 --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 index f6189d4ec1..1b96ad27c5 100644 --- 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 @@ -11,10 +11,40 @@ Add a `head` element within the `html` element, so you can add a `title` element # --hints-- -Test 1 +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-- @@ -29,4 +59,3 @@ Test 1 --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 index e7a35142f5..9c15fc8ea3 100644 --- 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 @@ -9,14 +9,26 @@ dashedName: part-3 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 tha `meta` elements are self-closing. +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-- -Test 1 +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-- @@ -33,4 +45,3 @@ Test 1 --fcc-editable-region-- <html> ``` - 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 index 3d6e4b3e5c..a292209bd8 100644 --- 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 @@ -11,10 +11,29 @@ To prepare to create some actual content, add a `body` element below the `head` # --hints-- -Test 1 +You should have an opening `<body>` tag. ```js +assert(code.match(/<body>/i)); +``` +You should have a closing `</body>` 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(/<head>/i)); +assert(code.match(/<\/head>/i)); +``` + +Your `body` element should come after your `head` element. + +```js +assert(code.match(/<\/head>[.\n\s]*<body>/im)); ``` # --seed-- 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 index 901da74f3c..0267635ef0 100644 --- 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 @@ -7,14 +7,38 @@ dashedName: part-5 # --description-- -The name of the cafe is `Camper Cafe`. Add an `h1` element with the name of the cafe in capitalized letters to make it stand out. +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-- -Test 1 +You should have an opening `<h1>` tag. ```js +assert(code.match(/<h1>/i)); +``` +You should have a closing `</h1>` 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(/<h1>CAMPER CAFE<\/h1>/)); ``` # --seed-- @@ -34,4 +58,3 @@ Test 1 --fcc-editable-region-- <html> ``` - 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 index 80ca8f7387..2f5945b1fc 100644 --- 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 @@ -11,10 +11,34 @@ To let visitors know the cafe was founded in 2020, add a `p` element below the ` # --hints-- -Test 1 +You should have an opening `<p>` tag. ```js +assert(code.match(/<p>/i)); +``` +You should have a closing `</p>` 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(/<p>Est. 2020<\/p>/i)); ``` # --seed-- 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 index 30daff0dcb..e38f371ed1 100644 --- 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 @@ -11,10 +11,30 @@ Since the `p` element added in the previous step provides supplemental informati # --hints-- -Test 1 +You should have an opening `<header>` tag. ```js +assert(code.match(/<header>/i)); +``` +You should have a closing `</header>` 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-- 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 index add3bf4fa2..357ce84cec 100644 --- 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 @@ -7,14 +7,33 @@ 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 coffees and desserts offered by the cafe. +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-- -Test 1 +Your code should have an opening `<main>` tag. ```js +assert(code.match(/<main>/i)); +``` +Your code should have a closing `</main>` 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-- @@ -38,4 +57,3 @@ Test 1 </body> <html> ``` - 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 index 7eb5da85fc..4eb0ee6325 100644 --- 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 @@ -11,10 +11,29 @@ There will be two sections on the menu, one for coffees and one for desserts. Ad # --hints-- -Test 1 +You should have an opening `<section>` tag. ```js +assert(code.match(/<section\s*>/i)); +``` +You should have a closing `</section>` 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-- @@ -40,4 +59,3 @@ Test 1 </body> <html> ``` - 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 index d07bbbede0..a5725d7428 100644 --- 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 @@ -7,14 +7,40 @@ dashedName: part-10 # --description-- -Create an `h2` element in the `section` element and give it the text `Coffees`. +Create an `h2` element in the `section` element and give it the text `Coffee`. # --hints-- -Test 1 +You should have an opening `<h2>` tag. ```js +assert(code.match(/<h2\s*>/i)); +``` +You should have a closing `</h2>` 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-- @@ -42,4 +68,3 @@ Test 1 </body> <html> ``` - 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 index b549bd127a..88e2bd4721 100644 --- 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 @@ -11,10 +11,22 @@ Up until now, you have been limited regarding the presentation and appearance of # --hints-- -Test 1 +Your code should have an opening `<style>` tag. ```js +assert(code.match(/<style\s*>/i)); +``` +Your code should have a closing `</style>` tag. + +```js +assert(code.match(/<\/style\s*>/)); +``` + +Your `style` element should be nested in your `head` element. + +```js +assert(code.match(/<head\s*>[\w\W\s]*<style\s*>[\w\W\s]*<\/style\s*>[\w\W\s]*<\/head\s*>/i)) ``` # --seed-- @@ -36,11 +48,10 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> </section> </main> </body> --fcc-editable-region-- <html> ``` - 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 index 8bfbb3b5d7..43317a5e4c 100644 --- 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 @@ -19,10 +19,25 @@ Center your `h1` element by setting its `text-align` property to the value `cent # --hints-- -Test 1 +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-- @@ -47,7 +62,7 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> </section> </main> </body> 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 index 0950e190c7..2233cb1c9a 100644 --- 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 @@ -11,10 +11,46 @@ In the previous step, you used a <dfn>type selector</dfn> to style the `h1` elem # --hints-- -Test 1 +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-- @@ -42,7 +78,7 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> </section> </main> </body> 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 index 842e24d334..f71b45cca6 100644 --- 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 @@ -19,10 +19,18 @@ Use a single type selector to center the `h1`, `h2` and `p` elements at the same # --hints-- -Test 1 +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-- @@ -56,7 +64,7 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> </section> </main> </body> 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 index 81166392c1..70bf94ef00 100644 --- 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 @@ -7,14 +7,33 @@ 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. Start by rewriting the styles you have created into the `styles.css` file. Make sure to exclude the opening and closing `style` tags. +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-- -Test 1 +Your `styles.css` file should have the `h1, h2, p` type selector. ```js +const css = code.split('<!DOCTYPE html>')[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('<!DOCTYPE html>')[0]; +assert(css.match(/text-align:\s*center;?/)); +``` + +You should only have one selector. + +```js +const css = code.split('<!DOCTYPE html>')[0]; +assert(css.match(/text-align:\s*center;?/).length === 1); ``` # --seed-- @@ -40,7 +59,7 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> </section> </main> </body> @@ -51,5 +70,5 @@ Test 1 --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 index 6fc0f0a2d5..83f4e8e659 100644 --- 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 @@ -7,14 +7,22 @@ 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 as centered, will shift back to the left. +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-- -Test 1 +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('<!DOCTYPE html>')[1]; +assert(!html.includes('style')); +assert(!html.includes('text-align')); ``` # --seed-- @@ -42,7 +50,7 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> </section> </main> </body> 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 index 49eb35c766..09fa54f587 100644 --- 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 @@ -7,14 +7,52 @@ dashedName: part-17 # --description-- -Now you need to link the `styles.css` file so the styles will be applied again. Next 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`. +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-- -Test 1 +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(/<link[\w\W\s]+\/>/i)); +``` + +Your `link` element should be within your `head` element. + +```js +assert(code.match(/<head>[\w\W\s]*<link[\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-- @@ -37,7 +75,7 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> </section> </main> </body> @@ -49,4 +87,3 @@ 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 index b0363d73c8..b8535eec70 100644 --- 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 @@ -17,10 +17,24 @@ Add the following within the `head` element: # --hints-- -Test 1 +Your code should have two `meta` elements. ```js +assert(code.match(/<meta.*\/?>/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-- @@ -44,7 +58,7 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> </section> </main> </body> @@ -56,4 +70,3 @@ 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 index b5f87b010c..2a2d4d84b8 100644 --- 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 @@ -11,10 +11,25 @@ The text is centered again so the link to the CSS file is working. Add another s # --hints-- -Test 1 +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-- @@ -37,7 +52,7 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> </section> </main> </body> @@ -50,5 +65,6 @@ 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 index 6adba30d2b..d006e00161 100644 --- 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 @@ -11,10 +11,18 @@ That brown background makes it hard to read the text. Change the `body` element' # --hints-- -Test 1 +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-- @@ -37,7 +45,7 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> </section> </main> </body> @@ -54,4 +62,3 @@ 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 index 27b88a24c1..80de988606 100644 --- 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 @@ -11,10 +11,29 @@ The `div` element is used mainly for design layout purposes unlike the other con # --hints-- -Test 1 +You should have an opening `<div>` tag. ```js +assert(code.match(/<div>/i)); +``` +You should have a closing `</div>` 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-- @@ -38,7 +57,7 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> </section> </main> </body> 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 index 635556b427..7127c94b59 100644 --- 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 @@ -11,10 +11,25 @@ The goal now is to make the `div` not take up the entire width of the page. The # --hints-- -Test 1 +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-- @@ -38,7 +53,7 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> </section> </main> </div> @@ -56,5 +71,6 @@ 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 index a3aeaefdec..904356b9bc 100644 --- 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 @@ -2,6 +2,7 @@ id: 5f356ed60a5decd94ab66986 title: Part 23 challengeType: 0 +removeComments: false dashedName: part-23 --- @@ -17,10 +18,18 @@ In your style sheet, comment out the the line containing the `background-color` # --hints-- -Test 1 +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-- @@ -44,7 +53,7 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> </section> </main> </div> 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 index 08b03cb3e9..74787abfa1 100644 --- 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 @@ -11,10 +11,18 @@ Now make the background color of the `div` element to be `burlywood`. # --hints-- -Test 1 +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-- @@ -38,7 +46,7 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> </section> </main> </div> 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 index 3eb98cd049..a1a1e13469 100644 --- 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 @@ -11,10 +11,18 @@ Now it's easy to see that the text is centered inside the `div` element. Current # --hints-- -Test 1 +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-- @@ -38,7 +46,7 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> </section> </main> </div> 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 index 9acdd986f1..e61cab9c6e 100644 --- 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 @@ -11,10 +11,27 @@ Next, you want to center the `div` horizontally. You can do this by setting its # --hints-- -Test 1 +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-- @@ -38,7 +55,7 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> </section> </main> </div> @@ -64,4 +81,3 @@ div { } --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 index 56336f7de0..6504b85e84 100644 --- 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 @@ -19,10 +19,18 @@ Change the existing `div` selector into a class selector by replacing `div` with # --hints-- -Test 1 +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-- @@ -46,7 +54,7 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> </section> </main> </div> 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 index a8cbb5e12b..b13c3c2179 100644 --- 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 @@ -11,10 +11,16 @@ To apply the class's styling to the `div` element, add a `class` attribute to th # --hints-- -Test 1 +Your `div` should still render. Make sure you haven't malformed the `<div>` tag. ```js +assert($('div').length === 1); +``` +Your `div` element should have the `menu` class. + +```js +assert($('div').attr('class').includes('menu')); ``` # --seed-- @@ -40,7 +46,7 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> </section> </main> </div> 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 index 95933bd025..af82358778 100644 --- 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 @@ -9,14 +9,35 @@ dashedName: part-29 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://tinyurl.com/coffee-beans-fcc)`. +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-- -Test 1 +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-- @@ -40,7 +61,7 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> </section> </main> </div> 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 index dd5dd87027..407c85d7c8 100644 --- 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 @@ -7,14 +7,33 @@ dashedName: part-30 # --description-- -It’s looking good. Time to start adding some menu items. Add an empty `article` element under the `Coffees` heading. It will contain a flavor and price of each coffee you currently offer. +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-- -Test 1 +You should have an opening `<article>` tag. ```js +assert(code.match(/<article>/i)); +``` +You should have a closing `</article>` 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-- @@ -39,7 +58,7 @@ Test 1 <main> <section> --fcc-editable-region-- - <h2>Coffees</h2> + <h2>Coffee</h2> --fcc-editable-region-- </section> </main> @@ -50,7 +69,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); } h1, h2, p { 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 index 3ddfc2db7f..3c3f4e83ec 100644 --- 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 @@ -11,10 +11,30 @@ dashedName: part-31 # --hints-- -Test 1 +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-- @@ -38,7 +58,7 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> --fcc-editable-region-- <article> </article> @@ -52,7 +72,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); } h1, h2, p { @@ -66,4 +86,3 @@ h1, h2, p { 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 index ee6bc92e2c..7a704ed606 100644 --- 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 @@ -7,21 +7,72 @@ dashedName: part-32 # --description-- -Starting below the existing coffee/price pair, add the following coffees and prices using an `article` element 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. +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 -Carmel Macchiato 3.75 +Caramel Macchiato 3.75 Pumpkin Spice 3.50 Hazelnut 4.00 -Mocah 4.50 +Mocha 4.50 ``` # --hints-- -Test 1 +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-- @@ -45,7 +96,7 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> --fcc-editable-region-- <article> <p>French Vanilla</p> @@ -61,7 +112,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); } h1, h2, p { @@ -75,4 +126,3 @@ h1, h2, p { 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 index 9172978a63..dc4fb48580 100644 --- 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 @@ -13,10 +13,22 @@ Add the class name `flavor` to the `French Vanilla` `p` element. # --hints-- -Test 1 +You should add the `flavor` class to your `p` element. ```js +assert(code.match(/<p\s*class=('|")flavor\1\s*>/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-- @@ -40,7 +52,7 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article> --fcc-editable-region-- <p>French Vanilla</p> @@ -48,7 +60,7 @@ Test 1 --fcc-editable-region-- </article> <article> - <p>Carmel Macchiato</p> + <p>Caramel Macchiato</p> <p>3.75</p> </article> <article> @@ -72,7 +84,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); } h1, h2, p { @@ -86,4 +98,3 @@ h1, h2, p { 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 index 18dbbaabf2..98abe22d01 100644 --- 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 @@ -11,10 +11,25 @@ Using your new `flavor` class as a selector, set the `text-align` property's val # --hints-- -Test 1 +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-- @@ -38,13 +53,13 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article> <p class="flavor">French Vanilla</p> <p>3.00</p> </article> <article> - <p>Carmel Macchiato</p> + <p>Caramel Macchiato</p> <p>3.75</p> </article> <article> @@ -68,7 +83,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); } h1, h2, p { @@ -85,5 +100,6 @@ h1, h2, p { --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 index 8935596272..211f459fb0 100644 --- 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 @@ -11,10 +11,22 @@ Next, you want to align the price to the right. Add a class named `price` to you # --hints-- -Test 1 +You should add the `price` class to your `p` element. ```js +assert(code.match(/<p\s*class=('|")price\1\s*>/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-- @@ -38,7 +50,7 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article> <p class="flavor">French Vanilla</p> --fcc-editable-region-- @@ -46,7 +58,7 @@ Test 1 --fcc-editable-region-- </article> <article> - <p>Carmel Macchiato</p> + <p>Caramel Macchiato</p> <p>3.75</p> </article> <article> @@ -70,7 +82,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); } h1, h2, p { @@ -88,4 +100,3 @@ h1, h2, p { 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 index b904d7d098..b68866acda 100644 --- 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 @@ -11,10 +11,22 @@ Now align the text to the `right` for the elements with the `price` class. # --hints-- -Test 1 +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-- @@ -38,13 +50,13 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article> <p class="flavor">French Vanilla</p> <p class="price">3.00</p> </article> <article> - <p>Carmel Macchiato</p> + <p>Caramel Macchiato</p> <p>3.75</p> </article> <article> @@ -68,7 +80,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); } h1, h2, p { @@ -89,5 +101,6 @@ h1, h2, p { --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 index d126ab8f25..60eb6995c5 100644 --- 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 @@ -9,14 +9,26 @@ dashedName: part-37 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 <dfn>block-level</dfn> 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 `Coffees` heading. +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-- -Test 1 +You should apply the `item` class to your `article` element. ```js +assert(code.match(/<article\s*class=('|")item\1\s*>/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-- @@ -41,14 +53,14 @@ Test 1 <main> <section> --fcc-editable-region-- - <h2>Coffees</h2> + <h2>Coffee</h2> <article> <p class="flavor">French Vanilla</p> <p class="price">3.00</p> </article> --fcc-editable-region-- <article> - <p>Carmel Macchiato</p> + <p>Caramel Macchiato</p> <p>3.75</p> </article> <article> @@ -72,7 +84,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); } h1, h2, p { @@ -94,4 +106,3 @@ h1, h2, p { 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 index eb7be9d884..17968ed170 100644 --- 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 @@ -7,7 +7,7 @@ dashedName: part-38 # --description-- -The `p` elements are nested in an `article` elements with the class attribute of `item`. You can style all the `p` elements nested anywhere in elements with a class named `item` like this: +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 { } @@ -17,10 +17,25 @@ Using the above selector, add a `display` property with value `inline-block` so # --hints-- -Test 1 +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-- @@ -44,13 +59,13 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p> <p class="price">3.00</p> </article> <article> - <p>Carmel Macchiato</p> + <p>Caramel Macchiato</p> <p>3.75</p> </article> <article> @@ -74,7 +89,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); } h1, h2, p { @@ -100,4 +115,3 @@ h1, h2, p { 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 index ef04f2f26c..0b53cd46cc 100644 --- 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 @@ -11,10 +11,18 @@ That's closer, but the price didn't stay over on the right. This is because `inl # --hints-- -Test 1 +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-- @@ -38,13 +46,13 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p> <p class="price">3.00</p> </article> <article> - <p>Carmel Macchiato</p> + <p>Caramel Macchiato</p> <p>3.75</p> </article> <article> @@ -68,7 +76,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); } h1, h2, p { 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 index 0d117f05b5..37293ce41f 100644 --- 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 @@ -7,16 +7,24 @@ dashedName: part-40 # --description-- -Well that did not work. Styling the `p` elements as `inline-block` and placing them on a 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`'s width a little less than `50%`. +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-- -Test 1 +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-- @@ -40,13 +48,13 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p> <p class="price">3.00</p> </article> <article> - <p>Carmel Macchiato</p> + <p>Caramel Macchiato</p> <p>3.75</p> </article> <article> @@ -70,7 +78,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); } h1, h2, p { 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 index f74e90594a..1e50096abf 100644 --- 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 @@ -13,10 +13,10 @@ You could keep trying various percentages for the widths. Instead, simply move t # --hints-- -Test 1 +Your `p` elements should not have any space between them. ```js - +assert(code.match(/Vanilla<\/p><p/)); ``` # --seed-- @@ -40,7 +40,7 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> --fcc-editable-region-- <p class="flavor">French Vanilla</p> @@ -48,7 +48,7 @@ Test 1 --fcc-editable-region-- </article> <article> - <p>Carmel Macchiato</p> + <p>Caramel Macchiato</p> <p>3.75</p> </article> <article> @@ -72,7 +72,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); } h1, h2, p { 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 index ab2d1afbc0..a68eb84293 100644 --- 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 @@ -11,10 +11,18 @@ Now go ahead and change both the `flavor` and `price` class' widths to be `50%` # --hints-- -Test 1 +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-- @@ -38,12 +46,12 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article> - <p>Carmel Macchiato</p> + <p>Caramel Macchiato</p> <p>3.75</p> </article> <article> @@ -67,7 +75,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); } h1, h2, p { 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 index ce5e2a274a..32d8f472a1 100644 --- 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 @@ -11,10 +11,29 @@ Now that you know it works, you can change the remaining `article` and `p` eleme # --hints-- -Test 1 +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-- @@ -38,13 +57,13 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> --fcc-editable-region-- <article> - <p>Carmel Macchiato</p> + <p>Caramel Macchiato</p> <p>3.75</p> </article> <article> @@ -69,7 +88,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); } h1, h2, p { 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 index 56049bac8c..2b11e30ce9 100644 --- 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 @@ -11,10 +11,10 @@ Next, position the other `p` elements to be on the same line with no space betwe # --hints-- -Test 1 +You should not have any spaces between your `p` elements. ```js - +assert(!code.match(/<\/p>\s+<p/)); ``` # --seed-- @@ -38,13 +38,13 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> --fcc-editable-region-- <article class="item"> - <p>Carmel Macchiato</p> + <p>Caramel Macchiato</p> <p>3.75</p> </article> <article class="item"> @@ -69,7 +69,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); } h1, h2, p { 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 index 0b4ed61577..e942762404 100644 --- 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 @@ -11,10 +11,40 @@ To complete the styling, add the applicable class names `flavor` and `price` to # --hints-- -Test 1 +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-- @@ -38,13 +68,13 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> --fcc-editable-region-- <article class="item"> - <p>Carmel Macchiato</p><p>3.75</p> + <p>Caramel Macchiato</p><p>3.75</p> </article> <article class="item"> <p>Pumpkin Spice</p><p>3.50</p> @@ -65,7 +95,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); } h1, h2, p { 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 index 9fb4c529b2..b2d93ea51f 100644 --- 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 @@ -9,14 +9,22 @@ dashedName: part-46 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 `dessert` class `width` value to be `25%`. +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-- -Test 1 +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-- @@ -40,12 +48,12 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -65,7 +73,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); } h1, h2, p { 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 index 9ffe5428b7..bdd97e6d1f 100644 --- 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 @@ -11,10 +11,28 @@ You will come back to the styling the menu in a few steps, but for now, go ahead # --hints-- -Test 1 +You should have an opening `section` tag. ```js +assert(code.match(/<section>/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-- @@ -39,12 +57,12 @@ Test 1 <main> --fcc-editable-region-- <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -65,7 +83,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); } h1, h2, p { 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 index 6a9caee5f5..48e0975fd9 100644 --- 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 @@ -7,14 +7,26 @@ dashedName: part-48 # --description-- -Add an `h2` element in the new section add give it the text `Desserts`. +Add an `h2` element in the new section and give it the text `Desserts`. # --hints-- -Test 1 +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-- @@ -38,12 +50,12 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -67,7 +79,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); } h1, h2, p { 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 index 10c82341d7..5b4cdac205 100644 --- 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 @@ -11,10 +11,22 @@ Add an empty `article` element under the `Desserts` heading. Give it a `class` a # --hints-- -Test 1 +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-- @@ -38,12 +50,12 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -68,7 +80,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); } h1, h2, p { 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 index e6faa648c8..42b0d2be38 100644 --- 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 @@ -11,10 +11,28 @@ Nest two `p` elements inside your `article` element. The first one's text should # --hints-- -Test 1 +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-- @@ -38,12 +56,12 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -70,7 +88,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); } h1, h2, p { 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 index 4ba6b7aa6c..97bebf10e0 100644 --- 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 @@ -11,10 +11,28 @@ For the two `p` elements you just added, add `dessert` as the value of the first # --hints-- -Test 1 +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+<p/)); ``` # --seed-- @@ -38,12 +56,12 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -71,7 +89,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); } h1, h2, p { 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 index ee3b381f4b..a4cf119169 100644 --- 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 @@ -7,16 +7,17 @@ dashedName: part-52 # --description-- -Something does not look right. You added the correct `class` attribute value to the `p` element with `Donunt` as its text, but you have not defined a selector for it. +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-- -Test 1 +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-- @@ -40,12 +41,12 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -71,7 +72,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); } h1, h2, p { @@ -101,4 +102,3 @@ h1, h2, p { 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 index 4b479df7ab..59a7af88cb 100644 --- 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 @@ -17,10 +17,48 @@ Cinammon Roll 2.50 # --hints-- -Test 1 +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+<p/)); ``` # --seed-- @@ -44,12 +82,12 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -77,7 +115,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); } h1, h2, p { @@ -105,4 +143,3 @@ h1, h2, p { 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 index d1bbb18710..0e54c90f16 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f3ef6e0086dc80481f8cb03 +id: 5f3ef6e0eaa7da26e3d34d78 title: Part 54 challengeType: 0 dashedName: part-54 @@ -7,16 +7,38 @@ dashedName: part-54 # --description-- -Something does not look right. You added the correct `class` attribute to the `p` elements with dessert names, but you have not defined a selector for it. +You can give your menu some space between the content and the sides with various `padding` properties. -Since the `flavor` class selector already has the properties you want, just add the `dessert` class to it. +Give the `menu` class a `padding-left` and a `padding-right` with the same value `20px`. # --hints-- -Test 1 +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-- @@ -40,12 +62,12 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -80,30 +102,30 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + 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; } ---fcc-editable-region-- -.flavor { +.flavor, .dessert { text-align: left; width: 75%; } ---fcc-editable-region-- .price { text-align: right; 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 index c4326dae60..30185742ca 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f3ef6e0eaa7da26e3d34d78 +id: 5f3ef6e050279c7a4a7101d3 title: Part 55 challengeType: 0 dashedName: part-55 @@ -7,16 +7,45 @@ dashedName: part-55 # --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`. +That looks better. Now try to add the same `20px` padding to the top and bottom of the menu. # --hints-- -Test 1 +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-- @@ -40,12 +69,12 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -80,7 +109,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); } h1, h2, p { @@ -93,6 +122,8 @@ h1, h2, p { background-color: burlywood; margin-left: auto; margin-right: auto; + padding-left: 20px; + padding-right: 20px; } --fcc-editable-region-- 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 index d9c028d1a6..06d459df0f 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f3ef6e050279c7a4a7101d3 +id: 5f3ef6e04559b939080db057 title: Part 56 challengeType: 0 dashedName: part-56 @@ -7,14 +7,46 @@ dashedName: part-56 # --description-- -That looks better. Now try to add the same `20px` padding to the top and bottom of the menu. +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-- -Test 1 +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-- @@ -38,12 +70,12 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -78,7 +110,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); } h1, h2, p { @@ -93,6 +125,8 @@ h1, h2, p { margin-right: auto; padding-left: 20px; padding-right: 20px; + padding-top: 20px; + padding-bottom: 20px; } --fcc-editable-region-- 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 index 044f974e35..7e2ace1db6 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f3ef6e04559b939080db057 +id: 5f3ef6e03d719d5ac4738993 title: Part 57 challengeType: 0 dashedName: part-57 @@ -7,14 +7,24 @@ dashedName: part-57 # --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`. +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-- -Test 1 +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-- @@ -38,12 +48,12 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -78,7 +88,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); } h1, h2, p { @@ -91,10 +101,7 @@ h1, h2, p { background-color: burlywood; margin-left: auto; margin-right: auto; - padding-left: 20px; - padding-right: 20px; - padding-top: 20px; - padding-bottom: 20px; + padding: 20px; } --fcc-editable-region-- 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 index 27165e884a..3878c2c2ee 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f3ef6e03d719d5ac4738993 +id: 5f3ef6e05473f91f948724ab title: Part 58 challengeType: 0 dashedName: part-58 @@ -7,16 +7,23 @@ dashedName: part-58 # --description-- -The current width of the menu will always take of 80% of the `body` element's width. On a very wide screen, the coffee and dessert appear far apart from their prices. +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. -Add a `max-width` property to the `menu` class with a value of `500px` to prevent it from growing too wide. +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-- -Test 1 +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-- @@ -40,12 +47,12 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -79,23 +86,24 @@ Test 1 ``` ```css +--fcc-editable-region-- body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); } +--fcc-editable-region-- h1, h2, p { text-align: center; } ---fcc-editable-region-- .menu { width: 80%; background-color: burlywood; margin-left: auto; margin-right: auto; padding: 20px; + max-width: 500px; } ---fcc-editable-region-- .item p { display: inline-block; @@ -111,4 +119,3 @@ h1, h2, p { 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 index 76c87e49ac..170f139e89 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f3ef6e05473f91f948724ab +id: 5f3ef6e056bdde6ae6892ba2 title: Part 59 challengeType: 0 dashedName: part-59 @@ -7,16 +7,36 @@ dashedName: part-59 # --description-- -You can change the `font-family` of text, to make it look different the the default font of your browser. Each browser has some common fonts available to it. +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. -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. +Style both the `h1` and the `h2` elements so that only these elements' text use `Impact` font. # --hints-- -Test 1 +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-- @@ -40,12 +60,12 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -79,11 +99,10 @@ Test 1 ``` ```css ---fcc-editable-region-- body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); + font-family: sans-serif; } ---fcc-editable-region-- h1, h2, p { text-align: center; @@ -98,6 +117,10 @@ h1, h2, p { max-width: 500px; } +--fcc-editable-region-- + +--fcc-editable-region-- + .item p { display: inline-block; } 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 index bd9673e0ba..4a4f75e229 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f3ef6e056bdde6ae6892ba2 +id: 5f3ef6e0e9629bad967cd71e title: Part 60 challengeType: 0 dashedName: part-60 @@ -7,16 +7,17 @@ dashedName: part-60 # --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. +You can add a <dfn>fallback</dfn> 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. -Style both the `h1` and the `h2` elements so that only these elements' text use `Impact` font. +Add the fallback font `serif` after the `Impact` font. # --hints-- -Test 1 +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-- @@ -40,12 +41,12 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -80,7 +81,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); font-family: sans-serif; } @@ -98,7 +99,9 @@ h1, h2, p { } --fcc-editable-region-- - +h1, h2 { + font-family: Impact; +} --fcc-editable-region-- .item p { 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 index 7bf069d1f4..cc3b983e86 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f3ef6e0e9629bad967cd71e +id: 5f3ef6e06d34faac0447fc44 title: Part 61 challengeType: 0 dashedName: part-61 @@ -7,16 +7,29 @@ dashedName: part-61 # --description-- -You can add a <dfn>fallback</dfn> 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. +Make the `Est. 2020` text italicized by creating an `established` class selector and giving it the `font-style` property with the value `italic`. # --hints-- -Test 1 +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-- @@ -40,12 +53,12 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -80,10 +93,14 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + 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; } @@ -97,11 +114,9 @@ h1, h2, p { max-width: 500px; } ---fcc-editable-region-- h1, h2 { - font-family: Impact; + font-family: Impact, serif; } ---fcc-editable-region-- .item p { display: inline-block; 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 index 85b907cc88..a39cbde319 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f3ef6e06d34faac0447fc44 +id: 5f3ef6e087d56ed3ffdc36be title: Part 62 challengeType: 0 dashedName: part-62 @@ -7,14 +7,27 @@ dashedName: part-62 # --description-- -Make the `Est. 2020` text italicized by creating an `established` class selector and giving it the `font-style` property with the value `italic`. +Now apply the `established` class to the `Est. 2020` text. # --hints-- -Test 1 +You should set the `class` of the `p` element to `established`. ```js +assert(code.match(/<p class=('|")established\1>/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-- @@ -32,18 +45,20 @@ Test 1 </head> <body> <div class="menu"> +--fcc-editable-region-- <header> <h1>CAMPER CAFE</h1> <p>Est. 2020</p> </header> +--fcc-editable-region-- <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -78,13 +93,13 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + 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; @@ -117,4 +132,3 @@ h1, h2 { 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 index 6fe8235d34..3d1eb0c279 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f3ef6e087d56ed3ffdc36be +id: 5f3ef6e0f8c230bdd2349716 title: Part 63 challengeType: 0 dashedName: part-63 @@ -7,14 +7,38 @@ dashedName: part-63 # --description-- -Now apply the `established` class to the `Est. 2020` text. +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-- -Test 1 +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-- @@ -32,20 +56,18 @@ Test 1 </head> <body> <div class="menu"> ---fcc-editable-region-- <header> <h1>CAMPER CAFE</h1> - <p>Est. 2020</p> + <p class="established">Est. 2020</p> </header> ---fcc-editable-region-- <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -80,10 +102,14 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + 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; } @@ -119,4 +145,3 @@ h1, h2 { 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 index b66d787ff9..b1ab67953f 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f3ef6e0f8c230bdd2349716 +id: 5f3ef6e07276f782bb46b93d title: Part 64 challengeType: 0 dashedName: part-64 @@ -7,16 +7,33 @@ dashedName: part-64 # --description-- -The `h1` and `h2` elements' text are set by default values of the user's browser. - -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`. +Add a `footer` element below the `main` element, where you can add some additional information. # --hints-- -Test 1 +You should have an opening `<footer>` tag. ```js +assert(code.match(/<footer>/i)); +``` +You should have a closing `</footer>` 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-- @@ -38,14 +55,15 @@ Test 1 <h1>CAMPER CAFE</h1> <p class="established">Est. 2020</p> </header> +--fcc-editable-region-- <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -73,6 +91,7 @@ Test 1 </article> </section> </main> +--fcc-editable-region-- </div> </body> <html> @@ -80,13 +99,17 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); font-family: sans-serif; } ---fcc-editable-region-- +h1 { + font-size: 40px; +} ---fcc-editable-region-- +h2 { + font-size: 30px; +} .established { font-style: italic; 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 index 5eac40bbf9..9babeb5fe0 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f3ef6e07276f782bb46b93d +id: 5f3ef6e0a81099d9a697b550 title: Part 65 challengeType: 0 dashedName: part-65 @@ -7,14 +7,38 @@ dashedName: part-65 # --description-- -Add a `footer` element below the `main` element, where you can some additional information. +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-- -Test 1 +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-- @@ -36,15 +60,14 @@ Test 1 <h1>CAMPER CAFE</h1> <p class="established">Est. 2020</p> </header> ---fcc-editable-region-- <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -72,6 +95,9 @@ Test 1 </article> </section> </main> +--fcc-editable-region-- + <footer> + </footer> --fcc-editable-region-- </div> </body> @@ -80,7 +106,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); font-family: sans-serif; } 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 index 953af159c1..d705e79f29 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f3ef6e0a81099d9a697b550 +id: 5f3ef6e0b431cc215bb16f55 title: Part 66 challengeType: 0 dashedName: part-66 @@ -7,14 +7,20 @@ dashedName: part-66 # --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`. +Add a second `p` element below the one with the link and give it the text `123 Free Code Camp Drive`. # --hints-- -Test 1 +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-- @@ -38,12 +44,12 @@ Test 1 </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -71,10 +77,13 @@ Test 1 </article> </section> </main> ---fcc-editable-region-- <footer> - </footer> --fcc-editable-region-- + <p> + <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a> + </p> +--fcc-editable-region-- + </footer> </div> </body> <html> @@ -82,7 +91,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); font-family: sans-serif; } 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 index 1e286bdc62..2688e74740 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f3ef6e0b431cc215bb16f55 +id: 5f3ef6e01f288a026d709587 title: Part 67 challengeType: 0 dashedName: part-67 @@ -7,14 +7,36 @@ dashedName: part-67 # --description-- -Add a second `p` element below the one with the link and give it the text `123 freeCodeCamp Drive`. +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-- -Test 1 +You should add an `hr` element. `hr` elements are self-closing. ```js +assert(code.match(/<hr\s?\/?>/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-- @@ -32,18 +54,19 @@ Test 1 </head> <body> <div class="menu"> +--fcc-editable-region-- <header> <h1>CAMPER CAFE</h1> <p class="established">Est. 2020</p> </header> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -71,12 +94,12 @@ Test 1 </article> </section> </main> - <footer> --fcc-editable-region-- + <footer> <p> <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a> </p> ---fcc-editable-region-- + <p>123 Free Code Camp Drive</p> </footer> </div> </body> @@ -85,7 +108,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); font-family: sans-serif; } 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 index 09eb78a5e7..d40571b777 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f3ef6e01f288a026d709587 +id: 5f3f26fa39591db45e5cd7a0 title: Part 68 challengeType: 0 dashedName: part-68 @@ -7,16 +7,31 @@ dashedName: part-68 # --description-- -You can use an `hr` element to display a divider between sections of different content. +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. -First, add an `hr` element between the first `header` element and the `main` element. +Change the height the `hr` element to be `3px`. # --hints-- -Test 1 +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-- @@ -34,19 +49,19 @@ Test 1 </head> <body> <div class="menu"> ---fcc-editable-region-- <header> <h1>CAMPER CAFE</h1> <p class="established">Est. 2020</p> </header> + <hr> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -74,7 +89,6 @@ Test 1 </article> </section> </main> ---fcc-editable-region-- <footer> <p> <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a> @@ -88,7 +102,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); font-family: sans-serif; } @@ -117,6 +131,10 @@ h1, h2, p { max-width: 500px; } +--fcc-editable-region-- + +--fcc-editable-region-- + h1, h2 { font-family: Impact, serif; } 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 index bfabc2d6df..129a6ea6c3 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f3f26fa39591db45e5cd7a0 +id: 5f459225127805351a6ad057 title: Part 69 challengeType: 0 dashedName: part-69 @@ -7,16 +7,21 @@ dashedName: part-69 # --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`. +Change the background color of the `hr` element to `brown` so it matches the color of the coffee beans. # --hints-- -Test 1 +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-- @@ -41,12 +46,12 @@ Test 1 <hr> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -87,7 +92,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); font-family: sans-serif; } @@ -117,7 +122,9 @@ h1, h2, p { } --fcc-editable-region-- - +hr { + height: 3px; +} --fcc-editable-region-- h1, h2 { 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 index dc7ae58ac4..189f00c7c5 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f459225127805351a6ad057 +id: 5f459a7ceb8b5c446656d88b title: Part 70 challengeType: 0 dashedName: part-70 @@ -7,14 +7,24 @@ dashedName: part-70 # --description-- -Change the background color of the `hr` element to `brown` so it matches the color of the coffee beans. +Notice the grey color along the edges of the line. Those edges are known as <dfn>borders</dfn>. 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-- -Test 1 +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-- @@ -39,12 +49,12 @@ Test 1 <hr> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -85,7 +95,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); font-family: sans-serif; } @@ -117,6 +127,7 @@ h1, h2, p { --fcc-editable-region-- hr { height: 3px; + background-color: brown; } --fcc-editable-region-- 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 index 798f64276b..7e8011774e 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f459a7ceb8b5c446656d88b +id: 5f459cf202c2a3472fae6a9f title: Part 71 challengeType: 0 dashedName: part-71 @@ -7,16 +7,24 @@ dashedName: part-71 # --description-- -Notice the grey color along the edges of the line. Those edges are known as <dfn>borders</dfn>. Each side of an element can have a different color or they can all be the same. +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`). -Make all the edges of the `hr` element the same color as the background of it using the `border-color` property. +Change the `height` property of the `hr` to be `2px`, so the total height of it becomes `4px`. # --hints-- -Test 1 +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-- @@ -41,12 +49,12 @@ Test 1 <hr> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -87,7 +95,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); font-family: sans-serif; } @@ -120,6 +128,7 @@ h1, h2, p { hr { height: 3px; background-color: brown; + border-color: brown; } --fcc-editable-region-- 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 index 62650205a5..03e83c0698 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f459cf202c2a3472fae6a9f +id: 5f459fd48bdc98491ca6d1a3 title: Part 72 challengeType: 0 dashedName: part-72 @@ -7,16 +7,21 @@ dashedName: part-72 # --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`. +Go ahead and add another `hr` element between the `main` element and the `footer` element. # --hints-- -Test 1 +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-- @@ -39,14 +44,15 @@ Test 1 <p class="established">Est. 2020</p> </header> <hr> +--fcc-editable-region-- <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -80,6 +86,7 @@ Test 1 </p> <p>123 Free Code Camp Drive</p> </footer> +--fcc-editable-region-- </div> </body> <html> @@ -87,7 +94,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); font-family: sans-serif; } @@ -116,13 +123,11 @@ h1, h2, p { max-width: 500px; } ---fcc-editable-region-- hr { - height: 3px; + height: 2px; background-color: brown; border-color: brown; } ---fcc-editable-region-- h1, h2 { font-family: Impact, serif; 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 index 22e8edc952..63faef74a5 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f459fd48bdc98491ca6d1a3 +id: 5f45a05977e2fa49d9119437 title: Part 73 challengeType: 0 dashedName: part-73 @@ -7,14 +7,21 @@ dashedName: part-73 # --description-- -Go ahead and add another `hr` element between the `main` element and the `footer` element. +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-- -Test 1 +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-- @@ -37,15 +44,14 @@ Test 1 <p class="established">Est. 2020</p> </header> <hr> ---fcc-editable-region-- <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -73,23 +79,25 @@ Test 1 </article> </section> </main> + <hr> <footer> <p> <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a> </p> <p>123 Free Code Camp Drive</p> </footer> ---fcc-editable-region-- </div> </body> <html> ``` ```css +--fcc-editable-region-- body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); font-family: sans-serif; } +--fcc-editable-region-- h1 { font-size: 40px; @@ -140,4 +148,3 @@ h1, h2 { 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 index 9e00817218..9e8078b1af 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f45a05977e2fa49d9119437 +id: 5f45a276c093334f0f6e9df4 title: Part 74 challengeType: 0 dashedName: part-74 @@ -7,14 +7,45 @@ dashedName: part-74 # --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. +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-- -Test 1 +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-- @@ -39,12 +70,12 @@ Test 1 <hr> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -85,12 +116,11 @@ Test 1 ``` ```css ---fcc-editable-region-- body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + 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; @@ -123,6 +153,7 @@ hr { border-color: brown; } +--fcc-editable-region-- h1, h2 { font-family: Impact, serif; } @@ -140,5 +171,6 @@ h1, h2 { 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 index 68b916b666..58c4c84cba 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f45a276c093334f0f6e9df4 +id: 5f45a5a7c49a8251f0bdb527 title: Part 75 challengeType: 0 dashedName: part-75 @@ -7,16 +7,29 @@ dashedName: part-75 # --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`. +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-- -Test 1 +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-- @@ -41,12 +54,12 @@ Test 1 <hr> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -88,7 +101,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); font-family: sans-serif; padding: 20px; } @@ -124,14 +137,17 @@ hr { border-color: brown; } ---fcc-editable-region-- 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; @@ -142,6 +158,5 @@ h1, h2 { text-align: right; width: 25% } ---fcc-editable-region-- ``` 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 index f9bf8557f2..8f4a568664 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f45a5a7c49a8251f0bdb527 +id: 5f46fc57528aa1c4b5ea7c2e title: Part 76 challengeType: 0 dashedName: part-76 @@ -7,14 +7,31 @@ dashedName: part-76 # --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`. +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-- -Test 1 +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-- @@ -39,12 +56,12 @@ Test 1 <hr> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -86,7 +103,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); font-family: sans-serif; padding: 20px; } @@ -122,17 +139,20 @@ hr { border-color: brown; } +--fcc-editable-region-- + +--fcc-editable-region-- + h1, h2 { font-family: Impact, serif; } ---fcc-editable-region-- .item p { display: inline-block; margin-top: 5px; margin-bottom: 5px; + font-size: 18px; } ---fcc-editable-region-- .flavor, .dessert { text-align: left; 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 index bed16cf667..236d30c565 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f46fc57528aa1c4b5ea7c2e +id: 5f4701b942c824109626c3d8 title: Part 77 challengeType: 0 dashedName: part-77 @@ -7,16 +7,20 @@ dashedName: part-77 # --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 `Coffees` heading. - -Add some more space by creating a class named `bottom-line` using `25px` for the `margin-top` property. +Now add the `bottom-line` class to the second `hr` element so the styling is applied. # --hints-- -Test 1 +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-- @@ -41,12 +45,12 @@ Test 1 <hr> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -74,7 +78,9 @@ Test 1 </article> </section> </main> +--fcc-editable-region-- <hr> +--fcc-editable-region-- <footer> <p> <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a> @@ -88,7 +94,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); font-family: sans-serif; padding: 20px; } @@ -124,9 +130,9 @@ hr { border-color: brown; } ---fcc-editable-region-- - ---fcc-editable-region-- +.bottom-line { + margin-top: 25px; +} h1, h2 { font-family: Impact, serif; @@ -149,4 +155,3 @@ h1, h2 { 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 index 47ac8e4f89..ce69d8e923 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f4701b942c824109626c3d8 +id: 5f46ede1ff8fec5ba656b44c title: Part 78 challengeType: 0 dashedName: part-78 @@ -7,14 +7,14 @@ dashedName: part-78 # --description-- -Now add the `bottom-line` class to the second `hr` element so the styling is applied. +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-- -Test 1 +You should have a CSS comment with the text `FOOTER`. ```js - +assert(code.match(/\/\*\s*FOOTER\s*\*\//i)); ``` # --seed-- @@ -39,12 +39,12 @@ Test 1 <hr> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -72,10 +72,7 @@ Test 1 </article> </section> </main> ---fcc-editable-region-- - <hr> ---fcc-editable-region-- - <footer> + <hr class="bottom-line"> <p> <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a> </p> @@ -88,7 +85,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); font-family: sans-serif; padding: 20px; } @@ -136,7 +133,7 @@ h1, h2 { display: inline-block; margin-top: 5px; margin-bottom: 5px; - font-size: 18px; + font-size: 18px; } .flavor, .dessert { @@ -148,5 +145,10 @@ h1, h2 { 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 index b4bd249bb1..91cdc30e84 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f46ede1ff8fec5ba656b44c +id: 5f45a66d4a2b0453301e5a26 title: Part 79 challengeType: 0 dashedName: part-79 @@ -7,14 +7,36 @@ dashedName: part-79 # --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`. +Moving down to the `footer` element, make all the text have a value of `14px` for the font size. # --hints-- -Test 1 +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-- @@ -39,12 +61,12 @@ Test 1 <hr> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -73,6 +95,7 @@ Test 1 </section> </main> <hr class="bottom-line"> + <footer> <p> <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a> </p> @@ -85,7 +108,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); font-family: sans-serif; padding: 20px; } @@ -133,7 +156,7 @@ h1, h2 { display: inline-block; margin-top: 5px; margin-bottom: 5px; - font-size: 18px; + font-size: 18px; } .flavor, .dessert { @@ -146,8 +169,10 @@ h1, h2 { 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 index d11f3df1e0..9c90df8354 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f45a66d4a2b0453301e5a26 +id: 5f45b0731d39e15d54df4dfc title: Part 80 challengeType: 0 dashedName: part-80 @@ -7,14 +7,30 @@ dashedName: part-80 # --description-- -Moving down to the `footer` element, make all the text have a value of `14px` for the font size. +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-- -Test 1 +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-- @@ -39,12 +55,12 @@ Test 1 <hr> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -86,7 +102,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); font-family: sans-serif; padding: 20px; } @@ -149,8 +165,11 @@ h1, h2 { /* 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 index 68712f5001..9d9db85f07 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f45b0731d39e15d54df4dfc +id: 5f45b25e7ec2405f166b9de1 title: Part 81 challengeType: 0 dashedName: part-81 @@ -7,16 +7,31 @@ dashedName: part-81 # --description-- -The default color of link that has not yet been clicked on a page is typically blue. The default color of a link that has already been visited from a page is typically purple. +You change properties of a link when the link has actually been visited by using a <dfn>pseudo-selector</dfn> that looks like `a:visited { propertyName: propertyValue; }`. -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. +Change the color of the footer `Visit our website` link to be `grey` when a user has visited the link. # --hints-- -Test 1 +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-- @@ -41,12 +56,12 @@ Test 1 <hr> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -88,7 +103,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); font-family: sans-serif; padding: 20px; } @@ -154,8 +169,14 @@ h1, h2 { 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 index 49bf0fe6a5..fca7adb2f3 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f45b25e7ec2405f166b9de1 +id: 5f45b3c93c027860d9298dbd title: Part 82 challengeType: 0 dashedName: part-82 @@ -7,16 +7,31 @@ dashedName: part-82 # --description-- -You change properties of a link when the link has actually been visited by using a <dfn>pseudo-selector</dfn> that looks like `a:visited { propertyName: propertyValue; }`. +You change properties of a link when the mouse hovers them by using a <dfn>pseudo-selector</dfn> that looks like `a:hover { propertyName: propertyValue; }`. -Change the color of the footer `Visit our website` link to be `grey` when a user has visited the link. +Change the color of the footer `Visit our website` link to be `brown` when a user hovers over it. # --hints-- -Test 1 +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-- @@ -41,12 +56,12 @@ Test 1 <hr> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -88,7 +103,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); font-family: sans-serif; padding: 20px; } @@ -159,8 +174,13 @@ 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 index 8703ffc338..492e292762 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f45b3c93c027860d9298dbd +id: 5f45b45d099f3e621fbbb256 title: Part 83 challengeType: 0 dashedName: part-83 @@ -7,16 +7,31 @@ dashedName: part-83 # --description-- -You change properties of a link when the mouse hovers them by using a <dfn>pseudo-selector</dfn> that looks like `a:hover { propertyName: propertyValue; }`. +You change properties of a link when the link is actually being clicked by using a <dfn>pseudo-selector</dfn> that looks like `a:active { propertyName: propertyValue; }`. -Change the color of the footer `Visit our website` link to be `brown` when a user hovers over it. +Change the color of the footer `Visit our website` link to be `white` when clicked on. # --hints-- -Test 1 +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-- @@ -41,12 +56,12 @@ Test 1 <hr> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -88,7 +103,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); font-family: sans-serif; padding: 20px; } @@ -163,8 +178,12 @@ 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 index 360b846e26..f369be268e 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f45b45d099f3e621fbbb256 +id: 5f45b4c81cea7763550e40df title: Part 84 challengeType: 0 dashedName: part-84 @@ -7,16 +7,22 @@ dashedName: part-84 # --description-- -You change properties of a link when the link is actually clicked by using a <dfn>pseudo-selector</dfn> that looks like `a:active { propertyName: propertyValue; }`. - -Change the color of the footer `Visit our website` link to be `white` when a clicks on it. +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-- -Test 1 +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-- @@ -41,12 +47,12 @@ Test 1 <hr> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -88,7 +94,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); font-family: sans-serif; padding: 20px; } @@ -159,6 +165,7 @@ a { color: black; } +--fcc-editable-region-- a:visited { color: grey; } @@ -167,8 +174,9 @@ a:hover { color: brown; } ---fcc-editable-region-- - +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 index 417dd327b4..e78801ff9d 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f45b4c81cea7763550e40df +id: 5f45b715301bbf667badc04a title: Part 85 challengeType: 0 dashedName: part-85 @@ -7,14 +7,24 @@ dashedName: part-85 # --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. +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-- -Test 1 +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-- @@ -39,12 +49,12 @@ Test 1 <hr> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -86,14 +96,16 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + 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; @@ -157,9 +169,8 @@ a { color: black; } ---fcc-editable-region-- a:visited { - color: grey; + color: black; } a:hover { @@ -167,8 +178,7 @@ a:hover { } a:active { - color: white; + color: brown; } ---fcc-editable-region-- ``` 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 index 133e468755..b821fff97d 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f45b715301bbf667badc04a +id: 5f46e270702a8456a664f0df title: Part 86 challengeType: 0 dashedName: part-86 @@ -7,16 +7,22 @@ dashedName: part-86 # --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. +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-- -Test 1 +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-- @@ -41,12 +47,12 @@ Test 1 <hr> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -88,7 +94,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); font-family: sans-serif; padding: 20px; } @@ -96,6 +102,7 @@ body { --fcc-editable-region-- h1 { font-size: 40px; + margin-top: 0; } --fcc-editable-region-- 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 index 839d731149..a13a886bd4 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f46e270702a8456a664f0df +id: 5f46e36e745ead58487aabf2 title: Part 87 challengeType: 0 dashedName: part-87 @@ -7,14 +7,31 @@ dashedName: part-87 # --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`. +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-- -Test 1 +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-- @@ -39,12 +56,12 @@ Test 1 <hr> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -86,17 +103,16 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + 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; + margin-bottom: 15px; } ---fcc-editable-region-- h2 { font-size: 30px; @@ -156,6 +172,10 @@ footer { font-size: 14px; } +--fcc-editable-region-- + +--fcc-editable-region-- + a { color: black; } 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 index 95d89e998f..5698a4cd35 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f46e36e745ead58487aabf2 +id: 5f46e7a4750dd05b5a673920 title: Part 88 challengeType: 0 dashedName: part-88 @@ -7,16 +7,26 @@ dashedName: part-88 # --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. +Now apply the `address` class to the `p` element containing the address. # --hints-- -Test 1 +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-- @@ -41,12 +51,12 @@ Test 1 <hr> <main> <section> - <h2>Coffees</h2> + <h2>Coffee</h2> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -75,12 +85,14 @@ Test 1 </section> </main> <hr class="bottom-line"> +--fcc-editable-region-- <footer> <p> <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a> </p> <p>123 Free Code Camp Drive</p> </footer> +--fcc-editable-region-- </div> </body> <html> @@ -88,7 +100,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); font-family: sans-serif; padding: 20px; } @@ -157,9 +169,9 @@ footer { font-size: 14px; } ---fcc-editable-region-- - ---fcc-editable-region-- +.address { + margin-bottom: 5px; +} a { color: black; @@ -177,4 +189,3 @@ 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 index b4825ea3ea..3625af0236 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f46e7a4750dd05b5a673920 +id: 5f46e8284aae155c83015dee title: Part 89 challengeType: 0 dashedName: part-89 @@ -7,14 +7,28 @@ dashedName: part-89 # --description-- -Now apply the `address` class to the `p` element containing the address. +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-- -Test 1 +You should have an `<img>` 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-- @@ -39,12 +53,14 @@ Test 1 <hr> <main> <section> - <h2>Coffees</h2> +--fcc-editable-region-- + <h2>Coffee</h2> +--fcc-editable-region-- <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -73,14 +89,12 @@ Test 1 </section> </main> <hr class="bottom-line"> ---fcc-editable-region-- <footer> <p> <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a> </p> - <p>123 Free Code Camp Drive</p> + <p class="address">123 Free Code Camp Drive</p> </footer> ---fcc-editable-region-- </div> </body> <html> @@ -88,7 +102,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); font-family: sans-serif; padding: 20px; } 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 index 8a570ad8e1..7cfe542ac6 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f46e8284aae155c83015dee +id: 5f475bb508746c16c9431d42 title: Part 90 challengeType: 0 dashedName: part-90 @@ -7,16 +7,54 @@ dashedName: part-90 # --description-- -The menu looks good, but other than the coffee beans background image, it is mainly just text. +The image you added is not centered horizontally like the `Coffee` heading above it. `img` elements are "like" inline elements. -Under the `Coffees` heading, add an image using the url `https://tinyurl.com/cafe-coffee-fcc`. Give the image an `alt` value of `coffee icon`. +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-- -Test 1 +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-- @@ -41,14 +79,13 @@ Test 1 <hr> <main> <section> ---fcc-editable-region-- - <h2>Coffees</h2> ---fcc-editable-region-- + <h2>Coffee</h2> + <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -90,7 +127,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); font-family: sans-serif; padding: 20px; } @@ -122,6 +159,10 @@ h1, h2, p { max-width: 500px; } +--fcc-editable-region-- + +--fcc-editable-region-- + hr { height: 2px; background-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 index 80f412b9ea..0a2427ae65 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f475bb508746c16c9431d42 +id: 5f475e1c7f71a61d913836c6 title: Part 91 challengeType: 0 dashedName: part-91 @@ -7,16 +7,26 @@ dashedName: part-91 # --description-- -The image you added is not centered horizontally like the `Coffees` 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. +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-- -Test 1 +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-- @@ -41,13 +51,13 @@ Test 1 <hr> <main> <section> - <h2>Coffees</h2> - <img src="https://tinyurl.com/cafe-coffee-fcc" alt="coffee icon"/> + <h2>Coffee</h2> + <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -60,7 +70,9 @@ Test 1 </article> </section> <section> +--fcc-editable-region-- <h2>Desserts</h2> +--fcc-editable-region-- <article class="item"> <p class="dessert">Donut</p><p class="price">1.50</p> </article> @@ -89,7 +101,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); font-family: sans-serif; padding: 20px; } @@ -121,9 +133,11 @@ h1, h2, p { max-width: 500px; } ---fcc-editable-region-- - ---fcc-editable-region-- +img { + display: block; + margin-left: auto; + margin-right: auto; +} hr { height: 2px; @@ -153,7 +167,7 @@ h1, h2 { .price { text-align: right; - width: 25% + width: 25%; } /* FOOTER */ 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 index 71861e519f..4ceab13e6a 100644 --- 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 @@ -1,5 +1,5 @@ --- -id: 5f475e1c7f71a61d913836c6 +id: 5f47fe7e31980053a8d4403b title: Part 92 challengeType: 0 dashedName: part-92 @@ -7,14 +7,24 @@ dashedName: part-92 # --description-- -Add one last image under the `Desserts` heading using the url `https://tinyurl.com/cafe-pie-fcc`. Give the image an `alt` value of `pie icon`. +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-- -Test 1 +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-- @@ -39,13 +49,13 @@ Test 1 <hr> <main> <section> - <h2>Coffees</h2> - <img src="https://tinyurl.com/cafe-coffee-fcc" alt="coffee icon"/> + <h2>Coffee</h2> + <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/> <article class="item"> <p class="flavor">French Vanilla</p><p class="price">3.00</p> </article> <article class="item"> - <p class="flavor">Carmel Macchiato</p><p class="price">3.75</p> + <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p> </article> <article class="item"> <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p> @@ -58,9 +68,8 @@ Test 1 </article> </section> <section> ---fcc-editable-region-- <h2>Desserts</h2> ---fcc-editable-region-- + <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg" alt="pie icon"/> <article class="item"> <p class="dessert">Donut</p><p class="price">1.50</p> </article> @@ -89,7 +98,7 @@ Test 1 ```css body { - background-image: url(https://tinyurl.com/coffee-beans-fcc); + background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); font-family: sans-serif; padding: 20px; } @@ -121,11 +130,13 @@ h1, h2, p { max-width: 500px; } +--fcc-editable-region-- img { display: block; margin-left: auto; margin-right: auto; } +--fcc-editable-region-- hr { height: 2px; @@ -185,3 +196,168 @@ a:active { } ``` +# --solutions-- + +```html +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <title>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/part-093.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-093.md deleted file mode 100644 index 6c206949d2..0000000000 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-093.md +++ /dev/null @@ -1,357 +0,0 @@ ---- -id: 5f47fe7e31980053a8d4403b -title: Part 93 -challengeType: 0 -dashedName: part-93 ---- - -# --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 margin of `25px` in the `img` type selector. - -# --hints-- - -Test 1 - -```js - -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - Camper Cafe Menu - - - -
-
-

CAMPER CAFE

-

Est. 2020

-
-
-
-
-

Coffees

- coffee icon -
-

French Vanilla

3.00

-
-
-

Carmel 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://tinyurl.com/coffee-beans-fcc); - 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

-
-
-
-
-

Coffees

- coffee icon -
-

French Vanilla

3.00

-
-
-

Carmel 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://tinyurl.com/coffee-beans-fcc); - 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; -} -```