Зачёркивание текста когда нажимаешь на рисунок галочки

Question

Есть Todo list, при нажатии на галочку она должна зачеркиваться, а при нажатии на корзину удаляться. Помогите это сделать

HTML

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
  </head>
  <body>
    <script src="./functionality.js"></script>
    <script src="./container.js"></script>
    <script src="./script.js"></script>
  </body>
</html>

CSS

    background-image: url(./samantha-gades-BlIhVfXbi9s-unsplash.jpg);
    background-repeat: cover;
    background-size: 100%;
}

.mainBlock div{
    display: grid;
    grid-template-columns: 5fr 0.3fr 0.3fr;
    grid-column-gap: 5px;
}

.mainBlock{
    width: 550px;
    background-color: #73a086;
    padding: 20px;
    opacity: 0.9px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    margin: 0 auto;
}
.mainBlock ul{
    padding: 0px;
    margin-left: 8px;
}

.projectName{
    font-family: 'Times New Roman', Times, serif;
    font-size: 45px;
    color: #73a086;
    text-shadow: 1px 1px 3px rgb(144, 138, 138);
    text-align: center;
}

.input{
    width: 300px;
    height: 21px;
    margin: 5px;
    outline: none;
}

.inputDate{
    width: 100px;
    height: 21px;
    margin: 5px;
}

#button{
    width: 100px;
    height: 25px;
    margin: 5px;
}

/* style for future list */
.creatTodoItemBlock{
    margin: 10px;
}

.createTodoItemBlock li{
    list-style: none;
}

.createTodoItemBlock img{
    width: 20px;
    height: 20px;
    margin-left: 5px;
    margin-right: 5px;
}

functionality.js

  let newTask = input.value;
  let date = inputDate.value;

  if (newTask) {
    todosArray.unshift({
      title: newTask,
      date: date,
      checked: false,
    });
    renderTodoItem();
  }
}

container.js

let main = document.createElement("main");
main.classList.add("container");
document.body.prepend(main);

let projectName = document.createElement("h1");
projectName.classList.add("projectName");
projectName.innerHTML = "Let's do it";
main.append(projectName);

let mainBlock = document.createElement("div");
mainBlock.className = "mainBlock";
main.append(mainBlock);

let inputBlock = document.createElement("div");
inputBlock.className = "inputBlock";
mainBlock.append(inputBlock);

// creating input inside inputBlock
let input = document.createElement("input");
input.className = "input";
input.setAttribute("placeholder", "Gonna do...");
inputBlock.append(input);

// creating input date inside inputBlock
let inputDate = document.createElement("input");
inputDate.setAttribute("type", "date");
inputDate.className = "inputDate";
inputBlock.append(inputDate);

// creating button inside inputBlock
let button = document.createElement('button')
button.innerHTML = 'Add'
button.id = 'button'
inputBlock.append(button)

button.addEventListener('click', addTodo)

// creating list for future list
let list = document.createElement('ul')
mainBlock.append(list)

let todosArray = []

script.js

  let item = ` <div class="createTodoItemBlock">
        <li>${el.title} ${el.date}</li>
        <img src="./check-icon.png"/>
        <img src="./delete-icon.png"/>
    </div>
`;
  return item;
};

const renderTodoItem = () => {
  list.innerHTML = "";
  let items = [ ];

  todosArray.length
    ? todosArray.map((el, i) => {
        items.unshift(createTodoItem(el, i));
        list.innerHTML = items.join("");

      })
    : (list.prepend('No task'))
}

БЛОГ НА HUSL

Зачёркивание текста когда нажимаешь на рисунок галочки

Ответы (0 шт):