diff --git a/Vanilla-JS-Projects/Basic/Expense-Tracker/README.md b/Vanilla-JS-Projects/Basic/Expense-Tracker/README.md new file mode 100644 index 00000000..d4662311 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Expense-Tracker/README.md @@ -0,0 +1,58 @@ +

đŸ’Ĩ EXPENSE TRACKER đŸ’Ĩ

+ + + +

Tech Stack Used 🎮

+ + +
+ + ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) + ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) + ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) +
+ + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +## :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? 🕹ī¸ + + +- Fork this project and run the `index.html` file directly. + + + +## :zap: Screenshots 📸 + + +![img](./screenshot.webp) + + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + + +

Developed By Sai Manjari 👧

+

+ + + + + + +

+ +

Happy Coding 🧑‍đŸ’ģ

+ +

Show some  â¤ī¸  by  đŸŒŸ  this repository!

diff --git a/Vanilla-JS-Projects/Basic/Expense-Tracker/index.html b/Vanilla-JS-Projects/Basic/Expense-Tracker/index.html new file mode 100644 index 00000000..cb357509 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Expense-Tracker/index.html @@ -0,0 +1,44 @@ + + + + Expense Tracker + + + +
+

Expense Tracker

+
+ + + +
+
+ + + + + + + + + +
Expense NameAmountAction
+
+ Total: + $0 +
+
+
+ + + diff --git a/Vanilla-JS-Projects/Basic/Expense-Tracker/screenshot.webp b/Vanilla-JS-Projects/Basic/Expense-Tracker/screenshot.webp new file mode 100644 index 00000000..53bffb9c Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Expense-Tracker/screenshot.webp differ diff --git a/Vanilla-JS-Projects/Basic/Expense-Tracker/script.js b/Vanilla-JS-Projects/Basic/Expense-Tracker/script.js new file mode 100644 index 00000000..4eebdf9e --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Expense-Tracker/script.js @@ -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 = ` + ${expense.name} + $${expense.amount} + Delete + `; + 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(); diff --git a/Vanilla-JS-Projects/Basic/Expense-Tracker/style.css b/Vanilla-JS-Projects/Basic/Expense-Tracker/style.css new file mode 100644 index 00000000..6f6491d1 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Expense-Tracker/style.css @@ -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; +} diff --git a/Vanilla-JS-Projects/README.md b/Vanilla-JS-Projects/README.md index d8497b32..51840e43 100644 --- a/Vanilla-JS-Projects/README.md +++ b/Vanilla-JS-Projects/README.md @@ -53,7 +53,8 @@ | 26 | [Email-Subscription-form-with-google-sheet](./Intermediate/Email-Subscription-form-with-google-sheet/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | | 27 | [Dictonary-App](./Basic/Dictonary-App/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) | | 28 | [Typing-Test](./Advanced/Typing-Test/) | ![Advanced](https://img.shields.io/badge/Advanced-FF0000?style=for-the-badge) | -| 29 | [RGB-Color-Slider](./Basic/RGB-Color-Slider/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) | +| 29 | [RGB-Color-Slider](./Basic/RGB-Color-Slider/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) | +| 29 | [Expense Tracker](./Basic/Expense-Tracker/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) | diff --git a/database/vanilla.json b/database/vanilla.json index bffe9a4d..eb181ba9 100644 --- a/database/vanilla.json +++ b/database/vanilla.json @@ -19,6 +19,11 @@ "title": "Number To Words Convertor", "description": "Number to Words convertor can facilitate users to convert any number into words instantly." }, + { + "tag": "Basic", + "title": "Expense Tracker", + "description": "This website helps you to add, delete and manage expenses. It gives the total amount spent." + }, { "tag": "Basic", "title": "Gallery",