-
Notifications
You must be signed in to change notification settings - Fork 186
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #245 from Saimanjari777/expense-tracker
Expense Tracker
- Loading branch information
Showing
7 changed files
with
237 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| <h1 align='center'><b>💥 EXPENSE TRACKER 💥</b></h1> | ||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| <h3 align='center'>Tech Stack Used 🎮</h3> | ||
| <!-- enlist all the technologies used to create this project from them (Remove comment using 'ctrl+z' or 'command+z') --> | ||
|
|
||
| <div align='center'> | ||
|
|
||
|  | ||
|  | ||
|  | ||
| </div> | ||
|
|
||
|
|
||
|  | ||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| ## :zap: Description 📃 | ||
|
|
||
| - Beginner friendly project. | ||
| - The project is an expense tracker application built using HTML, CSS, and JavaScript. | ||
| - Designed with simplicity and functionality in mind, it allows users to add, delete expenses and show total amount spent. | ||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| ## :zap: How to run it? 🕹️ | ||
|
|
||
| <!-- add the steps how to run the project --> | ||
| - Fork this project and run the `index.html` file directly. | ||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| ## :zap: Screenshots 📸 | ||
| <!-- add the screenshot of the project (Mandatory) --> | ||
|
|
||
|  | ||
|
|
||
|
|
||
|  | ||
|
|
||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| <h4 align='center'>Developed By <b><i>Sai Manjari</i></b> 👧</h4> | ||
| <p align='center'> | ||
| <a href='https://www.linkedin.com/in/saimanjari777/'> | ||
| <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' /> | ||
| </a> | ||
| <a href='https://github.com/Saimanjari777'> | ||
| <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' /> | ||
| </a> | ||
| </p> | ||
|
|
||
| <h4 align='center'>Happy Coding 🧑💻</h4> | ||
|
|
||
| <h3 align="center">Show some ❤️ by 🌟 this repository!</h3> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Expense Tracker</title> | ||
| <link rel="stylesheet" type="text/css" href="style.css" /> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <h1>Expense Tracker</h1> | ||
| <form id="expense-form"> | ||
| <input | ||
| type="text" | ||
| id="expense-name" | ||
| placeholder="Expense Name" | ||
| required | ||
| /> | ||
| <input | ||
| type="number" | ||
| id="expense-amount" | ||
| placeholder="Amount" | ||
| required | ||
| /> | ||
| <button type="submit">Add Expense</button> | ||
| </form> | ||
| <div class="expense-table"> | ||
| <table> | ||
| <thead> | ||
| <tr> | ||
| <th>Expense Name</th> | ||
| <th>Amount</th> | ||
| <th>Action</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody id="expense-list"></tbody> | ||
| </table> | ||
| <div class="total-amount"> | ||
| <strong>Total:</strong> | ||
| $<span id="total-amount">0</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| const expenseForm = document.getElementById("expense-form"); | ||
| const expenseList = document.getElementById("expense-list"); | ||
| const totalAmountElement = document.getElementById("total-amount"); | ||
| let expenses = JSON.parse(localStorage.getItem("expenses")) || []; | ||
| function renderExpenses() { | ||
| expenseList.innerHTML = ""; | ||
| let totalAmount = 0; | ||
| for (let i = 0; i < expenses.length; i++) { | ||
| const expense = expenses[i]; | ||
| const expenseRow = document.createElement("tr"); | ||
| expenseRow.innerHTML = ` | ||
| <td>${expense.name}</td> | ||
| <td>$${expense.amount}</td> | ||
| <td class="delete-btn" data-id="${i}">Delete</td> | ||
| `; | ||
| expenseList.appendChild(expenseRow); | ||
| totalAmount += expense.amount; | ||
| } | ||
| totalAmountElement.textContent = totalAmount.toFixed(2); | ||
| localStorage.setItem("expenses", JSON.stringify(expenses)); | ||
| } | ||
| function addExpense(event) { | ||
| event.preventDefault(); | ||
| const expenseNameInput = document.getElementById("expense-name"); | ||
| const expenseAmountInput = document.getElementById("expense-amount"); | ||
| const expenseName = expenseNameInput.value; | ||
| const expenseAmount = parseFloat(expenseAmountInput.value); | ||
| expenseNameInput.value = ""; | ||
| expenseAmountInput.value = ""; | ||
| if (expenseName === "" || isNaN(expenseAmount)) { | ||
| alert("Please enter valid expense details."); | ||
| return; | ||
| } | ||
| const expense = { | ||
| name: expenseName, | ||
| amount: expenseAmount, | ||
| }; | ||
| expenses.push(expense); | ||
| renderExpenses(); | ||
| } | ||
| function deleteExpense(event) { | ||
| if (event.target.classList.contains("delete-btn")) { | ||
| const expenseIndex = parseInt(event.target.getAttribute("data-id")); | ||
| expenses.splice(expenseIndex, 1); | ||
| renderExpenses(); | ||
| } | ||
| } | ||
| expenseForm.addEventListener("submit", addExpense); | ||
| expenseList.addEventListener("click", deleteExpense); | ||
| renderExpenses(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| body { | ||
| font-family: Arial, sans-serif; | ||
| margin: 20px; | ||
| background-image: url(https://www.pixelstalk.net/wp-content/uploads/2016/06/Free-Download-Solid-Color-HD-Wallpapers.jpg); | ||
| background-repeat: no-repeat; | ||
| background-size: cover; | ||
| image-resolution: 2000px; | ||
| } | ||
| .container { | ||
| max-width: 800px; | ||
| margin: 0 auto; | ||
| padding: 20px; | ||
| border-radius: 8px; | ||
| box-shadow: 0 0px 30px rgba(227, 228, 237, 0.3); | ||
| backdrop-filter: blur(30px); | ||
| border: 2px solid rgba(255, 255, 255, 0.18); | ||
| } | ||
| h1 { | ||
| text-align: center; | ||
| margin-bottom: 20px; | ||
| } | ||
| form { | ||
| display: flex; | ||
| justify-content: center; | ||
| margin-bottom: 20px; | ||
| } | ||
| input[type="text"], | ||
| input[type="number"] { | ||
| padding: 10px; | ||
| border: 1px solid #ccc; | ||
| border-radius: 4px; | ||
| outline: none; | ||
| width: 250px; | ||
| margin-right: 10px; | ||
| } | ||
| input[type="text"]::placeholder, | ||
| input[type="number"]::placeholder { | ||
| color: #999; | ||
| } | ||
| button { | ||
| padding: 10px 20px; | ||
| background-color: #4caf50; | ||
| color: white; | ||
| border: none; | ||
| border-radius: 4px; | ||
| cursor: pointer; | ||
| } | ||
| button:hover { | ||
| background-color: #45a049; | ||
| } | ||
| .expense-table { | ||
| border: 1px solid #ddd; | ||
| border-radius: 8px; | ||
| overflow: hidden; | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | ||
| } | ||
| table { | ||
| width: 100%; | ||
| border-collapse: collapse; | ||
| } | ||
| thead th { | ||
| background-color: #f2f2f2; | ||
| padding: 10px; | ||
| text-align: left; | ||
| } | ||
| tbody td { | ||
| padding: 10px; | ||
| border-top: 1px solid #ddd; | ||
| } | ||
| .delete-btn { | ||
| color: red; | ||
| cursor: pointer; | ||
| } | ||
| .total-amount { | ||
| padding: 10px; | ||
| text-align: right; | ||
| background-color: #f2f2f2; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters