dz7

by eawe_

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="homework-container">
    
    <p>filterNameInput</p>
    <input id="filter-name-input" type="text">
    
    <p>add-name-input</p>
    <input id="add-name-input" type="text">
    
    <p>add-value-input</p>
    <input id="add-value-input" type="text">
    
    <p></p>
    <button id="add-button">add-button</button>
    
    <div id="list-table"></div>
    
    
  </div>
     
  
</body>  
</html>

JavaScript

/* const btn = document.querySelector("#btn");
const listTable = document.querySelector('#list-table');


listTable.addEventListener('click', function (e) {
    console.dir(e.target);
});


console.dir(listTable); */

const homeworkContainer = document.querySelector('#homework-container');
// текстовое поле для фильтрации cookie
const filterNameInput = homeworkContainer.querySelector('#filter-name-input');
// текстовое поле с именем cookie
const addNameInput = homeworkContainer.querySelector('#add-name-input');
// текстовое поле со значением cookie
const addValueInput = homeworkContainer.querySelector('#add-value-input');
// кнопка "добавить cookie"
const addButton = homeworkContainer.querySelector('#add-button');

// таблица со списком cookie
const listTable = homeworkContainer.querySelector('#list-table');

console.log(listTable);

addButton.addEventListener('click', () => {
    document.cookie = `${addNameInput.value}=${addValueInput.value}`;

    addCookie();
});

listTable.addEventListener('click', function (e) {
		if (e.target.dataset.key) {
    //if (e.target.tagName === 'BUTTON') {
        deleteCookie(e.target.dataset.key);
        addCookie();
    }
    /*
    if (!(e.target.dataset.key === undefined)) {
        deleteCookie(e.target.dataset.key);        
    } 
    */   

});

const getCookies = () => {
    return document.cookie.split('; ').reduce((prev, current) => {
        const [name, value] = current.split('=');

        prev[name] = value;

        return prev;
    }, {});
}

const addCookie = () => {
    const cookieObj = getCookies();

    listTable.innerHTML = '';

    for (let key in cookieObj) {
        if (!(isInFilter(key, filterNameInput.value) || isInFilter(cookieObj[key], filterNameInput.value))) { 
            continue;
        }
        
        listTable.innerHTML += `<tr>
                                <th>${key}</th>
                                <th>${cookieObj[key]}</th>
                                <th>
                  ...