Как разбить код на более мелкие и управляемые куски модулей? ⇐ Javascript

[Anonymous]

Я изучаю JavaScript, и в настоящее время я изучаю модули. Я понятия не имею, как это сделать. Я знаю, что мне нужно использовать экспорт и импорт для этого, но я не знаю, как я должен с ним продолжить и как сделать отдельные файлы для каждого модуля.function select() {
const add = document.querySelector(".add-btn");
add.addEventListener("click", addItem);
}

function addItem() {
const main = document.querySelector(".main");

const newItem = document.createElement("div");
const newHeading = document.createElement("h2");
const deleteButton = document.createElement("button");
const inputArea = document.createElement("input");

newItem.classList.add("new-div");
newHeading.classList.add("new-heading");
deleteButton.classList.add("delete-btn");
inputArea.classList.add("textbox");

deleteButton.innerText = "Delete";
inputArea.type = "text";
inputArea.placeholder = "Enter here...";

num = main.children.length;
newHeading.innerText = `Task ${num}`;

newItem.append(newHeading, deleteButton, inputArea);

inputArea.addEventListener("keydown", ({ key }) => {
if (key == "Enter" && inputArea.value.trim() != "") {
const textValue = inputArea.value;

const displayText = document.createElement("p");

displayText.classList.add("txt-val");
displayText.innerText = textValue;

newItem.appendChild(displayText);
newItem.removeChild(inputArea);
}
})

document.querySelector(".main").appendChild(newItem);

inputArea.focus(); /* this makes the text box appear with a blinking cursor by default */

deleteItem(deleteButton, newItem);

num++;
}

function deleteItem(button, item) {
button.addEventListener("click", () => {
const main = document.querySelector(".main");
main.removeChild(item);
});
}

select();< /code>
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

h1 {
text-align: center;
margin-top: 2em;
text-decoration: underline;
font-size: 3em;
}

.main {
margin-top: 3em;
border-right: 12px solid rgb(108, 179, 202);
border-left: 12px solid rgb(108, 179, 202);
border-top: 8px solid rgb(108, 179, 202);
border-bottom: 8px solid rgb(108, 179, 202);
height: 100%;
position: relative;
}

.add-btn {
background-color: rgb(74, 184, 74);
color: white;
font-weight: bolder;
font-size: x-large;
padding: 10px;
border: none;
border-radius: 10px;
cursor: pointer;
height: 2em;
position: absolute;
translate: -2.5em -1.1em;
z-index: 1000;
}

.add-btn:hover {
background-color: rgb(112, 219, 112);
transition: 0.5s;
}

.main-button-class {
text-align: center;
}

.new-heading {
font-family: Georgia, 'Times New Roman', Times, serif;
}

.new-div {
position: relative;
border: 5px solid rgb(84, 153, 218);
margin-top: 65px;
margin-bottom: 30px;
margin-left: 32px;
margin-right: 32px;
padding: 15px;
height: 170px;
text-align: center;

}

.delete-btn {
width: 65px;
height: 50px;
background-color: red;
color: white;
font-weight: bold;
font-size: large;
border-radius: 10px;
position: absolute;
top: 0;
right: 0;
translate: 25px -25px;
cursor: pointer;
border: none;
}

.textbox {
width: 95%;
height: 80px;
margin-top: 15px;
padding: 15px;
border: 1px solid black;
}

.txt-val {
font-size: x-large;
color: black;
margin-top: 35px;
}

.delete-btn:hover {
background-color: rgb(255, 105, 105);
transition: 0.5s;
}< /code>





Todo List New




Todo List


Add Task



< /code>
< /div>
< /div>
< /p>
Я опубликовал свой код выше. Но я не знаю, как разбить мои файлы JavaScript на более мелкие куски и как их объединить. Я также не решаюсь сделать это, потому что, когда я попробовал это самостоятельно, код не сработал, и поток управления был испорчен.


Подробнее здесь: https://stackoverflow.com/questions/796 ... of-modules