critic ruthlessly the javascript part of my code(just that) as a pro programmer:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
    <title>Forex Checklist Analyzer</title>
  <style>
:root {
    --font-primary: 'Roboto', sans-serif;
    --gradient-start: #1A2634;
    --gradient-middle: #323C4F;
    --gradient-end: #424D5C;
    --container-bg: #1c212af5;
    --item-bg: #1E1E1E;
    --button-gradient-start: #B38184;
    --button-gradient-end: #D8A7A1;
    --text-primary: #F2F2F2;
    --text-secondary: #C1C1C1;
    --border-radius: 8px;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --transition-main: all 0.35s ease-in-out;
    --transition-scale: scale(1.05);
}

html {
    height: 100%;
    background: linear-gradient(to bottom, var(--gradient-start), var(--gradient-middle), var(--gradient-end));
    background-attachment: fixed;
    font-size: 16px;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    font-family: var(--font-primary);
    color: var(--text-primary);
    background: transparent;
    line-height: 1.6;
    font-weight: 400;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: var(--transition-main);
}

button, input, textarea {
    font-family: var(--font-primary);
    border-radius: var(--border-radius);
    padding: 10px 15px;
    transition: background-color 0.3s, transform 0.3s;
}

button {
    background: linear-gradient(45deg, var(--button-gradient-start), var(--button-gradient-end));
    border: none;
    box-shadow: var(--shadow);
    cursor: pointer;
    color: white;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

button:hover, button:focus {
    transform: var(--transition-scale);
}

input[type="checkbox"] {
    appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid var(--button-gradient-end);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
}

input[type="checkbox"]:checked {
    background-color: var(--button-gradient-start);
    border-color: var(--button-gradient-start);
}

input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.container {
    max-width: 700px;
    margin: 20px;
    background: var(--container-bg);
    border-radius: var(--border-radius);
    padding: 40px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.container div[id^="item-"] {
    background: var(--item-bg);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition-main);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.container div[id^="item-"] button {
    background: linear-gradient(45deg, var(--button-gradient-end), var(--button-gradient-start));
    box-shadow: var(--shadow);
}


    .container {
        margin: 10px;
        padding: 20px;
    }
}

.container h1 {
    font-weight: 700;
    color: var(--button-gradient-end);
    text-align: center;
    margin-bottom: 30px;
}

.checklist-item textarea {
    font-size: 1.6em;
    border: 2px solid var(--border-radius);
    background: rgba(255, 255, 255, 0.1);
    outline: none;
    cursor: text;
    width: calc(100% - 40px);
    text-align: start;
    padding: 10px 20px;
    color: var(--text-primary);
    font-family: 'Vazir', 'Roboto', sans-serif;
    direction: rtl;
    resize: none;
    overflow: auto;
    min-height: 50px;
    white-space: pre-wrap;
    transition: height 0.3s ease;
 overflow: auto; 
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.checklist-item textarea::-webkit-scrollbar {
    display: none;
}

.checklist-item textarea:focus {
    height: auto;
    min-height: 50px;
}

.checklist-item button {
    margin-left: 10px;
    vertical-align: top;
}


@media (max-width: 768px) {
    .checklist-item textarea {
        font-size: 1.4em;
        width: calc(100% - 30px);
    }
}


.image-upload-button {
    display: inline-block;
    margin-left: 10px;
    cursor: pointer;
    color: white;
    background: linear-gradient(to right, var(--button-gradient-start), var(--button-gradient-end));
    padding: 10px 15px;
    border-radius: var(--border-radius);
    border: none;
    box-shadow: var(--shadow);
    font-weight: 500;
    text-transform: uppercase;
}

.slider-background {
    background-color: #f2f2f2;
    height: 40px;
    border-radius: 20px;
    position: relative;
    margin: 30px 0;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.slider-fill {
    background: linear-gradient(to right, #4a90e2, #82c4e8);
    height: 100%;
    border-radius: 20px;
    transition: width 0.4s ease;
}

.numerical-label {
    color: #333;
    font-size: 1.2em;
    font-weight: 700;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: left 0.4s ease;
    background: #ffffff;
    border: 2px solid #4a90e2;
    border-radius: 15px;
    padding: 6px 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    text-shadow: none;
}

.priority-box {
    background: linear-gradient(45deg, var(--button-gradient-end), var(--button-gradient-start));
    color: white;
    padding: 3px 8px;
    border-radius: var(--border-radius);
    font-weight: bold;
    margin-left: 8px;
}



  </style>
<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>

  
</head>
<body>
    <main class="container" id="containerSection1">
        <header>
            <h1 class="editable-title" id="titleSection1" contenteditable="true">Essential Criteria</h1>
            <div class="slider-background">
                <div id="sliderFillSection1" class="slider-fill">
                    <div id="numericalLabelSection1" class="numerical-label"></div>
                </div>
            </div>
            <div class="item-count flex-container">
                <label>Total:</label>
                <span id="totalItemsSection1"></span>
                <label>Active:</label>
                <span id="activeItemsSection1"></span>
            </div>
            <input type="text" id="searchBoxSection1" class="narrow-search-box" placeholder="Search criteria..." oninput="searchCriteria('1')">
        </header>
        <section>
            <div id="checklistContainerSection1" class="checklist-container"></div>
        </section>
        <section class="button-container">
            <button onclick="addCriteria('1')" class="add-button">Add</button>
            <button onclick="exportChecklistData('1')" class="export-button">Export</button>
            <button onclick="importChecklistData('1')" class="import-button">Import</button>
        </section>
    </main>
</body>
</html>