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>