alt text on collage

src/css/style.css

@@ -71,6 +71,10 @@ section {
   text-align: center;
 }
 
+section h2,p {
+  text-align: left;
+}
+
 figure {
   display: inline-block;
   width: 10em;

src/index.md

@@ -19,6 +19,6 @@ Antonio](https://utsa.edu).
 * [style guide](/style-guide.html) - _Formatting rules for this site_
 
 <section>
-<img src="favicon.gif" style="width: 10em;"> <br>
+<img src="favicon.gif" style="width: 10em;" alt="Lain animation"> <br>
 <em>If you're not remembered, then you never existed</em>
 </section>

src/js/components.js

@@ -1,23 +1,23 @@
 class JsonData extends HTMLElement {
-  static observedAttributes = ["src", "show"];
+  static observedAttributes = ["src", "show", "alt"];
   constructor() {
     super();
   }
 
-  static grid(json) {
+  static grid(json, alt) {
     let html = "";
     for (const headerName in json) {
       html = html.concat(`
+        <section>
         <h2>${headerName}</h2>
         <p>${json[headerName].desc || ""}</p>
-        <section>
         `);
       let entries = json[headerName].items || [];
       for (let i = 0; i < entries.length; i++) {
         let entry = entries[i];
         html = html.concat(
         `<figure> 
-          <img src="${entry.url}"> 
+          <img src="${entry.url}" alt="${alt || ""}"> 
           <figcaption> 
             <b>${entry.main}</b><br>
             <em>${entry.sub}</em>
@@ -62,7 +62,7 @@ class JsonData extends HTMLElement {
     const json = await response.json();
     switch(this.show) {
       case "grid":
-        this.innerHTML = JsonData.grid(json);
+        this.innerHTML = JsonData.grid(json, this.alt);
         break;
       case "list":
         this.innerHTML = JsonData.list(json);
@@ -73,10 +73,16 @@ class JsonData extends HTMLElement {
   }
 
   async attributeChangedCallback(name, oldValue, newValue) {
-    if (name == "src") {
-      this.src = newValue;
-    } else if (name == "show") {
-      this.show = newValue;
+    switch (name) {
+      case "src":
+        this.src = newValue;
+        break;
+      case "show":
+        this.show = newValue;
+        break;
+      case "alt":
+        this.alt = newValue;
+        break;
     }
   }
 }

src/music/index.md

@@ -3,4 +3,4 @@ Music is a huge passion of mine. I prefer listening to albums in full from
 start to finish in order. My favorite albums are usually experimental, unique,
 or have a particular theme they explore
 
-<json-data src="/music/albums.json" show="grid"></json-data>
+<json-data src="/music/albums.json" show="grid" alt="Album cover"></json-data>