Я делаю список заданий для домашней работы. Дело в том, что я уже сделал свой код, но есть некоторые проблемы. особенно, когда мне нужно щелкнуть по завершенной задаче и показать отмеченный значок. Случается, что я нажимаю и показываю в каждом
отмеченный значок, и мне просто нужно показать конкретно . Другое дело, что поведение отмеченного значка некорректно. Предполагается, что он встроен перед именем задачи, но когда я нажимаю, щелкает вниз. Я знаю, что это должно быть из-за блока display: block. Есть ли способ решить эту проблему?
Спасибо заранее.
p.s - не могли бы вы также прокомментировать, что я сделал неправильно и что я мог бы сделать лучше, вместо того, чтобы просто дать мне решение? Я учусь, поэтому мне действительно нужно понять. Спасибо =) `
<!doctype html>
<html>
<head>
<title>Curso Javascript Completo 2018</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<style>
body,html{
margin:0;
padding:0;
height:100%;
}
.list{
background-color: white;
border:2px solid #87bfa5;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding:20px;
}
h1{
font-family: 'Open Sans', sans-serif;
}
ul{
font-family: 'Open Sans', sans-serif;
list-style-type: none;
text-align: left;
padding:0;
}
li{
padding: 10px 20px;
border:3px solid #87bfa5;
margin:10px 0px ;
border-radius:3px ;
border-radius:10px ;
}
i.fa-times,i.fa-check{
clear:left;
padding:0px 10px;
}
i.fa-times{
color:red;
clear:left;
float:right;
}
i.fa-check{
color:green;
}
input{
padding:10px 0px;
background-color:#87bfa5;
color:white;
border-style: none;
}
button{
padding:0px 20px;
border-style: none;
background-color:#0c9a99;
color:white;
font-family: 'Open Sans', sans-serif;
font-size:14px;
line-height: 36px;
}
.done{
text-decoration: line-through;
color:#555;
}
</style>
</head>
<body>
<section class="list">
<h1>LISTA DE TAREFAS</h1>
<ul>
<li>Estudar JavaScript<i class="fas fa-check"></i><i class="fas fa-times"></i></li>
<li>Aprender a usar o Git Hub<i class="fas fa-check"></i><i class="fas fa-times"></i></li>
<li>Rever a matéria de Frontend<i class="fas fa-check"></i><i class="fas fa-times"></i></li>
</ul>
<input type ="text" id ="txtTask">
<button id ="btn">ACRESCENTAR TAREFA</button>
</section>
<script>
(function(){
'use strict'
var $ul = document.querySelector('ul');
var $lis = document.querySelectorAll('li');
var $cross = document.querySelectorAll("i.fa-times");
var $checked = document.querySelectorAll("i.fa-check ");
var $text = document.getElementById("txtTask");
var $button =document.getElementById("btn");
function displayNone(){
for(var x = 0; x<$checked.length;x++){
$checked[x].style.display ="none";
};
}
displayNone()
$button.addEventListener('click', acrescentaTarefa);
$text.addEventListener('keyup', enterTarefa);
$ul.addEventListener('click', clicarIcons);
function enterTarefa(e){
if(e.keyCode=== 13){
acrescentaTarefa();
}
};
function acrescentaTarefa(){
var li = document.createElement('li');
var text = document.createTextNode($text.value);
var icon1 = document.createElement('i');
icon1.className = "fas fa-times" ;
var icon2 = document.createElement('i');
icon2.className = "fas fa-check" ;
li.appendChild(text);
li.appendChild(icon1)
li.appendChild(icon2)
$ul.appendChild(li);
icon2.style.display ="none";
$text.value = '';
$text.focus();
};
function clicarIcons(e){
if(e.target.nodeName === 'LI'){
checkTask(e.target)
}
if(e.target.className === 'fas fa-times'){
removeTask(e.target.parentNode);
}
};
// I think the problem is here
function checkTask(){
displayNone();
for(var x = 0; x<$checked.length;x++){
$checked[x].style.display ="block";
};
};
function removeTask(li){
if(confirm("Do you wish to remove this task?")){
li.parentNode.removeChild(li);
}
};
})();
</script>
</body>
</html>
`