I've been working on creating a simple web "to do list" but I've encountered an issue. When I manually add todos and click on them, the 'text-decoration: line-through;' property is ignored, and I can't see the strikethrough effect on my todo items.
Upon comparing the differences between the applied .lineThrough class to two li elements, it seems that the manually added li elements are automatically being assigned the following classes:
.far {
li:nth-child(2n) {
font-family: 'Font Awesome 5 Free';
font-weight: 400;
}
.fa, .fas, .far, .fal, .fad, .fab {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
user agent stylesheet
i {
font-style: italic;
background: white;
}
What could possibly be causing this problem?
This is an excerpt from my .js file:
$("i").on("click",function (){
$(this).parent().fadeOut(500,function () {
$(this).remove();
});
})
$("ul").on("click","li",function (){
$(this).toggleClass("lineThrough");
})
$("#plusBtn").on("click",function(){
var newTodo = $("#searchBox").val();
var newTodo = "<li> <i class='far fa-trash-alt'> </i>"+newTodo+"</li>"
if($("#searchBox").val() != ""){
$("#toDos").append(newTodo);
$("#searchBox").val("");
}
})
$("#searchBox").on("keypress",function(k){
if(k.which == 13){
var newTodo = $("#searchBox").val();
var newTodo = "<li><i class='far fa-trash-alt'>"+newTodo+"</i></li>"
if($("#searchBox").val() != ""){
$("#toDos").append(newTodo);
$(this).val("");
}
}
})
My .css filebody{
background-image:linear-gradient(to right, #076585 ,#fff); ;
}
#table{
width: 350px;
margin: 0 auto;
margin-top: 100px;
box-shadow: 10px 10px 20px #79777767;
}
#todoTitle{
background: rgb(88, 88, 214);
height: 45px;
line-height: 50px;
padding-left: 10px;
color: whitesmoke;
font-size: 25px;
}
#plusBtn{
background: transparent;
border: 0;
color: white;
font-weight: bold;
font-size: 45px;
float: right;
line-height: 45px;
outline: none;
}
#searchBox{
width: 100%;
border: 0;
padding: 0;
height: 45px;
font-size: 20px;
padding-left: 10px;
color: gray;
box-sizing: border-box;
}
#toDos{
list-style-type: none;
padding: 0;
margin: 0;
}
li{
padding: 0;
width: 100%;
background: rgb(240, 240, 240);
padding-left: 10px;
box-sizing: border-box;
height: 45px;
line-height: 45px;
font-size: 25px;
color: gray;
}
li:nth-child(2n){
background: white;
}
.lineThrough{
text-decoration: line-through;
color: rgb(182, 179, 179);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TO DO LIST</title>
<link rel="stylesheet" type="text/css" href="tdl_css.css">
<script type = "text/javascript" src="jquery-3.4.1.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Gupter&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300i&display=swap" rel="stylesheet">
<link rel = "stylesheet" type ="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
</head>
<body>
<div id = "table">
<div id = "todoTitle">TO-DO LIST
<button id= "plusBtn">+</button>
</div>
<input type="text" id = "searchBox" placeholder="Add New Todo"></input>
<ul id="toDos">
<li> <i class="far fa-trash-alt"></i>safsdfsdf</li>
<li> <i class="far fa-trash-alt"></i>sasdddsdfsdfsdf</li>
</ul>
</div>
<script type = "text/javascript" src="tdl_js.js"></script>
</body>
</html>