Mixing
Send completed list item to bottom of list [closed]
0
I am learning JS and need some help or advice on how to send a list item to the bottom of a list once it has been clicked on. At the moment, you can add a to-do list item, check the item which will add a strike through and set the opacity to 0.5 of the item (graying it out).
I would like to send the checked item to the bottom of the list, leaving any unchecked 'tasks' at the top.
My HTML
<!DOCTYPE html>
<html>
<head>
<title>Pomodo</title>
<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" type="text/css" href="style.css">
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<div class="hero">
<div class="container">
<h1 class="text-center display-2">Pomo.do</h1>
<p class="lead text-center">Go deep. Get things done.</p>
<div class="row">
<div id="pomodo-form" action="" class="col-8 mx-auto">
<div class="input-group">
<input type="input" class="form-control" id="pomodo-input" placeholder="What do you need to do today?"><span><button id="pomodo-btn" type="submit" class="btn btn-primary">Submit</button></span>
</div>
</div>
</div>
<div class="row">
<ul id="pomodo-list" class="col-8 mx-auto">
</ul>
</div>
</div>
</body>
</html>
My JavaScript.
window.onload = function() {
//variables
var form = document.getElementById("pomodo-form");
var input = document.getElementById("pomodo-input");
var btn = document.getElementById("pomodo-btn");
var list = document.getElementById("pomodo-list");
var id = 1;
//button event listener
btn.addEventListener("click", addTodoItem);
//list event listener
list.addEventListener("click", boxChecked);
//add todo item to list
function addTodoItem() {
if(input.value === "") {
alert("Please enter a To Do List Item.");
}
else {
if(list.style.borderTop === "") {
list.style.borderTop = "2px solid #fff";
}
var text = input.value;
var item = `<li id="li-${id}">${text}
<input id="box-${id}"
class="checkboxes"
type="checkbox"></li>`;
list.insertAdjacentHTML('beforeend', item);
id++;
input.value = ""; // reset the input value when button is clicked + not empty.
}
}
//Add Strikethrough on completed to do list items.
function boxChecked(event) {
const element = event.target;
if(element.type === "checkbox") {
if( element.checked ){
element.parentNode.style.textDecoration = "line-through";
element.parentNode.style.opacity = 0.5;
}else{
element.parentNode.style.textDecoration = "none";
element.parentNode.style.opacity = 1;
}
}
}
}
javascript html
asked Nov 22 '18 at 5:58
travislimatravislima
63
closed as too broad by Ankit Agarwal, cнŝdk, idursun, Roman Pokrovskij, Skynet Nov 22 '18 at 16:05
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
add a comment |
0
I am learning JS and need some help or advice on how to send a list item to the bottom of a list once it has been clicked on. At the moment, you can add a to-do list item, check the item which will add a strike through and set the opacity to 0.5 of the item (graying it out).
I would like to send the checked item to the bottom of the list, leaving any unchecked 'tasks' at the top.
My HTML
<!DOCTYPE html>
<html>
<head>
<title>Pomodo</title>
<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" type="text/css" href="style.css">
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<div class="hero">
<div class="container">
<h1 class="text-center display-2">Pomo.do</h1>
<p class="lead text-center">Go deep. Get things done.</p>
<div class="row">
<div id="pomodo-form" action="" class="col-8 mx-auto">
<div class="input-group">
<input type="input" class="form-control" id="pomodo-input" placeholder="What do you need to do today?"><span><button id="pomodo-btn" type="submit" class="btn btn-primary">Submit</button></span>
</div>
</div>
</div>
<div class="row">
<ul id="pomodo-list" class="col-8 mx-auto">
</ul>
</div>
</div>
</body>
</html>
My JavaScript.
window.onload = function() {
//variables
var form = document.getElementById("pomodo-form");
var input = document.getElementById("pomodo-input");
var btn = document.getElementById("pomodo-btn");
var list = document.getElementById("pomodo-list");
var id = 1;
//button event listener
btn.addEventListener("click", addTodoItem);
//list event listener
list.addEventListener("click", boxChecked);
//add todo item to list
function addTodoItem() {
if(input.value === "") {
alert("Please enter a To Do List Item.");
}
else {
if(list.style.borderTop === "") {
list.style.borderTop = "2px solid #fff";
}
var text = input.value;
var item = `<li id="li-${id}">${text}
<input id="box-${id}"
class="checkboxes"
type="checkbox"></li>`;
list.insertAdjacentHTML('beforeend', item);
id++;
input.value = ""; // reset the input value when button is clicked + not empty.
}
}
//Add Strikethrough on completed to do list items.
function boxChecked(event) {
const element = event.target;
if(element.type === "checkbox") {
if( element.checked ){
element.parentNode.style.textDecoration = "line-through";
element.parentNode.style.opacity = 0.5;
}else{
element.parentNode.style.textDecoration = "none";
element.parentNode.style.opacity = 1;
}
}
}
}
javascript html
asked Nov 22 '18 at 5:58
travislimatravislima
63
closed as too broad by Ankit Agarwal, cнŝdk, idursun, Roman Pokrovskij, Skynet Nov 22 '18 at 16:05
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
Can you add HTML please
– Edwin Dijas Chiwona
Nov 22 '18 at 6:03
Added HTML - thank you!
– travislima
Nov 22 '18 at 6:50
add a comment |
0
0
0
I am learning JS and need some help or advice on how to send a list item to the bottom of a list once it has been clicked on. At the moment, you can add a to-do list item, check the item which will add a strike through and set the opacity to 0.5 of the item (graying it out).
I would like to send the checked item to the bottom of the list, leaving any unchecked 'tasks' at the top.
My HTML
<!DOCTYPE html>
<html>
<head>
<title>Pomodo</title>
<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" type="text/css" href="style.css">
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<div class="hero">
<div class="container">
<h1 class="text-center display-2">Pomo.do</h1>
<p class="lead text-center">Go deep. Get things done.</p>
<div class="row">
<div id="pomodo-form" action="" class="col-8 mx-auto">
<div class="input-group">
<input type="input" class="form-control" id="pomodo-input" placeholder="What do you need to do today?"><span><button id="pomodo-btn" type="submit" class="btn btn-primary">Submit</button></span>
</div>
</div>
</div>
<div class="row">
<ul id="pomodo-list" class="col-8 mx-auto">
</ul>
</div>
</div>
</body>
</html>
My JavaScript.
window.onload = function() {
//variables
var form = document.getElementById("pomodo-form");
var input = document.getElementById("pomodo-input");
var btn = document.getElementById("pomodo-btn");
var list = document.getElementById("pomodo-list");
var id = 1;
//button event listener
btn.addEventListener("click", addTodoItem);
//list event listener
list.addEventListener("click", boxChecked);
//add todo item to list
function addTodoItem() {
if(input.value === "") {
alert("Please enter a To Do List Item.");
}
else {
if(list.style.borderTop === "") {
list.style.borderTop = "2px solid #fff";
}
var text = input.value;
var item = `<li id="li-${id}">${text}
<input id="box-${id}"
class="checkboxes"
type="checkbox"></li>`;
list.insertAdjacentHTML('beforeend', item);
id++;
input.value = ""; // reset the input value when button is clicked + not empty.
}
}
//Add Strikethrough on completed to do list items.
function boxChecked(event) {
const element = event.target;
if(element.type === "checkbox") {
if( element.checked ){
element.parentNode.style.textDecoration = "line-through";
element.parentNode.style.opacity = 0.5;
}else{
element.parentNode.style.textDecoration = "none";
element.parentNode.style.opacity = 1;
}
}
}
}
javascript html
asked Nov 22 '18 at 5:58
travislimatravislima
63
I am learning JS and need some help or advice on how to send a list item to the bottom of a list once it has been clicked on. At the moment, you can add a to-do list item, check the item which will add a strike through and set the opacity to 0.5 of the item (graying it out).
I would like to send the checked item to the bottom of the list, leaving any unchecked 'tasks' at the top.
My HTML
<!DOCTYPE html>
<html>
<head>
<title>Pomodo</title>
<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" type="text/css" href="style.css">
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<div class="hero">
<div class="container">
<h1 class="text-center display-2">Pomo.do</h1>
<p class="lead text-center">Go deep. Get things done.</p>
<div class="row">
<div id="pomodo-form" action="" class="col-8 mx-auto">
<div class="input-group">
<input type="input" class="form-control" id="pomodo-input" placeholder="What do you need to do today?"><span><button id="pomodo-btn" type="submit" class="btn btn-primary">Submit</button></span>
</div>
</div>
</div>
<div class="row">
<ul id="pomodo-list" class="col-8 mx-auto">
</ul>
</div>
</div>
</body>
</html>
My JavaScript.
window.onload = function() {
//variables
var form = document.getElementById("pomodo-form");
var input = document.getElementById("pomodo-input");
var btn = document.getElementById("pomodo-btn");
var list = document.getElementById("pomodo-list");
var id = 1;
//button event listener
btn.addEventListener("click", addTodoItem);
//list event listener
list.addEventListener("click", boxChecked);
//add todo item to list
function addTodoItem() {
if(input.value === "") {
alert("Please enter a To Do List Item.");
}
else {
if(list.style.borderTop === "") {
list.style.borderTop = "2px solid #fff";
}
var text = input.value;
var item = `<li id="li-${id}">${text}
<input id="box-${id}"
class="checkboxes"
type="checkbox"></li>`;
list.insertAdjacentHTML('beforeend', item);
id++;
input.value = ""; // reset the input value when button is clicked + not empty.
}
}
//Add Strikethrough on completed to do list items.
function boxChecked(event) {
const element = event.target;
if(element.type === "checkbox") {
if( element.checked ){
element.parentNode.style.textDecoration = "line-through";
element.parentNode.style.opacity = 0.5;
}else{
element.parentNode.style.textDecoration = "none";
element.parentNode.style.opacity = 1;
}
}
}
}
javascript html
javascript html
asked Nov 22 '18 at 5:58
travislimatravislima
63
asked Nov 22 '18 at 5:58
travislimatravislima
63
edited Nov 22 '18 at 6:50
travislima
asked Nov 22 '18 at 5:58
travislimatravislima
63
asked Nov 22 '18 at 5:58
travislimatravislima
63
asked Nov 22 '18 at 5:58
travislimatravislima
63
63
closed as too broad by Ankit Agarwal, cнŝdk, idursun, Roman Pokrovskij, Skynet Nov 22 '18 at 16:05
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
closed as too broad by Ankit Agarwal, cнŝdk, idursun, Roman Pokrovskij, Skynet Nov 22 '18 at 16:05
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.
Can you add HTML please
– Edwin Dijas Chiwona
Nov 22 '18 at 6:03
Added HTML - thank you!
– travislima
Nov 22 '18 at 6:50
add a comment |
Can you add HTML please
– Edwin Dijas Chiwona
Nov 22 '18 at 6:03
Added HTML - thank you!
– travislima
Nov 22 '18 at 6:50
Can you add HTML please
– Edwin Dijas Chiwona
Nov 22 '18 at 6:03
Can you add HTML please
– Edwin Dijas Chiwona
Nov 22 '18 at 6:03
Added HTML - thank you!
– travislima
Nov 22 '18 at 6:50
Added HTML - thank you!
– travislima
Nov 22 '18 at 6:50
add a comment |
2 Answers
2
active
oldest
votes
0
One of the easiest way is to reattach that element on its parent.
When checked, I reattach the element using appendChild(), which appends the element as a last child.
When unchecked, I reattach the element using insertBefore() and by using the firstChild as a reference.
function boxChecked(event) {
const element = event.target;
if(element.type === "checkbox") {
if( element.checked ){
element.parentNode.style.textDecoration = "line-through";
element.parentNode.style.opacity = 0.5;
const parent = element.parentElement.parentElement;
parent.appendChild(element.parentElement);
}else{
element.parentNode.style.textDecoration = "none";
element.parentNode.style.opacity = 1;
const parent = element.parentElement.parentElement;
parent.insertBefore(element.parentElement, parent.firstChild);
}
}
}<div>
<div>
<input id="cb1" type="checkbox" onclick="boxChecked(event)"/>
<label for="cb1">Pen</label>
</div>
<div>
<input id="cb2" type="checkbox" onclick="boxChecked(event)"/>
<label for="cb2">Pineapple</label>
</div>
<div>
<input id="cb3" type="checkbox" onclick="boxChecked(event)"/>
<label for="cb3">Apple</label>
</div>
</div>answered Nov 22 '18 at 6:04
Abana ClaraAbana Clara
1,646919
Thanks for this, it looks like it is just what I was looking for but I can't seem to get it to work.
– travislima
Nov 22 '18 at 7:01
@travislima Edited and added a snippet for testing
– Abana Clara
Nov 22 '18 at 7:06
Works perfectly. Thank you very much!
– travislima
Nov 22 '18 at 7:13
add a comment |
1
If I understand what you are trying to accomplish, you need to create some sort of grocery list, that has the ability to add items to it, and each item has a checkbox that can be checked (when the item is already bought, for example) and whenever the said item is checked, it should move to the bottom of the list, and whenever it is unchecked, it should move back to the top of the list.
In that case, using jQuery to accomplish that will make things a lot easier.
Here is a working example of what I just described:
//trigger adding new elements to the list
$("#btn").click(function() {
var txt = $("#txt_item").val();
// make sure the text is not empty
if (txt.trim().length > 0) {
//create li item
var item = $("<li></li>")
.append("<input type='checkbox'>") // add checkbox
.append(txt); // add text string
$("#list").prepend(item); // put the item at the top of the list
$("#txt_item").val(""); // clear the textbox for next item
}
});
//since we will be adding elements dynamically, we can't use $().change()
// we have to use $(document).on()
$(document).on('change', '#list input[type=checkbox]', function() {
//do we have a checked box?
if ($(this).is(":checked")) { // if yes:
var last = $("#list li").last(); // locate the last item
$(this).parent().insertAfter(last); // insert current one after it (at bottom)
} else {
// if not
var first = $("#list li").first(); // locate the first item
$(this).parent().insertBefore(first);// insert current one before it (on top)
}
});body {
font-family: calibri;
}
ul {
list-style: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
Enter an item to add : <input type="text" id="txt_item" value="Coffee"><button id="btn">Submit</button>
<br>
<ul id="list">
<li><input type="checkbox">Bread</li>
<li><input type="checkbox">Honey</li>
<li><input type="checkbox">Milk</li>
</ul>answered Nov 22 '18 at 6:32
AhmadAhmad
8,27543663
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
One of the easiest way is to reattach that element on its parent.
When checked, I reattach the element using appendChild(), which appends the element as a last child.
When unchecked, I reattach the element using insertBefore() and by using the firstChild as a reference.
function boxChecked(event) {
const element = event.target;
if(element.type === "checkbox") {
if( element.checked ){
element.parentNode.style.textDecoration = "line-through";
element.parentNode.style.opacity = 0.5;
const parent = element.parentElement.parentElement;
parent.appendChild(element.parentElement);
}else{
element.parentNode.style.textDecoration = "none";
element.parentNode.style.opacity = 1;
const parent = element.parentElement.parentElement;
parent.insertBefore(element.parentElement, parent.firstChild);
}
}
}<div>
<div>
<input id="cb1" type="checkbox" onclick="boxChecked(event)"/>
<label for="cb1">Pen</label>
</div>
<div>
<input id="cb2" type="checkbox" onclick="boxChecked(event)"/>
<label for="cb2">Pineapple</label>
</div>
<div>
<input id="cb3" type="checkbox" onclick="boxChecked(event)"/>
<label for="cb3">Apple</label>
</div>
</div>answered Nov 22 '18 at 6:04
Abana ClaraAbana Clara
1,646919
Thanks for this, it looks like it is just what I was looking for but I can't seem to get it to work.
– travislima
Nov 22 '18 at 7:01
@travislima Edited and added a snippet for testing
– Abana Clara
Nov 22 '18 at 7:06
Works perfectly. Thank you very much!
– travislima
Nov 22 '18 at 7:13
add a comment |
0
One of the easiest way is to reattach that element on its parent.
When checked, I reattach the element using appendChild(), which appends the element as a last child.
When unchecked, I reattach the element using insertBefore() and by using the firstChild as a reference.
function boxChecked(event) {
const element = event.target;
if(element.type === "checkbox") {
if( element.checked ){
element.parentNode.style.textDecoration = "line-through";
element.parentNode.style.opacity = 0.5;
const parent = element.parentElement.parentElement;
parent.appendChild(element.parentElement);
}else{
element.parentNode.style.textDecoration = "none";
element.parentNode.style.opacity = 1;
const parent = element.parentElement.parentElement;
parent.insertBefore(element.parentElement, parent.firstChild);
}
}
}<div>
<div>
<input id="cb1" type="checkbox" onclick="boxChecked(event)"/>
<label for="cb1">Pen</label>
</div>
<div>
<input id="cb2" type="checkbox" onclick="boxChecked(event)"/>
<label for="cb2">Pineapple</label>
</div>
<div>
<input id="cb3" type="checkbox" onclick="boxChecked(event)"/>
<label for="cb3">Apple</label>
</div>
</div>answered Nov 22 '18 at 6:04
Abana ClaraAbana Clara
1,646919
Thanks for this, it looks like it is just what I was looking for but I can't seem to get it to work.
– travislima
Nov 22 '18 at 7:01
@travislima Edited and added a snippet for testing
– Abana Clara
Nov 22 '18 at 7:06
Works perfectly. Thank you very much!
– travislima
Nov 22 '18 at 7:13
add a comment |
0
0
0
One of the easiest way is to reattach that element on its parent.
When checked, I reattach the element using appendChild(), which appends the element as a last child.
When unchecked, I reattach the element using insertBefore() and by using the firstChild as a reference.
function boxChecked(event) {
const element = event.target;
if(element.type === "checkbox") {
if( element.checked ){
element.parentNode.style.textDecoration = "line-through";
element.parentNode.style.opacity = 0.5;
const parent = element.parentElement.parentElement;
parent.appendChild(element.parentElement);
}else{
element.parentNode.style.textDecoration = "none";
element.parentNode.style.opacity = 1;
const parent = element.parentElement.parentElement;
parent.insertBefore(element.parentElement, parent.firstChild);
}
}
}<div>
<div>
<input id="cb1" type="checkbox" onclick="boxChecked(event)"/>
<label for="cb1">Pen</label>
</div>
<div>
<input id="cb2" type="checkbox" onclick="boxChecked(event)"/>
<label for="cb2">Pineapple</label>
</div>
<div>
<input id="cb3" type="checkbox" onclick="boxChecked(event)"/>
<label for="cb3">Apple</label>
</div>
</div>answered Nov 22 '18 at 6:04
Abana ClaraAbana Clara
1,646919
One of the easiest way is to reattach that element on its parent.
When checked, I reattach the element using appendChild(), which appends the element as a last child.
When unchecked, I reattach the element using insertBefore() and by using the firstChild as a reference.
function boxChecked(event) {
const element = event.target;
if(element.type === "checkbox") {
if( element.checked ){
element.parentNode.style.textDecoration = "line-through";
element.parentNode.style.opacity = 0.5;
const parent = element.parentElement.parentElement;
parent.appendChild(element.parentElement);
}else{
element.parentNode.style.textDecoration = "none";
element.parentNode.style.opacity = 1;
const parent = element.parentElement.parentElement;
parent.insertBefore(element.parentElement, parent.firstChild);
}
}
}<div>
<div>
<input id="cb1" type="checkbox" onclick="boxChecked(event)"/>
<label for="cb1">Pen</label>
</div>
<div>
<input id="cb2" type="checkbox" onclick="boxChecked(event)"/>
<label for="cb2">Pineapple</label>
</div>
<div>
<input id="cb3" type="checkbox" onclick="boxChecked(event)"/>
<label for="cb3">Apple</label>
</div>
</div>function boxChecked(event) {
const element = event.target;
if(element.type === "checkbox") {
if( element.checked ){
element.parentNode.style.textDecoration = "line-through";
element.parentNode.style.opacity = 0.5;
const parent = element.parentElement.parentElement;
parent.appendChild(element.parentElement);
}else{
element.parentNode.style.textDecoration = "none";
element.parentNode.style.opacity = 1;
const parent = element.parentElement.parentElement;
parent.insertBefore(element.parentElement, parent.firstChild);
}
}
}<div>
<div>
<input id="cb1" type="checkbox" onclick="boxChecked(event)"/>
<label for="cb1">Pen</label>
</div>
<div>
<input id="cb2" type="checkbox" onclick="boxChecked(event)"/>
<label for="cb2">Pineapple</label>
</div>
<div>
<input id="cb3" type="checkbox" onclick="boxChecked(event)"/>
<label for="cb3">Apple</label>
</div>
</div>function boxChecked(event) {
const element = event.target;
if(element.type === "checkbox") {
if( element.checked ){
element.parentNode.style.textDecoration = "line-through";
element.parentNode.style.opacity = 0.5;
const parent = element.parentElement.parentElement;
parent.appendChild(element.parentElement);
}else{
element.parentNode.style.textDecoration = "none";
element.parentNode.style.opacity = 1;
const parent = element.parentElement.parentElement;
parent.insertBefore(element.parentElement, parent.firstChild);
}
}
}<div>
<div>
<input id="cb1" type="checkbox" onclick="boxChecked(event)"/>
<label for="cb1">Pen</label>
</div>
<div>
<input id="cb2" type="checkbox" onclick="boxChecked(event)"/>
<label for="cb2">Pineapple</label>
</div>
<div>
<input id="cb3" type="checkbox" onclick="boxChecked(event)"/>
<label for="cb3">Apple</label>
</div>
</div>answered Nov 22 '18 at 6:04
Abana ClaraAbana Clara
1,646919
edited Nov 22 '18 at 7:11
answered Nov 22 '18 at 6:04
Abana ClaraAbana Clara
1,646919
answered Nov 22 '18 at 6:04
Abana ClaraAbana Clara
1,646919
answered Nov 22 '18 at 6:04
Abana ClaraAbana Clara
1,646919
1,646919
Thanks for this, it looks like it is just what I was looking for but I can't seem to get it to work.
– travislima
Nov 22 '18 at 7:01
@travislima Edited and added a snippet for testing
– Abana Clara
Nov 22 '18 at 7:06
Works perfectly. Thank you very much!
– travislima
Nov 22 '18 at 7:13
add a comment |
Thanks for this, it looks like it is just what I was looking for but I can't seem to get it to work.
– travislima
Nov 22 '18 at 7:01
@travislima Edited and added a snippet for testing
– Abana Clara
Nov 22 '18 at 7:06
Works perfectly. Thank you very much!
– travislima
Nov 22 '18 at 7:13
Thanks for this, it looks like it is just what I was looking for but I can't seem to get it to work.
– travislima
Nov 22 '18 at 7:01
Thanks for this, it looks like it is just what I was looking for but I can't seem to get it to work.
– travislima
Nov 22 '18 at 7:01
@travislima Edited and added a snippet for testing
– Abana Clara
Nov 22 '18 at 7:06
@travislima Edited and added a snippet for testing
– Abana Clara
Nov 22 '18 at 7:06
Works perfectly. Thank you very much!
– travislima
Nov 22 '18 at 7:13
Works perfectly. Thank you very much!
– travislima
Nov 22 '18 at 7:13
add a comment |
1
If I understand what you are trying to accomplish, you need to create some sort of grocery list, that has the ability to add items to it, and each item has a checkbox that can be checked (when the item is already bought, for example) and whenever the said item is checked, it should move to the bottom of the list, and whenever it is unchecked, it should move back to the top of the list.
In that case, using jQuery to accomplish that will make things a lot easier.
Here is a working example of what I just described:
//trigger adding new elements to the list
$("#btn").click(function() {
var txt = $("#txt_item").val();
// make sure the text is not empty
if (txt.trim().length > 0) {
//create li item
var item = $("<li></li>")
.append("<input type='checkbox'>") // add checkbox
.append(txt); // add text string
$("#list").prepend(item); // put the item at the top of the list
$("#txt_item").val(""); // clear the textbox for next item
}
});
//since we will be adding elements dynamically, we can't use $().change()
// we have to use $(document).on()
$(document).on('change', '#list input[type=checkbox]', function() {
//do we have a checked box?
if ($(this).is(":checked")) { // if yes:
var last = $("#list li").last(); // locate the last item
$(this).parent().insertAfter(last); // insert current one after it (at bottom)
} else {
// if not
var first = $("#list li").first(); // locate the first item
$(this).parent().insertBefore(first);// insert current one before it (on top)
}
});body {
font-family: calibri;
}
ul {
list-style: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
Enter an item to add : <input type="text" id="txt_item" value="Coffee"><button id="btn">Submit</button>
<br>
<ul id="list">
<li><input type="checkbox">Bread</li>
<li><input type="checkbox">Honey</li>
<li><input type="checkbox">Milk</li>
</ul>answered Nov 22 '18 at 6:32
AhmadAhmad
8,27543663
add a comment |
1
If I understand what you are trying to accomplish, you need to create some sort of grocery list, that has the ability to add items to it, and each item has a checkbox that can be checked (when the item is already bought, for example) and whenever the said item is checked, it should move to the bottom of the list, and whenever it is unchecked, it should move back to the top of the list.
In that case, using jQuery to accomplish that will make things a lot easier.
Here is a working example of what I just described:
//trigger adding new elements to the list
$("#btn").click(function() {
var txt = $("#txt_item").val();
// make sure the text is not empty
if (txt.trim().length > 0) {
//create li item
var item = $("<li></li>")
.append("<input type='checkbox'>") // add checkbox
.append(txt); // add text string
$("#list").prepend(item); // put the item at the top of the list
$("#txt_item").val(""); // clear the textbox for next item
}
});
//since we will be adding elements dynamically, we can't use $().change()
// we have to use $(document).on()
$(document).on('change', '#list input[type=checkbox]', function() {
//do we have a checked box?
if ($(this).is(":checked")) { // if yes:
var last = $("#list li").last(); // locate the last item
$(this).parent().insertAfter(last); // insert current one after it (at bottom)
} else {
// if not
var first = $("#list li").first(); // locate the first item
$(this).parent().insertBefore(first);// insert current one before it (on top)
}
});body {
font-family: calibri;
}
ul {
list-style: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
Enter an item to add : <input type="text" id="txt_item" value="Coffee"><button id="btn">Submit</button>
<br>
<ul id="list">
<li><input type="checkbox">Bread</li>
<li><input type="checkbox">Honey</li>
<li><input type="checkbox">Milk</li>
</ul>answered Nov 22 '18 at 6:32
AhmadAhmad
8,27543663
add a comment |
1
1
1
If I understand what you are trying to accomplish, you need to create some sort of grocery list, that has the ability to add items to it, and each item has a checkbox that can be checked (when the item is already bought, for example) and whenever the said item is checked, it should move to the bottom of the list, and whenever it is unchecked, it should move back to the top of the list.
In that case, using jQuery to accomplish that will make things a lot easier.
Here is a working example of what I just described:
//trigger adding new elements to the list
$("#btn").click(function() {
var txt = $("#txt_item").val();
// make sure the text is not empty
if (txt.trim().length > 0) {
//create li item
var item = $("<li></li>")
.append("<input type='checkbox'>") // add checkbox
.append(txt); // add text string
$("#list").prepend(item); // put the item at the top of the list
$("#txt_item").val(""); // clear the textbox for next item
}
});
//since we will be adding elements dynamically, we can't use $().change()
// we have to use $(document).on()
$(document).on('change', '#list input[type=checkbox]', function() {
//do we have a checked box?
if ($(this).is(":checked")) { // if yes:
var last = $("#list li").last(); // locate the last item
$(this).parent().insertAfter(last); // insert current one after it (at bottom)
} else {
// if not
var first = $("#list li").first(); // locate the first item
$(this).parent().insertBefore(first);// insert current one before it (on top)
}
});body {
font-family: calibri;
}
ul {
list-style: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
Enter an item to add : <input type="text" id="txt_item" value="Coffee"><button id="btn">Submit</button>
<br>
<ul id="list">
<li><input type="checkbox">Bread</li>
<li><input type="checkbox">Honey</li>
<li><input type="checkbox">Milk</li>
</ul>answered Nov 22 '18 at 6:32
AhmadAhmad
8,27543663
If I understand what you are trying to accomplish, you need to create some sort of grocery list, that has the ability to add items to it, and each item has a checkbox that can be checked (when the item is already bought, for example) and whenever the said item is checked, it should move to the bottom of the list, and whenever it is unchecked, it should move back to the top of the list.
In that case, using jQuery to accomplish that will make things a lot easier.
Here is a working example of what I just described:
//trigger adding new elements to the list
$("#btn").click(function() {
var txt = $("#txt_item").val();
// make sure the text is not empty
if (txt.trim().length > 0) {
//create li item
var item = $("<li></li>")
.append("<input type='checkbox'>") // add checkbox
.append(txt); // add text string
$("#list").prepend(item); // put the item at the top of the list
$("#txt_item").val(""); // clear the textbox for next item
}
});
//since we will be adding elements dynamically, we can't use $().change()
// we have to use $(document).on()
$(document).on('change', '#list input[type=checkbox]', function() {
//do we have a checked box?
if ($(this).is(":checked")) { // if yes:
var last = $("#list li").last(); // locate the last item
$(this).parent().insertAfter(last); // insert current one after it (at bottom)
} else {
// if not
var first = $("#list li").first(); // locate the first item
$(this).parent().insertBefore(first);// insert current one before it (on top)
}
});body {
font-family: calibri;
}
ul {
list-style: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
Enter an item to add : <input type="text" id="txt_item" value="Coffee"><button id="btn">Submit</button>
<br>
<ul id="list">
<li><input type="checkbox">Bread</li>
<li><input type="checkbox">Honey</li>
<li><input type="checkbox">Milk</li>
</ul>//trigger adding new elements to the list
$("#btn").click(function() {
var txt = $("#txt_item").val();
// make sure the text is not empty
if (txt.trim().length > 0) {
//create li item
var item = $("<li></li>")
.append("<input type='checkbox'>") // add checkbox
.append(txt); // add text string
$("#list").prepend(item); // put the item at the top of the list
$("#txt_item").val(""); // clear the textbox for next item
}
});
//since we will be adding elements dynamically, we can't use $().change()
// we have to use $(document).on()
$(document).on('change', '#list input[type=checkbox]', function() {
//do we have a checked box?
if ($(this).is(":checked")) { // if yes:
var last = $("#list li").last(); // locate the last item
$(this).parent().insertAfter(last); // insert current one after it (at bottom)
} else {
// if not
var first = $("#list li").first(); // locate the first item
$(this).parent().insertBefore(first);// insert current one before it (on top)
}
});body {
font-family: calibri;
}
ul {
list-style: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
Enter an item to add : <input type="text" id="txt_item" value="Coffee"><button id="btn">Submit</button>
<br>
<ul id="list">
<li><input type="checkbox">Bread</li>
<li><input type="checkbox">Honey</li>
<li><input type="checkbox">Milk</li>
</ul>//trigger adding new elements to the list
$("#btn").click(function() {
var txt = $("#txt_item").val();
// make sure the text is not empty
if (txt.trim().length > 0) {
//create li item
var item = $("<li></li>")
.append("<input type='checkbox'>") // add checkbox
.append(txt); // add text string
$("#list").prepend(item); // put the item at the top of the list
$("#txt_item").val(""); // clear the textbox for next item
}
});
//since we will be adding elements dynamically, we can't use $().change()
// we have to use $(document).on()
$(document).on('change', '#list input[type=checkbox]', function() {
//do we have a checked box?
if ($(this).is(":checked")) { // if yes:
var last = $("#list li").last(); // locate the last item
$(this).parent().insertAfter(last); // insert current one after it (at bottom)
} else {
// if not
var first = $("#list li").first(); // locate the first item
$(this).parent().insertBefore(first);// insert current one before it (on top)
}
});body {
font-family: calibri;
}
ul {
list-style: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
Enter an item to add : <input type="text" id="txt_item" value="Coffee"><button id="btn">Submit</button>
<br>
<ul id="list">
<li><input type="checkbox">Bread</li>
<li><input type="checkbox">Honey</li>
<li><input type="checkbox">Milk</li>
</ul>answered Nov 22 '18 at 6:32
AhmadAhmad
8,27543663
answered Nov 22 '18 at 6:32
AhmadAhmad
8,27543663
answered Nov 22 '18 at 6:32
AhmadAhmad
8,27543663
answered Nov 22 '18 at 6:32
AhmadAhmad
8,27543663
8,27543663
add a comment |
add a comment |
Can you add HTML please
– Edwin Dijas Chiwona
Nov 22 '18 at 6:03
Added HTML - thank you!
– travislima
Nov 22 '18 at 6:50