Skip to content

Commit ff557c9

Browse files
arunkumarayinabathinaarunkumarayinabathina
committed
array methods | filtering products | sorting products
1 parent c202262 commit ff557c9

File tree

4 files changed

+387
-0
lines changed

4 files changed

+387
-0
lines changed

‎arrayMethods/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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>Document</title>
7+
<link rel="stylesheet" href="./style.css">
8+
</head>
9+
<body>
10+
11+
<div class="filterBar">
12+
<input type="number" id="start" placeholder="Starting price">
13+
<input type="number" id="end" placeholder="Ending price">
14+
<button id="filterBtn">submit</button>
15+
<button id="sort" >sort products</button>
16+
</div>
17+
<div id="main">
18+
19+
</div>
20+
<script src="./realWorld.js"></script>
21+
</body>
22+
</html>

‎arrayMethods/methods.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
const numbers = [1, 2, 3, 4, 5];
2+
3+
// forEach
4+
numbers.forEach((num=> console.log(num * 2)));
5+
6+
// const finalnums = numbers.forEach(num => num * 2);
7+
// console.log(finalnums);
8+
9+
// map
10+
const squares = numbers.map((num)=>num*num)
11+
console.log(squares)
12+
13+
// filter
14+
const filteredNums = squares.filter((num)=>num%2==0);
15+
console.log(filteredNums)
16+
17+
// fill
18+
filteredNums.fill(0,0,1);
19+
console.log(filteredNums)
20+
21+
// reduce
22+
const result = numbers.reduce((acc,ele)=>acc+ele,0);
23+
console.log(result)
24+
25+
26+

