witch javascript is better?

just choose one and tell me why?

number one:

<script type="module">
document.addEventListener('DOMContentLoaded', () => {
    const STORAGE_KEY = 'criteriaList';
    const checklistContainer = document.getElementById('checklistContainerSection1');
    const searchBox = document.getElementById('searchBoxSection1');
    const sliderFill = document.getElementById('sliderFillSection1');
    const numericalLabel = document.getElementById('numericalLabelSection1');
    const totalItemsLabel = document.getElementById('totalItemsSection1');
    const activeItemsLabel = document.getElementById('activeItemsSection1');
    const addButton = document.querySelector('.add-button');
    const exportButton = document.querySelector('.export-button');
    const importButton = document.querySelector('.import-button');

    let criteriaList = [];

    // Initialize the application
    const init = () => {
        loadCriteria();
        renderCriteriaList();
        updateProgress();
        attachEventListeners();
    };

    // Load criteria from localStorage
    const loadCriteria = () => {
        const data = localStorage.getItem(STORAGE_KEY);
        criteriaList = data ? JSON.parse(data) : [];
    };

    // Save criteria to localStorage
    const saveCriteria = () => {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(criteriaList));
    };

    // Attach event listeners
    const attachEventListeners = () => {
        addButton.addEventListener('click', addCriterion);
        exportButton.addEventListener('click', exportData);
        importButton.addEventListener('click', importData);
        searchBox.addEventListener('input', searchCriteria);
    };

    // Add new criterion
    const addCriterion = () => {
        const name = prompt('Enter criterion name:');
        if (!name) {
            alert('Criterion name cannot be empty.');
            return;
        }
        const priorityInput = prompt('Enter priority (non-negative number):', '0');
        const priority = parseFloat(priorityInput);
        if (isNaN(priority) || priority < 0) {
            alert('Priority must be a non-negative number.');
            return;
        }
        const criterion = {
            id: Date.now(),
            name: name.trim(),
            priority,
            active: false
        };
        criteriaList.push(criterion);
        saveCriteria();
        addCriterionToDOM(criterion);
        updateProgress();
    };

    // Create and add criterion to DOM
    const addCriterionToDOM = (criterion) => {
        const itemDiv = createCriterionElement(criterion);
        checklistContainer.appendChild(itemDiv);
        updateItemCounts();
    };

    // Create criterion element
    const createCriterionElement = (criterion) => {
        const itemDiv = document.createElement('div');
        itemDiv.className = 'checklist-item';
        itemDiv.dataset.id = criterion.id;
        itemDiv.draggable = true;

        // Use CSS Grid for layout
        itemDiv.style.display = 'grid';
        itemDiv.style.gridTemplateColumns = 'auto 1fr auto';
        itemDiv.style.gridGap = '10px';
        itemDiv.style.alignItems = 'center';

        // Drag and Drop Event Listeners
        itemDiv.addEventListener('dragstart', handleDragStart);
        itemDiv.addEventListener('dragover', handleDragOver);
        itemDiv.addEventListener('drop', handleDrop);
        itemDiv.addEventListener('dragend', handleDragEnd);

        // Checkbox
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.checked = criterion.active;
        checkbox.addEventListener('change', () => {
            criterion.active = checkbox.checked;
            saveCriteria();
            updateProgress();
        });

        // Textarea for criterion name
        const textarea = document.createElement('textarea');
        textarea.value = criterion.name;
        textarea.addEventListener('input', () => {
            criterion.name = textarea.value;
            saveCriteria();
        });

        // Right Side Container
        const rightDiv = document.createElement('div');
        rightDiv.style.display = 'flex';
        rightDiv.style.alignItems = 'center';
        rightDiv.style.gap = '5px';

        // Priority Box
        const priorityBox = document.createElement('div');
        priorityBox.className = 'priority-box';
        priorityBox.textContent = criterion.priority;
        priorityBox.addEventListener('click', () => {
            const newPriorityInput = prompt('Enter new priority:', criterion.priority);
            const newPriority = parseFloat(newPriorityInput);
            if (isNaN(newPriority) || newPriority < 0) {
                alert('Priority must be a non-negative number.');
                return;
            }
            criterion.priority = newPriority;
            priorityBox.textContent = newPriority;
            saveCriteria();
            updateProgress();
        });

        // Delete Button
        const deleteButton = document.createElement('button');
        deleteButton.textContent = 'Delete';
        deleteButton.addEventListener('click', () => {
            if (confirm('Are you sure you want to delete this criterion?')) {
                removeCriterion(criterion.id);
            }
        });

        rightDiv.appendChild(priorityBox);
        rightDiv.appendChild(deleteButton);

        // Append elements to itemDiv
        itemDiv.appendChild(checkbox);
        itemDiv.appendChild(textarea);
        itemDiv.appendChild(rightDiv);

        return itemDiv;
    };

    // Remove criterion
    const removeCriterion = (id) => {
        criteriaList = criteriaList.filter(c => c.id !== id);
        saveCriteria();
        const itemDiv = checklistContainer.querySelector(`[data-id='${id}']`);
        if (itemDiv) checklistContainer.removeChild(itemDiv);
        updateProgress();
        updateItemCounts();
    };

    // Render criteria list
    const renderCriteriaList = () => {
        checklistContainer.innerHTML = '';
        criteriaList.forEach(criterion => {
            addCriterionToDOM(criterion);
        });
    };

    // Update progress bar and numerical label
    const updateProgress = () => {
        const totalScore = criteriaList.filter(c => c.active).reduce((sum, c) => sum + c.priority, 0);
        const cappedScore = Math.min(totalScore, 100);
        sliderFill.style.width = `${cappedScore}%`;
        numericalLabel.textContent = cappedScore;
        numericalLabel.style.left = `calc(${cappedScore}% - ${numericalLabel.offsetWidth / 2}px)`;
    };

    // Update total and active item counts
    const updateItemCounts = () => {
        totalItemsLabel.textContent = criteriaList.length;
        activeItemsLabel.textContent = criteriaList.filter(c => c.active).length;
    };

    // Search criteria
    const searchCriteria = () => {
        const searchTerm = searchBox.value.toLowerCase();
        const items = checklistContainer.querySelectorAll('.checklist-item');
        items.forEach(item => {
            const text = item.querySelector('textarea').value.toLowerCase();
            item.style.display = text.includes(searchTerm) ? 'grid' : 'none';
        });
    };

    // Export data
    const exportData = () => {
        const dataStr = JSON.stringify(criteriaList, null, 2);
        const blob = new Blob([dataStr], { type: 'application/json' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'criteria.json';
        a.click();
        URL.revokeObjectURL(url);
    };

    // Import data
    const importData = () => {
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = 'application/json';
        input.addEventListener('change', (event) => {
            const file = event.target.files[0];
            if (!file) return;
            const reader = new FileReader();
            reader.onload = (e) => {
                try {
                    const data = JSON.parse(e.target.result);
                    if (!Array.isArray(data)) throw new Error('Invalid data format.');
                    criteriaList = data.map(item => ({
                        id: item.id || Date.now(),
                        name: item.name || '',
                        priority: item.priority >= 0 ? item.priority : 0,
                        active: !!item.active
                    }));
                    saveCriteria();
                    renderCriteriaList();
                    updateProgress();
                } catch (error) {
                    alert('Error importing data: ' + error.message);
                }
            };
            reader.readAsText(file);
        });
        input.click();
    };

    // Drag and Drop Handlers
    let draggedItem = null;

    const handleDragStart = function(e) {
        draggedItem = this;
        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData('text/plain', '');
        this.classList.add('dragging');
    };

    const handleDragOver = function(e) {
        e.preventDefault();
    };

    const handleDrop = function(e) {
        e.stopPropagation();
        if (draggedItem !== this) {
            const draggedId = parseInt(draggedItem.dataset.id);
            const targetId = parseInt(this.dataset.id);
            const draggedIndex = criteriaList.findIndex(c => c.id === draggedId);
            const targetIndex = criteriaList.findIndex(c => c.id === targetId);
            if (draggedIndex >= 0 && targetIndex >= 0) {
                const [movedItem] = criteriaList.splice(draggedIndex, 1);
                criteriaList.splice(targetIndex, 0, movedItem);
                saveCriteria();
                renderCriteriaList();
            }
        }
        this.classList.remove('dragging');
    };

    const handleDragEnd = function(e) {
        this.classList.remove('dragging');
        draggedItem = null;
    };

    // Initialize the app
    init();
});
</script>


javascript number one has end above.

---
javascript number two is bellow:

<script>
const storage = {
    set(key, value) {
        localStorage.setItem(key, JSON.stringify(value));
    },
    get(key, defaultValue) {
        const item = localStorage.getItem(key);
        return item ? JSON.parse(item) : defaultValue;
    }
};

const checklistData = {
    section1: storage.get('checklistDataSection1', [])
};

function updateScore() {
    const sectionData = checklistData.section1;
    const totalScore = sectionData.reduce((acc, item) => acc + (item.active ? item.priority : 0), 0);
    const sliderPercentage = Math.min(totalScore, 100);
    const sliderFill = document.getElementById('sliderFillSection1');
    const numericalLabel = document.getElementById('numericalLabelSection1');

    sliderFill.style.width = `${sliderPercentage}%`;
    numericalLabel.textContent = totalScore;
    numericalLabel.style.left = calculateLabelPosition(sliderPercentage, numericalLabel, sliderFill.parentElement) + 'px';
}
function calculateLabelPosition(percentage, label, slider) {
    const sliderWidth = slider.offsetWidth;
    const labelWidth = label.offsetWidth;
    let position;

    if (percentage >= 100) {
        position = sliderWidth - (labelWidth / 2);
    } else {
        position = (percentage / 100) * sliderWidth - (labelWidth / 2);

        position = Math.max(position, 0);
    }

    position = Math.min(position, sliderWidth - (labelWidth / 2));

    return position;
}


function renderChecklist() {
    const container = document.getElementById('checklistContainerSection1');
    container.innerHTML = '';
    checklistData.section1.forEach((item, index) => {
        container.appendChild(createChecklistItem(item, index));
    });
    updateScore();
    updateChecklistItemCount();
}

function createChecklistItem(item, index) {
    const div = document.createElement('div');
    div.id = `item-1-${index}`;
    div.classList.add('checklist-item');
    div.draggable = true;
    div.innerHTML = `
        <input type="checkbox" ${item.active ? 'checked' : ''} onchange="toggleActive(${index})">
        <label>
            <textarea dir="auto" onblur="editCriterionTitle(${index}, this.value)">${item.name}</textarea>
            <span class="priority-box" onclick="editPriority(${index})">${item.priority}</span>
        </label>
        <button onclick="deleteCriteria(${index})">Delete</button>
    `;
    div.addEventListener('dragstart', handleDragStart);
    div.addEventListener('dragover', handleDragOver);
    div.addEventListener('drop', handleDrop);
    return div;
}


function editPriority(index) {
    const newPriority = parseInt(prompt("Enter the new priority:"), 10);
    if (!isNaN(newPriority)) {
        checklistData.section1[index].priority = newPriority;
        saveDataAndRender();
    } else {
        alert('Invalid input. Please enter a valid priority number.');
    }
}


function toggleActive(index) {
    checklistData.section1[index].active = !checklistData.section1[index].active;
    saveDataAndRender();
}

function addCriteria() {
    const name = prompt("Enter the criteria name:");
    if (name) {
        const priority = parseInt(prompt("Enter the criteria priority:"), 10);
        if (!isNaN(priority)) {
            checklistData.section1.push({ name, priority, active: true });
            saveDataAndRender();
        } else {
            alert('Invalid priority. Please enter a valid number.');
        }
    } else {
        alert('Invalid name. Please enter a valid name.');
    }
}


function deleteCriteria(index) {
    checklistData.section1.splice(index, 1);
    saveDataAndRender();
}

function updateChecklistItemCount() {
    const totalItems = checklistData.section1.length;
    const activeItems = checklistData.section1.filter(item => item.active).length;
    document.getElementById('totalItemsSection1').textContent = totalItems;
    document.getElementById('activeItemsSection1').textContent = activeItems;
}

function searchCriteria() {
    const query = document.getElementById('searchBoxSection1').value.toLowerCase();
    checklistData.section1.forEach((item, index) => {
        const displayStyle = item.name.toLowerCase().includes(query) ? 'block' : 'none';
        document.getElementById(`item-1-${index}`).style.display = displayStyle;
    });
}

function exportChecklistData() {
    const dataStr = `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(checklistData.section1))}`;
    const downloadAnchorNode = document.createElement('a');
    downloadAnchorNode.href = dataStr;
    downloadAnchorNode.download = 'checklistDataSection1.json';
    document.body.appendChild(downloadAnchorNode);
    downloadAnchorNode.click();
    downloadAnchorNode.remove();
}

function importChecklistData() {
    const uploadInput = document.createElement('input');
    uploadInput.type = 'file';
    uploadInput.accept = '.json';
    uploadInput.onchange = async e => {
        const file = e.target.files[0];
        if (file) {
            try {
                const jsonData = JSON.parse(await file.text());
                if (Array.isArray(jsonData)) {
                    checklistData.section1 = jsonData;
                    saveDataAndRender();
                } else {
                    alert('Invalid JSON!');
                }
            } catch (error) {
                alert('Invalid JSON!');
            }
        }
    };
    uploadInput.click();
}
function handleDragStart(e) {
    e.dataTransfer.setData('text/plain', e.target.id);
    e.dataTransfer.effectAllowed = 'move';
}

        function handleDragOver(e) {
            e.preventDefault();
        }

   function handleDrop(e) {
    e.preventDefault();
    const draggedItemId = e.dataTransfer.getData('text/plain');
    const dropTarget = e.target.closest('.checklist-item');
    const container = document.getElementById('checklistContainerSection1');
    
    if (dropTarget && draggedItemId !== dropTarget.id) {
        const draggedItem = document.getElementById(draggedItemId);
        const referenceNode = dropTarget.nextSibling;
        container.insertBefore(draggedItem, referenceNode);
        updateDataOrder(draggedItemId, dropTarget.id);
    }
}

function updateDataOrder(draggedId, targetId) {
    const draggedIndex = parseInt(draggedId.split('-')[2], 10);
    const targetIndex = parseInt(targetId.split('-')[2], 10);

    const draggedItem = checklistData.section1[draggedIndex];
    checklistData.section1.splice(draggedIndex, 1);
    checklistData.section1.splice(targetIndex, 0, draggedItem);

    saveDataAndRender();
}

function editCriterionTitle(index, newTitle) {
  if (newTitle) {
    checklistData.section1[index].name = newTitle.trim();
    saveDataAndRender(); 
  }
}

function saveDataAndRender() {
    storage.set('checklistDataSection1', checklistData.section1);
    renderChecklist();
}

window.onload = renderChecklist;
window.addCriteria = addCriteria;
window.exportChecklistData = exportChecklistData;
window.importChecklistData = importChecklistData;
window.searchCriteria = searchCriteria;
window.toggleActive = toggleActive;
window.editPriority = editPriority;
window.editCriterionTitle = editCriterionTitle;
window.deleteCriteria = deleteCriteria;
</script>


--number two end above--