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,12 +27,37 @@ 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 v-if="sent">
+
+        <div class="entry"> 
+              Thanks for sharing!
+              Your entry is being added to the cookbook. 
+            </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'/>
@@ -60,6 +87,7 @@ export default {
             <div class="entry"> 
               <button @click="submit" class="submit" :disabled="disabled">Submit</button>
             </div>
+          </div>
         </section>
         
         <!-- <dl>

components/CookbookRecipes.js

@@ -24,7 +24,7 @@ export default {
 
 	template: ` 
 		<div class="cookbook">
-        <section class="recipe" v-for="(recipe, index) in recipes" :style="style(index)" @click="browse()">
+			<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>

style.css

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