iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
自我挑戰組

邊工作邊進行前端學習之旅系列 第 26

[Day 26] JS實作 - expense tracker 記帳簿

前言

課程連結,內容的製作在課程中原本為使用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}`)


上一篇
[Day 25] LocalStorage 介紹
下一篇
[Day 27] JS實作練習 - Music Player
系列文
邊工作邊進行前端學習之旅30

尚未有邦友留言

立即登入留言