Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit e77516b

Browse files
filter
1 parent 93b55ad commit e77516b

File tree

4 files changed

+226
-2
lines changed

4 files changed

+226
-2
lines changed

‎Filter/app.js

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
const isEven = (num) => num % 2 === 0;
2+
3+
let number = [1, 23, 42, 1244, 213, 43, 265, 3, 2, 3215, 322, 254, 32, 11];
4+
5+
let evenNumber = number.filter((data) => isEven(data))
6+
console.log('Even Numbers : ',evenNumber);
7+
8+
let oddNumber = number.filter((data) => !isEven(data))
9+
console.log('Odd Number : ',oddNumber);
10+
11+
12+
13+
let todoList = document.getElementById("todo_list");
14+
let search_input = document.getElementById("search_input");
15+
let priority_dropdown = document.getElementById("priority");
16+
17+
var todos = [
18+
{
19+
task: "Buy groceries",
20+
category: "Personal",
21+
priority: "High",
22+
},
23+
{
24+
task: "Prepare presentation for Monday meeting",
25+
category: "Work",
26+
priority: "High",
27+
},
28+
{
29+
task: "Clean the house",
30+
category: "Personal",
31+
priority: "Medium",
32+
},
33+
{
34+
task: "Finish project report",
35+
category: "Work",
36+
priority: "High",
37+
},
38+
{
39+
task: "Schedule dentist appointment",
40+
category: "Health",
41+
priority: "Medium",
42+
},
43+
{
44+
task: "Go for a run",
45+
category: "Health",
46+
priority: "Low",
47+
},
48+
{
49+
task: "Call mom",
50+
category: "Personal",
51+
priority: "High",
52+
},
53+
{
54+
task: "Plan weekend trip",
55+
category: "Personal",
56+
priority: "Low",
57+
},
58+
{
59+
task: "Attend yoga class",
60+
category: "Health",
61+
priority: "Medium",
62+
},
63+
{
64+
task: "Complete online course",
65+
category: "Learning",
66+
priority: "High",
67+
},
68+
{
69+
task: "Read a book",
70+
category: "Personal",
71+
priority: "Low",
72+
},
73+
{
74+
task: "Update LinkedIn profile",
75+
category: "Work",
76+
priority: "Medium",
77+
},
78+
{
79+
task: "Water the plants",
80+
category: "Personal",
81+
priority: "Low",
82+
},
83+
{
84+
task: "Prepare for job interview",
85+
category: "Work",
86+
priority: "High",
87+
},
88+
{
89+
task: "Meditate for 15 minutes",
90+
category: "Health",
91+
priority: "Low",
92+
},
93+
{
94+
task: "Complete homework assignment",
95+
category: "Learning",
96+
priority: "High",
97+
},
98+
{
99+
task: "Watch educational video",
100+
category: "Learning",
101+
priority: "Medium",
102+
},
103+
{
104+
task: "Organize workspace",
105+
category: "Work",
106+
priority: "Medium",
107+
},
108+
{
109+
task: "Research new investment opportunities",
110+
category: "Learning",
111+
priority: "Medium",
112+
},
113+
{
114+
task: "Cook a healthy meal",
115+
category: "Health",
116+
priority: "Medium",
117+
},
118+
];
119+
120+
function createElement(todo, category, priority) {
121+
var ele = `<div class="border rounded-md p-3 mt-4 w-80 text-center m-auto">
122+
<h1 class="font-bold text-2xl">${todo}</h1>
123+
<h3 class="font-medium text-lg">${category}</h3>
124+
<h3 class="${
125+
priority === "High"
126+
? `bg-red-600`
127+
: priority === "Medium"
128+
? "bg-green-600"
129+
: "bg-blue-600"
130+
} inline-block py-1 px-3 my-3 text-white rounded-md">${priority}</h3>
131+
</div>`;
132+
return ele;
133+
}
134+
135+
function renderTodos() {
136+
todoList.innerHTML = "";
137+
todos.forEach((data, ind) => {
138+
var todoItem = createElement(data.task, data.category, data.priority);
139+
todoList.innerHTML += todoItem;
140+
});
141+
}
142+
renderTodos();
143+
144+
search_input.addEventListener("change", function () {
145+
//search from task
146+
let searchFilter = todos.filter((data) =>
147+
data.task.toLowerCase().includes(this.value.toLowerCase())
148+
);
149+
150+
// run for each on the array return from filter
151+
todoList.innerHTML = "";
152+
searchFilter.forEach((data, ind) => {
153+
var todoItem = createElement(data.task, data.category, data.priority);
154+
todoList.innerHTML += todoItem;
155+
});
156+
});
157+
158+
priority_dropdown.addEventListener("change", function () {
159+
let priorityFiltered = todos.filter((data) => data.priority == this.value);
160+
161+
// run for each on the array return from filter
162+
todoList.innerHTML = "";
163+
priorityFiltered.forEach((data, ind) => {
164+
var todoItem = createElement(data.task, data.category, data.priority);
165+
todoList.innerHTML += todoItem;
166+
});
167+
});

‎Filter/index.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Filter</title>
7+
<link rel="stylesheet" href="style.css">
8+
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
9+
</head>
10+
<body>
11+
<h1 class="text-3xl font-semibold">Filter Methods</h1>
12+
<div class="flex items-center justify-center w-full center my-3">
13+
<input class="border rounded w-1/2 p-3 text-lg " type="search" id="search_input" placeholder="Search" />
14+
15+
<select class="border rounded p-3 text-lg ml-1 cursor-pointer " name="priority" id="priority">
16+
<option value="">Select</option>
17+
<option value="High">High</option>
18+
<option value="Medium">Medium</option>
19+
<option value="Low">Low</option>
20+
</select>
21+
</div>
22+
<div id="todo_list">
23+
24+
</div>
25+
<script src="app.js"></script>
26+
</body>
27+
</html>

‎Filter/style.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
h1{
2+
text-align: center;
3+
}

‎Index.html

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,11 @@ <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
5959
</svg>
6060
</a>
6161
</div>
62-
<div class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
62+
63+
64+
</div>
65+
<div class="main flex text-center mt-10">
66+
<div class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
6367
<a href="#">
6468
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Function</h5>
6569
</a>
@@ -70,8 +74,31 @@ <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
7074
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
7175
</svg>
7276
</a>
77+
</div>
78+
<div class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
79+
<a href="#">
80+
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Quiz Game</h5>
81+
</a>
82+
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
83+
<a href="QuizGameProject/index.html" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
84+
Read more
85+
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
86+
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
87+
</svg>
88+
</a>
89+
</div>
90+
<div class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
91+
<a href="#">
92+
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Stop Watch</h5>
93+
</a>
94+
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
95+
<a href="StopWatchProject/index.html" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
96+
Read more
97+
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
98+
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
99+
</svg>
100+
</a>
73101
</div>
74102
</div>
75-
76103
</body>
77104
</html>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /