I need JavaScript code that powers a **Forex Checklist Analyzer** web application. This app should allow users (traders) to manage, prioritize, and track their trading strategies using an interactive checklist. Here's what I need the JavaScript to handle:

### Core Functionalities:

1. **Checklist Management**:
   - **Add new criteria**: The user should be able to add a new criterion by entering a name and a priority (via a prompt). Each criterion consists of:
     - A **checkbox** to mark the item as active or inactive.
     - A **text area** to edit the criterion's name.
     - A **priority label** to display the item's priority.
   - **Delete criteria**: The user should be able to delete any criterion.
   - **Drag-and-drop**: Users should be able to drag and reorder criteria within the list. The order of items in the data should be updated accordingly.

2. **Real-Time Progress Calculation**:
   - A **progress bar** should reflect the cumulative score of active criteria. Each active criterion contributes its priority value to the total score.
   - A **numerical label** next to the progress bar updates in real time, reflecting the total score. The score should be capped at 100 to avoid exceeding the bar's width.
   - When criteria are re-ordered or a new criterion is added, the progress bar and numerical score should update dynamically.

3. **Checkbox and Priority Interaction**:
   - **Checkbox toggle**: When a criterion’s checkbox is toggled (checked/unchecked), update the progress bar and numerical score accordingly.
   - **Priority editing**: The priority value for each criterion should be editable via a prompt. When the priority is updated, the numerical score and progress bar should adjust in real time.

4. **Persistent Data Storage**:
   - **LocalStorage**: The checklist data should be saved to the browser's **LocalStorage** so that the user's progress and checklist items persist even after the page is refreshed or closed.
   - **Save and load**: On page load, the checklist should automatically load from LocalStorage. On any changes (e.g., adding, deleting, re-ordering items), the data should be saved to LocalStorage.

5. **Data Import/Export**:
   - **Export**: The user should be able to export their checklist data as a JSON file. This should include the criteria names, their priorities, and whether they are active or not.
   - **Import**: The user should be able to import a JSON file to restore their checklist. When imported, the checklist data should replace the current list and update the progress bar and numerical score.

6. **Search Functionality**:
   - The app should include a **search bar** that allows users to filter criteria by name. As the user types, the list should dynamically show or hide items that match the search term.

7. **Real-Time Updates**:
   - The UI should reflect changes immediately without requiring a page refresh. For example:
     - When a criterion is added, it should appear instantly.
     - When a checkbox is toggled, the progress bar and numerical score should update immediately.
     - When an item is deleted, it should be removed from the list, and the changes should be reflected in the stored data.

### Additional Considerations:

- The app should handle data validation during user input. For example, when adding a new criterion, ensure the user provides a valid name and priority (e.g., a number for the priority).
- Ensure that items can be dragged and dropped smoothly, and that the reordering is reflected in the saved data.
- When importing JSON data, handle any errors gracefully (e.g., if the file is not properly formatted, show an alert).


the javascript will crafted for this html css:

<!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>
--note this:script that you will craft will pasted her--
</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>