Yudhajitadhikary/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- Compiled and minified CSS -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <title>Ninja Wonga</title>
    <style>
        h2, p{
            margin:10px 0;
        }
        header{
            margin-bottom: 40px;
        }
        .tip{
            padding:10px;
            background: #333;
            color:#fff;
            }
            .tip .delete{
                color:hotpink;
                font-size:0.8em ;
            }
    </style>
</head>
<body class="indigo">
    <header class="indigo darken-1 section">
        <h2 class="center white-text">Expense Tracker</h2>
        <p class="flow-text grey-text center text-lighten-2">Monthly money tracker...</p>
    </header>
    <div class="container section">
        <div class="row">
            <div class="col s12 m6">
                <form class="card z-depth-0">
                    <div class="card-content">
                        <span class="card-title indigo-text">Add Item:</span>
                    <div class="input-field">
                        <input type="text" id="name">
                        <label for="name">Item Name</label>
                    </div>
                    <div class="input-field">
                        <input type="text" id="cost">
                        <label for="cost">Item Cost</label>
                    </div>
                    <div class="input-field center">
                      <button class="btn-large pink white-text">Add Item</button>
                    </div>
                    <div class="input-field center">
                       <p class="red-text" id="error"></p>
                      </div>
                    </div>

                </form>
            </div>
            <div class="col s12 m5 push-m1">
                <div class="canvas">

                </div>
            </div>
           </div>
    </div>
    <!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-firestore.js"></script>

<script>
  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    apiKey: "AIzaSyDd2_doRnGZjHFIWBYIteVLSnHy5Sed6mg",
    authDomain: "udemy-d3-firebase-7dfef.firebaseapp.com",
    databaseURL: "https://udemy-d3-firebase-7dfef.firebaseio.com",
    projectId: "udemy-d3-firebase-7dfef",
    storageBucket: "udemy-d3-firebase-7dfef.appspot.com",
    messagingSenderId: "1087531832150",
    appId: "1:1087531832150:web:4d8cbb5af9ed0a7584bcf7",
    measurementId: "G-RVMZMLKLWE"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
//   firebase.analytics();
const db=firebase.firestore();
const settings={timestampsInSnapshots:true};
db.settings(settings)
</script>
   <script src="https://d3js.org/d3.v5.min.js"></script>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.9.1/d3-tip.js"></script>
   <script src="index.js"></script>
   <script src="graph.js"></script>


</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- Compiled and minified CSS -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
	<title>Ninja Wonga</title>
	<style>
	h2, p{
	margin:10px 0;
	}
	header{
	margin-bottom: 40px;
	}
	.tip{
	padding:10px;
	background: #333;
	color:#fff;
	}
	.tip .delete{
	color:hotpink;
	font-size:0.8em ;
	}
	</style>
	</head>
	<body class="indigo">
	<header class="indigo darken-1 section">
	<h2 class="center white-text">Expense Tracker</h2>
	<p class="flow-text grey-text center text-lighten-2">Monthly money tracker...</p>
	</header>
	<div class="container section">
	<div class="row">
	<div class="col s12 m6">
	<form class="card z-depth-0">
	<div class="card-content">
	<span class="card-title indigo-text">Add Item:</span>
	<div class="input-field">
	<input type="text" id="name">
	<label for="name">Item Name</label>
	</div>
	<div class="input-field">
	<input type="text" id="cost">
	<label for="cost">Item Cost</label>
	</div>
	<div class="input-field center">
	<button class="btn-large pink white-text">Add Item</button>
	</div>
	<div class="input-field center">
	<p class="red-text" id="error"></p>
	</div>
	</div>

	</form>
	</div>
	<div class="col s12 m5 push-m1">
	<div class="canvas">

	</div>
	</div>
	</div>
	</div>
	<!-- The core Firebase JS SDK is always required and must be listed first -->
	<script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-app.js"></script>

	<!-- TODO: Add SDKs for Firebase products that you want to use
	https://firebase.google.com/docs/web/setup#available-libraries -->
	<script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-firestore.js"></script>

	<script>
	// Your web app's Firebase configuration
	// For Firebase JS SDK v7.20.0 and later, measurementId is optional
	var firebaseConfig = {
	apiKey: "AIzaSyDd2_doRnGZjHFIWBYIteVLSnHy5Sed6mg",
	authDomain: "udemy-d3-firebase-7dfef.firebaseapp.com",
	databaseURL: "https://udemy-d3-firebase-7dfef.firebaseio.com",
	projectId: "udemy-d3-firebase-7dfef",
	storageBucket: "udemy-d3-firebase-7dfef.appspot.com",
	messagingSenderId: "1087531832150",
	appId: "1:1087531832150:web:4d8cbb5af9ed0a7584bcf7",
	measurementId: "G-RVMZMLKLWE"
	};
	// Initialize Firebase
	firebase.initializeApp(firebaseConfig);
	// firebase.analytics();
	const db=firebase.firestore();
	const settings={timestampsInSnapshots:true};
	db.settings(settings)
	</script>
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<!-- Compiled and minified JavaScript -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.9.1/d3-tip.js"></script>
	<script src="index.js"></script>
	<script src="graph.js"></script>


	</body>
	</html>