Add initial baby-names service

views/baby-names/form.hbs

@@ -0,0 +1,49 @@
+<form action='/baby-names' method='post'>
+  {{#if message}}
+    <div>
+      <i>{{message}}</i>
+    </div>
+  {{/if}}
+  <div>
+    <label for='key'>Your key:</label>
+    <input type='text' name='key' value='{{key}}' required />
+  </div>
+  <div>
+    <h1>{{name}}</h1>
+  </div>
+  <input type='hidden' name='name' value='{{name}}' />
+  <input type='hidden' name='nameindex' value='{{index}}' />
+  <div>
+    <label for='opinion'>How do you feel about this name?</label>
+    <div style='width: 300px;'>
+      <input
+        type='range'
+        id='opinion'
+        name='opinion'
+        min='-2'
+        max='2'
+        step='1'
+        list='opinion-ticks'
+        style='width: 100%;'
+        required
+      />
+      <datalist id='opinion-ticks'>
+        <option value='-2' label='Hate it'></option>
+        <option value='-1' label='Dislike it'></option>
+        <option value='0' label='Neutral'></option>
+        <option value='1' label='Like it'></option>
+        <option value='2' label='Love it'></option>
+      </datalist>
+      <div
+        style='display: flex; justify-content: space-between; font-size: 0.9em; margin-top: 0.2em;'
+      >
+        <span>Hate it</span>
+        <span>Dislike it</span>
+        <span>Neutral</span>
+        <span>Like it</span>
+        <span>Love it</span>
+      </div>
+    </div>
+  </div>
+  <button type='submit'>Submit Opinion</button>
+</form>