HTML for this Assignment

Use this HTML for this assignment. Copy this HTML and paste it into your HTML file.

Replace "Your name here" (highlighted in yellow below) with your name.

Notice that the above HTML includes an HTML template> tag. This will be the template that you'll use to build some new HTML to add to the page.

Instructions

The program must meet these criteria:

Follows all coding standards of this class, all instructor recommendations, and techniques learned in previous assignments. The program must work per specifications.

This program will use different JSON data file than the previous assignments. The main function should use fetch to read in this JSON file: '/~tpollard/csci212/data/warhol.json'

Then convert the JSON data string into a JavaScript object.

Pass the object to a function that processes the object and builds the new DOM nodes.

Read the contents of the template element from the DOM.

Loop through the object.

Read a record from the object.

Create a clone of the template using cloneNode.

Add the 'title' value from the object to the contents of the h1> tag.

Add the 'url' value from the object to the 'href' attribute of the a> tag.

Add the 'inscription' value from the object to the 'alt' attribute of the img> tag.

Add the first image (images[0]) value from the object to the 'src' attribute of the img> tag.

Add the 'inscription', 'mediumTechnique', and 'dating' values from the object to the contents of the p> tag. Format the 3 variables so there is one space between each variable.

Add the 'credit' value from the object to the contents of the footer> tag.

Add the article clone to the DOM fragment.

After all the articles have been added to the DOM fragment add the fragment to the DOM. Add the fragment to the contents of the

tag.

All programs for this class must wait for the DOM to load using a conditional statement, document.readyState, and a DOMContentLoaded event listener before running the program. All programs must be written in strict mode.

Can someone fix the code like the comments above, and check my code if there anything wrong or a better way to do it?

My code:

const url = '../../warhol.json'

/// '/~tpollard/csci212/data/warhol.json'

fetch(url, {

method: 'GET',

headers: {

'Accept': 'application/json',

},

})

.then(response => response.json())

.then(data => process(data))

function process(records){

let fragment = document.createDocumentFragment()

let templateElement = document.getElementById('article-template')

let articletemplate = templateElement.content

for(record of records){

console.log(record)

article = articletemplate.cloneNode(true)

article.querySelector('h1').textContent = record.title

let a = article.querySelector('a')

a.href = record.url

let img = a.querySelector('img')

img.src = record.images[0]

img.alt = record.inscription

article.querySelector('p').textContent = record.inscription + " " + record.mediumTechnique + " " + record.dating

article.querySelector('footer').textContent = record.credit

fragment.appendChild(article)

}

document.querySelector('main').appendChild(fragment)

}