How to Add Space Between Text and Button for Line Items

I am trying to add a space between the line item text when added and the remove button in a to-do-list. JavaScript has the remove button appearing next to each line item when they are added. I don't know how to add a space between the item added and the remove button for better appearance. Also, what additional changes, if any, would you make to streamline this code and to-do-list functionality. Thanks

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var list = document.querySelectorAll('ul>li');

function inputLength() {
    return input.value.length;
}

function createListElement() {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li);
    input.value = "";

    // Delete Button
    var deleteButton = document.createElement("button");
    deleteButton.setAttribute("class", "btn")
    deleteButton.appendChild(document.createTextNode(" Remove "));
    ul>li.appendChild(deleteButton).addEventListener("click", removeItem);

    // Strike-through
    ul.appendChild(li).addEventListener("click", toggleList);
}

function addListAfterClick() {
    if (inputLength() > 0) {
        createListElement();
    }
}

function addListAfterKeypress(event) {
    if (inputLength() > 0 && event.keyCode === 13) {
        createListElement();
    }
}

function removeItem() {
    this.parentNode.remove();
}

function toggleList () {
    this.classList.toggle("done");
}

button.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);

// If you click on the list item, it toggles the .done class on and off.

// Add buttons next to each list item to delete the item when clicked on 
// its corresponding delete button.

// BONUS: When adding a new list item, it automatically adds the delete 
// button next to it (hint: be sure to check if new items are clickable too!)

body {
font-family: 'Permanent Marker', cursive;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #f5d020;
background-image: linear-gradient(180deg, #f5d020 0%, #f53803 74%);
background-attachment: fixed;
}

.done {
  text-decoration: line-through;
}

h1 {
  font-size: 40px;
}

p {
  font-size: 30px;
}

input {
 font-size: 25px;
 font-family: 'Permanent Marker', cursive;
}

button {
  font-size: 15px;
  font-family: 'Permanent Marker', cursive;
}

ul {
  font-size: 25px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

<!DOCTYPE html>
<html>
<head>
    <title>Javascript   DOM</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Permanent Marker&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Shopping List</h1>
    <p id="first">Get it done today !</p>
    <input id="userinput" type="text" placeholder="enter items">
    <button id="enter">Enter</button>
    <ul>
    </ul>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

CodePudding user response：

Looks like you can just add

.btn { margin-left: 5px; }

to your css.

As to how to improve the code, here is the pattern I use to generate html with javascript.

const outputElem = document.querySelector('#output');

let html = '';
html  = '<ul>';
for (let i = 0; i < 3; i  ) {
  html  = '<li>';
  html  =   'item '   i;
  html  = '</li>';
}
html  = '</ul>';

outputElem.innerHTML = html;

<div id="output"></div>

This can be used to replace

// Delete Button
var deleteButton = document.createElement("button");
deleteButton.setAttribute("class", "btn")
deleteButton.appendChild(document.createTextNode(" Remove "));
li.appendChild(deleteButton).addEventListener("click", removeItem);

with

let html = '';
html  = '<button >';
html  =     ' Remove ';
html  = '</button>';
li.innerHTML  = html;
li.querySelector('.btn:last-child').addEventListener('click' removeItem);

CodePudding user response：

Just add margin property in css to button element inside li.

li button { margin-left:5px;}

that's it.

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var list = document.querySelectorAll('ul>li');

function inputLength() {
    return input.value.length;
}

function createListElement() {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li);
    input.value = "";

    // Delete Button
    var deleteButton = document.createElement("button");
    deleteButton.setAttribute("class", "btn")
    deleteButton.appendChild(document.createTextNode(" Remove "));
    ul>li.appendChild(deleteButton).addEventListener("click", removeItem);

    // Strike-through
    ul.appendChild(li).addEventListener("click", toggleList);
}

function addListAfterClick() {
    if (inputLength() > 0) {
        createListElement();
    }
}

function addListAfterKeypress(event) {
    if (inputLength() > 0 && event.keyCode === 13) {
        createListElement();
    }
}

function removeItem() {
    this.parentNode.remove();
}

function toggleList () {
    this.classList.toggle("done");
}

button.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);

// If you click on the list item, it toggles the .done class on and off.

// Add buttons next to each list item to delete the item when clicked on 
// its corresponding delete button.

// BONUS: When adding a new list item, it automatically adds the delete 
// button next to it (hint: be sure to check if new items are clickable too!)

body {
font-family: 'Permanent Marker', cursive;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #f5d020;
background-image: linear-gradient(180deg, #f5d020 0%, #f53803 74%);
background-attachment: fixed;
}

.done {
  text-decoration: line-through;
}

h1 {
  font-size: 40px;
}

p {
  font-size: 30px;
}

input {
 font-size: 25px;
 font-family: 'Permanent Marker', cursive;
}

button {
  font-size: 15px;
  font-family: 'Permanent Marker', cursive;
}
li button {
  margin-left:5px;
}
ul {
  font-size: 25px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

<!DOCTYPE html>
<html>
<head>
    <title>Javascript   DOM</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Permanent Marker&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Shopping List</h1>
    <p id="first">Get it done today !</p>
    <input id="userinput" type="text" placeholder="enter items">
    <button id="enter">Enter</button>
    <ul>
    </ul>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>