const component = ({html,indicator}) => {
const dom = new DOMParser().parseFromString(html, "text/html");
return dom.querySelector(indicator)
}
const popups = {
popupError : (text) => component({
indicator: ".popup",
html:`
<div class="popup error">
<div class="popu__wrapper">
${text}
</div>
</div>
`
}),
popupSomthing:(text) => component({
indicator: ".popup",
html:`
<div class="popup something">
<div class="popu__wrapper">
${text}
..............
</div>
</div>
`
})
}
btnPop.forEach( (btn,i) => {
btn.onclick = _ => {
popupParent.append(popups[btn.dataset.popupType]("data"))
}
})
let activePopup;
btnPop.forEach( (btn) => {
btn.onclick = _ => {
const popup = document.querySelector(`.popupType.${btn.dataset.popup}`)
if(popup) {
popup.classList.add("active")
activePopup = popup
}
}
})
function delPopUp () {
activePopup.classList.remove("active")
}
const component = ({html,indicator}) => {
const dom = new DOMParser().parseFromString(html, "text/html");
return dom.querySelector(indicator)
}
const task = (text,id) => component({
indicator: ".toDoList__list_task",
html:`
<li class="toDoList__list_task">
<div class="toDoList__task_info">
<span class="toDoList__task_id">#${id}</span>
<div class="toDoList__task_text"><input value="${text}" readonly></div>
</div>
<div class="toDoList__task_panel">
<button class="toDoList__task_del">+</button>
<button class="toDoList__task_done">done</button>
</div>
</li>
`
})