I'm trying to make an edit "button" that, when clicked, will launch a prompt window where you can enter new text that will replace the old text. The issue, I think, is that there is not an "edit button" in the html, it is created when an item is added to the to-do list. So I am having trouble targeting the text I want to replace.
Right now the "EditItem" function replaces the Edit button with the text I want, not the To-Do item. Any advice would really be appreciated!!
<html>
<head>
<title> To Do List</title>
<style>
body{
font: sans-serif;
color: #00b33c;
background-color: #ffffff;
}
p{
font: sans-serif;
width: auto;
}
ul {
list-style: none;
padding: 0;
margin: 0;
width: 500px;
}
li {
border: 2px solid #fff;
background: #e5ffff;
padding: 10px 10px;
color: #000000;
width: 500px;
}
li span{
padding-left: 10px;
padding-right: 200px;
}
.checked{
text-decoration: line-through;
font-weight: bold;
color: #ff0000;
}
li span2{
position: relative;
padding: 0 5px 0 5px;
margin: 10px;
font-size: 12px;
cursor: pointer;
border: 1px solid #000000;
background-color: #ffffff;
}
li span3{
font-size: 12px;
padding: 0 5px 0 5px;
position: relative;
cursor: pointer;
border: 1px solid #000000;
background-color: #ffffff;
}
}
</style>
</head>
<body>
<h1> To Do List</h1>
<p>
<input type="text" id="inItemText">
<button id="btnAdd">Add</button>
</p>
<ul id="todoList"></ul>
<script src="todolist.js"></script>
</body>
</html>
Javascript
//CheckBox Feature
function updateStatus() {
var cbId = this.id.replace("cb_", "");
var itemText = document.getElementById("item_" + cbId);
if (this.checked) {
itemText.className = "checked";
} else {
itemText.className = "";
}
}
//Delete Button
function deleteItem(){
this.parentNode.parentNode.removeChild(this.parentNode);
inItemText.focus();
inItemText.select();
}
//Edit Button
function editItem(e){
var newText = prompt("What would you like to change this to?");
if(newText !== null){
this.textContent = newText;
}
else{
alert("You must add something");
}
}
//Add new item to To-Do List
function addNewItem(list, itemText) {
totalItems++;
var listItem = document.createElement("li");
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "cb_" + totalItems;
checkbox.onclick = updateStatus;
var span = document.createElement("span");
span.id = "item_" + totalItems;
span.textContent = itemText;
var spanDelete = document.createElement("span2");
spanDelete.setAttribute("id", listItem.id);
spanDelete.setAttribute("class", "delete");
spanDelete.textContent = "DELETE";
spanDelete.onclick = deleteItem;
var spanEdit = document.createElement("span3")
spanEdit.id = "editId_" + totalItems;
spanEdit.textContent = "EDIT";
spanEdit.onclick = editItem;
listItem.appendChild(checkbox);
listItem.appendChild(span);
listItem.appendChild(spanDelete);
listItem.appendChild(spanEdit);
list.appendChild(listItem);
}
//Add item to list with ENTER KEY
var totalItems = 0;
var inItemText = document.getElementById("inItemText");
inItemText.focus();
inItemText.onkeyup = function(event){
if(event.which === 13){
var itemText = inItemText.value;
if (!itemText || itemText === "" || itemText === " ") {
return false;
}
addNewItem(document.getElementById("todoList"), itemText);
inItemText.focus();
inItemText.select();
}
//Add item to To-Do List with "Add" Button
var btnNew = document.getElementById("btnAdd");
btnNew.onclick = function() {
var itemText = inItemText.value;
if (!itemText || itemText === "" || itemText === " ") {
return false;
}
btnNew.onkeyup = function(event){
if(event.which == 13){
if (!itemText || itemText === "" || itemText === " ") {
return false;
}
}
}
addNewItem(document.getElementById("todoList"), itemText);
inItemText.focus();
inItemText.select();
}
}
Looking at this function in your codes
function editItem(e){
var newText = prompt("What would you like to change this to?");
if(newText !== null){
this.textContent = newText;
}
else{
alert("You must add something");
}
}
change this line this.textContent = newText; to
this.previousElementSibling.previousElementSibling.innerHTML = newText;
here is the snippet
//CheckBox Feature
function updateStatus() {
var cbId = this.id.replace("cb_", "");
var itemText = document.getElementById("item_" + cbId);
if (this.checked) {
itemText.className = "checked";
} else {
itemText.className = "";
}
}
//Delete Button
function deleteItem(){
this.parentNode.parentNode.removeChild(this.parentNode);
inItemText.focus();
inItemText.select();
}
//Edit Button
function editItem(e){
var newText = prompt("What would you like to change this to?");
if(newText !== null){
this.previousElementSibling.previousElementSibling.innerHTML = newText;
}
else{
alert("You must add something");
}
}
//Add new item to To-Do List
function addNewItem(list, itemText) {
totalItems++;
var listItem = document.createElement("li");
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "cb_" + totalItems;
checkbox.onclick = updateStatus;
var span = document.createElement("span");
span.id = "item_" + totalItems;
span.textContent = itemText;
var spanDelete = document.createElement("span2");
spanDelete.setAttribute("id", listItem.id);
spanDelete.setAttribute("class", "delete");
spanDelete.textContent = "DELETE";
spanDelete.onclick = deleteItem;
var spanEdit = document.createElement("span3")
spanEdit.id = "editId_" + totalItems;
spanEdit.textContent = "EDIT";
spanEdit.onclick = editItem;
listItem.appendChild(checkbox);
listItem.appendChild(span);
listItem.appendChild(spanDelete);
listItem.appendChild(spanEdit);
list.appendChild(listItem);
}
//Add item to list with ENTER KEY
var totalItems = 0;
var inItemText = document.getElementById("inItemText");
inItemText.focus();
inItemText.onkeyup = function(event){
if(event.which === 13){
var itemText = inItemText.value;
if (!itemText || itemText === "" || itemText === " ") {
return false;
}
addNewItem(document.getElementById("todoList"), itemText);
inItemText.focus();
inItemText.select();
}
//Add item to To-Do List with "Add" Button
var btnNew = document.getElementById("btnAdd");
btnNew.onclick = function() {
var itemText = inItemText.value;
if (!itemText || itemText === "" || itemText === " ") {
return false;
}
btnNew.onkeyup = function(event){
if(event.which == 13){
if (!itemText || itemText === "" || itemText === " ") {
return false;
}
}
}
addNewItem(document.getElementById("todoList"), itemText);
inItemText.focus();
inItemText.select();
}
}
body{
font: sans-serif;
color: #00b33c;
background-color: #ffffff;
}
p{
font: sans-serif;
width: auto;
}
ul {
list-style: none;
padding: 0;
margin: 0;
width: 500px;
}
li {
border: 2px solid #fff;
background: #e5ffff;
padding: 10px 10px;
color: #000000;
width: 500px;
}
li span{
padding-left: 10px;
padding-right: 200px;
}
.checked{
text-decoration: line-through;
font-weight: bold;
color: #ff0000;
}
li span2{
position: relative;
padding: 0 5px 0 5px;
margin: 10px;
font-size: 12px;
cursor: pointer;
border: 1px solid #000000;
background-color: #ffffff;
}
li span3{
font-size: 12px;
padding: 0 5px 0 5px;
position: relative;
cursor: pointer;
border: 1px solid #000000;
background-color: #ffffff;
}
}
<body>
<h1> To Do List</h1>
<p>
<input type="text" id="inItemText">
<button id="btnAdd">Add</button>
</p>
<ul id="todoList"></ul>
<script src="todolist.js"></script>
</body>
Related
var grid = document.getElementById('grid');
var msg = document.querySelector('.message');
var chooser = document.querySelector('form');
var mark;
var cells;
// add click listener to radio buttons
function setPlayer() {
mark = this.value;
msg.textContent = mark + ', click on a square to make your move!';
chooser.classList.add('game-on');
this.checked = false;
buildGrid();
}
// add click listener to each cell
function playerMove() {
if (this.textContent == '') {
this.textContent = mark;
checkRow();
switchMark();
computerMove();
}
}
// let the computer make the next move
function computerMove() {
var emptyCells = [];
var random;
/* for (var i = 0; i < cells.length; i++) {
if (cells[i].textContent == '') {
emptyCells.push(cells[i]);
}
}*/
cells.forEach(function(cell){
if (cell.textContent == '') {
emptyCells.push(cell);
}
});
// computer marks a random EMPTY cell
random = Math.ceil(Math.random() * emptyCells.length) - 1;
emptyCells[random].textContent = mark;
checkRow();
switchMark();
}
// switch player mark
function switchMark() {
if (mark == 'X') {
mark = 'O';
} else {
mark = 'X';
}
}
// determine a winner
function winner(a, b, c) {
if (a.textContent == mark && b.textContent == mark && c.textContent == mark) {
msg.textContent = mark + ' is the winner!';
a.classList.add('winner');
b.classList.add('winner');
c.classList.add('winner');
return true;
} else {
return false;
}
}
// check cell combinations
function checkRow() {
winner(document.getElementById('c1'), document.getElementById('c2'), document.getElementById('c3'));
winner(document.getElementById('c4'), document.getElementById('c5'), document.getElementById('c6'));
winner(document.getElementById('c7'), document.getElementById('c8'), document.getElementById('c9'));
winner(document.getElementById('c1'), document.getElementById('c4'), document.getElementById('c7'));
winner(document.getElementById('c2'), document.getElementById('c5'), document.getElementById('c8'));
winner(document.getElementById('c3'), document.getElementById('c6'), document.getElementById('c9'));
winner(document.getElementById('c1'), document.getElementById('c5'), document.getElementById('c9'));
winner(document.getElementById('c3'), document.getElementById('c5'), document.getElementById('c7'));
}
// clear the grid
function resetGrid() {
mark = 'X';
/* for (var i = 0; i < cells.length; i++) {
cells[i].textContent = '';
cells[i].classList.remove('winner');
}*/
cells.forEach(function(cell){
cell.textContent = '';
cell.classList.remove('winner');
});
msg.textContent = 'Choose your player:';
chooser.classList.remove('game-on');
grid.innerHTML = '';
}
// build the grid
function buildGrid() {
for (var i = 1; i <= 9; i++) {
var cell = document.createElement('li');
cell.id = 'c' + i;
cell.addEventListener('click', playerMove, false);
grid.appendChild(cell);
}
/* cells = document.querySelectorAll('li'); //Returns a NodeList, not an Array
See https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches */
cells = Array.prototype.slice.call(grid.getElementsByTagName('li'));
}
var players = Array.prototype.slice.call(document.querySelectorAll('input[name=player-choice]'));
players.forEach(function(choice){
choice.addEventListener('click', setPlayer, false);
});
var resetButton = chooser.querySelector('button');
resetButton.addEventListener('click', function(e) {
e.preventDefault();
resetGrid();
});
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background-color: #996E89;
font-family: "Comfortaa", sans-serif;
}
h1 {
font-family: "Lobster", serif;
}
.message {
color: #fff;
font-size: 1.5em;
padding-bottom: 1em;
}
form {
label {
font-size: 4em;
font-weight: bold;
vertical-align: middle;
}
input[type=radio] {
margin: 1em;
cursor: pointer;
}
fieldset {
display: block;
opacity: 1;
transition: all ease 1s;
}
&.game-on fieldset {
opacity: 0;
display: none;
}
&.game-on button {
opacity: 1;
display: block;
margin: 0 auto;
}
}
#grid-section {
margin: 3em 0;
}
#grid {
width: 300px;
margin: 0 auto;
}
li {
border: 1px solid #000;
width: 100px;
height: 100px;
display: block;
float: left;
font-size: 3em;
text-align: center;
padding: .5em;
}
#c1, #c2, #c3 {
border-top: none;
}
#c3, #c6, #c9 {
border-right: none;
}
#c7, #c8, #c9 {
border-bottom: none;
}
#c1, #c4, #c7 {
border-left: none;
}
.winner {
color: #9AE1E5;
}
.btn-primary,
.btn-primary:focus {
background-color: #33B7A5;
opacity: 0;
outline: 0;
transition: all ease .3s;
}
.btn-primary:hover {
background-color: #4C2F39;
}
<div class="container">
<div class="row text-center" id="intro-section">
<h1>Player vs Computer Tic-Tac-Toe</h1>
<h2 class="message">Choose your player:</h2>
<form action="#">
<fieldset>
<input type="radio" name="player-choice" id="player-choice-1" value="X" />
<label for="player-choice-1">X</label>
<input type="radio" name="player-choice" id="player-choice-2" value="O" />
<label for="player-choice-2">O</label>
</fieldset>
<button id="reset" class="btn btn-primary">Reset</button>
</form>
</div>
<div class="row" id="grid-section">
<ul id="grid"></ul>
</div>
I wish to add a scoreboard on top where wins,loses,draws would be calculated. How do I go about the same? Also an another HTML page where I could see the number of wins, loses, draws.
I have tried adding table in the html and using it in JS but not able to implement the same.
Could you suggest any methods to implement these tasks in the project.
I have tried to insert the data into the ToDo List and it is working but i am unable to edit the name and number field in the edit box of ToDo list.
And also the list is showing is not properly having padding and i tried to put padding in the list but whole list is shifting towards the left.
Also I tried with table concept in JavaScript but for that i need the loop and the database but i dont want to use the database or any other storage
var taskInput = document.getElementById("new-task");
var nameInput = document.getElementById("new-name");
var numberInput = document.getElementById("new-number");
var addButton = document.getElementsByTagName("button")[0];
var incompleteTask = document.getElementById("incomplete-tasks");
var completedTask = document.getElementById("completed-tasks");
var createNewTaskElement = function (taskString, nameString, numberString) {
var listItem = document.createElement("li");
var checkBox = document.createElement("input");
var label = document.createElement("label");
var label1 = document.createElement("label1");
var label2 = document.createElement("label2");
var editInput = document.createElement("input");
var editInput1 = document.createElement("input");
var editInput2 = document.createElement("input");
var editButton = document.createElement("button");
var deleteButton = document.createElement("button");
label.innerText = taskString;
label1.innerText = nameString;
label2.innerText = numberString;
checkBox.type = "checkbox";
editInput.type = "text";
editInput1.type = "text";
editInput2.type = "text";
editButton.innerText = "Edit";
editButton.className = "edit";
deleteButton.innerText = "Delete";
deleteButton.className = "delete";
listItem.appendChild(checkBox);
listItem.appendChild(label);
listItem.appendChild(editInput);
listItem.appendChild(label1);
listItem.appendChild(editInput1);
listItem.appendChild(label2);
listItem.appendChild(editInput2);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
alert("You added '" + label.innerText + "' to the ToDO list");
return listItem;
}
var addTask = function () {
var listItem = createNewTaskElement(taskInput.value,nameInput.value,numberInput.value);
if (taskInput.value == "") {
alert("You must enter a task");
}
else if (nameInput.value == "") {
alert("You must enter a Name");
}
else if (numberInput.value == "") {
alert("You must enter a Phone Number");
} else {
incompleteTask.appendChild(listItem);
}
bindTaskEvents(listItem, taskCompleted);
taskInput.value = "";
nameInput.value = "";
numberInput.value = "";
}
var editTask = function () {
var listItem = this.parentNode;
var editInput = listItem.querySelector('input[type=text]');
var label = listItem.querySelector("label");
var containsClass = listItem.classList.contains("editMode");
if (containsClass) {
label.innerText = editInput.value;
alert("You edited " + label.innerText);
} else {
editInput.value = label.innerText;
}
listItem.classList.toggle("editMode");
}
var deleteTask = function () {
var listItem = this.parentNode;
var ul = listItem.parentNode;
alert("You deleted " + listItem.querySelector("label").innerText);
ul.removeChild(listItem);
}
var taskCompleted = function () {
var listItem = this.parentNode;
completedTask.appendChild(listItem);
bindTaskEvents(listItem, taskIncomplete);
alert("You completed " + listItem.querySelector("label").innerText);
}
var taskIncomplete = function () {
var listItem = this.parentNode;
incompleteTask.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
}
var bindTaskEvents = function (taskListItem, checkBoxEventHandler) {
var checkBox = taskListItem.querySelector("input[type=checkbox]");
var editButton = taskListItem.querySelector("button.edit");
var deleteButton = taskListItem.querySelector("button.delete");
editButton.onclick = editTask;
deleteButton.onclick = deleteTask;
checkBox.onchange = checkBoxEventHandler;
}
for (var i = 0; i < incompleteTask.children.length; i++) {
bindTaskEvents(incompleteTask.children[i], taskCompleted);
}
for (var i = 0; i < completedTask.children.length; i++) {
bindTaskEvents(completedTask.children[i], taskIncomplete);
}
var input = document.getElementById("new-number");
input.addEventListener("keypress", function (event) {
if (event.key === "Enter") {
addTask();
}
});
.container {
height: 525px;
width: 450px;
margin: 100px auto;
}
ul {
margin: 0;
padding: 0;
}
li * {
float: left;
}
li,
h3 {
clear: both;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
}
input,button {
outline: none;
}
button {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 10px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
}
button:hover {
color: #333;
}
h3, label[for='new-task'] {
color: #333;
font-weight: 700;
font-size: 15px;
border-bottom: 2px solid #333;
padding: 30px 0 10px;
margin: 0;
text-transform: uppercase;
}
input[type="text"] {
margin: 0;
font-size: 18px;
line-height: 18px;
height: 18px;
padding: 10px;
border: 1px solid #ddd;
background: #fff;
border-radius: 8px;
font-family: Lato, sans-serif;
color: #888;
margin-left: 50px;
}
input[type="text"]:focus {
color: #333;
}
label[for='new-task'] {
display: block;
margin: 0 0 20px;
}
input#new-task,#new-name,#new-number {
width: 260px;
margin-bottom: 10px;
}
input:focus{
outline: none;
box-shadow: 0px 0px 5px #61C5FA;
border-color: #5AB0DB;
}
input:hover {
border: 1px solid #999;
border-radius: 5px;
}
p>button:hover {
color: #0FC57C;
}
li {
overflow: hidden;
padding: 20px 0;
border-bottom: 1px solid #eee;
}
li>input[type="checkbox"] {
margin: 0 10px;
position: relative;
top: 15px;
}
li>label {
font-size: 18px;
line-height: 40px;
width: 190px;
padding: 0 0 0 11px;
}
li>input[type="text"] {
width: 180px;
}
#completed-tasks label {
text-decoration: line-through;
color: #888;
}
ul li input[type=text] {
display: none;
}
ul li.editMode input[type=text] {
display: block;
}
ul li.editMode label {
display: none;
}
th{
padding-right: 70px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css">
<title>To DO List</title>
</head>
<body style="background-color: #ebeff0">
<div class="container">
<h3 style="text-align: center;">Add Task</h3>
<br>
<label>Add Task</label>
<input id="new-task" type="text" required><br>
<label>Name</label>
<input id="new-name" type="text" required><br>
<label>Phone Number</label>
<input id="new-number" type="text" required><br>
<h3 style="text-align: center;">Todo</h3>
<ul id="incomplete-tasks">
</ul>
<h3 style="text-align: center;">Completed Tasks</h3>
<ul id="completed-tasks">
</ul>
</div>
</body>
<script type="text/javascript" src="main.js"></script>
</html>
I have created the class and then edited the inputs
var taskInput = document.getElementById("new-task");
var nameInput = document.getElementById("new-name");
var numberInput = document.getElementById("new-number");
var addButton = document.getElementsByTagName("button")[0];
var incompleteTask = document.getElementById("incomplete-tasks");
var completedTask = document.getElementById("completed-tasks");
var createNewTaskElement = function (taskString, nameString, numberString) {
var listItem = document.createElement("li");
var checkBox = document.createElement("input");
var label = document.createElement("label");
var label1 = document.createElement("label");
var label2 = document.createElement("label");
var editInput = document.createElement("input");
var editInput1 = document.createElement("input");
var editInput2 = document.createElement("input");
var editButton = document.createElement("button");
var deleteButton = document.createElement("button");
label.innerText = taskString;
label1.innerText = nameString;
label2.innerText = numberString;
label.className = "task";
label1.className = "name";
label2.className = "number";
checkBox.type = "checkbox";
editInput.type = "text";
editInput1.type = "text";
editInput2.type = "text";
editInput.className = "edit";
editInput1.className = "edit1";
editInput2.className = "edit2";
editButton.innerText = "Edit";
editButton.className = "edit";
deleteButton.innerText = "Delete";
deleteButton.className = "delete";
listItem.appendChild(checkBox);
listItem.appendChild(label);
listItem.appendChild(editInput);
listItem.appendChild(label1);
listItem.appendChild(editInput1);
listItem.appendChild(label2);
listItem.appendChild(editInput2);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
alert("You added '" + label.innerText + "' to the ToDO list");
return listItem;
}
var addTask = function () {
var listItem = createNewTaskElement(taskInput.value, nameInput.value, numberInput.value);
if (taskInput.value == "") {
alert("You must enter a task");
} else if (nameInput.value == "") {
alert("You must enter a Name");
} else if (numberInput.value == "") {
alert("You must enter a Phone Number");
} else {
incompleteTask.appendChild(listItem);
}
bindTaskEvents(listItem, taskCompleted);
taskInput.value = "";
nameInput.value = "";
numberInput.value = "";
}
var editTask = function () {
var listItem = this.parentNode;
var editInput = listItem.querySelector('.edit');
var editInput1 = listItem.querySelector('.edit1');
var editInput2 = listItem.querySelector('.edit2');
var label = listItem.querySelector(".task");
var label1 = listItem.querySelector(".name");
var label2 = listItem.querySelector(".number");
var containsClass = listItem.classList.contains("editMode");
if (containsClass) {
label.innerText = editInput.value;
label1.innerText = editInput1.value;
label2.innerText = editInput2.value;
alert("You edited " + label.innerText);
} else {
editInput.value = label.innerText;
editInput1.value = label1.innerText;
editInput2.value = label2.innerText;
}
listItem.classList.toggle("editMode");
}
var deleteTask = function () {
if (confirm("Are you sure you want to delete this task?") == true) {
var listItem = this.parentNode;
var ul = listItem.parentNode;
alert("You deleted " + listItem.querySelector("label").innerText);
} else {
alert("You cancelled the task");
}
ul.removeChild(listItem);
}
var taskCompleted = function () {
var listItem = this.parentNode;
if (confirm("Are you sure you want to mark this task as complete?") == true) {
completedTask.appendChild(listItem);
bindTaskEvents(listItem, taskIncomplete);
alert("You completed " + listItem.querySelector("label").innerText);
} else {
alert("You cancelled the task");
}
}
var taskIncomplete = function () {
var listItem = this.parentNode;
incompleteTask.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
}
var bindTaskEvents = function (taskListItem, checkBoxEventHandler) {
var checkBox = taskListItem.querySelector("input[type=checkbox]");
var editButton = taskListItem.querySelector("button.edit");
var deleteButton = taskListItem.querySelector("button.delete");
editButton.onclick = editTask;
deleteButton.onclick = deleteTask;
checkBox.onchange = checkBoxEventHandler;
}
for (var i = 0; i < incompleteTask.children.length; i++) {
bindTaskEvents(incompleteTask.children[i], taskCompleted);
}
for (var i = 0; i < completedTask.children.length; i++) {
bindTaskEvents(completedTask.children[i], taskIncomplete);
}
var input = document.getElementById("new-number");
.container {
height: 525px;
width: 700px;
margin: 100px auto;
}
ul {
margin: 0;
padding: 0;
}
li * {
float: left;
}
li,
h3 {
clear: both;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
}
input,button {
outline: none;
}
button {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 10px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
}
button:hover {
color: #333;
}
h3, label[for='new-task'] {
color: #333;
font-weight: 700;
font-size: 15px;
border-bottom: 2px solid #333;
padding: 30px 0 10px;
margin: 0;
text-transform: uppercase;
}
input[type="text"] {
margin: 0;
font-size: 18px;
line-height: 18px;
height: 18px;
padding: 10px;
border: 1px solid #ddd;
background: #fff;
border-radius: 8px;
font-family: Lato, sans-serif;
color: #888;
margin-left: 50px;
}
input[type="text"]:focus {
color: #333;
}
label[for='new-task'] {
display: block;
margin: 0 0 20px;
}
input#new-task,#new-name,#new-number {
width: 260px;
margin-bottom: 10px;
}
input:focus{
outline: none;
box-shadow: 0px 0px 5px #61C5FA;
border-color: #5AB0DB;
}
input:hover {
border: 1px solid #999;
border-radius: 5px;
}
p>button:hover {
color: #0FC57C;
}
li {
overflow: hidden;
padding: 20px 0;
border-bottom: 1px solid #eee;
}
li>input[type="checkbox"] {
margin: 0 10px;
position: relative;
top: 15px;
}
li>label {
font-size: 18px;
line-height: 40px;
width: 100px;
padding: 0 0 0 11px;
}
li>input[type="text"] {
width: 100px;
}
li>button{
padding-left: 3px;
}
li>button:hover{
border: 1px solid black;
color: #c54f0f;
}
#completed-tasks label {
text-decoration: line-through;
color: #888;
}
ul li input[type=text] {
display: none;
}
ul li.editMode input[type=text] {
display: block;
}
ul li.editMode label {
display: none;
}
#AddBtn{
align-items: center;
border: 1px solid black !important;
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css">
<title>To DO List</title>
</head>
<body style="background-color: #ebeff0">
<div class="container">
<h3 style="text-align: center;">Add Task</h3>
<br>
<label>Add Task</label>
<input id="new-task" type="text" required><br>
<label style="padding-right: 05px;">Name</label>
<input id="new-name" type="text" required><br>
<label>Phone Number</label>
<input id="new-number" type="text" required><br>
<button id="AddBtn" onclick="addTask()">Add</button>
<h3 style="text-align: center;">Todo</h3>
<ul id="incomplete-tasks">
</ul>
<h3 style="text-align: center;">Completed Tasks</h3>
<ul id="completed-tasks">
</ul>
</div>
</body>
<script type="text/javascript" src="main.js"></script>
</html>
I am using contenteditable where I am trying to add if the the tab key is pressed for it to indent forward 1 row then second row etc. I have only been able to get it to indent out only 1 row but not sure on how to expand on it. My code may not be the right method to take.
const TAB_KEY = 9;
const ENTER_KEY = 13;
const SHIFT_KEY = 16
const editor = document.querySelector('.editor');
editor.appendChild(document.createElement('li'));
editor.addEventListener('keydown', (e) => {
let code = e.keyCode || e.which;
if (code == TAB_KEY) {
e.preventDefault();
let parent = e.target;
let ul = document.createElement('ul');
let li = document.createElement('li');
ul.appendChild(li);
parent.appendChild(ul);
moveCursorToEnd(li);
} else if (code == ENTER_KEY) {
e.preventDefault();
let parent = e.target;
let li = document.createElement('li');
parent.appendChild(li);
moveCursorToEnd(li);
}
});
function moveCursorToEnd(el) {
el.focus();
document.execCommand('selectAll', false, null);
document.getSelection().collapseToEnd();
}
/*editor.addEventListener('click', (x) => {
x = document.getElementById("b");
if(x.style.fontWeight == "bolder"){
x.style.fontWeight = "normal";
} else {
x.style.fontWeight = "bolder";
}
});*/
function bold(){
if(document.execCommand("bold")){
document.execCommand("normal");
}else{
document.execCommand("bold");
}
}
/*function underline(){
let x = document.getElementById("text");
if(x.style.textDecoration == "underline"){
x.style.textDecoration = "none";
}else{
x.style.textDecoration = "underline";
}
}*/
function underline(){
if(document.execCommand("underline")){
document.execCommand("none");
}else{
document.execCommand("underline");
}
}
/*function italic(){
let x = document.getElementById("text");
if(x.style.fontStyle == "italic"){
x.style.fontStyle = "normal";
}else{
x.style.fontStyle = "italic";
}
}*/
/*Turns the font of the text to Italic*/
function italic(){
if(document.execCommand("italic")){
document.execCommand("normal");
}else{
document.execCommand("italic");
}
}
function highlighSelectedText(){
let sel = window.getSelection().getRangeAt(0);
let selText = sel.extractContents();
let span = document.createElement("span");
span.style.backgroundColor = "yellow";
span.appendChild(selText);
sel.insertNode(span);
}
/*function printPage(){
let printButton = document.getElementById("ul");
printButton.style.visibility = 'hidden';
window.print();
printButton.style.visibility = 'visible';
}*/
body{
margin-top:1em;
margin-bottom: 10em;
margin-right: 1em;
margin-left: 1em;
border: solid;
border-color: #0033cc;
background-color: #f6f6f6;
}
div button{
padding: 1em 2em;
color: white;
background-color: #0000cc;
}
div input{
padding: 1em 2em;
color: white;
background-color: #0000cc;
}
div{
list-style-type:square;
list-style-position: inside;
margin-left: 0.25em;
margin-bottom: 5em;
}
section {
padding: 1em 2em;
color: white;
background-color: #0000cc;
}
.editor {
font-weight: normal;
}
div contenteditable{
margin-bottom: 10em;
}
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<head>
<title>Outliner</title>
<link href="style.css" rel="stylesheet" title="Style">
<div>
<button id="b" onclick="bold()"> B </button>
<button onclick="underline()"> U </button>
<button onclick="italic()"> I </button>
<input type="button" onclick="highlighSelectedText()" value="Highlight"/>
<input id="color" type="color">
<button onclick="document.getElementById('text').style.color = document.getElementById('color').value">Set Colour</button>
<div id="text" class="editor" contenteditable="true" draggable="true"></div>
</div>
</head>
<script type= "text/javascript" src='setting.js'></script>
</body>
I made a to do list, all the functions work but I cant figure out how to put spaces in between the input, and delete button, then align the delete button just like the checkboxs. After many inputs are enter the entire list just looks cluttered.
var inputItem = document.getElementById("inputItem");
inputItem.focus();
// adds input Item to list
function addItem(list, input) {
var inputItem = this.inputItem;
var list = document.getElementById(list);
var listItem = document.createElement("li");
// Configure the delete button
var deleteButton = document.createElement("button");
deleteButton.innerText = "X";
deleteButton.addEventListener("click", function() {
this.parentElement.style.display = 'none';
});
// Configure the check box
var checkBox = document.createElement("input");
checkBox.id = "check";
checkBox.type = 'checkbox';
checkBox.addEventListener('change', function() {
labelText.style.textDecoration = checkBox.checked ? 'line-through' : 'none';
});
// Configure the label
var label = document.createElement("label");
var labelText = document.createElement("span");
labelText.innerText = input.value;
// Put the checkbox and label text in to the label element
label.appendChild(checkBox);
label.appendChild(labelText);
// Put the label (with the checkbox inside) and the delete
// button into the list item.
listItem.appendChild(label);
listItem.appendChild(deleteButton);
list.appendChild(listItem);
inputItem.focus();
inputItem.select();
return false;
}
localStorage.setItem("list", list);
localStorage.getItem("list").forEach(function(list) {
elem.textContent = list;
});
body {
text-align: center;
}
form {
display: inline-block;
}
#outerDiv {
padding: 30px;
text-align: center;
}
#innerDiv {
margin: auto;
width: 200px;
height: 100px;
}
ul {
padding: 0;
margin: 0;
}
ul li {
position: relative;
padding: 12px 8px 12px 40px;
background: rgb(148, 160, 181);
list-style-type: none;
font-size: 18px;
}
#submit {
position: absolute;
padding: 10px 16px;
}
/* Style the input */
input {
margin: 0;
border: none;
border-radius: 0;
padding: 10px;
float: left;
font-size: 16px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<h1 align="center"> To-Do List </h1>
<body>
<div id="outerDiv">
<form onsubmit="return addItem('list', this.inputItem)">
<input type="text" id="inputItem" onfocus="this.value=''" onselect="this.value=''" placeholder="Enter a Task">
<input id="submit" type="submit">
</form>
</div>
<div id="innerDiv">
<ul id="list"></ul>
</div>
<script>
var inputItem = document.getElementById("inputItem");
inputItem.focus();
// adds input Item to list
function addItem(list, input) {
var inputItem = this.inputItem;
var list = document.getElementById(list);
var listItem = document.createElement("li");
// Configure the delete button
var deleteButton = document.createElement("button");
deleteButton.innerText = "X";
deleteButton.addEventListener("click", function() {
this.parentElement.style.display = 'none';
});
// Configure the check box
var checkBox = document.createElement("input");
checkBox.id = "check";
checkBox.type = 'checkbox';
checkBox.addEventListener('change', function() {
labelText.style.textDecoration = checkBox.checked ? 'line-through' : 'none';
});
// Configure the label
var label = document.createElement("label");
var labelText = document.createElement("span");
labelText.innerText = input.value;
// Put the checkbox and label text in to the label element
label.appendChild(checkBox);
label.appendChild(labelText);
// Put the label (with the checkbox inside) and the delete
// button into the list item.
listItem.appendChild(label);
listItem.appendChild(deleteButton);
list.appendChild(listItem);
inputItem.focus();
inputItem.select();
return false;
}
localStorage.setItem("list", list);
localStorage.getItem("list").forEach(function(list) {
elem.textContent = list;
});
</script>
</body>
</html>
We meet again. Part of the problem was that you were centering everything which was throwing off your styles. I removed the centering except on your #outerDiv. Then, I put a little bit of margin to the right of the checkbox so they wouldn't sit too close to each other. Finally, the button I floated to the right so that they will always all be right aligned.
var inputItem = document.getElementById("inputItem");
inputItem.focus();
// adds input Item to list
function addItem(list, input) {
var inputItem = this.inputItem;
var list = document.getElementById(list);
var listItem = document.createElement("li");
// Configure the delete button
var deleteButton = document.createElement("button");
deleteButton.innerText = "X";
deleteButton.addEventListener("click", function() {
this.parentElement.style.display = 'none';
});
// Configure the check box
var checkBox = document.createElement("input");
checkBox.id = "check";
checkBox.type = 'checkbox';
checkBox.addEventListener('change', function() {
labelText.style.textDecoration = checkBox.checked ? 'line-through' : 'none';
});
// Configure the label
var label = document.createElement("label");
var labelText = document.createElement("span");
labelText.innerText = input.value;
// Put the checkbox and label text in to the label element
label.appendChild(checkBox);
label.appendChild(labelText);
// Put the label (with the checkbox inside) and the delete
// button into the list item.
listItem.appendChild(label);
listItem.appendChild(deleteButton);
list.appendChild(listItem);
inputItem.focus();
inputItem.select();
return false;
}
//localStorage.setItem("list", list);
//localStorage.getItem("list").forEach(function(list) {
// elem.textContent = list;
//});
body {}
form {
display: inline-block;
}
#outerDiv {
padding: 30px;
text-align: center;
}
#innerDiv {
margin: auto;
width: 200px;
height: 100px;
}
ul {
padding: 0;
margin: 0;
}
ul li {
position: relative;
padding: 12px 8px 12px 20px;
background: rgb(148, 160, 181);
list-style-type: none;
font-size: 18px;
}
#submit {
position: absolute;
padding: 10px 16px;
}
/* Style the input */
button {
float: right;
}
input {
margin: 0;
border: none;
border-radius: 0;
padding: 10px;
float: left;
font-size: 16px;
margin-right: 8px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<h1 align="center"> To-Do List </h1>
<body>
<div id="outerDiv">
<form onsubmit="return addItem('list', this.inputItem)">
<input type="text" id="inputItem" onfocus="this.value=''" onselect="this.value=''" placeholder="Enter a Task">
<input id="submit" type="submit">
</form>
</div>
<div id="innerDiv">
<ul id="list"></ul>
</div>
</body>
</html>
I have created a few new classes for you in the css, they are in the working snippet under #innerDiv. (Also a tip, you don't need to add in the css and script into the html file in the snippet). Hope that helps!
var inputItem = document.getElementById("inputItem");
inputItem.focus();
// adds input Item to list
function addItem(list, input) {
var inputItem = this.inputItem;
var list = document.getElementById(list);
var listItem = document.createElement("li");
// Configure the delete button
var deleteButton = document.createElement("button");
deleteButton.innerText = "X";
deleteButton.addEventListener("click", function() {
this.parentElement.style.display = 'none';
});
// Configure the check box
var checkBox = document.createElement("input");
checkBox.id = "check";
checkBox.type = 'checkbox';
checkBox.addEventListener('change', function() {
labelText.style.textDecoration = checkBox.checked ? 'line-through' : 'none';
});
// Configure the label
var label = document.createElement("label");
var labelText = document.createElement("span");
labelText.innerText = input.value;
// Put the checkbox and label text in to the label element
label.appendChild(checkBox);
label.appendChild(labelText);
// Put the label (with the checkbox inside) and the delete
// button into the list item.
listItem.appendChild(label);
listItem.appendChild(deleteButton);
list.appendChild(listItem);
inputItem.focus();
inputItem.select();
return false;
}
//localStorage.setItem("list", list);
//localStorage.getItem("list").forEach(function(list) {
// elem.textContent = list;
//});
body {
text-align: center;
}
form {
display: inline-block;
}
#outerDiv {
padding: 30px;
text-align: center;
}
#innerDiv {
margin: auto;
width: 200px;
height: 100px;
}
#innerDiv button {
margin: 0 5px;
padding: 2px;
position: absolute;
right: 0;
}
#innerDiv li {
margin: 0;
padding: 4px 0px 0px 4px;
text-align: left;
}
#innerDiv label {
padding-left: 4px;
}
ul {
padding: 0;
margin: 0;
}
ul li {
position: relative;
padding: 12px 8px 12px 40px;
background: rgb(148, 160, 181);
list-style-type: none;
font-size: 18px;
}
#submit {
position: absolute;
padding: 10px 16px;
}
/* Style the input */
input {
margin: 0;
border: none;
border-radius: 0;
padding: 10px;
float: left;
font-size: 16px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<h1 align="center"> To-Do List </h1>
<body>
<div id="outerDiv">
<form onsubmit="return addItem('list', this.inputItem)">
<input type="text" id="inputItem" onfocus="this.value=''" onselect="this.value=''" placeholder="Enter a Task">
<input id="submit" type="submit">
</form>
</div>
<div id="innerDiv">
<ul id="list"></ul>
</div>
</body>
</html>
First add a class to the delete button
deleteButton.classList.add("delete-button");
Than style the button using that class as much as you wish in your CSS.
** You have to work on your todo text also. If the text is longer, the style breaks. You can apply same technique here - add a class with JS, style that class in CSS.
var inputItem = document.getElementById("inputItem");
inputItem.focus();
// adds input Item to list
function addItem(list, input) {
var inputItem = this.inputItem;
var list = document.getElementById(list);
var listItem = document.createElement("li");
// Configure the delete button
var deleteButton = document.createElement("button");
deleteButton.classList.add("delete-button");
deleteButton.innerText = "X";
deleteButton.addEventListener("click", function() {
this.parentElement.style.display = 'none';
});
// Configure the check box
var checkBox = document.createElement("input");
checkBox.id = "check";
checkBox.type = 'checkbox';
checkBox.addEventListener('change', function() {
labelText.style.textDecoration = checkBox.checked ? 'line-through' : 'none';
});
// Configure the label
var label = document.createElement("label");
var labelText = document.createElement("span");
labelText.innerText = input.value;
// Put the checkbox and label text in to the label element
label.appendChild(checkBox);
label.appendChild(labelText);
// Put the label (with the checkbox inside) and the delete
// button into the list item.
listItem.appendChild(label);
listItem.appendChild(deleteButton);
list.appendChild(listItem);
inputItem.focus();
inputItem.select();
return false;
}
localStorage.setItem("list", list);
localStorage.getItem("list").forEach(function(list) {
elem.textContent = list;
});
body {
text-align: center;
}
form {
display: inline-block;
}
#outerDiv {
padding: 30px;
text-align: center;
}
#innerDiv {
margin: auto;
width: 200px;
height: 100px;
}
ul {
padding: 0;
margin: 0;
}
ul li {
position: relative;
padding: 12px 8px 12px 40px;
background: rgb(148, 160, 181);
list-style-type: none;
font-size: 18px;
}
#submit {
position: absolute;
padding: 10px 16px;
}
/* Style the input */
input {
margin: 0;
border: none;
border-radius: 0;
padding: 10px;
float: left;
font-size: 16px;
}
.delete-button {
float: right;
border: 0;
padding: 1px 3px 0;
font-size: 9px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<h1 align="center"> To-Do List </h1>
<body>
<div id="outerDiv">
<form onsubmit="return addItem('list', this.inputItem)">
<input type="text" id="inputItem" onfocus="this.value=''" onselect="this.value=''" placeholder="Enter a Task">
<input id="submit" type="submit">
</form>
</div>
<div id="innerDiv">
<ul id="list"></ul>
</div>
<script>
var inputItem = document.getElementById("inputItem");
inputItem.focus();
// adds input Item to list
function addItem(list, input) {
var inputItem = this.inputItem;
var list = document.getElementById(list);
var listItem = document.createElement("li");
// Configure the delete button
var deleteButton = document.createElement("button");
deleteButton.innerText = "X";
deleteButton.addEventListener("click", function() {
this.parentElement.style.display = 'none';
});
// Configure the check box
var checkBox = document.createElement("input");
checkBox.id = "check";
checkBox.type = 'checkbox';
checkBox.addEventListener('change', function() {
labelText.style.textDecoration = checkBox.checked ? 'line-through' : 'none';
});
// Configure the label
var label = document.createElement("label");
var labelText = document.createElement("span");
labelText.innerText = input.value;
// Put the checkbox and label text in to the label element
label.appendChild(checkBox);
label.appendChild(labelText);
// Put the label (with the checkbox inside) and the delete
// button into the list item.
listItem.appendChild(label);
listItem.appendChild(deleteButton);
list.appendChild(listItem);
inputItem.focus();
inputItem.select();
return false;
}
localStorage.setItem("list", list);
localStorage.getItem("list").forEach(function(list) {
elem.textContent = list;
});
</script>
</body>
</html>
When new elements are created on the page, they are showing up as [object HTMLLIElement] instead being created as an li element, like I want it to.
Codepen link here so you can see what I am talking about https://codepen.io/jester070993/pen/bLOrQr
var h1 = document.querySelector("h1")
var lis = document.querySelectorAll("li")
var trashes = document.querySelectorAll("span")
var filterInput = document.querySelector("input")
var container = document.querySelector("#container")
var ul = document.querySelector("ul")
var i = document.querySelectorAll("i")
function goToTrash(event){
var thisElement = event.currentTarget;
thisElement.parentElement.remove()
}
function handleClick(event){
var thisElement = event.currentTarget;
thisElement.classList.toggle("completed")
}
//forEach loop
lis.forEach(function(li){
li.addEventListener("click", handleClick)
trashes.forEach(function(trash){
trash.addEventListener("click", goToTrash)
});
});
filterInput.addEventListener("keypress", function(event){
if(event.which === 13){
var todo = filterInput.value;
var newLi = document.createElement("li");
var element = newLi.appendChild(document.createTextNode(todo));
ul.appendChild(newLi);
filterInput.value = " ";
newLi.addEventListener("click", handleClick);
newLi.innerHTML = "<i class='far fa-trash-alt'></i>" + newLi; //This is the line that is creating a new element (li) except it is showing up as [object HTMLLIElement]
trashes.forEach(function(span){
span.addEventListener("click", goToTrash);
})
}
});
What am I doing wrong? Would I have to use .current or .currentTarget? Tried both of those and then it just returns "undefined" instead of [object HTMLLIElement]
Here is what I have tried. Maybe you can do it too. You can't just use '+' operator to add an HTMLObject (that is what you newLi is!). you have to use DOM API API to manupulate DOM.
var iconSpan = document.createElement("span")
var icon = document.createElement("i");
icon.classList.add("far");
icon.classList.add("fa-trash-alt");
iconSpan.append(icon);
newLi.prepend(iconSpan);
var h1 = document.querySelector("h1")
var lis = document.querySelectorAll("li")
var trashes = document.querySelectorAll("span")
var filterInput = document.querySelector("input")
var container = document.querySelector("#container")
var ul = document.querySelector("ul")
var i = document.querySelectorAll("i")
function goToTrash(event){
var thisElement = event.currentTarget;
thisElement.parentElement.remove()
}
function handleClick(event){
var thisElement = event.currentTarget;
thisElement.classList.toggle("completed")
}
//forEach loop
lis.forEach(function(li){
li.addEventListener("click", handleClick)
trashes.forEach(function(trash){
trash.addEventListener("click", goToTrash)
});
});
filterInput.addEventListener("keypress", function(event){
if(event.which === 13){
var todo = filterInput.value;
var newLi = document.createElement("li");
var element = newLi.appendChild(document.createTextNode(todo));
ul.appendChild(newLi);
filterInput.value = " ";
var iconSpan = document.createElement("span")
var icon = document.createElement("i");
icon.classList.add("far");
icon.classList.add("fa-trash-alt");
iconSpan.append(icon);
newLi.addEventListener("click", handleClick);
newLi.prepend(iconSpan);
trashes.forEach(function(span){
span.addEventListener("click", goToTrash);
})
}
});
#container {
text-align:center;
margin: 0 auto;
width: 360px;
margin-top: 50px;
background:#f7f7f7;
box-shadow: 2px 2px 3px magenta;
}
.completed {
text-decoration: line-through;
opacity: .4;
}
body {
background: linear-gradient(to right, yellow , orange);
}
li span {
visibility: hidden ;
width: 0;
}
span {
margin-right: 15px;
height: 40px;
margin-left: 10px;
color:coral;
text-align: center;
width: 400px
visibility: hidden;
}
li:hover span{
visibility: visible ;
width: 40px;
transition-timing-function: linear;
}
#plus{
float: right;
}
a{
color:white;
}
h1{
background: steelblue;
color: white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 30px;
font-weight: normal;
}
input {
width: 100%;
font-size: 18px;
background: #f7f7f7;
padding: 12px 12px 12px 16px;
box-sizing: border-box;
color: steelblue;
}
input:focus {
background:white;
border: 2px solid steelblue;
outline: none;
}
ul{
list-style: none;
margin: 0;
padding: 0;
text-align:left;
font-size: 16px;
}
body{
font-family: 'Krona One', sans-serif;
}
li {
background: white;
height: 34px;
line-height: 34px;
color: 664;
}
li:nth-child(2n){
background: #f7f7f7;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="practice.css">
<link href="https://fonts.googleapis.com/css?family=Krona+One" rel="stylesheet">
<script type="text/javascript" src="jquery/jquery-3.3.1.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
</head>
<body>
<div id="container">
<h1> To-do List <i class="fas fa-plus-circle" id="plus"></i> </h1>
<input type="text" placeholder="Add New Todo">
<ul>
<li><span><i class="far fa-trash-alt"></i>
</span> Walk dog </li>
<li><span><i class="far fa-trash-alt"></i>
</span> Buy white undershirts </li>
<li><span><i class="far fa-trash-alt"></i>
</span> Study JS </li>
<li><span><i class="far fa-trash-alt"></i>
</span> Wake up early</li>
</ul>
</div>
</body>
</html>
Probably this is just a typo. If you mean you want to display the text inputted beside the icon.
From:
var todo = filterInput.value;
var newLi = document.createElement("li");
var element = newLi.appendChild(document.createTextNode(todo));
ul.appendChild(newLi);
filterInput.value = " ";
newLi.addEventListener("click", handleClick);
newLi.innerHTML = "<i class='far fa-trash-alt'></i>" + newLi; //This is the line that is creating a new element (li) except it is showing up as [object HTMLLIElement]
trashes.forEach(function(span){
span.addEventListener("click", goToTrash);
})
To:
var todo = filterInput.value;
var newLi = document.createElement("li");
ul.appendChild(newLi);
filterInput.value = " ";
newLi.addEventListener("click", handleClick);
newLi.innerHTML = "<i class='far fa-trash-alt'></i>" + todo;
trashes.forEach(function(span){
span.addEventListener("click", goToTrash);
})