2b:null 2c:["$","title",null,{"children":"Travel Destination Widget | Northeastern University John A. Guerra Gomez classes | Observable"}] 31:T175f,function travelRecommendationWidget(options = {}) { // Default configuration const defaults = { destinations: [], budgetRange: [0, 5000], activities: [], seasons: ['Spring', 'Summer', 'Fall', 'Winter'], initialBudget: 2000, initialActivities: [], initialSeason: 'Summer' }; // Merge defaults with user options const config = { ...defaults, ...options }; // Create main container const container = document.createElement('div'); container.className = 'travel-widget'; // Create results container const resultsContainer = document.createElement('div'); resultsContainer.className = 'travel-results'; container.appendChild(resultsContainer); // Create filter controls function createFilters() { const filters = document.createElement('div'); filters.className = 'travel-filters'; // Budget slider const budgetContainer = document.createElement('div'); budgetContainer.innerHTML = ` Budget: $${config.initialBudget} `; filters.appendChild(budgetContainer); // Activities checkboxes if (config.activities.length > 0) { const activitiesContainer = document.createElement('div'); activitiesContainer.innerHTML = '

Preferred Activities:

'; config.activities.forEach(activity => { const isChecked = config.initialActivities.includes(activity); activitiesContainer.innerHTML += ` ${activity} `; }); filters.appendChild(activitiesContainer); } // Season selector (only if seasons are provided) if (config.seasons && config.seasons.length > 0) { const seasonContainer = document.createElement('div'); seasonContainer.innerHTML = 'Preferred Season:'; const select = document.createElement('select'); select.className = 'season-select'; config.seasons.forEach(season => { const option = document.createElement('option'); option.value = season; option.textContent = season; if (season === config.initialSeason) option.selected = true; select.appendChild(option); }); seasonContainer.appendChild(select); filters.appendChild(seasonContainer); } return filters; } // Calculate match score (0-100) function calculateMatchScore(destination, budget, activities, season) { let score = 0; // 1. Budget match (50% weight) const budgetDiff = Math.abs(destination.avgCost - budget); score += Math.max(0, 50 - (budgetDiff / 100)); // 2. Activity match (30% weight) const matchedActivities = destination.activities.filter(a => activities.includes(a)); score += Math.min(30, matchedActivities.length * 10); // 3. Season match (20% weight, optional) if (season && destination.bestSeason === season) { score += 20; } return Math.min(100, Math.round(score)); } // Render destination cards function renderResults(destinations) { resultsContainer.innerHTML = ''; destinations.forEach(destination => { const card = document.createElement('div'); card.className = 'destination-card'; // Pink color gradient based on match score const hue = 340; // Base pink hue const saturation = 90; const lightness = 70 - (destination.score / 100 * 40); // Darker for higher scores card.style.backgroundColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`; // Gold border for top matches (>80%) if (destination.score > 80) { card.style.border = '2px solid gold'; } card.innerHTML = `

${destination.name}

${destination.description}

$${destination.avgCost} • Best in ${destination.bestSeason}

Match: ${Math.round(destination.score)}%

`; resultsContainer.appendChild(card); }); } // Update results when filters change function updateResults() { // 获取当前滑块值 const budgetSlider = container.querySelector('.budget-slider'); const budgetValue = container.querySelector('.budget-value'); const budget = parseInt(budgetSlider.value); // 更新显示的预算数值 budgetValue.textContent = budget; // 获取其他筛选条件 const activities = Array.from(container.querySelectorAll('input[type="checkbox"]:checked')) .map(checkbox => checkbox.value); const season = container.querySelector('.season-select')?.value; // 计算匹配结果 const matchedDestinations = config.destinations.map(d => ({ ...d, score: calculateMatchScore(d, budget, activities, season) })).sort((a, b) => b.score - a.score); // 更新UI renderResults(matchedDestinations); // 更新组件值 container.value = { budget, activities, season, matchedDestinations }; container.dispatchEvent(new Event('input', { bubbles: true })); } // Initialize the widget const filters = createFilters(); container.appendChild(filters); // Add event listeners container.querySelector('.budget-slider').addEventListener('input', updateResults); container.querySelectorAll('input[type="checkbox"]').forEach(checkbox => { checkbox.addEventListener('change', updateResults); }); if (container.querySelector('.season-select')) { container.querySelector('.season-select').addEventListener('change', updateResults); } // Initial render updateResults(); return container; }32:T613,### The travelRecommendationWidget function creates an interactive travel destination recommendation widget. - **1.Configuration Setup** - It defines default configuration parameters such as destination list, budget range, activity list, season list, initial budget, initial activities, and initial season. • Merges user - provided options with the default configuration to form the final configuration object. - **2.DOM Structure Creation** - Creates a main container for the widget with the class travel - widget. - Inside the main container, it creates a results container with the class travel - results to display recommended destinations. - **3.Filter Control Creation** - Defines a function to create filter controls including a budget slider, activity checkboxes, and a season selector based on the configuration. - **4.Match Score Calculation** - Implements a function to calculate the match score (0 - 100) for each destination based on the user's budget, selected activities, and chosen season. - **5.Result Rendering** - Renders the matched destinations as cards in the results container, with background color gradients and special borders based on the match score. - **6.Result Update** - Updates the recommended results when the user changes the filter settings, recalculating scores and re - rendering the cards. - **7.Widget Initialization** - Initializes the widget by creating filter controls, adding event listeners to the filter elements, performing the initial rendering, and finally returning the main container element.33:T6d5, destinations = [ { name: "New York City, NY", description: "The bustling metropolis with iconic landmarks like Times Square and Central Park.", avgCost: 3500, bestSeason: "Fall", goodSeasons: ["Spring", "Summer"], activities: ["City", "Culture", "Food"] }, { name: "Grand Canyon, AZ", description: "Breathtaking natural wonder with hiking trails and helicopter tours.", avgCost: 1800, bestSeason: "Spring", goodSeasons: ["Fall"], activities: ["Hiking", "Nature"] }, { name: "Miami, FL", description: "Vibrant beaches, Art Deco architecture, and lively nightlife.", avgCost: 2800, bestSeason: "Winter", goodSeasons: ["Spring"], activities: ["Beach", "Party", "Food"] }, { name: "Yellowstone National Park, WY", description: "Geysers, hot springs, and wildlife in America's first national park.", avgCost: 2200, bestSeason: "Summer", goodSeasons: ["Spring", "Fall"], activities: ["Hiking", "Nature", "Wildlife"] }, { name: "San Francisco, CA", description: "Golden Gate Bridge, Alcatraz, and historic cable cars.", avgCost: 3200, bestSeason: "Summer", goodSeasons: ["Fall", "Spring"], activities: ["City", "Culture", "Food"] }, { name: "Orlando, FL", description: "Theme park capital with Disney World and Universal Studios.", avgCost: 3000, bestSeason: "Spring", goodSeasons: ["Winter"], activities: ["Family", "Theme Parks"] }, { name: "Las Vegas, NV", description: "Entertainment capital with casinos, shows, and desert adventures.", avgCost: 2500, bestSeason: "Fall", goodSeasons: ["Spring", "Winter"], activities: ["Party", "Food", "Adventure"] } ];34:[] 2f:{"id":"80ddca7362c36143","slug":null,"title":"Travel Destination Widget","thumbnail":"5cafab36fd2aada9c6224de2b60ab5f29345a7c0d23efacb04ecb68b9fe5be17","access_level":"public","create_time":"$D2025-04-18T08:56:22.984Z","update_time":"$D2025-04-25T06:05:01.535Z","view_time":null,"first_public_time":"$D2025-04-18T08:56:22.984Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"afbaa6d30585fd36","login":"nujguerra","name":"Northeastern University John A. Guerra Gomez classes","avatar_url":"https://avatars-next.observableusercontent.com/04e5ef72b3edcda1296894b5d1ecaa9c92ef5d52d69e65e4c115de5534928fe9","tier":"education_2026","bio":""},"version":86,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0af680156a5ae1f6","login":"zehanwang810","name":"ZehanWang810","avatar_url":"https://avatars-next.observableusercontent.com/7dee262a51d1ff0c1ad742628391ba7ca6636000084ca2c83399e7f07acb4d54","tier":null,"bio":""}],"members":[{"type":"team","id":"afbaa6d30585fd36","login":"nujguerra","name":"Northeastern University John A. Guerra Gomez classes","avatar_url":"https://avatars-next.observableusercontent.com/04e5ef72b3edcda1296894b5d1ecaa9c92ef5d52d69e65e4c115de5534928fe9","tier":"education_2026","role":"editor"},{"type":"individual","id":"0af680156a5ae1f6","login":"zehanwang810","name":"ZehanWang810","avatar_url":"https://avatars-next.observableusercontent.com/7dee262a51d1ff0c1ad742628391ba7ca6636000084ca2c83399e7f07acb4d54","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Travel Destination Widget","cells":[{"id":0,"value":"# Travel Destination Widget","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"## Real problem \nWhen planning a trip, people often face a lot of trouble finding a destination that suits their needs quickly and accurately. \n## Solution \n- Data Integration: Build a database with details of popular travel spots like names, attractions, costs, best seasons, and activities. The widget arranges this data neatly for easy access.\n- Personalised Filters: Use a budget slider, activity checkboxes, and a season selector. The widget scores each destination based on your choices and lists them from best to worst match.\n- Visual Display: See recommended destinations as cards with key info. Different colors help you quickly compare how well each place fits your needs.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"This code creates an array named destinations that holds information about various travel destinations.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":" viewof recommendations = travelRecommendationWidget({\n destinations,\n activities: [\"Beach\", \"City\", \"Culture\", \"Food\", \"Hiking\", \"Nature\", \"Party\", \"Wildlife\", \"Family\", \"Theme Parks\", \"Adventure\"],\n initialBudget: 2500\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"The code initialises the widget through the travelRecommendationWidget function, passing in parameters such as destination list, activity list, initial budget, etc., to build the entire interaction logic and display interface of the recommendation widget.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"recommendations","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"This code serves to style the Travel Recommendations widget and its associated elements.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 30:"$2f:body"