Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kaplanh/monthly-expense-tracking-application
https://github.com/kaplanh/monthly-expense-tracking-application
arraymethods bootstrap5 html5 javascript localstorage
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/kaplanh/monthly-expense-tracking-application
- Owner: kaplanh
- Created: 2023-06-09T12:58:56.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-01-28T14:42:56.000Z (about 1 year ago)
- Last Synced: 2024-11-11T09:06:39.250Z (3 months ago)
- Topics: arraymethods, bootstrap5, html5, javascript, localstorage
- Language: JavaScript
- Homepage: https://kaplanh.github.io/Monthly-Expense-Tracking-Application/
- Size: 141 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Monthly Expense Tracking Application with JS
[Click Me!](https://kaplanh.github.io/Aylik-Gider-Takip-Uygulamasi/)
## Description
The project aims to create a Monthly Expense Tracking Application using JS and Bootstrap.
## Problem Statement
- Your company has recently started on a project that aims to create a Monthly Expense Tracking Application. So you and your colleagues have started to work on the project.
## Project Skeleton
```
Monthly Expense Tracking Application (folder)
|
|----readme.md
|----index.html
|----style.css
|----app.js
|----images (folder)
```
### At the end of the project, following topics are to be covered;
- HTML
```
-font-awesome cdnjs link
- for Bootstrap cdnjs link & script
- for sweetalert script
Swal.fire({
icon: "warning",
title: "DiKKAT",
text: "Verileri silmek istediginizden emin misiniz?",
})
```
- CSS
```
- background
body{
background-image: url('./images/backgroundImg.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
```
-Bootstrap
- Bootstrap form
- Bootstrap table
- Bootstrap Grid (Row-Col)
- JS
- DOM Manipulations
- DOM Selectors
- querySelector('#id')
- Events
- load
- click
- submit
- Builtin functions
- preventDefault()
- reset()
- remove()
- if else - if - else conditions
- Logical operators && and ||
- LocalStorage
- localStorage.setItem("variable", primitiveValue)
- localStorage.getItem("variable")
- localStorage.setItem("variable", JSON.stringify(nonPrimitiveValue))
- JSON.parse(localStorage.getItem("variable")) || []
- Date()
- new Date().getTime()
- dateInput.valueAsDate = new Date();//Tarih inputunu bugunki tarih ile yukle
- Array Methods
- harcamaListesi = harcamaListesi.filter((harcama) => harcama.id != id);
- Arr.forEach((item) => harcamayiDomaYaz(item))
- Arr.reduce((toplam, harcama) => toplam + Number(harcama.miktar),0);
- Capturing
- e.target.classList.contains("fa-trash-can")//tiklananlardan class'i fa-trash-can olanlari yakala.
- e.target.parentElement.parentElement.remove(); //parent'inin parentini sil.
-confirm()
- if (confirm("Silmek istediginize emin misiniz?"))
### At the end of the project, developers will be able to;
- improve coding skills within HTML, CSS and JS
- use git commands (push, pull, commit, add etc.) and Github as a Version Control System.
## Notes
- You can use HTML, CSS, Bootstrap and JS to complete this project.
⌛ Happy Coding ✍