💎🌷 Checkpoint

./public/style.css:1062301/78
./src/pages/index.hbs:1062301/1064

public/style.css

@@ -138,6 +138,9 @@ body {
 }
 
 /* Styles for our custom color form and its results */
+.color-info {
+  margin-top: -1.5rem;
+}
 .color-form {
   color: #000;
   width: 80%;
@@ -158,4 +161,7 @@ button, input {
   box-sizing: border-box;
   border-radius: 4px;
   padding: 0.5rem 1rem;
+}
+label {
+  font-weight: bold;
 }

src/pages/index.hbs

@@ -55,6 +55,7 @@
           <!-- our default paragraph/message -->
           {{#unless colorError}}
             {{#unless color}}
+            <!-- There are fancier ways to do this, but nesting two "#unless" statements sets up a "if these are both missing..." condition -->
             <p>
               Learn about communication with a server by talking about color.
             </p>
@@ -64,7 +65,12 @@
           <!-- the "what's your favorite color?" form sends a POST to the server, check server.js to see how it works -->
           <form class="color-search" method="post">
               <label for="color">
-                What's your favorite color?<br>
+                <!-- we use the handlebars "#if" statement so the form can adapt to its situation -->
+                {{#if color}}
+                  Try another color?<br>
+                {{else}}
+                  What's your favorite color?<br>
+                {{/if}}
                 <input id="color" name="color" required="required" type="text">
               </label>