fix: Maintain img size regardless of its state via grid + svg was not…

… working bc of lowercase b in viewbox

This was in part due to HTML linter. It only has error level severity, eslint style warn severity support is in the works,
see: htmlhint/HTMLHint#279 (comment)

The other part was XML vs HTML fragment, latter's attributes are always set as lowercase! Which broke the SVG! Reference for fix is found in inline comment in code.

js/main.js

@@ -188,8 +188,13 @@ createRestaurantHTML = restaurant => {
   const imageWrapper = document.createElement('div');
   imageWrapper.className = 'restaurant-img-sizer';
 
-  const svgAspectRatio = document.createElement('svg');
-  svgAspectRatio.setAttribute('viewbox', '0 0 4 3');
+  // Create XML fragment, not HTML, otherwise setAttribute forces lowercase, though viewBox is case-sensitive
+  // @link https://stackoverflow.com/a/28734954/781824
+  const svgAspectRatio = document.createElementNS(
+    'http://www.w3.org/2000/svg',
+    'svg'
+  );
+  svgAspectRatio.setAttribute('viewBox', '0 0 4 3');
   imageWrapper.append(svgAspectRatio);
 
   const image = document.createElement('img');

restaurant.html

@@ -40,7 +40,7 @@ <h2 id="restaurant-name"></h2>
       <!-- maintain aspect ratio of img, credit:
            @link https://codeburst.io/keeping-aspect-ratio-with-html-and-no-padding-tricks-40705656808b -->
       <div class="restaurant-img-sizer">
-        <svg viewbox="0 0 4 3"></svg>
+        <svg viewBox="0 0 4 3"></svg>
         <img alt="" id="restaurant-img">
       </div>
       <div id="restaurant-cuisine"></div>