Looking for guidance in Javascript as a beginner. For an assignment, I need to create two separate JS files and use them to display data dynamically on an HTML page. One JS file, named data.js, contains an array of objects representing a product catalog. The other JS file includes a function that is supposed to load these items, generate HTML elements, and display the products on the webpage. However, my code isn't functioning correctly and the products are not being displayed in the desired format. Additionally, it seems like the CSS styles are not being applied within the function as well. To address certain syntax issues, I have commented out some sections of code in the `loadProducts()` function.
// data.js
var catalog = [
{
code: 100,
name: "Learn JS",
desc: "To make your web pages dynamic",
price: 150,
image: "/images/100Tshirt.jpg"
},
{
code:101 ,
name: "T Shirt",
desc: "Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.",
price: 0,
image: "/images/101Tshirt.jpg"
},
{
code:102 ,
name: "T Shirt",
desc: "Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.",
price: 0,
image: "/images/102Tshirt.jpg"
}
// {
// name: "Meowsalot",
// species: "Cat",
// favFoods: ["tuna", "catnip", "celery"],
// birthYear: 2012,
// photo: "https://learnwebcode.github.io/json-example/images/cat-1.jpg"
//
];
// codeboutique.js
function chargerArticles() {
var articles = document.getElementById("content");
for (var i =0; i <= catalog.length; i++) {
var article = document.createElement("div");
article.setAttribute("class", "addClass");
var articleName = document.createElement("h2");
articleName.setAttribute("class", "heading");
articleName.innerText = catalog[i].name;
article.appendChild(articleName);
articles.appendChild(article);
var articleImg = document.createElement("img");
articleImg.setAttribute("class", "imgclass class2 class3");
articleImg.setAttribute("src", catalog[i].image);
article.appendChild(articleImg);
}
}.addClass
{
font-size: 44px;
color:grey;
background-color: blue;
border-style: 2px solid yellow;
}
.heading
{
color: green;
}
.border {
border: 1px solid grey;
}
.pad {
padding: 15px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>
<title>Page Title</title>
<script src="js/data.js"></script>
<script src="js/codeboutique.js"></script>
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
</head>
<body onload="chargerArticles()">
<section id="content">
</section>
</body>
</html>Any assistance would be greatly appreciated. https://i.sstatic.net/NwDYx.png