CODEWITHSUNDEEP
javascripthtmlcssimagehtml-lists
J Akhtar
J Akhtar

Reputation: 667

Shopping List Javascript program text of list items not formatting properly

I am trying to make a shopping list program in JavaScript which has an input box and an add item button. Upon clicking the item button text in the input field added to the unordered list as an list item. List item further has a child image icon that holds the functionality of double click and removes the item from the list. Single click on the list item changes the background color so it is marks as done. Problem I am facing is that the text of list item is align a bit on the top left side while image is aligned correctly. Both image and list item have floats, right and left respectively. Just wondering how to accomplish this? CSS, Javascript? have absolutely no idea. Any help please.

var input = document.getElementById('input');
var addButton = document.getElementById('add');
var list = document.getElementById('list');

addButton.onclick = CreateList;



function CreateList(){
  var li = document.createElement('li');
  li.textContent = input.value;
  var image = document.createElement('img');
  image.setAttribute('src',
 'http://findicons.com/files/icons/1580/devine_icons_part_2/128/trash_recyclebin_empty_closed.png');
  li.appendChild(image);
  list.appendChild(li);
  input.value = ""; 
  image.ondblclick = function(){
    list.removeChild(li);
  };
  li.onclick = function(){
    li.style.background = '#84ac47';
  };
}
.container  
{
   max-width: 600px;
   width: 100%;
   height: auto;
   background-color: #dedede;
   text-align: center;
   font-family: Century Gothic;
}

.head {
  padding: 15px;
}

.body {
  background-color: #dedede;
}
h3 {
  font-weigth: bold;
  font-size: 22px;
  padding: 10px 0;
}

input {
  width: 240px; 
  font-size: 18px;
  padding: 5px;
  outline: none;
  border: 0;
  
}

button {
  font-size: 18px;
  padding: 6px;
  border: 0;
  outline: none;
  background-color: tomato;
  color: #fff;
}

#list {
  width: 335px;
  list-style: none;
}

li {
  float: left;
  padding: 5px;
  margin-left: 92px;
  width: 324px;
  text-align: left;
  border-bottom: 1px solid #666;
  margin-bottom: 10px;
}

img {
  float: right;
  padding: 8px;
  width: 30px;
  height: 30px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
  <div class="head">
    <h3>Shopping Cart</h3>
    <input type="text" id="input"><!--
    --><button id="add">Add Item</button>
  </div>
  <div class="body">
    <ul id="list">
      
    </ul>
  </div>
</div>
</body>
</html>

Upvotes: 0

Views: 1773

Answers (1)

dexhering
dexhering

Reputation: 422

You must add the property line-height to the "li" element styles:

li {
  float: left;
  padding: 5px;
  margin-left: 92px;
  width: 324px;
  text-align: left;
  border-bottom: 1px solid #666;
  margin-bottom: 10px;
  /* like the image are 30px height + 16px padding, the line-height must be 46px */
  line-height: 46px;

}

Upvotes: 1

Related Questions