fix(curriculum): correct editable region cafe-menu (#65364)

2026-05-28 18:26:54 +00:00 · 2026-01-23 03:57:48 -05:00
parent 9b09a1cbfc
commit b1836efbce
58 changed files with 145 additions and 104 deletions
@@ -49,9 +49,10 @@ assert.equal(main.parentElement.tagName, 'BODY');
    <meta charset="utf-8" />
    <title>Cafe Menu</title>
  </head>
--fcc-editable-region--
  <body>
-  </body>
 --fcc-editable-region--
+    
+--fcc-editable-region--
+  </body>
 </html>
 ```
@@ -53,10 +53,11 @@ assert.match(code, /<h1>CAMPER CAFE<\/h1>/);
    <title>Cafe Menu</title>
  </head>
  <body>
--fcc-editable-region--
    <main>
-    </main>
 --fcc-editable-region--
+      
+--fcc-editable-region--
+    </main>
  </body>
 </html>
 ```
@@ -54,8 +54,9 @@ assert.equal(document.querySelector("p")?.innerText.trim(), "Est. 2020");
  </head>
  <body>
    <main>
--fcc-editable-region--
      <h1>CAMPER CAFE</h1>
+--fcc-editable-region--
+      
 --fcc-editable-region--
    </main>
  </body>
@@ -50,10 +50,11 @@ assert.equal(h1TextAlign, 'center');
  <head>
    <meta charset="utf-8" />
    <title>Cafe Menu</title>
--fcc-editable-region--
    <style>
-    </style>
 --fcc-editable-region--
+      
+--fcc-editable-region--
+    </style>
  </head>
  <body>
    <main>
@@ -36,10 +36,12 @@ assert.match(code, /<head\s*>[\w\W\s]*<style\s*>[\w\W\s]*<\/style\s*>[\w\W\s]*<\
 ```html
 <!DOCTYPE html>
 <html lang="en">
--fcc-editable-region--
  <head>
    <meta charset="utf-8" />
    <title>Cafe Menu</title>
+--fcc-editable-region--
+    
+--fcc-editable-region--
  </head>
  <body>
    <main>
@@ -50,6 +52,5 @@ assert.match(code, /<head\s*>[\w\W\s]*<style\s*>[\w\W\s]*<\/style\s*>[\w\W\s]*<\
      </section>
    </main>
  </body>
--fcc-editable-region--
 </html>
 ```
@@ -58,10 +58,11 @@ assert.equal(h2?.innerText.trim(), 'Coffee');
    <main>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
--fcc-editable-region--
      <section>
-      </section>
 --fcc-editable-region--
+        
+--fcc-editable-region--
+      </section>
    </main>
  </body>
 </html>
@@ -49,12 +49,13 @@ assert.strictEqual(section.parentElement, main);
    <title>Cafe Menu</title>
  </head>
  <body>
--fcc-editable-region--
    <main>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
-    </main>
 --fcc-editable-region--
+      
+--fcc-editable-region--
+    </main>
  </body>
 </html>
 ```
@@ -43,8 +43,8 @@ assert.equal(selectors.length, 1);
  <head>
    <meta charset="utf-8" />
    <title>Cafe Menu</title>
--fcc-editable-region--
    <style>
+--fcc-editable-region--
      h1 {
        text-align: center;
      }
@@ -54,8 +54,8 @@ assert.equal(selectors.length, 1);
      p {
        text-align: center;
      }
-    </style>
 --fcc-editable-region--
+    </style>
  </head>
  <body>
    <main>
@@ -31,17 +31,17 @@ assert.isFalse(editableContents.includes('text-align'));
 ```html
 <!DOCTYPE html>
 <html lang="en">
--fcc-editable-region--
  <head>
    <meta charset="utf-8" />
    <title>Cafe Menu</title>
+--fcc-editable-region--
    <style>
      h1, h2, p {
        text-align: center;
      }
    </style>
-  </head>
 --fcc-editable-region--
+  </head>
  <body>
    <main>
      <h1>CAMPER CAFE</h1>
@@ -69,13 +69,14 @@ assert.equal(pTextAlign, 'center');
  <head>
    <meta charset="utf-8" />
    <title>Cafe Menu</title>
--fcc-editable-region--
    <style>
      h1 {
        text-align: center;
      }
-    </style>
 --fcc-editable-region--
+      
+--fcc-editable-region--
+    </style>
  </head>
  <body>
    <main>
@@ -69,12 +69,13 @@ assert.strictEqual(linkHrefValue, 'styles.css');
 ```html
 <!DOCTYPE html>
 <html lang="en">
--fcc-editable-region--
  <head>
    <meta charset="utf-8" />
    <title>Cafe Menu</title>
-  </head>
 --fcc-editable-region--
+    
+--fcc-editable-region--
+  </head>
  <body>
    <main>
      <h1>CAMPER CAFE</h1>
@@ -58,11 +58,12 @@ assert.equal(bodyBackground, 'brown');
 ```

 ```css
+--fcc-editable-region--
+
 --fcc-editable-region--
 h1, h2, p {
  text-align: center;
 }
--fcc-editable-region--

 ```

@@ -46,13 +46,14 @@ assert.exists(meta[0]?.outerHTML?.match(/content=('|")width=device-width, initia
 ```html
 <!DOCTYPE html>
 <html lang="en">
--fcc-editable-region--
  <head>
    <meta charset="utf-8" />
+--fcc-editable-region--
+    
+--fcc-editable-region--
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>
--fcc-editable-region--
  <body>
    <main>
      <h1>CAMPER CAFE</h1>
@@ -51,11 +51,11 @@ assert.equal(bodyBackground, 'burlywood');
 ```

 ```css
--fcc-editable-region--
 body {
-  background-color: brown;
-}
 --fcc-editable-region--
+  background-color: brown;
+--fcc-editable-region--
+}
 h1, h2, p {
  text-align: center;
 }
@@ -64,11 +64,12 @@ body {
 h1, h2, p {
  text-align: center;
 }
--fcc-editable-region--
+
 #menu {
+--fcc-editable-region--
  width: 300px;
+--fcc-editable-region--
  background-color: burlywood;
 }
--fcc-editable-region--
 ```

@@ -75,11 +75,11 @@ h1, h2, p {

 --fcc-editable-region--
 #menu {
+--fcc-editable-region--
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
 }
--fcc-editable-region--
 ```

@@ -72,7 +72,6 @@ assert.equal(divWidth, '300px');
 ```

 ```css
--fcc-editable-region--
 body {
  background-color: burlywood;
 }
@@ -80,6 +79,9 @@ body {
 h1, h2, p {
  text-align: center;
 }
+
+--fcc-editable-region--
+
 --fcc-editable-region--

 ```
@@ -63,10 +63,11 @@ h1, h2, p {
  text-align: center;
 }

--fcc-editable-region--
 #menu {
  width: 300px;
-}
 --fcc-editable-region--
+  
+--fcc-editable-region--
+}
 ```

@@ -72,10 +72,11 @@ h1, h2, p {
  text-align: center;
 }

--fcc-editable-region--
 #menu {
  width: 80%;
  background-color: burlywood;
-}
 --fcc-editable-region--
+  
+--fcc-editable-region--
+}
 ```
@@ -56,8 +56,8 @@ assert.lengthOf(document.querySelector('body > div#menu > main')?.children, 3);
    <title>Cafe Menu</title>
    <link href="styles.css" rel="stylesheet"/>
  </head>
--fcc-editable-region--
  <body>
+--fcc-editable-region--
    <main>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
@@ -65,8 +65,8 @@ assert.lengthOf(document.querySelector('body > div#menu > main')?.children, 3);
        <h2>Coffee</h2>
      </section>
    </main>
-  </body>
 --fcc-editable-region--
+  </body>
 </html>
 ```

@@ -57,8 +57,9 @@ assert.equal(article?.previousElementSibling?.tagName, 'H2');
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
        <section>
--fcc-editable-region--
          <h2>Coffee</h2>
+--fcc-editable-region--
+          
 --fcc-editable-region--
        </section>
      </main>
@@ -68,13 +68,13 @@ assert.equal(bodyBackground, `url("https://cdn.freecodecamp.org/curriculum/css-c
 ```

 ```css
--fcc-editable-region--
 body {
+--fcc-editable-region--
  /*
  background-color: burlywood;
  */
-}
 --fcc-editable-region--
+}

 h1, h2, p {
  text-align: center;
@@ -57,8 +57,8 @@ assert.equal(el?.innerText.trim(), "French Vanilla");
          <article>
 --fcc-editable-region--
            <p>French Vanilla</p>
-            <p>3.00</p>
 --fcc-editable-region--
+            <p>3.00</p>
          </article>
          <article>
            <p>Caramel Macchiato</p>
@@ -97,11 +97,12 @@ assert.match(children?.[1]?.innerText.trim(), /4\.50/i);
        <p>Est. 2020</p>
        <section>
          <h2>Coffee</h2>
--fcc-editable-region--
          <article>
            <p>French Vanilla</p>
            <p>3.00</p>
          </article>
+--fcc-editable-region--
+          
 --fcc-editable-region--
        </section>
      </main>
@@ -65,10 +65,11 @@ assert.match(secondP?.innerText.trim(), /3\.00/i);
        <p>Est. 2020</p>
        <section>
          <h2>Coffee</h2>
--fcc-editable-region--
          <article>
-          </article>
 --fcc-editable-region--
+            
+--fcc-editable-region--
+          </article>
        </section>
      </main>
    </div>
@@ -54,13 +54,13 @@ assert.equal(document.querySelector('article')?.className, 'item');
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
        <section>
--fcc-editable-region--
          <h2>Coffee</h2>
+--fcc-editable-region--
          <article>
+--fcc-editable-region--
            <p class="flavor">French Vanilla</p>
            <p class="price">3.00</p>
          </article>
--fcc-editable-region--
          <article>
            <p>Caramel Macchiato</p>
            <p>3.75</p>
@@ -55,7 +55,6 @@ assert.lengthOf(sections,2);
      <main>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
--fcc-editable-region--
        <section>
          <h2>Coffee</h2>
          <article class="item">
@@ -74,6 +73,8 @@ assert.lengthOf(sections,2);
            <p class="flavor">Mocha</p><p class="price">4.50</p>
          </article>
        </section>
+--fcc-editable-region--
+        
 --fcc-editable-region--
      </main>
    </div>
@@ -72,10 +72,12 @@ assert.strictEqual(hrElement?.nextElementSibling?.tagName, 'SECTION');
  </head>
  <body>
    <div class="menu">
--fcc-editable-region--
      <main>
        <h1>CAMPER CAFE</h1>
        <p class="established">Est. 2020</p>
+--fcc-editable-region--
+        
+--fcc-editable-region--
        <section>
          <h2>Coffee</h2>
          <article class="item">
@@ -110,7 +112,6 @@ assert.strictEqual(hrElement?.nextElementSibling?.tagName, 'SECTION');
          </article>
        </section>
      </main>
--fcc-editable-region--
      <footer>
        <address>
          <p>
@@ -93,15 +93,16 @@ h1, h2, p {
  text-align: center;
 }

--fcc-editable-region--
 .menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
-}
 --fcc-editable-region--
+  
+--fcc-editable-region--
+}

 .item p {
  display: inline-block;
@@ -115,18 +115,18 @@ h1, h2, p {
  text-align: center;
 }

--fcc-editable-region--
 .menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
+--fcc-editable-region--
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
-}
 --fcc-editable-region--
+}

 .item p {
  display: inline-block;
@@ -114,7 +114,6 @@ h1, h2, p {
  text-align: center;
 }

--fcc-editable-region--
 .menu {
  width: 80%;
  background-color: burlywood;
@@ -122,8 +121,10 @@ h1, h2, p {
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
-}
 --fcc-editable-region--
+  
+--fcc-editable-region--
+}

 .item p {
  display: inline-block;
@@ -84,11 +84,12 @@ assert.equal(bodyFontFamily, 'sans-serif');
 ```

 ```css
--fcc-editable-region--
 body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
-}
 --fcc-editable-region--
+  
+--fcc-editable-region--
+}

 h1, h2, p {
  text-align: center;
@@ -51,7 +51,6 @@ assert.strictEqual(footer?.previousElementSibling?.tagName, 'MAIN');
  </head>
  <body>
    <div class="menu">
--fcc-editable-region--
      <main>
        <h1>CAMPER CAFE</h1>
        <p class="established">Est. 2020</p>
@@ -89,6 +88,8 @@ assert.strictEqual(footer?.previousElementSibling?.tagName, 'MAIN');
          </article>
        </section>
      </main>
+--fcc-editable-region--
+      
 --fcc-editable-region--
    </div>
  </body>
@@ -66,8 +66,9 @@ assert.strictEqual(document.querySelectorAll('section')?.[1]?.children?.[1]?.cla
          </article>
        </section>
        <section>
--fcc-editable-region--
          <h2>Desserts</h2>
+--fcc-editable-region--
+          
 --fcc-editable-region--
        </section>
      </main>
@@ -48,8 +48,8 @@ assert.equal(establishedFont, "italic");
  <body>
    <div class="menu">
      <main>
--fcc-editable-region--
        <h1>CAMPER CAFE</h1>
+--fcc-editable-region--
        <p>Est. 2020</p>
 --fcc-editable-region--
        <section>
@@ -109,13 +109,13 @@ assert.equal(document.querySelector("footer > address > p > a")?.target, "_blank
          </article>
        </section>
      </main>
--fcc-editable-region--
      <footer>
        <address>
+--fcc-editable-region--
          
+--fcc-editable-region--
        </address>
      </footer>
--fcc-editable-region--
    </div>
  </body>
 </html>
@@ -81,13 +81,14 @@ assert.match(lastChild?.textContent, /123 Free Code Camp Drive/i);
        </section>
      </main>
      <footer>
--fcc-editable-region--
        <address>
          <p>
            <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
          </p>
-        </address>
 --fcc-editable-region--
+          
+--fcc-editable-region--
+        </address>
      </footer>
    </div>
  </body>
@@ -65,10 +65,11 @@ assert.match(document.querySelectorAll('h2')?.[1]?.innerText, /Desserts/i);
            <p class="flavor">Mocha</p><p class="price">4.50</p>
          </article>
        </section>
--fcc-editable-region--
        <section>
-        </section>
 --fcc-editable-region--
+          
+--fcc-editable-region--
+        </section>
      </main>
    </div>
  </body>
@@ -96,11 +96,11 @@ h1, h2, p {
  max-width: 500px;
 }

--fcc-editable-region--
 h1, h2 {
-  font-family: Impact;
-}
 --fcc-editable-region--
+  font-family: Impact;
+--fcc-editable-region--
+}

 .item p {
  display: inline-block;
@@ -107,14 +107,15 @@ h1, h2, p {
  text-align: center;
 }

--fcc-editable-region--
 .menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
-}
 --fcc-editable-region--
+  
+--fcc-editable-region--
+}

 .item p {
  display: inline-block;
@@ -122,11 +122,12 @@ h1, h2, p {
  max-width: 500px;
 }

--fcc-editable-region--
 hr {
  height: 3px;
-}
 --fcc-editable-region--
+  
+--fcc-editable-region--
+}

 h1, h2 {
  font-family: Impact, serif;
@@ -124,12 +124,13 @@ h1, h2, p {
  max-width: 500px;
 }

--fcc-editable-region--
 hr {
  height: 3px;
  background-color: brown;
-}
 --fcc-editable-region--
+  
+--fcc-editable-region--
+}

 h1, h2 {
  font-family: Impact, serif;
@@ -124,13 +124,13 @@ h1, h2, p {
  max-width: 500px;
 }

--fcc-editable-region--
 hr {
+--fcc-editable-region--
  height: 3px;
+--fcc-editable-region--
  background-color: brown;
  border-color: brown;
 }
--fcc-editable-region--

 h1, h2 {
  font-family: Impact, serif;
@@ -39,7 +39,6 @@ assert.equal(document.querySelectorAll('hr')?.[1]?.nextElementSibling?.tagName,
  </head>
  <body>
    <div class="menu">
--fcc-editable-region--
      <main>
        <h1>CAMPER CAFE</h1>
        <p class="established">Est. 2020</p>
@@ -78,6 +77,9 @@ assert.equal(document.querySelectorAll('hr')?.[1]?.nextElementSibling?.tagName,
          </article>
        </section>
      </main>
+--fcc-editable-region--
+      
+--fcc-editable-region--
      <footer>
        <address>
          <p>
@@ -86,7 +88,6 @@ assert.equal(document.querySelectorAll('hr')?.[1]?.nextElementSibling?.tagName,
          <p>123 Free Code Camp Drive</p>
        </address>
      </footer>
--fcc-editable-region--
    </div>
  </body>
 </html>
@@ -92,12 +92,13 @@ assert.equal(bodyPadding, '20px');
 ```

 ```css
--fcc-editable-region--
 body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
  font-family: sans-serif;
-}
 --fcc-editable-region--
+  
+--fcc-editable-region--
+}

 h1 {
  font-size: 40px;
@@ -167,14 +167,15 @@ hr {
  border-color: brown;
 }

--fcc-editable-region--
 h1, h2 {
  font-family: Impact, serif;
 }

 .item p {
  display: inline-block;
-
+--fcc-editable-region--
+  
+--fcc-editable-region--
 }

 .flavor, .dessert {
@@ -186,6 +187,5 @@ h1, h2 {
  text-align: right;
  width: 25%
 }
--fcc-editable-region--
 ```

@@ -141,13 +141,14 @@ h1, h2 {
  font-family: Impact, serif;
 }

--fcc-editable-region--
 .item p {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
-}
 --fcc-editable-region--
+  
+--fcc-editable-region--
+}

 .flavor, .dessert {
  text-align: left;
@@ -7,7 +7,7 @@ dashedName: step-81

 # --description--

-To maintain the existing black and brown color theme , change the color for when the link is visited to `black` and use `brown` for when the link is actually clicked.
+To maintain the existing black and brown color theme, change the color for when the link is visited to `black` and use `brown` for when the link is actually clicked.

 # --hints--

@@ -101,11 +101,12 @@ body {
  padding: 20px;
 }

--fcc-editable-region--
 h1 {
  font-size: 40px;
-}
 --fcc-editable-region--
+  
+--fcc-editable-region--
+}

 h2 {
  font-size: 30px;
@@ -99,12 +99,13 @@ body {
  padding: 20px;
 }

--fcc-editable-region--
 h1 {
  font-size: 40px;
  margin-top: 0;
-}
 --fcc-editable-region--
+  
+--fcc-editable-region--
+}

 h2 {
  font-size: 30px;
@@ -83,16 +83,16 @@ assert.match(document.querySelector('.address')?.innerText, /123 Free Code Camp
        </section>
      </main>
      <hr class="bottom-line">
--fcc-editable-region--
      <footer>
        <address>
          <p>
            <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
          </p>
+--fcc-editable-region--
          <p>123 Free Code Camp Drive</p>
+--fcc-editable-region--
        </address>
      </footer>
--fcc-editable-region--
    </div>
  </body>
 </html>
@@ -60,8 +60,9 @@ assert.match(imageAltValue, /coffee icon/i);
        <p class="established">Est. 2020</p>
        <hr>
        <section>
--fcc-editable-region--
          <h2>Coffee</h2>
+--fcc-editable-region--
+          
 --fcc-editable-region--
          <article class="item">
            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
@@ -70,8 +70,9 @@ assert.match(lastImage?.alt, /pie icon/i);
          </article>
        </section>
        <section>
--fcc-editable-region--
          <h2>Desserts</h2>
+--fcc-editable-region--
+          
 --fcc-editable-region--
          <article class="item">
            <p class="dessert">Donut</p><p class="price">1.50</p>
@@ -132,13 +132,14 @@ h1, h2, p {
  max-width: 500px;
 }

--fcc-editable-region--
 img {
  display: block;
  margin-left: auto;
  margin-right: auto;
-}
 --fcc-editable-region--
+  
+--fcc-editable-region--
+}

 hr {
  height: 2px;
@@ -79,10 +79,11 @@ assert.match(paragraphs?.[1]?.innerText.trim(), /1\.50/i);
        </section>
        <section>
          <h2>Desserts</h2>
--fcc-editable-region--
          <article class="item">
-          </article>
 --fcc-editable-region--
+            
+--fcc-editable-region--
+          </article>
        </section>
      </main>
    </div>
@@ -113,10 +113,11 @@ assert.notMatch(code, /<\/p>\s+<p/);
        </section>
        <section>
          <h2>Desserts</h2>
--fcc-editable-region--
          <article class="item">
            <p class="dessert">Donut</p><p class="price">1.50</p>
          </article>
+--fcc-editable-region--
+          
 --fcc-editable-region--
        </section>
      </main>
@@ -90,10 +90,10 @@ h1, h2, p {

 --fcc-editable-region--
 .flavor {
+--fcc-editable-region--
  text-align: left;
  width: 75%;
 }
--fcc-editable-region--

 .price {
  text-align: right;
@@ -69,11 +69,11 @@ assert.isNotNull(document.querySelector('footer > address'));
          </article>
        </section>
      </main>
--fcc-editable-region--
      <footer>
-        
-      </footer>
 --fcc-editable-region--
+        
+--fcc-editable-region--
+      </footer>
    </div>
  </body>
 </html>