Update scripts.js

scripts.js

@@ -2,31 +2,47 @@ const manifest = [
     {
         name: "App One",
         description: "This is the first app.",
-        installUrl: "#"
+        installUrl: "#",
+        iconUrl: "https://via.placeholder.com/50"
     },
     {
         name: "App Two",
         description: "This is the second app.",
-        installUrl: "#"
+        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 list = document.createElement('div');
-    list.id = 'app-list';
+    const listContainer = document.getElementById('app-list-container');
+    listContainer.innerHTML = '';
     manifest.forEach((app, index) => {
         const item = document.createElement('div');
-        item.className = 'list-item';
-        item.textContent = app.name;
+        item.className = 'grid-item';
+        item.innerHTML = `
+            <img src="${app.iconUrl}" alt="${app.name}">
+            <h2>${app.name}</h2>
+        `;
         item.addEventListener('click', () => showAppDetail(index));
-        list.appendChild(item);
+        listContainer.appendChild(item);
     });
-    return list;
 }
 
 function renderAppDetail(app) {
     const detail = document.createElement('div');
-    detail.className = 'detail-view';
+    detail.className = 'detail-view active';
     detail.id = 'app-detail';
     
     const name = document.createElement('h2');
@@ -54,30 +70,16 @@ function showAppDetail(index) {
         detailView.remove();
     }
     const appDetail = renderAppDetail(manifest[index]);
-    appDetail.classList.add('active');
     document.getElementById('app').appendChild(appDetail);
 }
 
-function addApp(name, description, installUrl) {
-    manifest.push({ name, description, installUrl });
-    const appList = document.getElementById('app-list');
-    if (appList) {
-        appList.remove();
-    }
-    document.getElementById('app').appendChild(renderAppList());
-}
-
 document.addEventListener('DOMContentLoaded', () => {
-    const app = document.getElementById('app');
-    
-    const header = document.createElement('header');
-    header.textContent = 'App List';
-    app.appendChild(header);
-    
-    app.appendChild(renderAppList());
-});
+    renderAppList();
 
-// Example of adding a new app dynamically
-setTimeout(() => {
-    addApp("App Three", "This is the third app.", "#");
-}, 5000);
+    document.getElementById('browse-button').addEventListener('click', () => {
+        const detailView = document.getElementById('app-detail');
+        if (detailView) {
+            detailView.remove();
+        }
+    });
+});