8000 Job-Lister-App · SunilHooda/JavaScript-Projects@8406b5c · GitHub
[go: up one dir, main page]
Skip to content

Commit 8406b5c

Browse files
SunilHoodaSunilHooda
committed
Job-Lister-App
1 parent bc287c5 commit 8406b5c

12 files changed

+667
-0
lines changed

‎Masai-Job-App/Images/jobAppLogo.jpg

3.06 KB
Loading

‎Masai-Job-App/Images/jobAppLogo1.jpg

24.9 KB
Loading

‎Masai-Job-App/Scripts/applied.js

+112
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
let appliedJobs = JSON.parse(localStorage.getItem("jobList"));
2+
3+
//Sort by name
4+
function handleNameSort() {
5+
let selected = document.querySelector("#sortNames").value;
6+
7+
if (selected === "Ascending") {
8+
appliedJobs.sort(function (a, b) {
9+
if (a.personName > b.personName) return 1;
10+
if (a.personName < b.personName) return -1;
11+
return 0;
12+
});
13+
displayTable(appliedJobs);
14+
}
15+
if (selected === "Descending") {
16+
appliedJobs.sort(function (a, b) {
17+
if (a.personName > b.personName) return -1;
18+
if (a.personName < b.personName) return 1;
19+
return 0;
20+
});
21+
displayTable(appliedJobs);
22+
}
23+
}
24+
25+
//Sort by salary
26+
function handleSalarySort() {
27+
let selected = document.querySelector("#sortSalary").value;
28+
if (selected === "High") {
29+
appliedJobs.sort(function (a, b) {
30+
return b.personSalary - a.personSalary;
31+
return 0;
32+
});
33+
displayTable(appliedJobs);
34+
}
35+
if (selected === "Low") {
36+
appliedJobs.sort(function (a, b) {
37+
return a.personSalary - b.personSalary;
38+
return 0;
39+
});
40+
displayTable(appliedJobs);
41+
}
42+
}
43+
44+
//Filter by role
45+
function handlefilter() {
46+
let selected = document.querySelector("#filter").value;
47+
48+
let filteredList = appliedJobs.filter(function (elem) {
49+
return elem.personRole === selected;
50+
});
51+
displayTable(filteredList);
52+
}
53+
54+
let bookmarkJobs = JSON.parse(localStorage.getItem("bookMarks")) || [];
55+
56+
displayTable(appliedJobs);
57+
58+
function displayTable(appliedJobs) {
59+
document.querySelector("tbody").innerHTML = " ";
60+
appliedJobs.forEach(function (elem) {
61+
let tr = document.createElement("tr");
62+
63+
let td1 = document.createElement("td");
64+
td1.innerText = elem.personName;
65+
66+
let td2 = document.createElement("td");
67+
td2.innerText = elem.personEmail;
68+
69+
let td3 = document.createElement("td");
70+
td3.innerText = elem.personRole;
71+
72+
let td4 = document.createElement("td");
73+
td4.innerText = elem.personSalary;
74+
75+
let check = bookmarkJobs.filter((item) => {
76+
return elem.personEmail === item.personEmail;
77+
});
78+
79+
let td5 = document.createElement("td");
80+
td5.innerText = "Bookmark";
81+
82+
if (check.length > 0) {
83+
td5.style.backgroundColor = "green";
84+
} else {
85+
td5.style.backgroundColor = "red";
86+
}
87+
88+
td5.style.color = "white";
89+
td5.style.cursor = "pointer";
90+
td5.style.fontWeight = "bold";
91+
92+
td5.addEventListener("click", function () {
93+
bookMarkFun(elem);
94+
td5.style.backgroundColor = "green";
95+
});
96+
97+
tr.append(td1, td2, td3, td4, td5);
98+
document.querySelector("tbody").append(tr);
99+
});
100+
}
101+
102+
function bookMarkFun(elem) {
103+
let check = bookmarkJobs.filter((item) => {
104+
return elem.personEmail === item.personEmail;
105+
});
106+
if (check.length === 0) {
107+
bookmarkJobs.push(elem);
108+
localStorage.setItem("bookMarks", JSON.stringify(bookmarkJobs));
109+
} else {
110+
alert("Already Bookmarked");
111+
}
112+
}

‎Masai-Job-App/Scripts/bookmark.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
let bookMarksFromLS = JSON.parse(localStorage.getItem("bookMarks"));
2+
3+
displayTable(bookMarksFromLS);
4+
5+
function displayTable(bookMarksFromLS) {
6+
bookMarksFromLS.forEach(function (elem, index) {
7+
let tr = document.createElement("tr");
8+
9+
let td1 = document.createElement("td");
10+
td1.innerText = elem.personName;
11+
12+
let td2 = document.createElement("td");
13+
td2.innerText = elem.personEmail;
14+
15+
let td3 = document.createElement("td");
16+
td3.innerText = elem.personRole;
17+
18+
let td4 = document.createElement("td");
19+
td4.innerText = elem.personSalary;
20+
21+
let td5 = document.createElement("td");
22+
td5.innerText = "Delete";
23+
td5.style.backgroundColor = "red";
24+
td5.style.color = "white";
25+
td5.style.cursor = "pointer";
26+
27+
td5.addEventListener("click", function () {
28+
deleteData(index);
29+
});
30+
31+
tr.append(td1, td2, td3, td4, td5);
32+
document.querySelector("tbody").append(tr);
33+
});
34+
}
35+
36+
function deleteData(index) {
37+
bookMarksFromLS.splice(index, 1);
38+
localStorage.setItem("bookMarks", JSON.stringify(bookMarksFromLS));
39+
window.location.reload();
40+
}

