|
const manifest = [ |
|
{ |
|
name: "App One", |
|
description: "This is the first app.", |
|
installUrl: "#", |
|
iconUrl: "https://via.placeholder.com/50" |
|
}, |
|
{ |
|
name: "App Two", |
|
description: "This is the second app.", |
|
installUrl: "#", |
|
iconUrl: "https://via.placeholder.com/50" |
|
}, |
|
{ |
|
name: "App Three", |
|
description: "This is the third app.", |
|
installUrl: "#", |
|
iconUrl: "https://via.placeholder.com/50" |
|
}, |
|
{ |
|
name: "App Four", |
|
description: "This is the fourth app.", |
|
installUrl: "#", |
|
iconUrl: "https://via.placeholder.com/50" |
|
} |
|
]; |
|
|
|
function renderAppList() { |
|
const listContainer = document.getElementById('app-list-container'); |
|
listContainer.innerHTML = ''; |
|
manifest.forEach((app, index) => { |
|
const item = document.createElement('div'); |
|
item.className = 'grid-item'; |
|
item.innerHTML = ` |
|
<img src="${app.iconUrl}" alt="${app.name}"> |
|
<h2>${app.name}</h2> |
|
`; |
|
item.addEventListener('click', () => showAppDetail(index)); |
|
listContainer.appendChild(item); |
|
}); |
|
} |
|
|
|
function renderAppDetail(app) { |
|
const detail = document.createElement('div'); |
|
detail.className = 'detail-view active'; |
|
detail.id = 'app-detail'; |
|
|
|
const name = document.createElement('h2'); |
|
name.textContent = app.name; |
|
|
|
const description = document.createElement('p'); |
|
description.textContent = app.description; |
|
|
|
const installButton = document.createElement('button'); |
|
installButton.textContent = 'Install'; |
|
installButton.addEventListener('click', () => { |
|
window.location.href = app.installUrl; |
|
}); |
|
|
|
detail.appendChild(name); |
|
detail.appendChild(description); |
|
detail.appendChild(installButton); |
|
|
|
return detail; |
|
} |
|
|
|
function showAppDetail(index) { |
|
const detailView = document.getElementById('app-detail'); |
|
if (detailView) { |
|
detailView.remove(); |
|
} |
|
const appDetail = renderAppDetail(manifest[index]); |
|
document.getElementById('app').appendChild(appDetail); |
|
} |
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
renderAppList(); |
|
|
|
document.getElementById('browse-button').addEventListener('click', () => { |
|
const detailView = document.getElementById('app-detail'); |
|
if (detailView) { |
|
detailView.remove(); |
|
} |
|
}); |
|
}); |