49 lines
1.3 KiB
Handlebars
49 lines
1.3 KiB
Handlebars
<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> |