‎Masai-Job-App/Scripts/index.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
document.querySelector("form").addEventListener("submit", myJobApp);
2+
let jobArr = JSON.parse(localStorage.getItem("jobList")) || [];
3+
function myJobApp(event) {
4+
event.preventDefault();
5+
6+
let jobObj = {
7+
personName: document.querySelector("#name").value,
8+
personEmail: document.querySelector("#email").value,
9+
personRole: document.querySelector("#role").value,
10+
personSalary: document.querySelector("#salary").value,
11+
};
12+
jobArr.push(jobObj);
13+
localStorage.setItem("jobList", JSON.stringify(jobArr));
14+
document.querySelector("form").reset();
15+
alert("Job added successfully");
16+
}

‎Masai-Job-App/Scripts/navbar.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const hamburger = document.querySelector(".hamburger");
2+
const navMenu = document.querySelector(".nav-menu");
3+
4+
hamburger.addEventListener("click", () => {
5+
hamburger.classList.toggle("active");
6+
navMenu.classList.toggle("active");
7+
});
8+
9+
document.querySelectorAll(".nav-link").forEach((n) =>
10+
n.addEventListener("click", () => {
11+
hamburger.classList.remove("active");
12+
navMenu.classList.remove("active");
13+
})
14+
);

‎Masai-Job-App/Styles/commonStyles.css

+112
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
body {
7+
background-color: #ffe4c4;
8+
}
9+
10+
.filterAndSort {
11+
width: 40%;
12+
display: flex;
13+
flex-direction: row;
14+
margin: auto;
15+
margin-top: 50px;
16+
justify-content: center;
17+
align-items: center;
18+
gap: 10px;
19+
}
20+
.filterAndSort > select {
21+
width: 100%;
22+
margin: auto;
23+
height: 35px;
24+
padding: 4px;
25+
border-radius: 5px;
26+
border: 1px solid grey;
27+
font-size: 14px;
28+
}
29+
30+
.table {
31+
display: block;
32+
width: 100%;
33+
padding: 0 10px;
34+
padding-bottom: 50px;
35+
}
36+
37+
table {
38+
border-collapse: collapse;
39+
width: 90%;
40+
margin: auto;
41+
margin-top: 50px;
42+
border: 1px solid black;
43+
text-align: center;
44+
}
45+
46+
th {
47+
border: 1px solid black;
48+
text-align: center;
49+
padding: 15px;
50+
background-color: teal;
51+
color: white;
52+
gap: 5px;
53+
}
54+
55+
tr {
56+
text-align: center;
57+
padding: 15px;
58+
background-color: white;
59+
color: black;
60+
}
61+
62+
td {
63+
border: 1px solid black;
64+
text-align: center;
65+
padding: 15px;
66+
}
67+
68+
::-webkit-scrollbar {
69+
width: 5px;
70+
height: 5px;
71+
}
72+
73+
::-webkit-scrollbar-thumb {
74+
background-color: rgb(114, 113, 113);
75+
border-radius: 10px;
76+
}
77+
78+
::-webkit-scrollbar-track {
79+
background-color: transparent;
80+
}
81+
82+
@media all and (max-width: 568px) {
83+
.table {
84+
overflow-x: scroll;
85+
}
86+
}
87+
88+
/* Media Quries for Sorting and Filtering */
89+
@media all and (min-width: 769px) and (max-width: 1024px) {
90+
.filterAndSort {
91+
width: 50%;
92+
}
93+
}
94+
95+
@media all and (min-width: 578px) and (max-width: 768px) {
96+
.filterAndSort {
97+
width: 70%;
98+
}
99+
}
100+
101+
@media all and (min-width: 425px) and (max-width: 577px) {
102+
.filterAndSort {
103+
width: 90%;
104+
}
105+
}
106+
107+
@media all and (max-width: 424px) {
108+
.filterAndSort {
109+
width: 70%;
110+
flex-wrap: wrap;
111+
}
112+
}

‎Masai-Job-App/Styles/index.css

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
body {
7+
background-color: #ffe4c4;
8+
}
9+
10+
/* Form related css */
11+
12+
form {
13+
width: 30%;
14+
border: 1px solid rgb(230, 230, 230);
15+
margin: 45px auto;
16+
padding: 3%;
17+
background: white;
18+
border-radius: 10px;
19+
}
20+
21+
input,
22+
select {
23 97AE +
width: 100%;
24+
display: block;
25+
margin: 15px 0px;
26+
font-size: 18px;
27+
padding: 2%;
28+
border-radius: 10px;
29+
border: 1px solid black;
30+
}
31+
option {
32+
width: 95%;
33+
font-size: 20px;
34+
}
35+
36+
#submit {
37+
width: 70%;
38+
margin: auto;
39+
background-color: black;
40+
color: white;
41+
border: none;
42+
border: 1px solid black;
43+
border-radius: 15px;
44+
}
45+
/* Form related css */
46+
47+
/* Media- quries*/
48+
@media all and (min-width: 769px) and (max-width: 1024px) {
49+
form {
50+
width: 45%;
51+
}
52+
}
53+
54+
@media all and (min-width: 480px) and (max-width: 768px) {
55+
form {
56+
width: 60%;
57+
}
58+
}
59+
60+
@media all and (min-width: 280px) and (max-width: 479px) {
61+
form {
62+
width: 80%;
63+
}
64+
}

0 commit comments

Comments
 (0)
0