budget.html

<!--<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>Expense Manager</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 <link rel="stylesheet" href="/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
            integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js" crossorigin="anonymous"></script>
</head>
<body>

<style>
 {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
 }

 .clearfix::after {
    content: "";
    display: table;
    clear: both;
 }


 body{
    color: #555;
    font-family: Open Sans;
    font-size: 16px;
    position: relative;
    height: 100vh;
    font-weight: 400;
 }

 .left-container {
    height: 100vh;
    background-image: linear-gradient(#0277bd, #03a9f4);
    background-position: center;
    background-size: cover;
    position: relative;
 }

 .right-container {
    height: 100vh;
    width: 100%;
    position: relative;
 }

 .header {
    font-weight: 22px;
    font-size: 36px;
 }

 .sub-text{
    font-size: 22px;
    font-weight: 400;
 }

 .month-container {
    padding-top: 25%;
    padding-left: 5%;
    padding-right: 5%;
 }

 .calc-container {
    padding-top: 12%;
    padding-left: 5%;
    padding-right: 5%;
 }

 .fs-white {
    color: #ffffff;
 }

 .fs-dark-grey {
    color: #4e4e4e;
 }

 .budget-container {
    display: inline-block;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 6px 4px #000000;
 }

 .month-amount{
    font-size: 36px;
    font-weight: 700;
 }

 .bottom-border {
    border-bottom: 1px solid #00446d;

 }

 .expense-row{
    padding: 10px;
 }



















    </style>







    <div class="row">
        <div class="col-4 left-container">
            <div class="month-container">
                <div class="header fs-white">Your Budget</div>
                <div id="current-month" class="sub-text fs-white"></div>
                <div class="budget-container p-2 mt-4">
                    <span id="month-budget" class="month-amount">&#36; 0</span>
                </div>
            </div>

            <div class="chart-container">
                <canvas id="expense-chart"></canvas>
            </div>
        </div>

        <div class="col-8 right-container">
            <div class="calc-container">
                <div class="header fs-dark-grey">Track Your Budget</div>
                <div class="dropdown open">
                    <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Expense Type
                    </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" id="type-savings">Savings</a>
                        <a class="dropdown-item" id="type-expense">Expense</a>
                        <a class="dropdown-item" id="type-investment">Investment</a>

                    </div>
                </div>
                <div class="mt-3 tracking-text text-capitalize sub-text bottom-border">Tracking Savings 💰</div>

                <div class="row mt-4">
                    <div class="col-7">
                        <input class="form-control input-expense-description" type="text" placeholder="Description">

                    </div>

                    <div class="col-4">
                        <input class="form-control input-expense-value" type="number" placeholder="Value">
                        
                    </div>


                    <div class="col-1">
                       <button type="button" class="btn btn-success btn-submit-expense">&check;</button>                        
                    </div>






                </div>

                 <div class="expense-list mt-4">

                 </div>
            </div>
        </div>
    </div>
    
</body>
</html>--->





<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Scrap Budget Tracker</title>
</head>




<body>


    <style>

:root {
  --expense: red;
  --income: #50C878;
}

* {
  box-sizing: border-box;
}

body {
  background-color: #f2fffd;
  font-family: 'Lato';
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}

.container {
  margin: 30px auto;
  width: 350px;
}

h1 {
  letter-spacing: 1px;
  margin: 0;
  display: flex;
  justify-content: center;
}

h2 {
  color: #14211f;
}

h3 {
  border-bottom: 1px solid #499486;
  padding-bottom: 10px;
  margin: 40px 0 10px;
}

h4 {
  margin: 0;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
}

.inc-exp.container{
  background-color: #f5f5fa;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  padding: 20px;
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}

/* Take direct divs of container */
.inc-exp.container > div {
  flex: 1;
  text-align: center;
}

/* Border in the middle */
/* Pseudo-selector to only the first div */
.inc-exp.container > div:first-of-type {
  border-right: 1px solid #dedede;
}

.money {
  font-size: 20px;
  letter-spacing: 1px;
  margin: 5px 0;
}

.money.plus {
  color: var(--income);
}

.money.minus {
  color: var(--expense);
}

label {
  display: inline-block;
  margin: 10px 0;
}

.list {
  list-style-type: none;
  padding: 0;
  margin-bottom: 40px; 
}

.list li {
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  color: #14211f;
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 10px;
  margin: 10px 0;
}

.list li.plus {
  border-right: 7px solid var(--income);
}

.list li.minus {
  border-right: 7px solid var(--expense);
}

.delete-btn {
  /* Scarlet red with horange-red hue */
  background-color: #FF2400;
  border: 0;
  color: white;
  font-size: 20px;
  line-height: 20px;
  padding: 2px 5px;
  position: absolute;
  top: 50%;
  left: 0;
  cursor: pointer;
  /* Like a tag next to the transaction */
  transform: translate(-110%, -50%);
  opacity: 0;
  /* Add a fade-in transition */
  transition: opacity 0.3s ease;
}

.list li:hover .delete-btn {
  opacity: 1;
}

.delete-btn:focus {
  outline: 0;
}

input[type='text'], input[type='number']{
  border: 1px solid #d8d8d8;
  border-radius: 2px;
  display: block;
  font-size: 16px;
  padding: 10px;
  width: 100%;
}

/* button inspired by CSS Scan */
.btn {
  background-color: #c2fbd7;
  border-radius: 100px;
  box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset,rgba(44, 187, 99, .15) 0 1px 2px,rgba(44, 187, 99, .15) 0 2px 4px,rgba(44, 187, 99, .15) 0 4px 8px,rgba(44, 187, 99, .15) 0 8px 16px,rgba(44, 187, 99, .15) 0 16px 32px;
  color: green;
  cursor: pointer;
  display: block;
  font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
  padding: 7px 20px;
  text-align: center;
  text-decoration: none;
  transition: all 250ms;
  border: 0;
  font-size: 16px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;

  margin: 10px 0 30px;
  width: 100%;
}

.btn:hover {
  box-shadow: rgba(44,187,99,.35) 0 -25px 18px -14px inset,rgba(44,187,99,.25) 0 1px 2px,rgba(44,187,99,.25) 0 2px 4px,rgba(44,187,99,.25) 0 4px 8px,rgba(44,187,99,.25) 0 8px 16px,rgba(44,187,99,.25) 0 16px 32px;
  transform: scale(1.05) rotate(-1deg);
}

.btn:focus {
  outline: 0;
}
    </style>
  <h2>Scrap Budget Tracker</h2>
  

  <div class="container">
    <h4>Your Balance</h4>
    <h1 id="balance">$0.00</h1>
    
    <div class="inc-exp container">
      <div>
        <h4>Sell</h4>
        <p id="money-plus" class="money plus">$0.00</p>
      </div>
      <div>
        <h4>Buy</h4>
        <p id="money-minus" class="money minus">-$0.00</p>
      </div>
    </div>
    <!-- End of Income/Expense container -->

    <h3>Add</h3>
   <form id="form">

      <div class="form-control">
        <label for="text">Material Name</label>
        <input type="text" id="text" placeholder="Enter text&hellip;">
      </div>

      <div class="form-control">
        <label for="text">Mobile No.</label>
        <input type="text" id="text" placeholder="Enter number...&hellip;">
      </div>

      <div class="form-control">
        <label for="amount">Amount</label>
        <input type="number" id="amount" placeholder="Enter amount&hellip; (e.g., 20 or -10)">
      </div>
      <button class="btn">Add Material</button>
    </form>
    <!-- End of Transaction Form -->

    <h3> Sell Your Material</h3>
    <ul id="list" class="list">
    </ul>
    <!-- End of Transaction History -->
  </div> 
  <!-- End of Budget Container -->








  <script src="script.js"></script>

  <script>
    "use strict";

const balance = document.getElementById('balance');
const money_plus = document.getElementById('money-plus');
const money_minus = document.getElementById('money-minus');
const list = document.getElementById('list');
const form = document.getElementById('form');
const text = document.getElementById('text');
const amount = document.getElementById('amount');

/* Array of transactions found on the user's browser.
A stringified array is returned, so needs to be converted via JSON.parse() */
const localStorageTransactions = JSON.parse(localStorage.getItem('transactions'));

/* Transactions is the array of objects that each stores id, text, and amount.
Extract from user's localStorage if it exists, otherwise an empty array. */
let transactions = 
  localStorage.getItem('transactions') !== null ? localStorageTransactions : [];

/**
 * Generates a unique ID for the transaction. For now, simply generates the
 * exact millisecond the transaction was created.
 * @returns number that represents a unique ID
 */
function generateID(){
  return new Date().getTime();
}

/**
 * Adds the new transaction
 * @param {Event} e event when user presses submit button 'Add Transaction'
 */
function addTransaction(e) {
  // Prevent the event argument from actually submitting
  e.preventDefault();

  if(text.value.trim() === '' || amount.value.trim() === '') {
    alert('Please add a Transaction Name and Amount');
  } else {
    const transaction = {
      id: generateID(),
      text: text.value,
      amount: +amount.value
    };

    // Push transaction the to array
    transactions.push(transaction);

    // Add transaction to the DOM
    addTransactionDOM(transaction);

    // Update values of the Budget container
    updateValues();

    // Sets the transaction in user's localStorage so data persists
    updateLocalStorage();

    // Clear the input fields
    text.value = '';
    amount.value = '';
  }

}


/**
 * Adds the transaction to the DOM
 * @param {*} transaction the amount of transaction (e.g, 20 or -10)
 */
function addTransactionDOM(transaction){
  // Distinguish transaction as either expense or income
  const sign = transaction.amount < 0 ? '-' : '+';

  /* Recall: a list item in Transaction history follows the format:
      <li class="plus">Cash <span>+$700</span><button class="delete-btn">X</button></li>
  */
  
  // Create a list item 
  const item = document.createElement('li');

  // Add class based on amount
  item.classList.add(transaction.amount < 0 ? 'minus' : 'plus');

  // Create the HTML to list item
  // Negative number has a minus sign, so wrap it with Math.abs to get only the magnitude
  item.innerHTML =  `
    ${transaction.text} <span>${sign}${Math.abs(transaction.amount)}</span> 
    <button class="delete-btn" onclick="removeTransaction(${transaction.id})">X</button></li>
  `;

  // Add the list item to the DOM as list's child node
  list.appendChild(item);
}


/**
 * Update the budget by calculating the balance, income, and expenses.
 */
function updateValues() {
  // Loop through the transactions array and create a new array with only amounts
  const amounts = transactions.map(transaction => 
    transaction.amount);

  // Reduce the array of amounts to a total, also set it to two decimal points
  const total = amounts
    .reduce((acc, val) => (acc += val), 0)
    .toFixed(2);
  
  // Get the income
  const income = amounts
    .filter((transaction) => transaction > 0)
    .reduce((acc, val) => (acc += val), 0)
    .toFixed(2);

  const expense = amounts
    .filter((transaction) => transaction < 0)
    .reduce((acc, val) => (acc += val), 0)
    .toFixed(2);

  balance.innerHTML = `$${total}`;
  money_plus.innerHTML = `$${income}`;
  money_minus.innerHTML = `$${expense}`;
}

/**
 * Remove transaction by its ID from the DOM.
 * @param {number} id the unique id of the transaction
 */
function removeTransaction(id){
  // Filter out the transaction by its id and save it to the array
  transactions = transactions.filter(transaction => transaction.id !== id);

  // Sets the transaction in user's localStorage so data persists
  updateLocalStorage();

  // Reinitialize app after removal to update data on the page
  init();
}

/**
 * Updates the localStorage on the user's browser with new transactions
 */
function updateLocalStorage(){
  localStorage.setItem('transactions', JSON.stringify(transactions));
}

/**
 * Initializes the app with seed data (found in user's localStorage).
 */
function init(){
  // Clear out the list
  list.innerHTML = ''; 

  // For each transactions, add it as a list item and to the DOM
  transactions.forEach(addTransactionDOM);
  updateValues();
}

// Initialize the app
init();

/* Event Listeners */
form.addEventListener('submit', addTransaction);
  </script>
</body>
</html>


