1 files changed, 10 insertions, 7 deletions
diff --git a/js/seed/src/view.js b/js/seed/src/view.js
index cdf1d08..5feef6e 100644
--- a/js/seed/src/view.js
+++ b/js/seed/src/view.js
@@ -22,26 +22,29 @@
  */
 export function view(state) {
   return `
-    <main role="main">
+    <h1>PokéDex</h1>
+    <container>
       <form id="search-form" autocomplete="off">
-        <label for="pokemon-query">Pokémon Name</label>
+        <label for="pokemon-query">Pokémon Name (or number)</label>
         <input id="pokemon-query" type="text" value="${escape(state.query)}" placeholder="e.g. pikachu" aria-label="Pokémon Name" required />
         <button type="submit" ${state.loading ? 'disabled' : ''}>${state.loading ? 'Loading...' : 'Search'}</button>
       </form>
       ${state.error ? `<div class="error" role="alert" tabindex="-1">${escape(state.error)}</div>` : ''}
       ${state.pokemon ? renderResult(state.pokemon) : ''}
-    </main>
+    </container>
   `;
 }
 
 function renderResult(pokemon) {
   return `
     <div class="result">
+      <h2>${capitalize(pokemon.name)} (#${pokemon.id})</h2>
       <img class="pokemon-sprite" src="${pokemon.sprites.front_default}" alt="${escape(pokemon.name)} sprite" />
-      <div><strong>${capitalize(pokemon.name)}</strong> (#${pokemon.id})</div>
-      <div>Type: ${pokemon.types.map(t => escape(t.type.name)).join(', ')}</div>
-      <div>Height: ${pokemon.height / 10} m</div>
-      <div>Weight: ${pokemon.weight / 10} kg</div>
+      <ul>
+        <li>Type: <b>${pokemon.types.map(t => capitalize(escape(t.type.name))).join(', ')}</b></li>
+        <li>Height: <b>${pokemon.height / 10} m</b></li>
+        <li>Weight: <b>${pokemon.weight / 10} kg</b></li>
+      </ul>
     </div>
   `;
 }