‎arrayMethods/realWorld.js‎

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
const products = [
2+
{
3+
id: 1,
4+
name: "Wireless Headphones",
5+
category: "Electronics",
6+
brand: "Sony",
7+
actualPrice: 5999,
8+
discountedPrice: 4499,
9+
ratings: [5, 4, 4, 5, 3],
10+
quantity: 120,
11+
description: "Noise-cancelling over-ear headphones with 30 hours battery life.",
12+
inStock: true,
13+
image: "https://picsum.photos/id/1011/400/400",
14+
},
15+
{
16+
id: 2,
17+
name: "Smart LED TV 43 inch",
18+
category: "Electronics",
19+
brand: "Samsung",
20+
actualPrice: 28999,
21+
discountedPrice: 23999,
22+
ratings: [4, 4, 5, 5, 4, 3],
23+
quantity: 45,
24+
description: "Ultra HD 4K Smart TV with voice assistant and multiple apps.",
25+
inStock: true,
26+
image: "https://picsum.photos/id/1015/400/400",
27+
},
28+
{
29+
id: 3,
30+
name: "Running Shoes",
31+
category: "Footwear",
32+
brand: "Nike",
33+
actualPrice: 3999,
34+
discountedPrice: 2999,
35+
ratings: [5, 5, 4, 4, 4],
36+
quantity: 80,
37+
description: "Lightweight, breathable running shoes for daily workouts.",
38+
inStock: true,
39+
image: "https://picsum.photos/id/1020/400/400",
40+
},
41+
{
42+
id: 4,
43+
name: "Steel Water Bottle",
44+
category: "Home & Kitchen",
45+
brand: "Milton",
46+
actualPrice: 899,
47+
discountedPrice: 599,
48+
ratings: [4, 5, 4, 3, 5],
49+
quantity: 300,
50+
description: "Hot & cold vacuum insulated water bottle, 1L capacity.",
51+
inStock: true,
52+
image: "https://picsum.photos/id/1025/400/400",
53+
},
54+
{
55+
id: 5,
56+
name: "Gaming Laptop",
57+
category: "Computers",
58+
brand: "Asus",
59+
actualPrice: 99999,
60+
discountedPrice: 84999,
61+
ratings: [5, 5, 4, 5, 4, 5],
62+
quantity: 25,
63+
description: "RTX 4060, Intel i7, 16GB RAM, 1TB SSD – perfect for gaming & work.",
64+
inStock: true,
65+
image: "https://picsum.photos/id/1035/400/400",
66+
},
67+
{
68+
id: 6,
69+
name: "Cotton T-Shirt",
70+
category: "Fashion",
71+
brand: "H&M",
72+
actualPrice: 799,
73+
discountedPrice: 499,
74+
ratings: [4, 3, 5, 4, 4],
75+
quantity: 200,
76+
description: "100% cotton casual wear T-shirt for men & women.",
77+
inStock: true,
78+
image: "https://picsum.photos/id/1040/400/400",
79+
},
80+
{
81+
id: 7,
82+
name: "Microwave Oven",
83+
category: "Appliances",
84+
brand: "LG",
85+
actualPrice: 14999,
86+
discountedPrice: 12499,
87+
ratings: [5, 4, 5, 4, 5],
88+
quantity: 60,
89+
description: "28L convection microwave oven with smart cooking modes.",
90+
inStock: true,
91+
image: "https://picsum.photos/id/1045/400/400",
92+
},
93+
{
94+
id: 8,
95+
name: "Fitness Smartwatch",
96+
category: "Wearables",
97+
brand: "Fitbit",
98+
actualPrice: 10999,
99+
discountedPrice: 8999,
100+
ratings: [4, 4, 3, 5, 4],
101+
quantity: 90,
102+
description: "Tracks steps, heart rate, sleep, and comes with water resistance.",
103+
inStock: true,
104+
image: "https://picsum.photos/id/1050/400/400",
105+
},
106+
{
107+
id: 9,
108+
name: "Office Chair",
109+
category: "Furniture",
110+
brand: "GreenSoul",
111+
actualPrice: 14999,
112+
discountedPrice: 9999,
113+
ratings: [4, 5, 4, 4, 5],
114+
quantity: 50,
115+
description: "Ergonomic chair with lumbar support and adjustable height.",
116+
inStock: true,
117+
image: "https://picsum.photos/id/1055/400/400",
118+
},
119+
{
120+
id: 10,
121+
name: "Electric Kettle",
122+
category: "Home Appliances",
123+
brand: "Philips",
124+
actualPrice: 2499,
125+
discountedPrice: 1999,
126+
ratings: [4, 4, 5, 3, 4],
127+
quantity: 150,
128+
description: "1.5L stainless steel electric kettle with auto shut-off feature.",
129+
inStock: true,
130+
image: "https://picsum.photos/id/1060/400/400",
131+
},
132+
]
133+
134+
const mainDiv = document.getElementById("main");
135+
136+
// id: 1,
137+
// name: "Wireless Bluetooth Headphones",
138+
// category: "Electronics",
139+
// brand: "Sony",
140+
// actualPrice: 5999,
141+
// discountedPrice: 4499,
142+
// ratings: [5, 4, 4, 5, 3],
143+
// quantity: 120,
144+
// description: "Noise-cancelling over-ear headphones with 30 hours battery life.",
145+
// inStock: true,
146+
// image: "https://picsum.photos/id/1011/400/400"
147+
const productCard = products.map((product)=>
148+
`
149+
<div class="card">
150+
<img src=${product.image} alt=${product.name}/>
151+
<h1>${product.name}</h1>
152+
<p>${product.description}</p>
153+
<p>${product.discountedPrice} - <strike>${product.actualPrice}</strike></p>
154+
<button>Add to cart</button>
155+
</div>
156+
`
157+
).join(" ")
158+
159+
mainDiv.innerHTML = productCard;
160+
161+
const submitBtn = document.getElementById('filterBtn');
162+
163+
submitBtn.addEventListener('click',()=>{
164+
const startPrice = document.getElementById('start').value;
165+
const endPrice = document.getElementById('end').value;
166+
167+
const filteredProducts = products.filter((product)=>product.actualPrice >= startPrice && product.actualPrice<=endPrice);
168+
169+
if(filteredProducts.length==0){
170+
mainDiv.innerHTML = "No results found"
171+
}
172+
else{
173+
const filteredData = filteredProducts.map((product)=>
174+
`
175+
<div class="card">
176+
<img src=${product.image} alt=${product.name}/>
177+
<h1>${product.name}</h1>
178+
<p>${product.description}</p>
179+
<p>${product.discountedPrice} - <strike>${product.actualPrice}</strike></p>
180+
<button>Add to cart</button>
181+
</div>
182+
183+
`
184+
).join(" ")
185+
mainDiv.innerHTML = filteredData;
186+
}
187+
})
188+
189+
190+
const sortBtn = document.getElementById('sort')
191+
192+
sortBtn.addEventListener('click',()=>{
193+
const sortedproducts = products.sort((a,b)=>a.discountedPrice - b.discountedPrice);
194+
195+
const sortedData = sortedproducts.map((product)=>
196+
`
197+
<div class="card">
198+
<img src=${product.image} alt=${product.name}/>
199+
<h1>${product.name}</h1>
200+
<p>${product.description}</p>
201+
<p>${product.discountedPrice} - <strike>${product.actualPrice}</strike></p>
202+
<button>Add to cart</button>
203+
</div>
204+
`
205+
).join(" ")
206+
207+
mainDiv.innerHTML = sortedData
208+
})
209+
210+
211+
212+

