Create scripts.js
Browse files- scripts.js +83 -0
scripts.js
ADDED
@@ -0,0 +1,83 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
const manifest = [
|
2 |
+
{
|
3 |
+
name: "App One",
|
4 |
+
description: "This is the first app.",
|
5 |
+
installUrl: "#"
|
6 |
+
},
|
7 |
+
{
|
8 |
+
name: "App Two",
|
9 |
+
description: "This is the second app.",
|
10 |
+
installUrl: "#"
|
11 |
+
}
|
12 |
+
];
|
13 |
+
|
14 |
+
function renderAppList() {
|
15 |
+
const list = document.createElement('div');
|
16 |
+
list.id = 'app-list';
|
17 |
+
manifest.forEach((app, index) => {
|
18 |
+
const item = document.createElement('div');
|
19 |
+
item.className = 'list-item';
|
20 |
+
item.textContent = app.name;
|
21 |
+
item.addEventListener('click', () => showAppDetail(index));
|
22 |
+
list.appendChild(item);
|
23 |
+
});
|
24 |
+
return list;
|
25 |
+
}
|
26 |
+
|
27 |
+
function renderAppDetail(app) {
|
28 |
+
const detail = document.createElement('div');
|
29 |
+
detail.className = 'detail-view';
|
30 |
+
detail.id = 'app-detail';
|
31 |
+
|
32 |
+
const name = document.createElement('h2');
|
33 |
+
name.textContent = app.name;
|
34 |
+
|
35 |
+
const description = document.createElement('p');
|
36 |
+
description.textContent = app.description;
|
37 |
+
|
38 |
+
const installButton = document.createElement('button');
|
39 |
+
installButton.textContent = 'Install';
|
40 |
+
installButton.addEventListener('click', () => {
|
41 |
+
window.location.href = app.installUrl;
|
42 |
+
});
|
43 |
+
|
44 |
+
detail.appendChild(name);
|
45 |
+
detail.appendChild(description);
|
46 |
+
detail.appendChild(installButton);
|
47 |
+
|
48 |
+
return detail;
|
49 |
+
}
|
50 |
+
|
51 |
+
function showAppDetail(index) {
|
52 |
+
const detailView = document.getElementById('app-detail');
|
53 |
+
if (detailView) {
|
54 |
+
detailView.remove();
|
55 |
+
}
|
56 |
+
const appDetail = renderAppDetail(manifest[index]);
|
57 |
+
appDetail.classList.add('active');
|
58 |
+
document.getElementById('app').appendChild(appDetail);
|
59 |
+
}
|
60 |
+
|
61 |
+
function addApp(name, description, installUrl) {
|
62 |
+
manifest.push({ name, description, installUrl });
|
63 |
+
const appList = document.getElementById('app-list');
|
64 |
+
if (appList) {
|
65 |
+
appList.remove();
|
66 |
+
}
|
67 |
+
document.getElementById('app').appendChild(renderAppList());
|
68 |
+
}
|
69 |
+
|
70 |
+
document.addEventListener('DOMContentLoaded', () => {
|
71 |
+
const app = document.getElementById('app');
|
72 |
+
|
73 |
+
const header = document.createElement('header');
|
74 |
+
header.textContent = 'App List';
|
75 |
+
app.appendChild(header);
|
76 |
+
|
77 |
+
app.appendChild(renderAppList());
|
78 |
+
});
|
79 |
+
|
80 |
+
// Example of adding a new app dynamically
|
81 |
+
setTimeout(() => {
|
82 |
+
addApp("App Three", "This is the third app.", "#");
|
83 |
+
}, 5000);
|