potikanond · February 27, 2020 08:57
diff --git a/e.html b/e.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Expense Tracker</title>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
    integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

  <!-- bootswatch -->
  <link rel="stylesheet" href="https://bootswatch.com/4/yeti/bootstrap.min.css">

  <script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous">
  </script>
 </head>

 <body>

  <div class="container mt-4">
    <h1 class="display-4 text-center">
      <i class="fas fa-book-open text-primary"></i> My <span class="text-primary">Expenses</span></h1>
    <form id="add-trasaction-form">
      <div class="form-group">
        <label for="name">Transaction Name</label>
        <input type="text" id="name" class="form-control" >
      </div>
      <div class="form-group">
        <label for="amount">Amount (+:income / -:expense)</label>
        <input type="text" id="amount" class="form-control">
      </div>
      
      <input type="submit" value="Add Transaction" class="btn btn-primary btn-block">
    </form>
    
    <div class="container mt-5 text-center">
      <h4>Your Balance</h4>
      <h1 id="balance">$0</h1>
    </div>
    
    
    <div class="container mt-5"><h3>Transaction History</h3></div>
    <table class="table table-striped mt-3">
      <thead>
        <tr>
          <th>Name</th>
          <th>Amount</th>
          <th>Type</th>
        </tr>
      </thead>
      <tbody id="transaction-list"></tbody>
    </table>
    <button id="clear-history" class="btn btn-danger btn-block">Clear History</button>
  </div>

 </body>

 </html>
diff --git a/e.js b/e.js
 $(document).ready(function(){
  fetchTransactions();
  $('#add-trasaction-form').submit(saveTransaction);
  $('#clear-history').click(clearHistory);
 });

 function clearHistory() {
   
  // get confirmation from user
  // remove data from local storage

  // remove all rows in the table
  // update balance to $0

 }

 function calculateBalance() {
  let balance = 0.00;
  
  // if there are some history transactions, calculate balance

  console.log(balance);

  // place balance value in the HTML
 }

 function saveTransaction(e) {
  // prevent default form submitting
  e.preventDefault();

  // get form data (name and amount)
  let name = '';  // change needed
  let amount = 0; // change needed

  // validate data
  if (!validateForm(name, amount)) {
    // if data is invalid, stop
    return false;
  }

  // create new transaction object
 
  // Add new transaction to local storage
   
  // Clear form inputs
 
  // Update history table by adding new row
  
  // Update balance
 }

 function fetchTransactions() {
  // Get all transaction history from local storage

  // Add each transaction as a new row in the history table
  
  // Update balance
 }

 function validateForm(name, amount) {
  // check if both inputs are filled

  // check if transaction name is not number

  // check if amount is not equal to zero

  return true;
 }
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Expense Tracker</title>
	<!-- Font Awesome -->
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
	integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

	<!-- bootswatch -->
	<link rel="stylesheet" href="https://bootswatch.com/4/yeti/bootstrap.min.css">

	<script
	src="https://code.jquery.com/jquery-3.4.1.min.js"
	integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
	crossorigin="anonymous">
	</script>
	</head>

	<body>

	<div class="container mt-4">
	<h1 class="display-4 text-center">
	<i class="fas fa-book-open text-primary"></i> My <span class="text-primary">Expenses</span></h1>
	<form id="add-trasaction-form">
	<div class="form-group">
	<label for="name">Transaction Name</label>
	<input type="text" id="name" class="form-control" >
	</div>
	<div class="form-group">
	<label for="amount">Amount (+:income / -:expense)</label>
	<input type="text" id="amount" class="form-control">
	</div>

	<input type="submit" value="Add Transaction" class="btn btn-primary btn-block">
	</form>

	<div class="container mt-5 text-center">
	<h4>Your Balance</h4>
	<h1 id="balance">$0</h1>
	</div>


	<div class="container mt-5"><h3>Transaction History</h3></div>
	<table class="table table-striped mt-3">
	<thead>
	<tr>
	<th>Name</th>
	<th>Amount</th>
	<th>Type</th>
	</tr>
	</thead>
	<tbody id="transaction-list"></tbody>
	</table>
	<button id="clear-history" class="btn btn-danger btn-block">Clear History</button>
	</div>

	</body>

	</html>
	$(document).ready(function(){
	fetchTransactions();
	$('#add-trasaction-form').submit(saveTransaction);
	$('#clear-history').click(clearHistory);
	});

	function clearHistory() {

	// get confirmation from user
	// remove data from local storage

	// remove all rows in the table
	// update balance to $0

	}

	function calculateBalance() {
	let balance = 0.00;

	// if there are some history transactions, calculate balance

	console.log(balance);

	// place balance value in the HTML
	}

	function saveTransaction(e) {
	// prevent default form submitting
	e.preventDefault();

	// get form data (name and amount)
	let name = ''; // change needed
	let amount = 0; // change needed

	// validate data
	if (!validateForm(name, amount)) {
	// if data is invalid, stop
	return false;
	}

	// create new transaction object

	// Add new transaction to local storage

	// Clear form inputs

	// Update history table by adding new row

	// Update balance
	}

	function fetchTransactions() {
	// Get all transaction history from local storage

	// Add each transaction as a new row in the history table

	// Update balance
	}

	function validateForm(name, amount) {
	// check if both inputs are filled

	// check if transaction name is not number

	// check if amount is not equal to zero

	return true;
	}