‎arrayMethods/style.css‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
* {
2+
box-sizing: border-box;
3+
margin: 0;
4+
padding: 0;
5+
font-family: "Segoe UI", Tahoma, sans-serif;
6+
}
7+
8+
body {
9+
background: #f5f6f8;
10+
padding: 2rem;
11+
}
12+
#main {
13+
display: grid;
14+
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
15+
gap: 1.5rem;
16+
justify-items: center;
17+
}
18+
19+
.card {
20+
background: #fff;
21+
border-radius: 12px;
22+
width: 240px;
23+
padding: 1rem;
24+
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
25+
text-align: center;
26+
transition: transform 0.2s ease, box-shadow 0.2s ease;
27+
}
28+
29+
.card:hover {
30+
transform: translateY(-6px);
31+
box-shadow: 0 8px 18px rgba(0,0,0,0.15);
32+
}
33+
34+
.card img {
35+
width: 100%;
36+
height: 180px;
37+
object-fit: cover;
38+
border-radius: 8px;
39+
margin-bottom: 0.75rem;
40+
}
41+
42+
.card h1 {
43+
font-size: 1.2rem;
44+
color: #333;
45+
margin-bottom: 0.4rem;
46+
}
47+
48+
.card p {
49+
color: #555;
50+
font-size: 0.9rem;
51+
margin-bottom: 0.5rem;
52+
}
53+
54+
.card p strike {
55+
color: #999;
56+
margin-left: 0.25rem;
57+
font-size: 0.85rem;
58+
}
59+
60+
/* --- Button --- */
61+
.card button {
62+
margin-top: 0.5rem;
63+
padding: 0.5rem 1rem;
64+
border: none;
65+
border-radius: 6px;
66+
background: #4caf50;
67+
color: #fff;
68+
font-size: 0.95rem;
69+
cursor: pointer;
70+
transition: background 0.2s ease;
71+
}
72+
73+
.card button:hover {
74+
background: #43a047;
75+
}
76+
.filterBar {
77+
display: flex;
78+
flex-wrap: wrap;
79+
align-items: center;
80+
justify-content: center;
81+
gap: 0.75rem;
82+
padding: 1rem 1.5rem;
83+
margin-bottom: 1.5rem;
84+
background: #ffffff;
85+
border-radius: 12px;
86+
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
87+
}
88+
89+
/* Inputs */
90+
.filterBar input[type="number"] {
91+
width: 140px;
92+
padding: 0.55rem 0.75rem;
93+
border: 1px solid #ccc;
94+
border-radius: 8px;
95+
font-size: 0.95rem;
96+
outline: none;
97+
transition: border 0.2s ease, box-shadow 0.2s ease;
98+
}
99+
100+
.filterBar input[type="number"]:focus {
101+
border-color: #4caf50;
102+
box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.15);
103+
}
104+
105+
/* Button */
106+
.filterBar button {
107+
padding: 0.6rem 1.2rem;
108+
border: none;
109+
border-radius: 8px;
110+
background: #4caf50;
111+
color: #fff;
112+
font-size: 0.95rem;
113+
font-weight: 500;
114+
cursor: pointer;
115+
transition: background 0.2s ease;
116+
}
117+
118+
.filterBar button:hover {
119+
background: #43a047;
120+
}
121+
122+
/* Mobile responsiveness */
123+
@media (max-width: 500px) {
124+
.filterBar input[type="number"] {
125+
width: 100px;
126+
}
127+
}

0 commit comments

Comments
 (0)