[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}`)


<<:  修改 DOM 元素样式

>>:  [DAY12]贴图与图片

[想试试看JavaScript ] 物件 建构式

昨天做了一个 player 的物件范例 var player=new Object(); playe...

Day 26:53. Maximum Subarray (2)

今日题目 题目连结:53. Maximum Subarray 题目主题:Array, Divide ...

【Day 08】 实作 - 透过 AWS 服务 - AppFlow 把 Google Analytics 资料存放至 AWS 中 ( 1 )

今天我们来实作怎麽『 透过 AWS 服务把 Google Analytics 资料撷取存放至 AWS...

认识HTML(二)

1.VS code 写网页的编辑器有许多种,我使用的编辑器是Visual Studio Code(简...

Celebs worth

The most reliable blog for celebrity Net Worth Net...