Update scripts.js
Browse files- scripts.js +33 -31
scripts.js
CHANGED
@@ -2,31 +2,47 @@ 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
|
16 |
-
|
17 |
manifest.forEach((app, index) => {
|
18 |
const item = document.createElement('div');
|
19 |
-
item.className = '
|
20 |
-
item.
|
|
|
|
|
|
|
21 |
item.addEventListener('click', () => showAppDetail(index));
|
22 |
-
|
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');
|
@@ -54,30 +70,16 @@ function showAppDetail(index) {
|
|
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 |
-
|
72 |
-
|
73 |
-
const header = document.createElement('header');
|
74 |
-
header.textContent = 'App List';
|
75 |
-
app.appendChild(header);
|
76 |
-
|
77 |
-
app.appendChild(renderAppList());
|
78 |
-
});
|
79 |
|
80 |
-
|
81 |
-
|
82 |
-
|
83 |
-
|
|
|
|
|
|
|
|
2 |
{
|
3 |
name: "App One",
|
4 |
description: "This is the first app.",
|
5 |
+
installUrl: "#",
|
6 |
+
iconUrl: "https://via.placeholder.com/50"
|
7 |
},
|
8 |
{
|
9 |
name: "App Two",
|
10 |
description: "This is the second app.",
|
11 |
+
installUrl: "#",
|
12 |
+
iconUrl: "https://via.placeholder.com/50"
|
13 |
+
},
|
14 |
+
{
|
15 |
+
name: "App Three",
|
16 |
+
description: "This is the third app.",
|
17 |
+
installUrl: "#",
|
18 |
+
iconUrl: "https://via.placeholder.com/50"
|
19 |
+
},
|
20 |
+
{
|
21 |
+
name: "App Four",
|
22 |
+
description: "This is the fourth app.",
|
23 |
+
installUrl: "#",
|
24 |
+
iconUrl: "https://via.placeholder.com/50"
|
25 |
}
|
26 |
];
|
27 |
|
28 |
function renderAppList() {
|
29 |
+
const listContainer = document.getElementById('app-list-container');
|
30 |
+
listContainer.innerHTML = '';
|
31 |
manifest.forEach((app, index) => {
|
32 |
const item = document.createElement('div');
|
33 |
+
item.className = 'grid-item';
|
34 |
+
item.innerHTML = `
|
35 |
+
<img src="${app.iconUrl}" alt="${app.name}">
|
36 |
+
<h2>${app.name}</h2>
|
37 |
+
`;
|
38 |
item.addEventListener('click', () => showAppDetail(index));
|
39 |
+
listContainer.appendChild(item);
|
40 |
});
|
|
|
41 |
}
|
42 |
|
43 |
function renderAppDetail(app) {
|
44 |
const detail = document.createElement('div');
|
45 |
+
detail.className = 'detail-view active';
|
46 |
detail.id = 'app-detail';
|
47 |
|
48 |
const name = document.createElement('h2');
|
|
|
70 |
detailView.remove();
|
71 |
}
|
72 |
const appDetail = renderAppDetail(manifest[index]);
|
|
|
73 |
document.getElementById('app').appendChild(appDetail);
|
74 |
}
|
75 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
76 |
document.addEventListener('DOMContentLoaded', () => {
|
77 |
+
renderAppList();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
78 |
|
79 |
+
document.getElementById('browse-button').addEventListener('click', () => {
|
80 |
+
const detailView = document.getElementById('app-detail');
|
81 |
+
if (detailView) {
|
82 |
+
detailView.remove();
|
83 |
+
}
|
84 |
+
});
|
85 |
+
});
|