Skip to content

Commit 33a9087

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1972 from DineshK3012/invoice_filter
Invoice Filter Project
2 parents 0f3affd + bf7d5b5 commit 33a9087

9 files changed

Lines changed: 981 additions & 0 deletions

File tree

‎Projects/Invoice_Filter/README.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
# Invoice-Filter-Program
2+
This HTML, CSS, and JavaScript program allows users to filter and sort invoice data from a JSON file. The program includes functionality to filter invoices by begin date, due date, status, and in/out state, as well as sort the rows in ascending or descending order based on all columns. The JSON file serves as the data source for the program, providing the necessary information to populate the table and enable filtering and sorting. This program is ideal for users who need to manage a large number of invoices and require a reliable and efficient system for organizing and accessing this data.
3+
4+
# Tech Stack
5+
- HTML
6+
- CSS
7+
- JAVASCRIPT
8+
- JSON
9+
10+
# Design Approach
11+
* Getting Data from the file
12+
-> The program is fetching all the invoice data from the JSON file named 'invoices.js' using fetch function and then passing it to a function to display the data on the invoice table in front-end.
13+
14+
* Filtering Approach
15+
-> To filter the data, added a onchange event listener to all the fields in the filter section which basically call a function named as 'filter'.
16+
17+
* filter() function
18+
-> The function first takes all the values of the fields in the filter section to filter out the data. To filter out the data it basically add a class named as 'hide'(which basically sets its display property to none) to the unnecessary rows to show only the required rows.
19+
20+
* Why hiding rows?
21+
-> Because, in this approach we only have to add/remove a class to the rows and we save alot of time in rewriting the whole data from scratch in the table.
22+
23+
* Sort Data According To Headers
24+
-> To sort the data, added a onclick event listener to all the header of the table, which basically calls a function named 'sortData'.
25+
26+
* sortData() function
27+
-> The function basically takes the data of the table from the DOM and store the data into an array. The array also contains an extra column which contains only two values(0/1) to denotes if the row is hidden by the filter or not. This function also has a parameter named 'sortby' which tells to sort the data by which header.
28+
29+
After that the function uses in-built 'sort' function of javascript to sort the data array, also pass function to it as a parameter to tells the function to how to sort the array and with which header.
30+
31+
To sort the data in ascending or descending, initialise an array with size equals to number of headers (to used as index for different headers). The element in this array contains only two values(0/1) to define in which order to sort. If the value is 0 then sort the data in ascending order and if 1 then sort the data in descending order.
32+
33+
Example: arr[2] = 0, this means sort the data according to 2 header in ascending order.
34+
35+
After sorting data the function passes the data into another function named 'displaySortedData' to display the data
36+
37+
* displaySortedData() function
38+
-> The function takes sorted data(object/array) and iterate through the data and rewrite all the invoices data in the table in the DOM according to the sorted data.
39+
40+
* Other Functions:
41+
42+
* activeSortingOrder()
43+
-> This function takes two parameter 'col' which denotes the header and 'order' which denotes the ascending/descending icon.
44+
This function highlight the asc/desc icon by adding a class named 'active'(which basically sets the color of the icon).
45+
46+
Example: activeSorrtingOrder(1, 1) which add a active class to the descending icon of the header 1(second header index started from 0).
47+
48+
* deactiveIcons()
49+
-> This function basically selects all the icon which are contains 'active' class and remove 'active' class from them one by one. This function is called when the sortData function is called.
50+
51+
# Screenshots of the Project
52+
![Desktop View](screenshots/desktop_view.png)
53+
![Mobile View](screenshots/mobile_view.png)
54+
55+
# Contributed By :
56+
Dinesh Kumar

‎Projects/Invoice_Filter/Styles/responsive.css‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
@media only screen and (max-width: 850px) {
2+
.filter .fields {
3+
flex-wrap: wrap;
4+
}
5+
6+
#invoice_tbl thead tr th {
7+
font-size: 0.9rem;
8+
padding: 0.6rem;
9+
}
10+
11+
#invoice_tbl tbody tr td {
12+
font-size: 0.8rem;
13+
padding: 0.6rem;
14+
}
15+
}
16+
17+
@media only screen and (max-width: 600px) {
18+
.filter {
19+
border-radius: 16px;
20+
width: 90%;
21+
padding: 1rem;
22+
}
23+
24+
.filter .fields label {
25+
font-size: 0.8rem;
26+
}
27+
28+
.filter .fields > div input,
29+
.filter .fields > div select {
30+
margin: 0.3rem 0;
31+
font-size: 0.6rem;
32+
padding: 9px 12px;
33+
border-radius: 8px;
34+
}
35+
36+
.filter p {
37+
margin-top: 0.5rem;
38+
font-size: 0.7rem;
39+
}
40+
41+
#invoice_tbl {
42+
border-radius: 8px;
43+
}
44+
45+
#invoice_tbl thead tr th {
46+
font-size: 0.6rem;
47+
padding: 0.2rem;
48+
}
49+
50+
#invoice_tbl tbody tr td {
51+
font-size: 0.5rem;
52+
padding: 0.2rem;
53+
}
54+
}

