my friend created a to do list, you can have a look here now I tried to create a to do list in my way, here is my code I am almost done but I still need to add the edit icon that would allow me to edit on the inserted value once I click on it. I appreciate that you guys help me out. sincerely.
var myspan= document.getElementsByClassName("myspan");
for(var i=0; i<myspan.length;i++)
{
myspan[i].onClick= function()
{
var divit = this.parentElement;
div.style.display="none";
}
}
var list =document.querySelector("ul");
list.addEventListener('click', function(event){
if(event.target.tagName==='LI')
{
event.target.classList.toggle('checked')
}
});
function addBtn()
{
var li = document.createElement("li");
var inputValue = document.getElementById("myinput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("You must write something!");
} else {
document.getElementById("Myul").appendChild(li);
}
document.getElementById("myinput").value="";
var span = document.createElement("myspan");
var text = document.createTextNode("\u00D7")
span.className="myspan";
span.appendChild(text);
li.appendChild(span)
for(var i=0; i<myspan.length;i++)
{
myspan[i].onclick = function(){
var divit=this.parentElement;
divit.style.display="none";
}
}
}* {
box-sizing: border-box;
}
body{
min-width: 250px;
text-align:center;
}
#mydiv:after {
content: "";
display: table;
clear: both;
}
#mydiv{
margin-top:0;
background: pink;
min-height: 100px;
padding: 20px;
}
.addBtn{
padding: 10px;
width: 25%;
background: #F6DDCC;
color: #555;
float: left;
text-align: center;
cursor: pointer;
transition: 0.3s;
}
.addBtn:hover{
background:#E59866;
border: none;
}
#myinput{
border: none;
outline: none;
border: 1px solid none;
width: 75%;
height: 38px;
float: left;
}
ul {
margin: 0;
padding: 0;
}
/* Style the list items */
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
list-style-type: none;
background: #85C1E9;
font-size: 18px;
transition: 0.2s;
border-top-style: dashed;
border-width: 0.6px;
}
li:first-child {
border-top: none;
}
li:last-child {
border-bottom: dashed;
border-width: 0.6px;
}
ul li.checked::before {
content: '';
position: absolute;
border-color: black;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
ul li.checked {
background: #BB8FCE;
color: #fff;
text-decoration: line-through;
}
.myspan {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
}
.myspan:hover {
background-color: green;
color: white;
}<div id="mydiv">
<h1>TO DO LIST</h1>
<input type="text" id="myinput" placeholder="Tittle..">
<span class="addBtn" id="hshs" onclick="addBtn()">add</span>
</div>
<ul id="Myul">
</ul>