YouTube Subscription Organizer

\n \n

\nWe'll also have an input and button to add new groups.\n\nFor channels, we'll use mock data. Each channel will have:\n- id (to uniquely identify)\n - title (channel name)\n - thumbnail (image)\n\nWe'll store in local storage:\n- The groups (array of group names)\n - The assignments (channel id to group name)\n\nWhen the page loads, we'll:\n- Load groups from local storage and display them.\n - Load channels from mock data (or from local storage if we have saved assignments) and display them in the channels container and also in their assigned groups.\n\nHow groups are displayed:\n Each group is a div with a title (the group name) and a drop area (where channels can be dropped). Inside the group, we'll list the channels that have been assigned to it.\n\nSteps for drag and drop:\n\n- Make each channel draggable: draggable=\"true\"\n - Handle dragstart event: set the dataTransfer with the channel id.\n - For the group drop areas: \n * Prevent default on dragover to allow drop.\n * On drop: get the channel id from the event, then assign that channel to the group (update the data structure) and re-render the groups and channels.\n\nWe'll create a simple state object:\n\nstate = {\n groups: [], // array of group names\n channels: [ // array of channel objects\n { id: 1, title: \"Channel 1\", thumbnail: \"https://via.placeholder.com/50\" },\n ... \n ],\n assignments: {} // mapping: channelId -> groupName\n }\n\nWhen we assign a channel to a group, we set assignments[channelId] = groupName.\n\nWe'll also allow removing a channel from a group? We can have a way to reset the assignment? Maybe by dragging back to the channels container? Or having a \"remove\" button in the group? Let's keep it simple: drag from group back to the channels container to remove.\n\nWe'll have two drop targets: the groups and the channels container (for unassigning).\n\nImplementation:\n\nWe'll create a function to render groups and a function to render channels.\n\nrenderGroups():\n For each group in state.groups:\n create a div for the group, with class \"group\"\n inside, show the group name and a list of channels assigned to that group (by looking at state.assignments: for each channel, if its assignment is this group, then show it).\n\nrenderChannels():\n For each channel in state.channels:\n if the channel is not assigned to any group (or if we are showing all unassigned in the channels container) then show it? Actually, we want to show all channels in the channels container? But note: if a channel is assigned, we show it in the group. So the channels container should show only unassigned? Or we can show all channels and also show them in groups? That would duplicate. So:\n\n```\n```\nWhen we drop a channel into a group, we assign it (so it moves from the channels container to the group).\n\nWhen we drop a channel into the channels container, we remove the assignment.\n\nWe'll also allow creating a new group.\n\nWe'll use local storage to save the groups and assignments so that when the page is refreshed, the state is preserved.\n\nSteps:\n\nOn page load:\n state = loadState() // from local storage or initialize with default\n\nWhen state changes (on drop, on add group, etc), we save the state to local storage and re-render.\n\nWe'll use vanilla JavaScript.\n\nLet's design the HTML:\n\nWe'll have:\n

for groups\n

for unassigned channels\n\nAnd a form to add a new group.\n\nWe'll also add a button to reset the state (for testing).\n\nImplementation:\n\nWe'll write the HTML structure, then CSS, then JavaScript.\n\nWe'll put the JavaScript in a