still learning javascript step-by-step. I have trouble understanding how to get the url created in a template literal and use it to build another page with it. I need to build a two pages app with vanilla javascript. The first page, the index, contains portrait of artists and, when you click on a portrait, you go to the second page with more infos about the artist.
The first page is built with a json file. I use modules, so for now I have 4 modules.
export async function fetchData() {
try{
const response = await fetch("modules/data.json");
const data = await response.json();
return data;
}
catch (err){
console.log(err);
return [];
}
};
export class Artists {
constructor(name, id, portrait) {
this.name = name;
this.id = id;
this.portrait = portrait;
};
displayIndex(){
return `<div class="artists-id">
<a class="frame-link" href="artists.html?id=${this.id}">
<img class="photo" src="Photos/Artists ID Photos/${this.portrait}" alt="${this.name}"></img>
<h2 class="name">${this.name}</h2>
</a>`;
};
displayBanner(){
return `<span class="photo-info">
<h2 class="name2">${this.name}</h2>
<span class="photo-id">
<img class="photo-mini" src="Photos/Artists ID Photos/${this.portrait}/${this.portrait}" alt="${this.name}></img>
</span>`;
}
};
import {fetchData} from "/modules/dataService.mjs"
import {Photographers} from "/modules/photographer.mjs"
class Index {
constructor() {
this.artists = [];
this.displayedArtists = [];
}
async getArtists() {
const data = await fetchData();
let resdata = data.artists
resdata.forEach(artist => {
this.artists.push(
new Artists(
artist.name,
artist.id,
artist.portrait
)
);
})
this.displayedArtists = this.Artists;
}
listArtists() {
let output = '';
this.displayedArtists.forEach((artist) => {
output += artist.displayIndex();
})
document.getElementById("artists").innerHTML = output;
}
async run () {
await this.getArtists();
this.listArtists();
}
}
let Index = new Index();
Index.run()
The fourth module “artistPage” is empty for now. I want to use it to grab the url of a clicked artist, and create the second page using the displayBanner function inside an html element of the second page.
