form ux

components/CookbookForm.js

@@ -9,6 +9,8 @@ export default {
 		const logs = ref([""]);
 		const who = ref("");
 
+		const sent = ref(false);
+
 		const disabled = computed(() => {
 			return [title, description, nature, logs, who].some((input) => input.value == "");
 		});
@@ -25,46 +27,72 @@ export default {
 					who: who.value,
 				}),
 			});
+			sent.value = true;
+			title.value = "";
+			description.value = "";
+			nature.value = "";
+			logs.value = [""];
+			who.value = "";
 		};
 
-		return { title, description, nature, logs, who, disabled, submit };
+		return { title, description, nature, logs, who, disabled, submit, sent };
 	},
 	template: `
         <section class='recipe'>
-          <div class="entry"> 
-            <label for="title">Title</label>
-            <input type="text" v-model='title'/>
-          </div>
 
-          <div class="entry"> 
-            <label for="description">Description</label>
-            <textarea v-model="description"></textarea>
-          </div>
 
-          <div class="entry"> 
-            <label for="nature">Nature of the input</label>
-            <input type="text" v-model="nature" />
-          </div>
+        <div v-if="sent">
 
-          <div class="entry"> 
-            <label for="log">Process Log</label>
-            <textarea v-model="logs[index]" v-for="(log, index) in logs" :key="index" :placeholder="index + 1"></textarea>
-            <button class="add" @click="logs.push('')">+</button>
-          </div>
+        <div class="entry"> 
+              Thanks for sharing!
+              Your entry is being added to the cookbook. 
+            </div>
 
-          <div class="entry"> 
-            <label for="who">Who</label>
-            <input type="text" v-model="who" />
-          </div>
+            <div class="entry"> 
+              <button @click="sent = false">Send another</button>
+            </div>
+
+            
+
+
+
+        </div>
+        <div v-else>
+            <div class="entry"> 
+              <label for="title">Title</label>
+              <input type="text" v-model='title'/>
+            </div>
+            
+            <div class="entry"> 
+              <label for="description">Description</label>
+              <textarea v-model="description"></textarea>
+            </div>
+            
+            <div class="entry"> 
+              <label for="nature">Nature of the input</label>
+              <input type="text" v-model="nature" />
+            </div>
+            
+            <div class="entry"> 
+              <label for="log">Process Log</label>
+              <textarea v-model="logs[index]" v-for="(log, index) in logs" :key="index" :placeholder="index + 1"></textarea>
+              <button class="add" @click="logs.push('')">+</button>
+            </div>
+            
+            <div class="entry"> 
+              <label for="who">Who</label>
+              <input type="text" v-model="who" />
+            </div>
             
-          <div class="entry"> 
-            <button @click="submit" class="submit" :disabled="disabled">Submit</button>
+            <div class="entry"> 
+              <button @click="submit" class="submit" :disabled="disabled">Submit</button>
+            </div>
           </div>
         </section>
         
-    <!-- <dl>
-      <dt>Title</dt>
-      <dd>{{title}}</dd>     
+        <!-- <dl>
+          <dt>Title</dt>
+          <dd>{{title}}</dd>     
 
       <dt>Description</dt>
       <dd>{{description}}</dd>

components/CookbookRecipes.js

@@ -23,16 +23,16 @@ export default {
 	},
 
 	template: ` 
-    <div class="cookbook">
-        <section class="recipe" v-for="(recipe, index) in recipes" :style="style(index)" @click="browse()">
-			<h3>{{recipe.title}}</h3>
-			<p>{{recipe.description}}</p>
-			<div>{{recipe.nature}}</div>
-			<ol>
-				<li v-for="log in recipe.logs">{{log}}</li>
-			</ol>
-			<p>{{recipe.who}}</p>
-		</section>
-    </div>
-    `,
+		<div class="cookbook">
+			<section class="recipe" v-for="(recipe, index) in recipes"  :style="style(index)" @click="browse()" :key="recipe">
+				<h3>{{recipe.title}}</h3>
+				<p>{{recipe.description}}</p>
+				<div>{{recipe.nature}}</div>
+				<ol>
+					<li v-for="log in recipe.logs">{{log}}</li>
+				</ol>
+				<p>{{recipe.who}}</p>
+			</section>
+		</div>
+		`,
 };

style.css

@@ -106,4 +106,5 @@ label {
 	left: 0;
 	background-color: #e6b0aa;
 	cursor: pointer;
+	user-select: none;
 }