‎Projects/Invoice_Filter/Styles/style.css‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
/*************************** poppins font ***************************/
2+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
3+
4+
* {
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
font-family: "Poppins", sans-serif;
9+
}
10+
11+
:root {
12+
--violet: #5858ba;
13+
--blue: #6f8dfa;
14+
--red: #f58c93;
15+
--other: #9fa3e0;
16+
--bg: #f6f6fe;
17+
}
18+
19+
body {
20+
background-color: var(--bg);
21+
}
22+
23+
/************************************** styling filter section **************************************/
24+
.filter {
25+
background-color: #f5e9eb;
26+
border-radius: 20px;
27+
margin: 1rem auto;
28+
width: 85%;
29+
padding: 1rem 2rem;
30+
}
31+
32+
.filter h2 {
33+
color: #f3737d;
34+
font-size: 1.4rem;
35+
font-weight: 600;
36+
}
37+
38+
.filter .fields {
39+
display: flex;
40+
align-items: center;
41+
}
42+
43+
.filter .fields label {
44+
font-weight: 600;
45+
}
46+
47+
.filter p {
48+
margin-top: 1rem;
49+
font-size: 0.9rem;
50+
color: rgb(95, 92, 92);
51+
}
52+
53+
.filter .fields > div {
54+
margin-top: 1rem;
55+
margin-right: 1.2rem;
56+
display: flex;
57+
flex-direction: column;
58+
justify-content: center;
59+
}
60+
61+
.filter .fields > div input,
62+
.filter .fields > div select {
63+
margin: 0.5rem 0;
64+
font-size: 0.9rem;
65+
padding: 10px 12px;
66+
border: none;
67+
border-radius: 10px;
68+
color: white;
69+
color-scheme: dark;
70+
}
71+
72+
/********************************* styling invoices table *********************************/
73+
#invoice_tbl {
74+
margin: 2rem auto;
75+
width: 85%;
76+
border-radius: 20px;
77+
background-color: #ffffff;
78+
border-collapse: collapse;
79+
}
80+
81+
#invoice_tbl thead tr {
82+
border-bottom: 1rem solid var(--bg);
83+
}
84+
85+
#invoice_tbl thead tr th {
86+
font-size: 1.1rem;
87+
padding: 1rem;
88+
text-align: left;
89+
cursor: pointer;
90+
}
91+
92+
/********************** for asc/desc icons **********************/
93+
#invoice_tbl thead tr th div {
94+
display: inline-block;
95+
margin: 0rem 0.3rem;
96+
}
97+
98+
#invoice_tbl thead tr th div > div {
99+
display: flex;
100+
flex-direction: column;
101+
}
102+
103+
#invoice_tbl thead tr th div > div > i {
104+
height: 2px;
105+
}
106+
/********************************************/
107+
108+
#invoice_tbl tr {
109+
border-bottom: 1px solid rgb(224, 218, 218);
110+
}
111+
112+
#invoice_tbl tbody tr:last-child {
113+
border: none;
114+
}
115+
116+
#invoice_tbl tbody tr td:nth-child(1),
117+
#invoice_tbl tbody tr td:nth-child(2) {
118+
color: #5858ba;
119+
}
120+
121+
#invoice_tbl tbody td {
122+
padding: 1rem;
123+
}
124+
125+
.active {
126+
color: #f58c93;
127+
}
128+
129+
/******************** css color classes ********************/
130+
.red {
131+
background-color: var(--red);
132+
}
133+
134+
.violet {
135+
background-color: var(--violet);
136+
}
137+
138+
.blue {
139+
background-color: var(--blue);
140+
}
141+
142+
.other {
143+
background-color: var(--other);
144+
}
145+
146+
/************ class to style status of invoice ************/
147+
.status {
148+
color: white;
149+
border-radius: 8px;
150+
text-align: center;
151+
padding: 3px 12px;
152+
}
153+
154+
/************ class to hide something ************/
155+
.hide {
156+
display: none;
157+
}

0 commit comments

Comments
 (0)