1. Implement a Caching Mechanism for Frequently Accessed DOM Elements:
- Description: Store references to DOM elements that are frequently accessed or manipulated, instead of querying the DOM each time they are needed.
- Benefit: This reduces unnecessary DOM lookups, improving the overall performance of your app by minimizing the workload on the rendering engine.

2. Use const and let Appropriately:
- Description: Use const for variables that are never reassigned and let for variables that may change their value.
- Benefit: This practice enhances code readability and maintainability. It also helps prevent bugs by making the code's intentions clearer, leading to fewer unintended reassignments.

3. Implement Proper Error Handling:
- Description: Ensure functions like handleFileUpload and importChecklistData have robust error handling to manage unexpected inputs or failures gracefully.
- Benefit: Improved error handling enhances user experience by providing meaningful feedback when something goes wrong, and it prevents the app from crashing or entering an unstable state.

4. Use Event Delegation:
- Description: Attach event listeners to a common parent element rather than individual child elements, especially for elements that are dynamically created.
- Benefit: This reduces the number of event listeners in your app, leading to better performance and memory usage. It also simplifies event management in dynamic interfaces.

5. Optimize UI Updates Using DocumentFragment:
- Description: Use DocumentFragment to batch DOM updates when rendering or updating multiple elements.
- Benefit: This approach minimizes reflows and repaints in the browser, resulting in smoother UI updates and improved performance, especially when dealing with large lists.

6. Use Data Attributes Consistently:
- Description: Utilize data- attributes in your HTML elements for JavaScript hooks instead of relying on class names or IDs.
- Benefit: Separating styling (classes) from scripting (data attributes) leads to cleaner code and reduces coupling between CSS and JavaScript. It improves maintainability and scalability.

7. Implement Form Validation:
- Description: Add validation to forms used for adding criteria or sections to prevent empty or invalid inputs.
- Benefit: Ensures data consistency and integrity within the app, enhancing user experience by preventing errors before they occur.

8. Implement Debounce Functions:
- Description: Use a debounce mechanism for functions that are called frequently, such as updateScore and updateSectionProgress.
- Benefit: Debouncing limits how often a function can execute, reducing unnecessary computations and improving app performance.

9. Accessibility Enhancements:
- Description: Add ARIA attributes, proper labels, and improve keyboard navigation to make the app accessible to users with disabilities.
- Benefit: Enhances the app's usability for a wider audience, ensuring compliance with accessibility standards and providing an inclusive user experience.

10. Optimize Drag-and-Drop Functionality:
- Description: Refine the drag-and-drop event handlers to handle large datasets efficiently and prevent performance issues.
- Benefit: Improves the responsiveness of the app when users reorder sections or criteria, leading to a smoother user experience.

11. Use Intl.NumberFormat API for Number Formatting:
- Description: Utilize the Intl.NumberFormat API to format numbers, percentages, and currency values in a locale-sensitive manner.
- Benefit: Ensures consistent and culturally appropriate number formatting across different locales, enhancing internationalization support.

12. Implement Lazy Loading for Images:
- Description: Load images only when they are about to enter the viewport or when needed, rather than loading all at once.
- Benefit: Reduces initial load times and improves performance, especially if users upload multiple or large images in the notes sections.

13. Create Custom Modal Dialogs:
- Description: Replace native alert, confirm, and prompt dialogs with custom-styled modal dialogs.
- Benefit: Provides a consistent look and feel throughout the app, enhances the user interface, and allows for more flexibility in dialog behavior and content.

14. Enhance the Priority System with User-Friendly Controls:
- Description: Use range inputs, sliders, or dropdowns for setting priority levels instead of free-form text input.
- Benefit: Improves usability by preventing invalid priority values and making it easier for users to select appropriate priority levels.

15. Use Async/Await for File Operations:
- Description: Implement async/await syntax for asynchronous operations, such as file imports and exports.
- Benefit: Makes the code cleaner and easier to read, while effectively handling asynchronous processes without blocking the main thread.

16. Organize CSS Efficiently:
- Description: Group related styles together, use specific selectors, and avoid global styles where possible.
- Benefit: Simplifies maintenance of the CSS codebase, reduces the chance of styling conflicts, and makes it easier to manage and update styles.

