Birthday

components/Birthday.vue

@@ -0,0 +1,3 @@
+<template src="./Birthday.vue.html"></template>
+
+<style scoped src="./Birthday.vue.css"></style>

components/Birthday.vue.css

@@ -0,0 +1,31 @@
+.birthday-form {
+  margin: 40px 40px;
+  min-width: 250px;
+  width: 45%;
+}
+
+input,
+textarea,
+button {
+  font-size: inherit;
+  margin: 15px 0;
+  padding: 12px 20px;
+  width: 100%;
+}
+
+button {
+  background-color: blueviolet;
+  border: 1px solid black;
+  color: white;
+  width: 50%;
+}
+
+.hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

components/Birthday.vue.html

@@ -0,0 +1,15 @@
+<div class="birthday-form">
+    <form netlify netlify-honeypot name="birthday" method="POST" action="/birthday-success">
+        <p class="hidden">
+            <label>
+                Don't fill this out if you're human: <input name="bot-field" />
+            </label>
+        </p>
+        <input type="hidden" name="form-name" value="birthday" />
+        <label for="name">Name</label>
+        <input id="name" type="text" name="name" required />
+        <label for="birthday">birthday</label>
+        <input id="birthday" type="date" name="birthday" required />
+        <button type="submit">Submit</button>
+    </form>
+</div>

components/FeedbackForm.vue

@@ -1,58 +1,3 @@
-<template>
-  <div class="feedback-form">
-    <form
-      netlify
-      netlify-honeypot
-      name="feedback"
-      method="POST"
-      action="/success"
-    >
-      <p class="hidden">
-        <label>
-          Don’t fill this out if you’re human: <input name="bot-field" />
-        </label>
-      </p>
-      <input type="hidden" name="form-name" value="feedback" />
-      <label for="name">Name</label>
-      <input id="name" type="text" name="name" />
-      <label for="email">Email</label>
-      <input id="email" type="email" name="email" required />
-      <label for="feedback">What is your feedback?</label>
-      <textarea id="feedback" wrap="soft" name="feedback" required></textarea>
-      <button type="submit">Submit</button>
-    </form>
-  </div>
-</template>
+<template src="./FeedbackForm.vue.html"></template>
 
-<style scoped>
-.feedback-form {
-  margin: 40px 40px;
-  min-width: 250px;
-  width: 45%;
-}
-input,
-textarea,
-button {
-  font-size: inherit;
-  margin: 15px 0;
-  padding: 12px 20px;
-  width: 100%;
-}
-
-button {
-  background-color: teal;
-  border: 1px solid black;
-  color: white;
-  width: 50%;
-}
-
-.hidden {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-</style>
+<style scoped src="./FeedbackForm.vue.css"></style>

components/FeedbackForm.vue.css

@@ -0,0 +1,31 @@
+.feedback-form {
+  margin: 40px 40px;
+  min-width: 250px;
+  width: 45%;
+}
+
+input,
+textarea,
+button {
+  font-size: inherit;
+  margin: 15px 0;
+  padding: 12px 20px;
+  width: 100%;
+}
+
+button {
+  background-color: teal;
+  border: 1px solid black;
+  color: white;
+  width: 50%;
+}
+
+.hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

components/FeedbackForm.vue.html

@@ -0,0 +1,17 @@
+<div class="feedback-form">
+    <form netlify netlify-honeypot name="feedback" method="POST" action="/feedback-success">
+        <p class="hidden">
+            <label>
+                Don't fill this out if you're human: <input name="bot-field" />
+            </label>
+        </p>
+        <input type="hidden" name="form-name" value="feedback" />
+        <label for="name">Name</label>
+        <input id="name" type="text" name="name" />
+        <label for="email">Email</label>
+        <input id="email" type="email" name="email" required />
+        <label for="feedback">What is your feedback?</label>
+        <textarea id="feedback" wrap="soft" name="feedback" required></textarea>
+        <button type="submit">Submit</button>
+    </form>
+</div>

components/JokeBlock.vue

@@ -9,17 +9,6 @@ export default {
 }
 </script>
 
-<template>
-  <article>
-    <blockquote>
-      <p>{{ joke }}</p>
-    </blockquote>
-  </article>
-</template>
+<template src="./JokeBlock.vue.html"></template>
 
-<style scoped>
-blockquote {
-  border-left: 5px solid #ccc;
-  padding: 0.5rem;
-}
-</style>
+<style scoped src="./JokeBlock.vue.css"></style>

components/JokeBlock.vue.css

@@ -0,0 +1,4 @@
+blockquote {
+  border-left: 5px solid #ccc;
+  padding: 0.5rem;
+}

components/JokeBlock.vue.html

@@ -0,0 +1,5 @@
+<article>
+    <blockquote>
+        <p>{{ joke }}</p>
+    </blockquote>
+</article>