creating alt tags for images gotten through JSON

This web page has three cards with information above and an image below. I am using JavaScript and HTML to get the information that goes to my web page. My JavaScript gets the information it needs from the following online JSON file. The file doesn’t contain alt text for the image. when I run the Wave evaluation tool, it says I need alt text for my images. The images are provided through the JSON file. How can I create alt text for it? Do I do it in the HTML or in the JavaScript? How would I do that?

Array(3)
0: 
averageRainfall: 14.2
currentPopulation: 501
motto: "This is Fish Heaven."
name: "Fish Haven"
photo: "fishhaven.jpg"
yearFounded: 1864__proto__: Object

1: averageRainfall: 16.65
currentPopulation: 5204
motto: "Home of Napoleon Dynamite."
name: "Preston"
photo: "preston.jpg"
yearFounded: 1866
__proto__: Object

2: 
averageRainfall: 15.75
currentPopulation: 2985
motto: "Historic Oregon Trail Oasis. The Soda is on Us.
"name: "Soda Springs"
photo: "sodasprings.jpg"
yearFounded: 1858
__proto__: Object



MY JAVASCRIPT file js/home.js
//set JSON source
const requestURL = 'https://byui-cit230.github.io/weather/data/towndata.json';

//fetch data
fetch(requestURL)
.then(function (response) {
    return response.json();
})

.then(function (jsonObject){
    const towns = jsonObject['towns'];

//create town input    
    const fishhaven = towns.filter(x => x.name === "Fish Haven");
    const preston = towns.filter(x => x.name === "Preston");
    const sodasprings = towns.filter(x => x.name === "Soda Springs");

    const sort = [];
    sort.push(...fishhaven, ...preston, ...sodasprings)
    console.log(sort);

   // let eachTown = towns.sort('sort');
    sort.forEach(town => {
      let card = document.createElement('div');
      let info = document.createElement('section');
      let name = document.createElement('h2');
      let motto = document.createElement('h3');
      let year = document.createElement('p'); 
      let pop = document.createElement('p');
      let rain = document.createElement('p');
      let photo = document.createElement('img'); 

      //use template literals
      name.textContent = `${town.name}`;
      motto.textContent = `${town.motto}`;
      year.textContent = `Year Founded: ${town.yearFounded}`;
      pop.textContent = `Population: ${town.currentPopulation}`;
      rain.textContent = `Annual Rainfall: ${town.averageRainfall}`;
      photo.src = `images/${town.photo}`;
  
      card.append(info);
      info.append(name);
      info.append(motto);
      info.append(year);
      info.append(pop);  
      info.append(rain);
      card.append(photo);  
      document.querySelector(".towns").appendChild(card);
    });
})



HTML only consists of:
<!DOCTYPE html>
<html lang="en-us">
<title>Whether to Weather Home</title>
  <body>
    <main class="homepage">
        <div class="hero-div">
            <img src="images/prestonhero.jpg" alt="image of mountains near Preston, Idaho.">
        </div>
    </main>
  <footer></footer>
    <script src="js/home.js"></script> 
 </body>
</html>

JavaScript
​x
 
Array(3)
0: 
averageRainfall: 14.2
currentPopulation: 501
motto: "This is Fish Heaven."
name: "Fish Haven"
photo: "fishhaven.jpg"
yearFounded: 1864__proto__: Object
​
1: averageRainfall: 16.65
currentPopulation: 5204
motto: "Home of Napoleon Dynamite."
name: "Preston"
photo: "preston.jpg"
yearFounded: 1866
__proto__: Object
​
2: 
averageRainfall: 15.75
currentPopulation: 2985
motto: "Historic Oregon Trail Oasis. The Soda is on Us.
"name: "Soda Springs"
photo: "sodasprings.jpg"
yearFounded: 1858
__proto__: Object
​
​
​
MY JAVASCRIPT file js/home.js
//set JSON source
const requestURL = 'https://byui-cit230.github.io/weather/data/towndata.json';
​
//fetch data
fetch(requestURL)
.then(function (response) {
    return response.json();
})
​
.then(function (jsonObject){
    const towns = jsonObject['towns'];
​
//create town input    
    const fishhaven = towns.filter(x => x.name === "Fish Haven");
    const preston = towns.filter(x => x.name === "Preston");
    const sodasprings = towns.filter(x => x.name === "Soda Springs");
​
    const sort = [];
    sort.push(...fishhaven, ...preston, ...sodasprings)
    console.log(sort);
​
   // let eachTown = towns.sort('sort');
    sort.forEach(town => {
      let card = document.createElement('div');
      let info = document.createElement('section');
      let name = document.createElement('h2');
      let motto = document.createElement('h3');
      let year = document.createElement('p'); 
      let pop = document.createElement('p');
      let rain = document.createElement('p');
      let photo = document.createElement('img'); 
​
      //use template literals
      name.textContent = `${town.name}`;
      motto.textContent = `${town.motto}`;
      year.textContent = `Year Founded: ${town.yearFounded}`;
      pop.textContent = `Population: ${town.currentPopulation}`;
      rain.textContent = `Annual Rainfall: ${town.averageRainfall}`;
      photo.src = `images/${town.photo}`;
  
      card.append(info);
      info.append(name);
      info.append(motto);
      info.append(year);
      info.append(pop);  
      info.append(rain);
      card.append(photo);  
      document.querySelector(".towns").appendChild(card);
    });
})
​
​
​
HTML only consists of:
<!DOCTYPE html>
<html lang="en-us">
<title>Whether to Weather Home</title>
  <body>
    <main class="homepage">
        <div class="hero-div">
            <img src="images/prestonhero.jpg" alt="image of mountains near Preston, Idaho.">
        </div>
    </main>
  <footer></footer>
    <script src="js/home.js"></script> 
 </body>
</html>
​

Answer

Just add an alt attribute to photo

let photo = document.createElement('img'); 
photo.src = `images/${town.photo}`;

// What you need is the line below
photo.alt = `${town.name}`;

JavaScript
 
let photo = document.createElement('img'); 
photo.src = `images/${town.photo}`;
​
// What you need is the line below
photo.alt = `${town.name}`;
​

Advertisement

Answer