17. Use Template Literals for String Construction:
- Description: Employ ES6 template literals (`string ${variable}`) for building strings in JavaScript.
- Benefit: Enhances code readability and reduces errors associated with string concatenation.

18. Implement a Search Functionality:
- Description: Add a search feature that allows users to quickly find specific criteria or sections.
- Benefit: Improves user experience, especially when dealing with large checklists, by making navigation and item retrieval more efficient.

19. Refactor and Merge Duplicated Code:
- Description: Identify repeated code blocks and extract them into reusable functions.
- Benefit: Reduces code duplication, minimizes the potential for bugs, and makes the codebase easier to manage and extend.

20. Simplify Complex Methods:
- Description: Break down complex functions into smaller, single-purpose functions. Streamline logic by removing unnecessary variables and statements.
- Benefit: Enhances code readability and maintainability, making it easier to debug and extend functionality in the future.

21. Add Loading Indicators for Time-Consuming Operations:
- Description: Implement visual feedback for operations that take noticeable time, such as importing or exporting data.
- Benefit: Improves user experience by providing assurance that the app is processing their request, reducing confusion or frustration during wait times.

22. Ensure Responsive Design for Different Screen Sizes:
- Description: Optimize the app's layout and styles to provide an optimal viewing experience across a range of devices and screen sizes.
- Benefit: Enhances usability on mobile devices and tablets, broadening the app's accessibility and appeal to users on different platforms.
23. remove all comments from the code. make it just a pure functional code without any comment in it.

here is the code to do the instructions to it:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Forex Checklist Analyzer Pro</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root {
    --bg-color: #1A2634;
    --card-bg: #1E1E1E;
    --accent-color: #B38184;
    --text-color: #F2F2F2;
    --inactive-color: #C1C1C1;
    --active-color: #D8A7A1;
    --danger-color: #ff4757;
    --success-color: #2ed573;
    --warning-color: #ffa502;
    --info-color: #70a1ff;
    --font-primary: 'Roboto', sans-serif;
    --gradient-start: #1A2634;
    --gradient-middle: #323C4F;
    --gradient-end: #424D5C;
    --container-bg: rgba(28, 33, 42, 0.98);
    --item-bg: #1E1E1E;
    --button-gradient-start: #B38184;
    --button-gradient-end: #D8A7A1;
    --text-primary: #F2F2F2;
    --text-secondary: #C1C1C1;
    --border-radius: 10px;
    --shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    --transition-main: all 0.4s ease-in-out;
    --transition-fast: all 0.25s ease-in-out;
    --max-container-width: 800px;
    --slider-height: 40px;
    --slider-bg: #f2f2f2;
    --slider-fill-start: #4a90e2;
    --slider-fill-end: #82c4e8;
    --slider-thumb: #fff;
    --slider-thumb-border: #4a90e2;
    --slider-transition: width 0.6s ease-out;
}
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
}
.app-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 20px;
}
.dashboard {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1200px;
    width: 100%;
}
.card {
    background-color: var(--card-bg);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}
.score-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
}
.score-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    flex-grow: 1;
    margin-left: 20px;
}
.title-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
h1 {
    font-size: 2.5em;
    margin: 0;
    background: linear-gradient(45deg, var(--text-primary), var(--button-gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.circular-progress {
    position: relative;
    width: 200px;
    height: 200px;
}
.circular-progress svg {
    transform: rotate(-90deg);
}
.circular-progress circle {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
}
.progress-bg {
    stroke: var(--inactive-color);
}
.progress-bar {
    stroke: var(--accent-color);
    transition: stroke-dashoffset 1s ease;
}
.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    font-weight: bold;
}
.checklist-section {
    margin-bottom: 30px;
}
.checklist-section h2 {
    color: var(--button-gradient-start);
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.8em;
}
.checklist-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: rgba(255,255,255,0.05);
    border-radius: 12px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    cursor: move;
}
.checklist-item:hover {
    background-color: rgba(255,255,255,0.1);
    transform: translateX(5px);
}
.toggle {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}
.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--inactive-color);
    transition: .4s;
    border-radius: 34px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider {
    background-color: var(--button-gradient-end);
}
input:checked + .slider:before {
    transform: translateX(26px);
}
.action-buttons {
    display: flex;
    gap: 15px;
}
.action-button {
    background-color: var(--button-gradient-start);
    border: none;
    color: var(--text-color);
    padding: 12px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}
