Unable to fix the problem of addition of new todos - javascript

I have made this Todo project wherein one can add todos, delete them and line-through the ones that have been completed but I am facing problem in adding a new todo to the list i.e it every time on the addition of a new todo leaves an alternative space blank, unable to find the bug.
Following is the js file:
$("ul").on("click", "li", function(){
$(this).toggleClass("completed");
});
$("ul").on("click","span",function(event){
$(this).parent().fadeOut(500,function(){
$(this).remove();
});
event.stopPropagation();
});
$("input[type='text']").keypress(function(event){
if(event.which === 13)
{
var todosText=$(this).val();
$(this).val("");
$("ul").append("<li><span><i class='fa fa-trash' aria-hidden='true'></i></span> " + todosText + "<li>")
}
});
$(".fa-pencil-square").click(function(){
$("input[type='text']").fadeToggle();
});
html file:
<!DOCTYPE html>
<html>
<head>
<title>To Do List</title>
<script type="text/javascript" src="assests/js/lib/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="assests/css/todos.css">
<link href="https://fonts.googleapis.com/css?family=Gayathri|Open+Sans:600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assests/css/font-awesome-4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Gayathri:700&display=swap" rel="stylesheet">
</head>
<body>
<div id="container">
<h1 >TO-DO LIST <i class="fa fa-pencil-square" aria-hidden="true"></i></h1>
<input type="text" placeholder="Add New Todo">
<ul>
<li><span><i class="fa fa-trash" aria-hidden="true"></i></span> Check the theme</li>
<li><span><i class="fa fa-trash" aria-hidden="true"></i></span> Go to the store</li>
<li><span><i class="fa fa-trash" aria-hidden="true"></i></span> Select dress </li>
</ul>
</div>
<script type="text/javascript" src="assests/js/todos.js"></script>
</body>
</html>

You didn't close the li tag in function that adds new todos:
$("ul").append("<li><span><i class='fa fa-trash' aria-hidden='true'></i></span> " + todosText + "<li>")
should be
$("ul").append("<li><span><i class='fa fa-trash' aria-hidden='true'></i></span> " + todosText + "</li>")

Related

ondrop function never called in electron

onDragEnter and onDragLeave are called, but not onDrop.
evreything works when run in firefox and chrome but not electron
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/upload.css">
<link rel="stylesheet" href="css/popups.css">
<script src="https://kit.fontawesome.com/8edc1bc1b3.js" crossorigin="anonymous"></script>
<title>popup test</title>
</head>
<body>
<!-- popups sit here -->
<div class="uploadTestPopup">
<!-- upload / folder popup -->
<div class="uploadSelector" data-showing="content">
<i class="uploadSelectorItem" onclick="">content</i>
<i class="uploadSelectorItem" onclick="">folder</i>
</div>
<div id="uploadContentArea" class="uploadContentArea" ondrop="FileDrop(event)" ondragenter="allowDrop(event)" ondragleave="dropLeave(event)" ondragend="dragEnd(event)">
<!-- <i id="uploadIcon" class="fa-solid fa-circle-plus uploadIcon"></i>
<i class="uploadText">well upload something</i> -->
</div>
<div class="tagArea">
<div class="tagAreaDevider">
<input type="text">
</div>
<div class="tagAreaDevider">
<i class="tag">tag</i>
<i class="tag">hello</i>
<i class="tag">hello</i>
</div>
<div class="tagAreaDevider">
<i class="tag">hello</i>
<i class="tag">hello</i>
</div>
</div>
<div class="uploadArea">
<i class="uploadButtonCancel">exit</i>
<i class="uploadButtonAccept">done</i>
</div>
</div>
<script src="./js/upload.js"></script>
</body>
</html>
upload.js
function FileDrop(e) {
e.preventDefault();
e.stopPropagation();
console.log('drop call')
}
function allowDrop(e) {
e.preventDefault();
e.stopPropagation();
document.getElementById('uploadContentArea').style = 'background-color: blue;'
console.log('allow event')
}
function dropLeave(e){
e.preventDefault();
e.stopPropagation();
document.getElementById('uploadContentArea').style = ''
console.log('drag leave event')
}
i've tied adding event listeners, document.body.onDrop and doing it within the html doc.
but each attempt it never logged the drop call to the console.
only works in the browser.
is there some sort of electon setting or package i need to install???

