I need code of it.

Each list should be different colors(nth child(even and odd)). That need to be done in javascript.

If a list is already exists with a name, a message("It is already exists.") will appear and it won't add to list.

When I click on a list the text should toggle to between margin-left:0; and margin-left:50px when unchecked and checked.

HTML

Code:
<!DOCTYPE html>

<html>

<link rel="stylesheet" type="text/css" href="style.css"/>

<body>

<div id="Header">

<input type="text" placeholder=" Type your text" id="myInput"/>

<span id="Add" onclick="newElement()">Add</span>

</div>

<ul id="myUL">

<li><span class="sp">ASQm<span class="close">&times;</span></span></li>
<li><span class="sp">ASadQm<span class="close">&times;</span></span></li>
<li><span class="sp">ASffffQm<span class="close">&times;</span></span></li>
<li><span class="sp">ASQgeryyyyyyym<span class="close">&times;</span></span></li>
<li><span class="sp">ASQgvvvvvm<span class="close">&times;</span></span></li>

</ul>

<p id="EText"></p>

<script>
var input=document.getElementById("myInput");

var A=[];

var i;

var ul=document.getElementById("myUL");

var list=document.getElementsByTagName("li");

var etext=document.getElementById("EText");

var sp=document.getElementsByClassName("sp");

var close=document.getElementsByClassName("close");

for(i=0; i<close.length; i++){

close[i].onclick=function(){

this.parentElement.parentElement.style.display="none";

}

}








ul.addEventListener("click", function(n){

if(n.target.tagName==="LI"){

n.target.classList.toggle("checked");

}



}, false);





function newElement(){

var inputvalue=document.getElementById("myInput").value;

var i;

var createli=document.createElement("li");

var span=document.createElement("span");

span.className="sp";

var span2=document.createElement("span");

span2.className="close";

var closetext=document.createTextNode("\u00D7");

var txt=document.createTextNode(inputvalue);

if(inputvalue==""){
alert("Write something.");
}
else{

if(A.indexOf(inputvalue)>-1){
etext.innerHTML="already Exists";
}
else{

var addlist={

a: ul.appendChild(createli),
b: createli.appendChild(span),
c: span.appendChild(txt),
d: span.appendChild(span2),
e: span2.appendChild(closetext)

}

A.push(txt);

}




}

input.value="";

for(i=0; i<close.length; i++){

close[i].onclick=function(){

this.parentElement.parentElement.style.display="none";

}

}






}
</script>

</body>

</html>
CSS

Code:
*{margin:0; padding:0;}

#Header{
        padding:50px;
		background-color:black;
		color:white;
	   }
	   
#myInput{
         padding:20px;
		 width:300px;
		 height:auto;
		 background-color:black;
		 color:white;
		 border:2px solid white;
		 outline:none;
		}
		
#Add{
     padding:18.5px;
	 background-color:black;
	 color:white;
	 border:2px solid white;
	 outline:none;
	 margin-left:;
	 margin-top:;
	 position:absolute;
	 cursor:pointer;
	}
	
#myUL{
      list-style-type:none;
	  margin:0;
	  padding:0;
	 }
	 
#myUL li{
       padding:20px;
	   background-color:black;
	   color:white;
	   border:1px solid white;
	   opacity:0.9;
	   cursor:pointer;
	   transition:0.4s;
	  }
	  
#myUL li:nth-child(odd){
                      background-color:black;
					  color:white;
					  opacity:0.8;
					 }
					 
#myUL li:nth-child(even){
                      background-color:black;
					  color:white;
					  opacity:1;
					 }					 
					 
#myUL li.checked{
               text-decoration:line-through;
			   opacity:0.4;		   
			  }
			  
#myUL  li.checked:before{
                       content:"";
                       width:20px;
                       height:10px;
                       border-left:5px solid white;		
                       border-bottom:5px solid white;
                       position:absolute;		
                       transform:rotate(-45deg);					   
					  }
	

	
.sp.checkedsp{
              margin-left:50px;
             }
   
.sp{
    margin-left:0px;
   }  
		   
.close{
       float:right;
	   padding:10px;
	   margin-top:-10px;
	   margin-right:-10px;
	   background-color:white;
	   color:black;
	   opacity:1;
	   cursor:pointer;
	  }
	  
.close:hover{
             background-color:#2196f3;
			 color:white;
			 opacity:1;
			}