.action-button:hover {
    background-color: var(--button-gradient-end);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(5px);
}
.modal-content {
    background-color: var(--card-bg);
    margin: 10% auto;
    padding: 30px;
    border-radius: 15px;
    width: 50%;
    max-width: 500px;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    animation: modalFadeIn 0.5s;
}
@keyframes modalFadeIn {
    from {opacity: 0; transform: translateY(-50px);}
    to {opacity: 1; transform: translateY(0);}
}
.close {
    color: var(--text-color);
    float: right;
    font-size: 28px;
    font-weight: bold;
    transition: all 0.3s ease;
    cursor: pointer;
}
.close:hover,
.close:focus {
    color: var(--danger-color);
    text-decoration: none;
    transform: scale(1.2);
}
#newCriteriaInput, #newSectionInput, #sectionSelect, .priority-input {
    width: 100%;
    padding: 12px;
    margin: 15px 0;
    border-radius: 8px;
    border: 1px solid var(--inactive-color);
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 16px;
}
#addNewCriteriaButton, #addNewSectionButton {
    background-color: var(--success-color);
    color: var(--text-color);
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}
#addNewCriteriaButton:hover, #addNewSectionButton:hover {
    background-color: var(--active-color);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.edit-section-name, .edit-criteria, .delete-section, .delete-criteria {
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    font-size: 20px;
    transition: all 0.3s ease;
}
.edit-section-name:hover, .edit-criteria:hover {
    color: var(--warning-color);
    transform: scale(1.2);
}
.delete-section:hover, .delete-criteria:hover {
    color: var(--danger-color);
    transform: scale(1.2);
}
.section-card {
    cursor: move;
}
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.section-buttons, .criteria-buttons {
    display: flex;
    gap: 15px;
}
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.dashboard-title {
    font-size: 2.5em;
    margin: 0;
    background: linear-gradient(45deg, var(--text-primary), var(--button-gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.dashboard-stats {
    display: flex;
    gap: 20px;
}
.stat-card {
    background-color: rgba(255,255,255,0.1);
    padding: 15px;
    border-radius: 10px;
    text-align: center;
}
.stat-value {
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 5px;
}
.stat-label {
    font-size: 0.9em;
    opacity: 0.8;
}
.checklist-grid {
    display: flex;
    flex-direction: column;
    gap: 30px; 
}
.section-progress {
    height: 5px;
    background-color: var(--inactive-color);
    border-radius: 5px;
    overflow: hidden;
    margin-top: 10px;
}
.section-progress-bar {
    height: 100%;
    background-color: var(--button-gradient-start);
    transition: width 0.5s ease;
}
.checklist-item-content {
    flex-grow: 1;
    margin-right: 15px;
}
.checklist-item-text {
    font-size: 1.1em;
    margin-bottom: 5px;
}
.checklist-item-description {
    font-size: 0.9em;
    opacity: 0.7;
}
.priority-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 10px;
}
.priority-high {
    background-color: var(--danger-color);
}
.priority-medium {
    background-color: var(--warning-color);
}
.priority-low {
    background-color: var(--success-color);
}
.tooltip {
    position: relative;
    display: inline-block;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: var(--bg-color);
    color: var(--text-color);
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
@media (max-width: 768px) {
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .dashboard-stats {
        margin-top: 20px;
        flex-wrap: wrap;
    }
    .checklist-grid {
        grid-template-columns: 1fr;
    }
    .modal-content {
        width: 90%;
    }
}
.notes-section {
    margin-top: 10px;
    display: none;
}
.notes-toggle {
    cursor: pointer;
    font-size: 0.9em;
    color: var(--info-color);
}
.notes-textarea {
    width: 100%;
    height: 80px;
    margin-top: 5px;
    border: 1px solid var(--inactive-color);
    border-radius: 5px;
    padding: 5px;
    background-color: var(--bg-color);
    color: var(--text-color);
    resize: vertical;
}
.file-upload {
    margin-top: 5px;
}
.file-upload input[type="file"] {
    display: none;
}
.file-upload label {
    background-color: var(--button-gradient-start);
    color: var(--text-color);
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.file-upload label:hover {
    background-color: var(--button-gradient-end);
}
.file-preview {
    margin-top: 5px;
    max-width: 100%;
    max-height: 100px;
}
.priority-number {
    margin-right: 10px;
    font-weight: bold;
}
.priority-input {
    width: 40px;
}
</style>
</head>
<body>
    <div class="app-container">
        <div class="dashboard">
            <div class="dashboard-header">
                <h1 class="dashboard-title">Advanced Forex Checklist Analyzer Pro</h1>
                <div class="dashboard-stats">
                    <div class="stat-card">
                        <div class="stat-value" id="totalItemsCount">0</div>
                        <div class="stat-label">Total Items</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value" id="completedItemsCount">0</div>
                        <div class="stat-label">Completed</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value" id="sectionsCount">0</div>
                        <div class="stat-label">Sections</div>
                    </div>
                </div>
            </div>
            <div class="card score-card">
                <div class="circular-progress">
                    <svg width="200" height="200">
                        <circle class="progress-bg" cx="100" cy="100" r="90"></circle>
                        <circle class="progress-bar" cx="100" cy="100" r="90"></circle>
                    </svg>
                    <div class="progress-text">0%</div>
                </div>
                <div class="score-info">
                    <div class="title-buttons">
                        <h2>Overall Progress</h2>
                        <div class="action-buttons">
                            <button class="action-button" id="addCriteriaButton">Add Criteria</button>
                            <button class="action-button" id="addSectionButton">Add Section</button>
                            <button class="action-button" id="exportDataButton">Export Data</button>
                            <button class="action-button" id="importDataButton">Import Data</button>
                            <button class="action-button" id="resetDataButton">Reset Data</button>
                        </div>
                    </div>
                    <p>Overall Score: <span id="scoreDisplay">0</span>%</p>
                </div>
            </div>
            <div class="checklist-grid" id="checklistContainer">
            </div>
        </div>
    </div>
    <div id="addCriteriaModal" class="modal">
        <div class="modal-content">
            <span class="close" id="closeAddCriteriaModal">×</span>
            <h2>Add New Criteria</h2>
            <select id="sectionSelect">
            </select>
            <input type="text" id="newCriteriaInput" placeholder="Enter new criteria">
            <input type="number" id="newCriteriaPriority" placeholder="Priority" min="1" value="1">
            <button id="addNewCriteriaButton">Add Criteria</button>
        </div>
    </div>
    <div id="addSectionModal" class="modal">
        <div class="modal-content">
            <span class="close" id="closeAddSectionModal">×</span>
            <h2>Add New Section</h2>
            <input type="text" id="newSectionInput" placeholder="Enter new section name">
            <button id="addNewSectionButton">Add Section</button>
        </div>
    </div>
    <script>
        (function() {
            'use strict';

            let checklistData = {
                sections: []
            };

            let undoStack = [];
            let redoStack = [];

            document.addEventListener('DOMContentLoaded', function() {
                loadState();
                updateUI();

                // Set up event listeners
                document.getElementById('addCriteriaButton').addEventListener('click', showAddCriteriaModal);
                document.getElementById('addSectionButton').addEventListener('click', showAddSectionModal);
                document.getElementById('exportDataButton').addEventListener('click', exportChecklistData);
                document.getElementById('importDataButton').addEventListener('click', importChecklistData);
                document.getElementById('resetDataButton').addEventListener('click', resetChecklistData);

                document.getElementById('closeAddCriteriaModal').addEventListener('click', function() {
                    closeModal('addCriteriaModal');
                });
                document.getElementById('closeAddSectionModal').addEventListener('click', function() {
                    closeModal('addSectionModal');
                });

                document.getElementById('addNewCriteriaButton').addEventListener('click', addNewCriteria);
                document.getElementById('addNewSectionButton').addEventListener('click', addNewSection);

                document.addEventListener('keydown', function(event) {
                    if (event.ctrlKey && event.key === 'z') {
                        undo();
                    } else if ((event.ctrlKey && event.shiftKey && event.key === 'Z') || (event.ctrlKey && event.key === 'y')) {
                        redo();
                    }
                });
            });

           
            function updateUI() {
                const container = document.getElementById('checklistContainer');
                container.innerHTML = '';
                checklistData.sections.forEach((section, sectionIndex) => {
                    const sectionCard = document.createElement('div');
                    sectionCard.className = 'card section-card';
                    sectionCard.setAttribute('draggable', true);
                    sectionCard.addEventListener('dragstart', dragStart);
                    sectionCard.addEventListener('dragover', dragOver);
                    sectionCard.addEventListener('drop', drop);
                    sectionCard.setAttribute('data-section-index', sectionIndex);

                    const sectionHeader = document.createElement('div');
                    sectionHeader.className = 'section-header';
                    const sectionTitle = document.createElement('h2');
                    sectionTitle.textContent = section.name;
                    const sectionButtons = document.createElement('div');
                    sectionButtons.className = 'section-buttons';
                    const editSectionButton = document.createElement('button');
                    editSectionButton.className = 'edit-section-name';
                    editSectionButton.innerHTML = '✎';
                    editSectionButton.addEventListener('click', function() {
                        editSectionName(sectionIndex);
                    });
                    const deleteSectionButton = document.createElement('button');
                    deleteSectionButton.className = 'delete-section';
                    deleteSectionButton.innerHTML = '🗑';
                    deleteSectionButton.addEventListener('click', function() {
                        deleteSection(sectionIndex);
                    });

                    sectionButtons.appendChild(editSectionButton);
                    sectionButtons.appendChild(deleteSectionButton);
                    sectionHeader.appendChild(sectionTitle);
                    sectionHeader.appendChild(sectionButtons);
                    sectionCard.appendChild(sectionHeader);

                    const sectionProgress = document.createElement('div');
                    sectionProgress.className = 'section-progress';
                    const sectionProgressBar = document.createElement('div');
                    sectionProgressBar.className = 'section-progress-bar';
                    sectionProgress.appendChild(sectionProgressBar);
                    sectionCard.appendChild(sectionProgress);

                    section.criteria.forEach((criteria, criteriaIndex) => {
                        const criteriaItem = document.createElement('div');
                        criteriaItem.className = 'checklist-item';
                        criteriaItem.setAttribute('draggable', true);
                        criteriaItem.addEventListener('dragstart', dragStart);
                        criteriaItem.addEventListener('dragover', dragOver);
                        criteriaItem.addEventListener('drop', drop);
                        criteriaItem.setAttribute('data-section-index', sectionIndex);
                        criteriaItem.setAttribute('data-criteria-index', criteriaIndex);

                        const priorityNumber = document.createElement('span');
                        priorityNumber.className = 'priority-number';
                        priorityNumber.textContent = criteria.priority;
                        priorityNumber.setAttribute('contenteditable', true);
                        priorityNumber.addEventListener('blur', function() {
                            const newPriority = parseInt(priorityNumber.textContent, 10);
                            if (!isNaN(newPriority) && newPriority > 0) {
                                saveState();
                                criteria.priority = newPriority;
                                updateScore();
                                updateSectionProgress();
                            } else {
                                priorityNumber.textContent = criteria.priority;
                            }
                        });
                        criteriaItem.appendChild(priorityNumber);

                        const criteriaContent = document.createElement('div');
                        criteriaContent.className = 'checklist-item-content';
                        const criteriaText = document.createElement('div');
                        criteriaText.className = 'checklist-item-text';
                        criteriaText.textContent = criteria.text;
                        criteriaContent.appendChild(criteriaText);

                        const toggle = document.createElement('label');
                        toggle.className = 'toggle';
                        const toggleInput = document.createElement('input');
                        toggleInput.type = 'checkbox';
                        toggleInput.checked = criteria.checked;
                        toggleInput.addEventListener('change', function() {
                            updateCriteriaStatus(sectionIndex, criteriaIndex);
                        });
                        const slider = document.createElement('span');
                        slider.className = 'slider';
                        toggle.appendChild(toggleInput);
                        toggle.appendChild(slider);

                        const criteriaButtons = document.createElement('div');
                        criteriaButtons.className = 'criteria-buttons';
                        const editCriteriaButton = document.createElement('button');
                        editCriteriaButton.className = 'edit-criteria';
                        editCriteriaButton.innerHTML = '✎';
                        editCriteriaButton.addEventListener('click', function() {
                            editCriteria(sectionIndex, criteriaIndex);
                        });
                        const deleteCriteriaButton = document.createElement('button');
                        deleteCriteriaButton.className = 'delete-criteria';
                        deleteCriteriaButton.innerHTML = '🗑';
                        deleteCriteriaButton.addEventListener('click', function() {
                            deleteCriteria(sectionIndex, criteriaIndex);
                        });

                        criteriaButtons.appendChild(editCriteriaButton);
                        criteriaButtons.appendChild(deleteCriteriaButton);

                        criteriaItem.appendChild(criteriaContent);
                        criteriaItem.appendChild(toggle);
                        criteriaItem.appendChild(criteriaButtons);

                        const notesToggle = document.createElement('div');
                        notesToggle.className = 'notes-toggle';
                        notesToggle.textContent = 'Notes';
                        notesToggle.addEventListener('click', function() {
                            toggleNotes(sectionIndex, criteriaIndex);
                        });
                        criteriaItem.appendChild(notesToggle);

                        const notesSection = document.createElement('div');
                        notesSection.className = 'notes-section';
                        const notesTextarea = document.createElement('textarea');
                        notesTextarea.className = 'notes-textarea';
                        notesTextarea.placeholder = 'Add notes here...';
                        notesTextarea.value = criteria.notes || '';
                        notesTextarea.addEventListener('blur', function() {
                            saveNotes(sectionIndex, criteriaIndex, notesTextarea.value);
                        });
                        notesSection.appendChild(notesTextarea);

                        const fileUpload = document.createElement('div');
                        fileUpload.className = 'file-upload';
                        const fileInput = document.createElement('input');
                        fileInput.type = 'file';
                        fileInput.accept = 'image/png, image/jpeg';
                        fileInput.id = `fileInput-${sectionIndex}-${criteriaIndex}`;
                        fileInput.addEventListener('change', function(event) {
                            handleFileUpload(event, sectionIndex, criteriaIndex);
                        });
                        const fileLabel = document.createElement('label');
                        fileLabel.htmlFor = `fileInput-${sectionIndex}-${criteriaIndex}`;
                        fileLabel.textContent = 'Upload Image';
                        fileUpload.appendChild(fileInput);
                        fileUpload.appendChild(fileLabel);
                        notesSection.appendChild(fileUpload);

                        const filePreview = document.createElement('img');
                        filePreview.className = 'file-preview';
                        if (criteria.imageData) {
                            filePreview.src = criteria.imageData;
                        }
                        notesSection.appendChild(filePreview);

                        criteriaItem.appendChild(notesSection);
                        sectionCard.appendChild(criteriaItem);
                    });
                    container.appendChild(sectionCard);
                });
                updateScore();
                updateSectionProgress();
            }

            function updateScore() {
                let totalPriority = 0;
                let activePriority = 0;
                checklistData.sections.forEach(section => {
                    section.criteria.forEach(criteria => {
                        totalPriority += criteria.priority;
                        if (criteria.checked) {
                            activePriority += criteria.priority;
                        }
                    });
                });

                let uncappedPercentage = 0;
                if (totalPriority > 0) {
                    uncappedPercentage = Math.round((activePriority / totalPriority) * 100);
                }

                let cappedPercentage = Math.min(uncappedPercentage, 100);

                if (getTotalItems() === 1 && activePriority > 0) {
                    uncappedPercentage = activePriority;
                    cappedPercentage = Math.min(activePriority, 100);
                }

                document.getElementById('scoreDisplay').textContent = uncappedPercentage;

                const progressBar = document.querySelector('.progress-bar');
                const circumference = 2 * Math.PI * 90;
                const offset = circumference - (cappedPercentage / 100) * circumference;
                progressBar.style.strokeDasharray = `${circumference} ${circumference}`;
                progressBar.style.strokeDashoffset = offset;
                document.querySelector('.progress-text').textContent = `${cappedPercentage}%`;

                document.getElementById('totalItemsCount').textContent = getTotalItems();
                document.getElementById('completedItemsCount').textContent = getCompletedItems();
                document.getElementById('sectionsCount').textContent = checklistData.sections.length;
            }

            function updateSectionProgress() {
                checklistData.sections.forEach((section, index) => {
                    const totalPriority = section.criteria.reduce((sum, criteria) => sum + criteria.priority, 0);
                    const activePriority = section.criteria.reduce((sum, criteria) => criteria.checked ? sum + criteria.priority : sum, 0);
                    const progress = totalPriority > 0 ? (activePriority / totalPriority) * 100 : 0;
                    const sectionCard = document.querySelector(`.section-card[data-section-index="${index}"]`);
                    const progressBar = sectionCard.querySelector('.section-progress-bar');
                    progressBar.style.width = `${progress}%`;
                });
            }

            function updateCriteriaStatus(sectionIndex, criteriaIndex) {
                saveState();
                checklistData.sections[sectionIndex].criteria[criteriaIndex].checked = !checklistData.sections[sectionIndex].criteria[criteriaIndex].checked;
                updateScore();
                updateSectionProgress();
                localStorage.setItem('checklistData', JSON.stringify(checklistData));
            }

            function showAddCriteriaModal() {
                const modal = document.getElementById('addCriteriaModal');
                const select = document.getElementById('sectionSelect');
                select.innerHTML = '';
                checklistData.sections.forEach((section, index) => {
                    const option = document.createElement('option');
                    option.value = index;
                    option.textContent = section.name;
                    select.appendChild(option);
                });
                modal.style.display = 'block';
            }

            function showAddSectionModal() {
                const modal = document.getElementById('addSectionModal');
                modal.style.display = 'block';
            }

            function closeModal(modalId) {
                const modal = document.getElementById(modalId);
                modal.style.display = 'none';
            }

            function addNewCriteria() {
                const sectionIndex = document.getElementById('sectionSelect').value;
                const newCriteria = document.getElementById('newCriteriaInput').value;
                const newCriteriaPriority = parseInt(document.getElementById('newCriteriaPriority').value, 10);
                if (newCriteria) {
                    saveState();
                    checklistData.sections[sectionIndex].criteria.push({
                        text: newCriteria,
                        checked: false,
                        priority: newCriteriaPriority,
                        notes: '',
                        imageData: null
                    });
                    updateUI();
                    closeModal('addCriteriaModal');
                    document.getElementById('newCriteriaInput').value = '';
                    document.getElementById('newCriteriaPriority').value = '1';
                }
            }

            function addNewSection() {
                const newSectionName = document.getElementById('newSectionInput').value;
                if (newSectionName) {
                    saveState();
                    checklistData.sections.push({ name: newSectionName, criteria: [] });
                    updateUI();
                    closeModal('addSectionModal');
                    document.getElementById('newSectionInput').value = '';
                }
            }

            function editSectionName(sectionIndex) {
                const newName = prompt('Enter new section name:', checklistData.sections[sectionIndex].name);
                if (newName) {
                    saveState();
                    checklistData.sections[sectionIndex].name = newName;
                    updateUI();
                }
            }

            function deleteSection(sectionIndex) {
                if (confirm('Are you sure you want to delete this section?')) {
                    saveState();
                    checklistData.sections.splice(sectionIndex, 1);
                    updateUI();
                }
            }

            function editCriteria(sectionIndex, criteriaIndex) {
                const newText = prompt('Edit criteria:', checklistData.sections[sectionIndex].criteria[criteriaIndex].text);
                const newPriority = parseInt(prompt('Edit priority (number):', checklistData.sections[sectionIndex].criteria[criteriaIndex].priority), 10);
                if (newText !== null && !isNaN(newPriority)) {
                    saveState();
                    checklistData.sections[sectionIndex].criteria[criteriaIndex].text = newText;
                    checklistData.sections[sectionIndex].criteria[criteriaIndex].priority = newPriority;
                    updateUI();
                }
            }

            function deleteCriteria(sectionIndex, criteriaIndex) {
                if (confirm('Are you sure you want to delete this criteria?')) {
                    saveState();
                    checklistData.sections[sectionIndex].criteria.splice(criteriaIndex, 1);
                    updateUI();
                }
            }

            function dragStart(e) {
                e.dataTransfer.setData('text/plain', e.target.getAttribute('data-section-index') + ',' + (e.target.getAttribute('data-criteria-index') || ''));
            }

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

            function drop(e) {
                e.preventDefault();
                const [fromSectionIndex, fromCriteriaIndex] = e.dataTransfer.getData('text').split(',');
                const toSectionIndex = e.target.closest('.section-card').getAttribute('data-section-index');
                const toCriteriaIndex = e.target.closest('.checklist-item')?.getAttribute('data-criteria-index');

                if (fromCriteriaIndex === '') { // Moving a section
                    if (fromSectionIndex !== toSectionIndex) {
                        saveState();
                        const fromIndex = parseInt(fromSectionIndex, 10);
                        const toIndex = parseInt(toSectionIndex, 10);
                        const [movedSection] = checklistData.sections.splice(fromIndex, 1);
                        checklistData.sections.splice(toIndex, 0, movedSection);
                        updateUI();
                    }
                } else { // Moving a criteria
                    saveState();
                    const fromSecIndex = parseInt(fromSectionIndex, 10);
                    const fromCritIndex = parseInt(fromCriteriaIndex, 10);
                    const toSecIndex = parseInt(toSectionIndex, 10);
                    const toCritIndex = toCriteriaIndex !== null ? parseInt(toCriteriaIndex, 10) : null;

                    const [movedCriteria] = checklistData.sections[fromSecIndex].criteria.splice(fromCritIndex, 1);
                    if (toCritIndex !== null) {
                        checklistData.sections[toSecIndex].criteria.splice(toCritIndex, 0, movedCriteria);
                    } else {
                        checklistData.sections[toSecIndex].criteria.push(movedCriteria);
                    }
                    updateUI();
                }
            }

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

            function importChecklistData() {
                const input = document.createElement('input');
                input.type = 'file';
                input.accept = '.json';
                input.addEventListener('change', function(event) {
                    const file = event.target.files[0];
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        try {
                            saveState();
                            checklistData = JSON.parse(e.target.result);
                            updateUI();
                        } catch (error) {
                            alert('Error importing data: ' + error.message);
                        }
                    };
                    reader.readAsText(file);
                });
                input.click();
            }

            function resetChecklistData() {
                if (confirm('Are you sure you want to reset all data?')) {
                    saveState();
                    checklistData = { sections: [] };
                    updateUI();
                }
            }

            function toggleNotes(sectionIndex, criteriaIndex) {
                const notesSection = document.querySelector(`.checklist-item[data-section-index="${sectionIndex}"][data-criteria-index="${criteriaIndex}"] .notes-section`);
                if (notesSection) {
                    notesSection.style.display = notesSection.style.display === 'block' ? 'none' : 'block';
                }
            }

            function saveNotes(sectionIndex, criteriaIndex, notes) {
                saveState();
                checklistData.sections[sectionIndex].criteria[criteriaIndex].notes = notes;
                localStorage.setItem('checklistData', JSON.stringify(checklistData));
            }

            function handleFileUpload(event, sectionIndex, criteriaIndex) {
                const file = event.target.files[0];
                const reader = new FileReader();
                reader.onload = function(e) {
                    saveState();
                    checklistData.sections[sectionIndex].criteria[criteriaIndex].imageData = e.target.result;
                    updateUI();
                };
                if (file) {
                    reader.readAsDataURL(file);
                }
            }

            function getTotalItems() {
                return checklistData.sections.reduce((total, section) => total + section.criteria.length, 0);
            }

            function getCompletedItems() {
                return checklistData.sections.reduce((total, section) => total + section.criteria.filter(criteria => criteria.checked).length, 0);
            }

            function saveState() {
                undoStack.push(JSON.parse(JSON.stringify(checklistData)));
                if (undoStack.length > 100) {
                    undoStack.shift();
                }
                redoStack = [];
            }

            function undo() {
                if (undoStack.length > 1) {
                    redoStack.push(undoStack.pop());
                    checklistData = JSON.parse(JSON.stringify(undoStack[undoStack.length - 1]));
                    updateUI();
                }
            }

            function redo() {
                if (redoStack.length > 0) {
                    undoStack.push(redoStack.pop());
                    checklistData = JSON.parse(JSON.stringify(undoStack[undoStack.length - 1]));
                    updateUI();
                }
            }

            function loadState() {
                const storedData = localStorage.getItem('checklistData');
                if (storedData) {
                    checklistData = JSON.parse(storedData);
                } else {
                    checklistData = {
                        sections: [
                            {
                                name: 'Section 1',
                                criteria: [
                                    { text: 'Criteria 1', checked: false, priority: 1, notes: '', imageData: null },
                                    { text: 'Criteria 2', checked: true, priority: 2, notes: '', imageData: null }
                                ]
                            }
                        ]
                    };
                }
                undoStack.push(JSON.parse(JSON.stringify(checklistData)));
            }

        })();
    </script>
</body>
</html>

now refactor my above code with all 23 instructions provided.

at the end provide the full new code that all 23 instructions implemented.
provide the code in a way that if i copy it and past it in an html file, it will work correctly.