The script.js file from Challenge: Build an Advanced Function

	import backpackObjectArray from "./components/data.js";

	const article = document.querySelector("main");

	// map() through the stuff array to make a new stuffItems array.
	const packList = backpackObjectArray.map((item) => {
	  const content = `
		<figure class="backpack__image">
		  <img src=${item.image} alt="" loading="lazy" />
		</figure>
		<h1 class="backpack__name">${item.name}</h1>
		<ul class="backpack__features">
		  <li class="feature backpack__volume">Volume:<span> ${
			item.volume
		  }l</span></li>
		  <li class="feature backpack__color">Color:<span> ${
			item.color
		  }</span></li>
		  <li class="feature backpack__age">Age:<span> ${item.backpackAge()} days old</span></li>
		  <li class="feature backpack__pockets">Number of pockets:<span> ${
			item.pocketNum
		  }</span></li>
		  <li class="feature backpack__strap">Left strap length:<span> ${
			item.strapLength.left
		  } inches</span></li>
		  <li class="feature backpack__strap">Right strap length:<span> ${
			item.strapLength.right
		  } inches</span></li>
		  <li class="feature backpack__lid">Lid status:<span> ${
			item.lidOpen ? "open" : "closed"
		  }</span></li>
		</ul>
	  `;

	  console.log("Item is :", item);
	  console.log("Contents are: ", content);

	  const backpack_div = document.createElement("div");
	  backpack_div.innerHTML = content;
	  return backpack_div;

	});

	packList.forEach((item) => {
	  article.append(item)
	});