Why am I failing to get my JQuery tooltip to work?

I found this really cool Toolbar.js JQuery library that I would love to add to my application, though the instructions on the page seem pretty straightforward, I am having issues getting it to work.
Find below my simple HTML file put together as per instructions:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="js/jquery.toolbar.js"></script>
<link href="css/jquery.toolbar.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<script>
$(document).ready(function() {
$('#gear').toolbar({
content: '#toolbar-options',
position: 'top'
});
});
</script>
</head>
<body>
<header>
<h1>Testing toolbar.js</h1>
</header>
<div class="btn-toolbar btn-toolbar-warning">
<i class="fa fa-cog"></i>
</div>
<div id="toolbar-options" class="hidden btn-toolbar btn-toolbar-primary">
<i class="fa fa-plane"></i>
<i class="fa fa-car"></i>
<i class="fa fa-bicycle"></i>
</div>
</body>
</html>
The browser console does not render any error messages.
The HTML code renders the following image, but doesn't render the tooltips as desired:
Help!
What am I missing or doing wrong?
Your help is appreciated.
Prevent multiple elements with the same ID
id="gear"
Prevent elements with multiple ID's
id="toolbar-options gear"
Add toolbar css CDN link (instead off local file)
<link hef="https://cdn.jsdelivr.net/gh/paulkinzett/toolbar#1.0.1/jquery.toolbars.css" rel="stylesheet"/>`
After fixing those issues, it still doesn't seem to work.
It's appears the position: 'bottom' causes the error.
Setting it to top works as you can see in this demo:
$('#gear').toolbar({
content: '#toolbar-options',
position: 'top'
});
.hidden { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/paulkinzett/toolbar#1.0.1/jquery.toolbar.js"></script>
<link href="https://cdn.jsdelivr.net/gh/paulkinzett/toolbar#1.0.1/jquery.toolbars.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<header>
<h1>Testing toolbar.js</h1>
</header>
<div class="btn-toolbar btn-toolbar-warning" id="gear" >
<i class="fa fa-cog"></i>
</div>
<div id="toolbar-options" class="hidden btn-toolbar btn-toolbar-primary">
<i class="fa fa-plane"></i>
<i class="fa fa-car"></i>
<i class="fa fa-bicycle"></i>
</div>
The error is thrown in getCoordinates which shows:
getCoordinates: function( position, adjustment) {
var self = this;
self.coordinates = self.$elem.offset();
if(position == 'top') {
return coordinates = {
left: self.coordinates.left-(self.toolbar.width()/2)+(self.$elem.width()/2),
top: self.coordinates.top-self.$elem.height()-adjustment,
}
}
if(position == 'left') {
return coordinates = {
left: self.coordinates.left-(self.toolbar.width()/2)-(self.$elem.width()/2)-adjustment,
top: self.coordinates.top-(self.toolbar.height()/2)+(self.$elem.height()/2),
}
}
},
Since the function does not return anything if the value is bottom, it makes sense that an error is thrown.

Trying to edit button in a Javascript Todo List

I am trying to create a todo list in vanilla Javascript with following features:
Add todo item to the list
Delete todo item by clicking trash icon in the li element (done)
Edit the respective todo item by clicking the edit icon (which I am unable to achieve)
Strike-through the completed todo item by clicking the checkbox
I am trying to add the edit function, please help me with that:
/*When user enter text in input field and click submit, an item should be added to the list
1. User enter text and click submit
2. When submit clicked, an item added to the list
3. When user click edit icon so, the list item is selected
4. Selected text should be editable
*/
const items = document.querySelectorAll('#list li');
const todoTextInput = document.getElementById('todoTextInput');
const submitBtn = document.getElementById('submit_todo');
const tabs = [];
// const liIndex;
//Add todo to the list
submitBtn.addEventListener('click', () => {
const todoText = document.getElementById('todoTextInput').value;
const todoList = document.getElementById('list');
const todoItem = document.createElement('li');
todoItem.classList.add('list-group-item', 'd-flex', 'justify-content-between');
todoItem.innerHTML = `
<span>${todoText}</span>
<span>
<a class="editBtn"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
<a class="deleteBtn"><i class="fa fa-trash" aria-hidden="true"></i></a>
</span>
`;
todoList.appendChild(todoItem);
tabs.push(todoText);
//Clearing input box
todoTextInput.value = '';
const editBtn = document.getElementsByClassName('editBtn');
// Selecting item by clicking edit button
for (let i = 0; i < editBtn.length; i++) {
editBtn[i].addEventListener('click', editItem);
}
const deleteBtn = document.getElementsByClassName('deleteBtn');
//Selecting item by clicking delete button
for (let i = 0; i < deleteBtn.length; i++) {
deleteBtn[i].addEventListener('click', deleteItem);
};
});
//Deleting selected item
function deleteItem() {
console.log("Deleted")
this.parentNode.parentNode.remove();
}
//Editing selected item
function editItem() {
const todoTextVal = this.parentNode.parentNode.firstElementChild.innerHTML;
const liIndex = tabs.indexOf(todoTextVal);
todoTextInput.value = todoTextVal;
console.log(todoTextVal + "Index -"+ liIndex);
tabs[liIndex].innerHTML = todoTextInput.value;
for (let i = 0; i < items.length; i++) {
tabs.push(items[i].innerHTML);
};
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg=="
crossorigin="anonymous" />
<link rel="stylesheet" href="./style.css">
<script src="./todo.js" defer></script>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="form-group form-inline">
<input type="text" name="todoTextInput" id="todoTextInput" class="form-control">
<button type="submit" class="btn btn-outline-success m-2" id="submit_todo">Add Todo</button>
</div>
<ul class="list-group" id="list">
<!-- <li class="list-group-item d-flex justify-content-between">
<span>Apple</span>
<span>
<a class="editBtn"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
<a class="deleteBtn"><i class="fa fa-trash" aria-hidden="true"></i></a>
</span>
</li>
<li class="list-group-item d-flex justify-content-between">
<span>Mango</span>
<span>
<a class="editBtn"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
<a class="deleteBtn"><i class="fa fa-trash" aria-hidden="true"></i></a>
</span>
</li> -->
</ul>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
i recommend using google firebase > Firestore
You can just use that with vanilla javascript in your website. With that you can make a small database where you can read data from or write data to so everything saves!
You can take a look on the google firestore docs here.

Unable to update button text and font icon on click event

How can I change/update the text and font icon of a button on click event properly?
$(".btn-warning").click(function() {
$(this).toggle(function() {
$('.btn-warning').text("Remove Filter <i class='fa fa-filter'></i>");
}, function() {
$('.btn-warning').text("Apply Filter <i class='fa fa-remove'></i>");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<button type="button" class="btn btn-warning">Apply Filter <i class="fa fa-filter"></i></button>
Here You go.
$(".btn-warning").click(function() {
var $btn = $(this);
if ($btn.hasClass('x-on')) {
$btn.removeClass('x-on').html("Apply Filter <i class='fa fa-filter'></i>");
} else {
$btn.addClass('x-on').html("Remove Filter <i class='fa fa-remove'></i>");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<button type="button" class="btn btn-warning">Apply Filter <i class="fa fa-filter"></i></button>
toggle doesn't work how this code would like it to. It doesn't mean do this or do something else - When you toggle you cause JQuery to fade-out/in the element and the function call is performed when the animation completes.
So you click and fade out the element, but now there's nothing to click on to bring it back and your changes will not be seen.
To change the code on click we can simply set a variable on the function itself (this.clicked) and toggle the html of the element based on whether it's the first or second click. This will be determined by checking if this.checked is true or false.
$(".btn-warning").click(function() {
if (this.clicked == undefined) this.clicked = false;
this.clicked = !this.clicked;
(this.clicked) ?
$('.btn-warning').html("Remove Filter <i class='fa fa-filter'></i>") :
$('.btn-warning').html("Apply Filter <i class='fa fa-remove'></i>");
});
$(".btn-warning").click(function() {
let btn = $(".btn-warning");
if (this.clicked == undefined) this.clicked = false;
this.clicked = !this.clicked;
(this.clicked) ?
btn.html("Remove Filter <i class='fa fa-filter'></i>") :
btn.html("Apply Filter <i class='fa fa-remove'></i>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<button type="button" class="btn btn-warning">Apply Filter <i class="fa fa-filter"></i></button>
(1) The JQuery toggle() method will toggle the button visibility, you don't need this one.
(2) If you need to change the html of an element, do not use the text() method, instead use the html() method. The text() method will not recognize the html markup as you want.
One approach you can use is detecting if the <i> tag inside the button has some class (Read about hasClass()), and then act based on this condition:
$(".btn-warning").click(function()
{
if ($(this).find("i").hasClass("fa-filter"))
$(this).html("Remove Filter <i class='fa fa-remove'></i>");
else
$(this).html("Apply Filter <i class='fa fa-filter'></i>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<button type="button" class="btn btn-warning">
Apply Filter <i class="fa fa-filter"></i>
</button>
Try this. I think this will more-or-less get you started.
https://jsfiddle.net/3bq9fuwz/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<button type="button" class="btn btn-warning">Apply Filter <i class="fa fa-filter"></i></button>
$(".btn-warning").click(function() {
$(this).html('It is a new name bro');
$(this).find($(".fa")).removeClass('fa-filter').addClass('fa-remove');
});

Remove disabled class onclick

I'm using jQuery function to add disabled class onclick, it is working fine. But I want to remove the class by clicking on other button, that is not working can anyone help me with this? This is code...
//Delay add disabled class on cart
$('.fa-shopping-cart').on('click',function(){
var $this = $(this).addClass('finsihed');
window.setTimeout(function(){
$this.addClass('disabled-button');
}, 1500); //<-- Delay in milliseconds
});
function reEnableBtn(prodId) {
alert(prodId);
// var $this = $(this).removeClass('finsihed');
// window.setTimeout(function(){
// $this.removeClass('disabled-button');
// }, 1500); //<-- Delay in milliseconds
$('.festi-cart-remove-product').removeClass('disabled-button');
};
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i class="fa fa-shopping-cart finsihed disabled-button"></i>
Re-enable button
I hope you guys understand my question..
In the function reEnableBtn, $('.festi-cart-remove-product') doesn't exist.
Change :
$('.festi-cart-remove-product').removeClass('disabled-button');
To :
$('.fa-shopping-cart').removeClass('disabled-button');
As I came to understand your question, please check given link or snippet if this is what you want...
var $this = '#cart';
$(document).on('click','#blockr,'+$this,function(){
$($this).addClass('disabled');
})
$(document).on('click','#openr',function(){
$('#cart').removeClass('disabled');
})
.disabled{
color:#333;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="font-awesome#4.7.0" data-semver="4.7.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="jquery#3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<button class="btn btn-default" id="cart">
<i class="fa fa-shopping-cart finsihed disabled-button"></i>
</button>
<br /> <br />
<a class="btn btn-default" id="blockr" href="#!">Disabled button</a>
<a class="btn btn-default" id="openr" href="#!">Re-enable button</a>
</body>
</html>
link: http://plnkr.co/edit/3m9mKo8EQkGnjpqs54U6?p=preview
or you can comment if you want something modified in it. Hope it helps you.

Categories