0

I created a to-do list so when you add something into the textbox and click the add button it adds it into the list which is shown below it. However, I want to quickly add a bunch of things and not tediously use my mouse to click the add button every time, that's why I have been trying to add in the function for when I press enter it will be added. But everything I've tried hasn't been working and yes I've read through and attempted to use code from other questions on stackoverflow which is why I've finally decided to ask this question.

Please help! [the end of the JavaScript part of the snippet is my most recent attempt]

// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  myNodelist[i].appendChild(span);
}
// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
  }
}

// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');
  }
}, false);

// Create a new list item when clicking on the "Add" button
function newElement() {
  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("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);

  for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
      var div = this.parentElement;
      div.style.display = "none";
    }
  }
window.addEventListener('keyup', function (e) {
  if (e.keyCode === 13) {
     var button = document.getElementById("myInput");
     button.click();
  }
}, false);
}
        body {
                background-color: #81B9E3;
                font-family: 'Handlee', cursive;
            }

            h1 {
                color: #2F90DA;
                font-size: xxx-large;
                font-family: 'Concert One', cursive;
            }

            a {
                text-decoration: none;
                color: #2F90DA;
            }
            
            p{
                color: black;
            }

body {
  margin: 0;
  min-width: 250px;
}

/* Include the padding and border in an element's total width and height */
* {
  box-sizing: border-box;
}

/* Remove margins and padding from the list */
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: #7DB9FF;
  font-size: 18px;
  transition: 0.2s;
  
  /* make the list items unselectable */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Set all odd list items to a different color (zebra-stripes) */
ul li:nth-child(odd) {
  background: #93C5FF;
}

/* Darker background-color on hover */
ul li:hover {
  background: #51CA4C;
}

/* When clicked on, add a background color and strike out text */
ul li.checked {
  background: #9DF599;
  color: #51CA4C;
  text-decoration: line-through;
}

/* Add a "checked" mark when clicked on */
ul li.checked::before {
  content: '';
  position: absolute;
  border-color: #51CA4C;
  border-style: solid;
  border-width: 0 2px 2px 0;
  top: 10px;
  left: 16px;
  transform: rotate(45deg);
  height: 15px;
  width: 7px;
}

/* Style the close button */
.close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
}

.close:hover {
  background-color: #F44336;
  color: white;
}

/* Style the header */
.header {
  background-color: #2F90DA;
  padding: 30px 40px;
  color: white;
  text-align: center;
}

/* Clear floats after the header */
.header:after {
  content: "";
  display: table;
  clear: both;
}

/* Style the input */
input {
  margin: 0;
  border: none;
  border-radius: 0;
  width: 75%;
  padding: 10px;
  float: left;
  font-size: 16px;
}

/* Style the "Add" button */
.addBtn {
  padding: 8.5px;
  width: 25%;
  background: #81B9E3;
  color: #fff;
  float: left;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 0;
}

.addBtn:hover {
  background-color: #51CA4C;
}
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>To Do List</title>
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Actor&family=Luckiest+Guy&display=swap" rel="stylesheet">
        <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Concert+One&family=Handlee&family=Actor&display=swap" rel="stylesheet">
    <link href="todo.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    
        <div style="background-color: #DCEEF5; padding: 20px; text-align: center;">
            <h1>  To Do List </h1>
            <h2 style="margin-top: 0; margin-left: 20%; margin-right: 20%">Make your own to do list!</h2>
      <h3>Type your task and click "Add". Once your task is completed, just click on the task to cross it off. Press the x button on the far right of a task to remove it.</h3>
            <h4 style="margin-bottom: 3%;">Go back to <a href="home.html">Productify Home</a> or <a href="navigate.html">Navigation</a></h4>
        </div><br/>
    </body>
  <style>

</style>
</head>
<body>

<div id="myDIV" class="header">
  <h2 style="margin:5px"> My To Do List </h2>
  <input type="text" id="myInput" placeholder="New Task...">
  <span onclick="newElement()" class="addBtn">Add</span>
</div>

<ul id="myUL"></ul>
<script src="todo.js"></script>
</body>
</html>
Katie Jones
  • 11
  • 1

1 Answers1

0

You can probably get away with using the same handler for both the button and the input using a closure.

// Cache your elements
const input = document.querySelector('input');
const list = document.querySelector('div');
const button = document.querySelector('button');

// Pass in the input and list elements to the handler
// The handler returns a new function that will be used
// for both the button and input listeners
const handler = handleInput(input, list);

button.addEventListener('click', handler, false);
input.addEventListener('keyup', handler, false);

function handleInput(input, list) {

  // Initialise the text in the input
  let text = '';
  
  // Add the text to the page, reset `text`,
  // and reset the input value
  function printLine(text) {
    list.innerHTML += `<div>${text}</div>`;
    text = '';
    input.value = '';
  }

  // This is the listener
  return function(e) {

    const { code, target: { value, type } } = e;

    // If the button is clicked call `printLine`
    if (type === 'submit') printLine(text);

    // If the input has changed
    // If return has been pressed call printLine
    // otherwise update the text value
    if (type === 'text') {
      if (code === 'Enter') {
        printLine(text);
      } else {
        text = value;
      }
    }

  }

}
<input />
<button>Add to list</button>
<div></div>
Andy
  • 61,948
  • 13
  • 68
  • 95