Easyusetool Frontend 0514 Official

| Problem | Likely fix | |---------|-------------| | Builder not loading | Check browser console; disable ad blocker | | Exported code missing images | Use relative paths or upload assets separately | | Drag & drop laggy | Reduce components on canvas or use Chrome | | “0514” features missing | Verify you have correct version tag |

The 0514 build utilizes a modern, lightweight stack chosen for performance and developer ergonomics. easyusetool frontend 0514

// --- EasyUseTool: smart date range logic ---
(function() 
    // DOM elements
    const presetBtns = document.querySelectorAll('.preset-btn');
    const customPanel = document.getElementById('customPanel');
    const startDateInput = document.getElementById('startDate');
    const endDateInput = document.getElementById('endDate');
    const applyCustomBtn = document.getElementById('applyCustomBtn');
    const rangeBadgeSpan = document.querySelector('#rangeBadge span');
    const infoStrip = document.getElementById('infoStrip');
    const useRangeBtn = document.getElementById('useRangeBtn');
    const toastMsg = document.getElementById('toastMsg');
// state
let currentStart = null;   // Date object
let currentEnd = null;
// helper: format YYYY-MM-DD
function formatYMD(date) 
    if (!date) return '';
    let y = date.getFullYear();
    let m = String(date.getMonth() + 1).padStart(2, '0');
    let d = String(date.getDate()).padStart(2, '0');
    return `$y-$m-$d`;
// show toast for 2 sec
function showToast(msg, isError = false) 
    toastMsg.textContent = msg;
    toastMsg.style.color = isError ? '#b13e3e' : '#0f5b41';
    setTimeout(() => 
        if (toastMsg.textContent === msg) 
            toastMsg.textContent = '';
, 2000);
// update UI based on currentStart / currentEnd
function updateUI()  !currentEnd) 
        rangeBadgeSpan.innerHTML = '📆 no range selected';
        infoStrip.innerHTML = `<span>📊 days: —</span><span>🕒 week: —</span>`;
        useRangeBtn.disabled = true;
        return;
// format display
    const startStr = formatYMD(currentStart);
    const endStr = formatYMD(currentEnd);
    rangeBadgeSpan.innerHTML = `📅 $startStr  →  $endStr`;
// calculate days difference (inclusive)
    const diffTime = Math.abs(currentEnd - currentStart);
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
// week number (simple ISO-ish, just for demo)
    let weekInfo = '—';
    if (currentStart && currentEnd) 
        const weekCount = Math.ceil(diffDays / 7);
        weekInfo = `$weekCount week$weekCount !== 1 ? 's' : ''`;
infoStrip.innerHTML = `<span>📊 days: $diffDays</span><span>🕒 range: $weekInfo</span>`;
    useRangeBtn.disabled = false;
// set new range, auto update UI
function setRange(startDate, endDate)  !endDate) 
        showToast('⚠️ Please select valid start & end dates', true);
        return false;
if (startDate > endDate) 
        showToast('❌ Start date must be before end date', true);
        return false;
currentStart = new Date(startDate);
    currentEnd = new Date(endDate);
    updateUI();
    showToast(`✅ range set: $formatYMD(currentStart) → $formatYMD(currentEnd)`);
    return true;
// preset handlers
function handlePreset(presetId) 
    const today = new Date();
    today.setHours(0,0,0,0);
    let start = new Date(today);
    let end = new Date(today);
switch(presetId) 
        case 'today':
            // start = today, end = today
            break;
        case 'tomorrow':
            start.setDate(today.getDate() + 1);
            end = new Date(start);
            break;
        case 'week':
            end.setDate(today.getDate() + 6);
            break;
        case 'month':
            end.setDate(today.getDate() + 29);
            break;
        case 'custom':
            // open panel, prefill today/tomorrow? optional
            customPanel.classList.add('open');
            const defaultStart = formatYMD(today);
            const defaultEnd = formatYMD(new Date(today.getTime() + 3*86400000));
            startDateInput.value = defaultStart;
            endDateInput.value = defaultEnd;
            showToast('📝 pick custom dates and click "Apply"');
            return; // don't set range yet
        default:
            return;
if (presetId !== 'custom') 
        customPanel.classList.remove('open');
        setRange(start, end);
// apply custom from inputs
function applyCustomRange() 
    const startVal = startDateInput.value;
    const endVal = endDateInput.value;
    if (!startVal
// "Use this range" main action
function useCurrentRange()  !currentEnd) 
        showToast('⚠️ Please select a range first', true);
        return;
// Simulate tool action (export, filter, apply)
    showToast(`🚀 Range used: $formatYMD(currentStart) → $formatYMD(currentEnd) · (feature ready)`);
    // here you could dispatch custom event or integrate with parent app
    console.log('[EasyUseTool] range selected',  start: currentStart, end: currentEnd );
// --- Event listeners ---
presetBtns.forEach(btn => 
    btn.addEventListener('click', (e) => 
        const preset = btn.dataset.preset;
        if (preset) handlePreset(preset);
    );
);
applyCustomBtn.addEventListener('click', applyCustomRange);
useRangeBtn.addEventListener('click', useCurrentRange);
// optional: if user clicks outside? but fine.
// default load: set empty range and close custom panel
customPanel.classList.remove('open');
updateUI();
// prefill today's date in custom inputs as placeholder
const todayStr = formatYMD(new Date());
if (!startDateInput.value) startDateInput.value = todayStr;
if (!endDateInput.value) 
    let nextWeek = new Date();
    nextWeek.setDate(nextWeek.getDate() + 3);
    endDateInput.value = formatYMD(nextWeek);

)();

``` /src /assets # Static images, fonts /components /common # Reusable UI elements (Button, Modal, Input) /layout # Sidebar, Header, Footer /hooks # Custom hooks (useToolExecutor, useLocalStorage) /services # API wrappers /store # Zustand global store definitions /tools # The modular tool definitions /json-formatter /image-resizer /index.ts # Tool registry /utils # Helper functions (validation, formatting) App.tsx main.tsx ``` | Problem | Likely fix | |---------|-------------| |

frontend-0514/
├── index.html          # main dashboard / demo
├── builder.html        # drag‑drop interface
├── assets/
│   ├── css/            # styles (Tailwind or custom)
│   ├── js/             # core logic
│   └── components/     # reusable blocks
├── exports/            # generated code saves here
└── config.json         # project settings

(Assuming npm)

npm install easyusetool-frontend@0514