前言

課程連結，內容的製作在課程中原本為使用JS vanilla，而自己在專案上的製作則使用jQuery來練習。
完成後的成品

觀察須製作的功能

• 1.重新整理網頁後，保有過去執行的狀態：localstorage
  • 實作內有使用:
  • localstorage:setItem,getItem
  • jason.stringfy/jason.parse
• 2.在new transation輸入資料後，會將資料傳入history中
  • add transation之後，頁面不會刷新(spa)(e.preventdefault)
• 3.摸到history中的項目，會出現刪除符號，點擊後刪除

• 4.輸入的金額，會顯示於上方income、expense，並且計算總額
  • 有正負值
  • 計算收入、花費
    

項目拆解說明

讓transation輸入後顯示

$(document).ready(function () {
  $('.btn').click(function (e) {
    e.preventDefault();
    console.log('click');
    addTransactions('cash', '200');
  })
});


function addTransactions(name, amount) {
  var Transaction_str = `<li class='plus' >${name}<span> ${amount}</span><button class="delete-btn">x</button></li>`
  $('#list').append(Transaction_str);
}

//

• 提交之後清空
  • 選擇該輸入框，並利用val()，使內部的值清空

 $('#text').val('');
  $('#amount').val('');

從表格中取得值

• 運用val()取得輸入框的值，帶入addTransactions()函式將資料顯示畫面

$(document).ready(function () {
  $('.btn').click(function (e) {
    e.preventDefault();
    console.log('click');
    
    //取得表格中的值
    const text_val = $('#text').val();
    const amount_val = $('#amount').val();
    addTransactions(text_val, amount_val);
  })

});

製作刪除紐

$('.delete-btn').last().click(function () {
    console.log('del');
  })
}

• 修改方式，只能綁定一筆transatin或是綁定最後一筆

• 查看若實現點擊後刪除，是會刪除什麼？

 $('.delete-btn').last().click(function () {
    console.log(this);
  })
}

• 要刪除的是整筆資料，所以要去尋找他鄰近的元素

$('.delete-btn').last().click(function () {
    $(this).parent().remove();
  })

localstorage 運用

從此實作，可以看到它是一個陣列，裡面是物件

• 設置一個空陣列
• 並將物件push進去

//預設值的設置，取得存在本地的資料或是空陣列
  var transactions = JSON.parse(localStorage.getItem('Transactions')) || [];
  
   //推入陣列
    transactions.push({
      name: text_val,
      amount: amount_val
    })
    localStorage.setItem('Transactions', JSON.stringify(transactions));
  

• 增加初始function

//init
function initHistory(transactions) {
  transactions.forEach(transaction => {
    addTransactions(transaction.name, transaction.amount);
  });

}

//將此函式放於 $(document).ready()之中

//陣列初始
  if (transactions.length > 0) {
    initHistory(transactions);
  }

將transation刪除後，並沒有完全從localstorage刪除

• 運用id來刪除
• 從此段落：localstorage 運用，圖片中的存取陣列可以看到，沒有設置id
• id是在addTransactions使用

// Generate random ID
function generateID() {
  return Math.floor(Math.random() * 100000000);
}

//floor：無條件捨去
//ceil：無條件進位

• 在創造的陣列中\物件，都加入id

   const id = generateID();
    addTransactions(id, text_val, amount_val);

    //推入陣列
    transactions.push({
      id: id,
      name: text_val,
      amount: amount_val
    })

• 在addTransactions的函式中也要加入id

function addTransactions(id, name, amount) {

  console.log(id, name, amount);}
  

• 在button加入data-id

和資料有關的時候：data-原來欄位名稱

const Transaction_str = `<li class='plus' >${name}<span> ${amount}</span><button class="delete-btn"  data-id="${id}">x</button></li>`

• jquery data()： 自定義屬性 (data attributes)，讓我們可以任意讀寫資料在元素上，而且不會影響頁面的 layout
  jQuery Data

利用forEach、splice()刪除陣列內的資料

• 選擇點擊觸發的 id 與該元素的 id 同等者，就刪除。

function deleteFromLocalstorage(transactions, id) {
  transactions.forEach(function (item, index, arr) {
    //console.log('item', item);
    //console.log('index', index);
    //console.log('arr', arr);
    if (item.id === id) {
      arr.splice(index, 1);
    }
  });
  //迴圈刪除後，要儲存到localStorage才有確實刪去
  localStorage.setItem('Transactions', JSON.stringify(transactions));
}

• 查看迴圈的資料

• 確實刪除存在localstorage的資料

localStorage.setItem('Transactions', JSON.stringify(transactions));

判斷輸入的數字大小，並給予class

• 放在addTransactions()函式之中，判斷 amount 的正負值，再給予相應樣式

const Transaction_str = $('<li></li>').appendTo('#list');

  Transaction_str.addClass(amount < 0 ? 'minus' : 'plus');
  Transaction_str.html(`${name}<span> ${amount}</span><button class="delete-btn"  data-id="${id}">x</button>`);
  $('#list').append(Transaction_str);
  

數值的更新

function updateValue(transactions) {
  const amounts_arr = transactions.map(function (transaction) {
    return transaction.amount
  })

  console.log(amounts_arr);

  //計算加總 
  var total = 0;
  $.each(amounts_arr, function () { total += parseFloat((this)) || 0; });
  //傳回YOUR BALANCE
  $('#balance').text(`$${total}`);
  console.log(total);


  //*************************** */
  //從陣列找出>0的值，放置income
  //console.log(amounts)
  var income = amounts_arr.filter(
    function (item) {
      return item > 0
    }
  )
  console.log(income);
  var totalIncome = 0;
  $.each(income, function () { totalIncome += parseFloat((this)) || 0; });

  //console.log(totalIncome); //回傳220
  //傳回到income
  $('#money-plus').text(`$${totalIncome}`);
  //***************************** */
  //從陣列找出<0的值，放置income
  var expense = amounts_arr.filter(
    function (item) {
      return item < 0
    }
  )
  console.log(expense);

  var totalExpense = 0;
  $.each(expense, function () { totalExpense += parseFloat((this)) || 0; });

  console.log(totalExpense);
  //傳回到expense
  $('#money-minus').text(`$${totalExpense}`)


}

• 創造一個amount的陣列

  const amounts_arr = transactions.map(function (transaction) {
    return transaction.amount
  })
  console.log(amounts_arr);

• 計算加總數值

var total = 0;
  $.each(amounts_arr, function () { total += parseFloat((this)) || 0; });
  //傳回YOUR BALANCE
  $('#balance').text(`$${total}`);
  console.log(total);

最後計算總收入、支出費用

• 根據輸入的項目、金額來計算
• income 收入加總計算

//從陣列找出>0的值，放置income
  //console.log(amounts)
  var income = amounts_arr.filter(
    function (item) {
      return item > 0
    }
  )
  console.log(income);
  var totalIncome = 0;
  $.each(income, function () { totalIncome += parseFloat((this)) || 0; });

  //console.log(totalIncome); //回傳220
  //傳回到income
  $('#money-plus').text(`$${totalIncome}`);

• expense支出加總

//從陣列找出<0的值，放置expense
  var expense = amounts_arr.filter(
    function (item) {
      return item < 0
    }
  )
  console.log(expense);

  var totalExpense = 0;
  $.each(expense, function () { totalExpense += parseFloat((this)) || 0; });

  console.log(totalExpense);
  //傳回到expense
  $('#money-minus').text(`$${totalExpense}`)