[resize-observer-1] Improve example code (w3c#4774)

* Fix spelling
* Reword comment
* Replace var with let
* Code formatting (semicolons, whitespace)

Author: chrisn

resize-observer-1/Overview.bs

@@ -87,15 +87,15 @@ ResizeObserver's notifications can be used to respond to changes in {{Element}}'
 
 <div class="example">
   <pre highlight="html">
-    &lt;canvas id="elipse" style="display:block">&lt;/canvas>
+    &lt;canvas id="ellipse" style="display:block">&lt;/canvas>
     &lt;div id="menu" style="display:block;width:100px">
         &lt;img src="hamburger.jpg" style="width:24px;height:24px">
         &lt;p class="title">menu title&lt;/p>
     &lt;/div>
   </pre>
   <pre highlight="js">
-    // In response to resize, elipse paints an elipse inside a canvas
-    document.querySelector('#elipse').handleResize = entry => {
+    // In response to resize, paint an ellipse inside a canvas
+    document.querySelector('#ellipse').handleResize = entry => {
         entry.target.width = entry.borderBoxSize[0].inlineSize;
         entry.target.height = entry.borderBoxSize[0].blockSize;
         let rx = Math.floor(entry.target.width / 2);
@@ -105,28 +105,30 @@ ResizeObserver's notifications can be used to respond to changes in {{Element}}'
         ctx.ellipse(rx, ry, rx, ry, 0, 0, 2 * Math.PI);
         ctx.stroke();
     }
+
     // In response to resize, change title visibility depending on width
     document.querySelector('#menu').handleResize = entry => {
-        let title = entry.target.querySelector(".title")
+        let title = entry.target.querySelector('.title');
         if (entry.borderBoxSize[0].inlineSize < 40)
-            title.style.display = "none";
+            title.style.display = 'none';
         else
-            title.style.display = "inline-block";
+            title.style.display = 'inline-block';
     }
 
-    var ro = new ResizeObserver( entries => {
+    let ro = new ResizeObserver(entries => {
       for (let entry of entries) {
         let cs = window.getComputedStyle(entry.target);
         console.log('watching element:', entry.target);
-        console.log(entry.contentRect.top,' is ', cs.paddingTop);
-        console.log(entry.contentRect.left,' is ', cs.paddingLeft);
-        console.log(entry.borderBoxSize[0].inlineSize,' is ', cs.width);
-        console.log(entry.borderBoxSize[0].blockSize,' is ', cs.height);
+        console.log(entry.contentRect.top, ' is ', cs.paddingTop);
+        console.log(entry.contentRect.left, ' is ', cs.paddingLeft);
+        console.log(entry.borderBoxSize[0].inlineSize, ' is ', cs.width);
+        console.log(entry.borderBoxSize[0].blockSize, ' is ', cs.height);
         if (entry.target.handleResize)
             entry.target.handleResize(entry);
       }
     });
-    ro.observe(document.querySelector('#elipse'));
+
+    ro.observe(document.querySelector('#ellipse'));
     ro.observe(document.querySelector('#menu'));
   </pre>
 </div>