Merge pull request #559 from yashikhare/expense-tracker-by-yashikhare

Add expense tracker by yashi khare
Ayush7614 · Mar 7, 2022 · 94ccf3a · 94ccf3a
2 parents df5e727 + 3d5721d
commit 94ccf3a
Show file tree

Hide file tree

Showing 6 changed files with 267 additions and 0 deletions.
diff --git a/Expense-Tracker/Screenshot (28).png b/Expense-Tracker/Screenshot (28).png
diff --git a/Expense-Tracker/Screenshot (29).png b/Expense-Tracker/Screenshot (29).png
diff --git a/Expense-Tracker/index.html b/Expense-Tracker/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Expense Tracker App</title>
+    <link rel="stylesheet" href="styles.css">
+    <script src="https://kit.fontawesome.com/559b3360fa.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+</head>
+<body>
+    <h1>Expense Tracker</h1>
+
+    <div id="container">
+
+        <h2>Add a new time:</h2>
+        <div class="field1">
+            <span>Name: <input id="nameField" type="text" class="container2" placeholder="where was the expense made?"
+                    style="width: 600px; height: 22px; background-color: wheat; border-radius: 7px;"></span>
+        </div><br>
+        <div class="field2">
+            <span for="date">Date:</span>
+            <input type="date" class="container2" id="dateField">
+
+            <span style="padding-left: 15px;">Amount: <input id="amountField" type="number" class="container2"></span>
+        </div>
+        <div class="button">
+           <div class="submitbtn"><button type="submit" class="btn" id="expenseButton">Add Expense</button></div>
+
+        </div>
+
+        <div id="table">
+        </div>
+
+
+      <script src="script.js"></script>
+
+</body>
+
+</html>
diff --git a/Expense-Tracker/readme.md b/Expense-Tracker/readme.md
@@ -0,0 +1,28 @@
+# Description
+This a expense tracker which keeps track of income and expenses.
+
+# Project Specifications
+- Create UI for project
+- Display  where the expenses was made and on which date it was made
+  and amount transaction in DOM
+- Delete items from DOM
+
+# Type of change
+ - [X]  New feature (non-breaking change which adds functionality)
+- [X] Explain the Testing instructions
+
+# Test Configuration:
+
+Text-editors used: VS Code
+
+# Checklist:
+ - [X]  My code follows the style guidelines of this project
+  - [X] I have performed a self-review of my own code
+  - [X] I have made corresponding changes to the documentation
+  - [X] My changes generate no new warnings
+
+## Screenshots
+
+![Screenshot (28)](https://user-images.githubusercontent.com/72096769/156885410-05944a5c-a910-49d3-a8f9-45445d5fe271.png)
+![Screenshot (29)](https://user-images.githubusercontent.com/72096769/156885415-bdb16e71-10bb-4539-b8e6-6f037182291d.png)
+
diff --git a/Expense-Tracker/script.js b/Expense-Tracker/script.js
@@ -0,0 +1,84 @@
+
+var nameField = document.getElementById("nameField");
+        var amountField = document.getElementById("amountField");
+        var dateField = document.getElementById("dateField");
+        var expenseButton = document.getElementById("expenseButton");
+        var table = document.getElementById('table');
+
+        var List = [];
+        var List1 = [];
+        var List2 = [];
+
+
+        expenseButton.addEventListener("click", function () {
+            //e.preventDefault();
+
+            List.push(nameField.value);
+            List1.push(dateField.value);
+            List2.push(amountField.value);
+
+
+
+            nameField.value = "";
+            dateField.value = "";
+            amountField.value = "";
+            console.log(List1);
+            renderList();
+
+        });
+
+
+
+        function handleDelete(index) {
+            var newList = [];
+            var newList1 = [];
+            var newList2 = [];
+            for (let i = 0; i < List.length && i < List1.length && i < List2.length; i++) {
+                if (i != index) {
+                    newList.push(List[i]);
+                    newList1.push(List1[i]);
+                    newList2.push(List2[i]);
+                }
+            }
+            List = newList;
+            List1 = newList1;
+            List2 = newList2;
+            renderList();
+
+        }
+
+
+        function renderList() {
+            var res = "";
+            for (let i = 0; i < List.length && i < List1.length && i < List2.length; i++) {
+                var single = List[i];
+                var single1 = List1[i];
+                var single2 = List2[i];
+                var html =
+                    `<div>
+                                <table>
+                                    <tr>
+                                        <th>Name</th>
+                                        <th>Date</th>
+                                        <th>Amount</th>
+                                        <th style="width: 50px;"></th>
+                                    </tr>
+                                    <tr>
+                                        <td>${single}</td>
+                                        <td>${single1}</td>
+                                        <td>${single2}</td>
+                                        <td style="width: 50px;">
+                                            <button onclick=handleDelete(${i})><i class="fas fa-times"></i></button>
+                                        </td>                     
+                                    </tr>
+                                <table>
+                             </div>`
+
+                res += html;
+
+            }
+            table.innerHTML = res;
+
+
+        }
+
diff --git a/Expense-Tracker/styles.css b/Expense-Tracker/styles.css
@@ -0,0 +1,113 @@
+body {
+    text-align: center;
+    font-family: sans-serif;
+    font-size: 24px;
+    background-color: #265077;
+    background: #C02425;
+    /* fallback for old browsers */
+    background: #ff0084;
+    /* fallback for old browsers */
+    background: -webkit-linear-gradient(to right, #33001b, #ff0084);
+    /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to right, #33001b, #ff0084);
+    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
+
+    color: #FFE47A;
+}
+
+.child-container{
+    position: relative;
+display: flex;
+justify-content: center;
+margin-left: 585px;
+background-color: #265077;
+width: 25%;
+height: 75px;
+border-radius: 60px;
+
+}
+
+.container1{
+    padding: 10px 40px;
+}
+
+span {
+
+    font-weight: bolder;
+
+}
+.container2{
+    font-size: 15px;
+    padding: 2px;
+    font-weight: bold;
+
+}
+
+.field2 {
+    display: flex;
+    justify-content: center;
+    padding: 15px;
+}
+
+.field2 input {
+    width: 250px;
+    height: 22px;
+    border-radius: 7px;
+    font-family: sans-serif;
+    background-color: wheat;
+}
+
+.field2 i {
+
+    padding: 4.5px;
+    padding-bottom: 7px;
+    color: black;
+    min-width: 20px;
+    text-align: center;
+}
+
+.button {
+    padding: 25px;
+    display: flex;
+    justify-content: center;
+}
+.submitbtn{
+padding: 15px 20px;
+}
+
+.btn{
+    background-color: wheat;
+    color: black;
+    font-weight: bolder;
+    width: 105px;
+    height: 35px;
+    border-radius: 5px;
+
+
+}
+
+table {
+    font-family: arial, sans-serif;
+    border-collapse: collapse;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px;
+
+}
+
+td,
+th {
+    border: 1px solid #dddddd;
+    text-align: left;
+    padding: 8px;
+    width: 180px;
+    color: #FFE47A;
+
+}
+
+td {
+    height: 20px;
+    color: wheat;
+}