invoice-code-update
建立於 差異永不過期
import { v4 as uuidv4 } from 'uuid'
import { v4 as uuidv4 } from 'uuid'
const washCarBtn = document.getElementById("wash-car-btn")
const washCarBtn = document.getElementById("wash-car-btn")
const mowLawnBtn = document.getElementById("mow-lawn-btn")
const mowLawnBtn = document.getElementById("mow-lawn-btn")
const pullWeedsBtn = document.getElementById("pull-weeds-btn")
const pullWeedsBtn = document.getElementById("pull-weeds-btn")
const taskP = document.getElementById("tasks")
const taskP = document.getElementById("tasks")
const totalH2 = document.getElementById("total-amount")
const totalH2 = document.getElementById("total-amount")
let total = []
let total = []
let tasks = [{
let tasks = [{
"task": "Wash Car",
"task": "Wash Car",
"total": 10
"total": 10
},
},
{"task": "Mow Lawn",
{"task": "Mow Lawn",
"total": 20
"total": 20
},
},
{"task": "Pull Weeds",
{"task": "Pull Weeds",
"total": 30
"total": 30
}]
}]
washCarBtn.addEventListener("click", function(){
washCarBtn.addEventListener("click", function(){
const id = uuidv4(); // Generate a unique id
taskP.innerHTML += `
taskP.innerHTML += `
<div class = "outer-task-total-div">
<div class = "outer-task-total-div">
<div class = "task-total-div">
<div class = "task-total-div">
<p>${tasks[0].task}</p>
<p>${tasks[0].task}</p>
<p>$${tasks[0].total}</p>
<p>$${tasks[0].total}</p>
</div>
</div>
<p class = "remove-btn" data-share = ${tasks[0].task}>Remove</p>
<p class = "remove-btn" data-id="${id}">Remove</p>
</div>`
</div>`
total.push({id: uuidv4(), total: tasks[0].total})
total.push({id: id, total: tasks[0].total})
render()
render()
})
})
mowLawnBtn.addEventListener("click", function(){
mowLawnBtn.addEventListener("click", function(){
const id = uuidv4(); // Generate a unique id
taskP.innerHTML += `
taskP.innerHTML += `
<div class = "outer-task-total-div">
<div class = "outer-task-total-div">
<div class = "task-total-div">
<div class = "task-total-div">
<p>${tasks[1].task}</p>
<p>${tasks[1].task}</p>
<p>$${tasks[1].total}</p>
<p>$${tasks[1].total}</p>
</div>
</div>
<p class = "remove-btn" data-share = ${tasks[1].task}>Remove</p>
<p class = "remove-btn" data-id="${id}">Remove</p>
</div>`
</div>`
total.push({id: uuidv4(), total: tasks[1].total})
total.push({id: id, total: tasks[1].total})
render()
render()
})
})
pullWeedsBtn.addEventListener("click", function(){
pullWeedsBtn.addEventListener("click", function(){
const id = uuidv4(); // Generate a unique id
taskP.innerHTML += `
taskP.innerHTML += `
<div class = "outer-task-total-div">
<div class = "outer-task-total-div">
<div class = "task-total-div">
<div class = "task-total-div">
<p>${tasks[2].task}</p>
<p>${tasks[2].task}</p>
<p>$${tasks[2].total}</p>
<p>$${tasks[2].total}</p>
</div>
</div>
<p class = "remove-btn" data-share = ${tasks[2].task}>Remove</p>
<p class = "remove-btn" data-id="${id}">Remove</p>
</div>`
</div>`
total.push({id: uuidv4(), total: tasks[2].total})
total.push({id: id, total: tasks[2].total})
render()
render()
})
})
function render(){
function render(){
const totalAmount = total.reduce((accumulator, currentValue) => {
const totalAmount = total.reduce((accumulator, currentValue) => {
return accumulator + currentValue.total}, 0);
return accumulator + currentValue.total;
}, 0);
totalH2.innerHTML = `$${totalAmount}`
totalH2.innerHTML = `$${totalAmount}`
}
}
document.addEventListener("click", function(e){
document.addEventListener("click", function(e){
if (e.target.dataset.share){
if (e.target.dataset.id) {
e.target.parentElement.remove()
const id = e.target.dataset.id; // Get the id from the dataset
e.target.parentElement.remove();
removeItem(id); // Call the remove function to update the total array
render(); // Recalculate the total
}
}
})
})
function removeItem(id) { //HELP! Need help getting this function working to remove the removed items from totals array
function removeItem(id) {
total = total.filter(item => item.id !== id); // Filter out the item with the matching id
const index = total.indexOf(id);
}
if (index !== -1) {
total.splice(index, 1);
}
return total;