tweak docs

website/documents/guides/04-handling-events.md

@@ -7,7 +7,7 @@ Most web applications require some measure of interactivity, where the user inte
 ## DOM Event Props
 You can attach event callbacks to host element directly using event props. These props start with `on`, are all lowercase, and correspond to the event type (`onclick`, `onkeydown`). By combining event props, local variables and `this.refresh()`, you can write interactive components.
 
-```jsx
+```jsx live
 import {renderer} from "@b9g/crank/dom";
 function *Counter() {
   let count = 0;

website/documents/index.md

@@ -272,6 +272,12 @@ async function Definition({word}) {
   // API courtesy https://dictionaryapi.dev
   const res = await fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`);
   const data = await res.json();
+  if (!Array.isArray(data)) {
+    return (
+      <div>No definition found for {word}</div>
+    );
+  }
+
   const {phonetic, meanings} = data[0];
   const {partOfSpeech, definitions} = meanings[0];
   const {definition} = definitions[0];
@@ -298,12 +304,17 @@ function *Dictionary() {
   for ({} of this) {
     yield (
       <>
-        <form action="" method="get" class="form-example" onsubmit={onsubmit}>
+        <form
+          action=""
+          method="get"
+          onsubmit={onsubmit}
+          style="margin-bottom: 15px"
+        >
           <div style="margin-bottom: 15px">
             <label for="name">Define:</label>{" "}
             <input type="text" name="word" id="word" required />
           </div>
-          <div class="form-example">
+          <div>
             <input type="submit" value="Search" />
           </div>
         </form>