I'm trying to mimic a project I found on codepen: http://codepen.io/ChynoDeluxe/pen/pJxOQE/
At this point I can create the list items and delete them, but I want to tu the delete button into an image that will increase in opacity when hovered over. However I can't figure out how to make the created button into an image. Ideally I would figure out how to make it the same trash can icon, but I'm hoping to make the picture appear then I can go from there.
I tried making the picture the background image but it didn't show up properly. Here's what I have so far:
<!doctypeHTML><html><head>
<title>MSL List</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript"></script>
<style>
div li input {
margin-right: 10px;
}
#wrapper {
width: 300px;
margin-left: auto;
margin-right: auto;
font: 1em Helvetica, Arial, Sans-serif;
}
#error {
display: none;
background: rgba(237, 28, 36, .7);
color:#fff;
padding: 14px;
margin-bottom: 10px;
border-radius: 10px;
text-align: center;
font-size: 1.1em;
}
#inpt {
background: rgba(31, 41, 51, .9);
color: #fff;
padding: 14px;
text-align: center;
font-size: .9em;
width: 227px;
border: none;
}
#btn {
background: #0066cc;
color: #fff;
font-size: 1.75em;
border: none;
padding: 6px;
width: 45px;
}
input, button {
vertical-align: top;
}
input, button:focus {
outline:none;
}
#iList {
list-style-type: none;
background-color: #fff;
margin: 0 auto;
}
li {
border-top: #E6E6E6 solid 1px;
padding: 12px;
}
.removeBtn {
float: right;
padding: 4px;
margin-top: 2px;
background-image:url("recycle.png");
opacity:.6;
}
</style>
</head>
<body bgcolor="#E6E6E6">
<div id="wrapper">
<div id="error">Please enter an item!</div>
<div id="form-head">
<input type="text" id="inpt" placeholder="What are you looking for?" /><button id="btn">+</button>
</div>
<div id="iList">
</div>
</div>
<script>
function updateItemStatus() { //making the function that updates whether an item should have a line through it or not
var cbId = this.id.replace("cb_", ""); //used to replace "cb_" with "" to remove the _cb part of the string on the focus
var itemText = document.getElementById("item_" + cbId); //gets element (item_minSecMsec)
if (this.checked) { //if an item is checked, bugged
itemText.style.opacity = .25;
itemText.style.textDecoration = "line-through";
} else {
itemText.style.opacity = 1;
itemText.style.textDecoration = "none";
}
};
function deleteItem() {var dbId = this.id.replace("btn_", "");
var delBtn = document.getElementById("li_" + dbId);
delBtn.onclick=function() {
this.parentNode.removeChild(delBtn);
retu false;
};
}
function addNewItem(iList, itemText) { //defining a function that acts upon list and itemText to label it with a time stamp
var date = new Date(); //sets date ia variable that sets date to make the time stamp
var id = date.getMilliseconds(); //makes id = milliseconds
var listItem = document.createElement("li"); //creates a list element node
listItem.id = "li_" + id; //gives that node an id of li_minSecMsec
var checkBox = document.createElement("input"); //creates an input node
checkBox.type = "checkbox"; //gives that input node a type of checkbox
checkBox.id = "cb_" + id; //makes the checkbox id cb_minSecMsec
checkBox.onclick = updateItemStatus; //when the checkbox is clicked it runs updateItemStatus function defined above
var span = document.createElement("span"); //creates a span node.
span.id = "item_" + id; //makes span id = item_minSecMsec
span.ierHTML = itemText; //makes the ier text of the span node itemText (which has no further value in this function)
var delBtn = document.createElement("button");
delBtn.setAttribute("class", "removeBtn");
delBtn.id = "btn_" + id;
delBtn.onclick = deleteItem;
listItem.appendChild(checkBox); //append checkbox node to the li node created
listItem.appendChild(span); //append the span node to the li node as well
listItem.appendChild(delBtn);
iList.appendChild(listItem); //add the li node to list parameter (presumably any list in the DOM?)
document.getElementById("inpt").value="";
}
var inItemText = document.getElementById("inpt"); //gets the input text
inItemText.focus(); //makes it the focus
document.getElementById("inpt") //makes enter button run it as if btn was clicked
.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode == 13) {
document.getElementById("btn").click();
}
});
var btnNew = document.getElementById("btn"); //gets button
btnNew.onclick = function() { //on click the button runs a function that runs the addNewItem function
if (document.getElementById("inpt").value.length < 1) {
document.getElementById("error").style.display="block";
} else {
document.getElementById("error").style.display="none";
var inItemText = document.getElementById("inpt"); //defines inItemText within the function as the input text
var itemText = inItemText.value; //makes new variable of itemText to get the value of what is in the input
addNewItem(document.getElementById("iList"), itemText); //this is where the li node is added to the ul and itemText is set as the text in the input
}
};
</script>
</body>
</html>
Here's how it shows up where the pic should be the buttons on the right.
