Skip to content

Commit f230a7e

Browse files
arunkumarayinabathinaarunkumarayinabathina
committed
Average RAting | navgation for products added
1 parent ff557c9 commit f230a7e

File tree

3 files changed

+122
-26
lines changed

3 files changed

+122
-26
lines changed

‎arrayMethods/index.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,23 @@
88
</head>
99
<body>
1010

11+
<div id="categoryNav">
12+
13+
</div>
1114
<div class="filterBar">
1215
<input type="number" id="start" placeholder="Starting price">
1316
<input type="number" id="end" placeholder="Ending price">
1417
<button id="filterBtn">submit</button>
1518
<button id="sort" >sort products</button>
1619
</div>
20+
21+
1722
<div id="main">
1823

24+
</div>
25+
26+
<div id="averageRatingsofEachProduct">
27+
1928
</div>
2029
<script src="./realWorld.js"></script>
2130
</body>

‎arrayMethods/realWorld.js‎

Lines changed: 65 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
const products = [
2-
{
2+
{
33
id: 1,
44
name: "Wireless Headphones",
55
category: "Electronics",
@@ -133,24 +133,62 @@ const products = [
133133

134134
const mainDiv = document.getElementById("main");
135135

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)=>
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 averageRatingsofEachProduct = document.getElementById("averageRatingsofEachProduct");
148+
149+
150+
151+
const categoryNav = document.getElementById('categoryNav');
152+
const ul = document.createElement('ul');
153+
154+
const uniqueCategories = [];
155+
156+
for(const p of products){
157+
if(!uniqueCategories.includes(p.category)){
158+
uniqueCategories.push(p.category)
159+
}
160+
}
161+
162+
const navTabs = uniqueCategories.forEach(category => {
163+
const li = document.createElement('li');
164+
li.innerText = category;
165+
ul.appendChild(li);
166+
})
167+
168+
categoryNav.append(ul);
169+
170+
171+
172+
173+
products.forEach(p => {
174+
const avg = p.ratings.reduce((a, b) => a + b, 0) / p.ratings.length;
175+
176+
// const rating = document.createElement('div');
177+
// rating.innerHTML = `<p>${p.name} - ${avg.toFixed(1)}</p>`;
178+
179+
// averageRatingsofEachProduct.append(rating);
180+
181+
p.avg = avg.toFixed(1);
182+
});
183+
184+
const productCard = products.map((product) =>
148185
`
149186
<div class="card">
150187
<img src=${product.image} alt=${product.name}/>
151188
<h1>${product.name}</h1>
152189
<p>${product.description}</p>
153190
<p>${product.discountedPrice} - <strike>${product.actualPrice}</strike></p>
191+
Average rating - <h5 style="display:inline">${product.avg}</h5>
154192
<button>Add to cart</button>
155193
</div>
156194
`
@@ -160,45 +198,47 @@ mainDiv.innerHTML = productCard;
160198

161199
const submitBtn = document.getElementById('filterBtn');
162200

163-
submitBtn.addEventListener('click',()=>{
201+
submitBtn.addEventListener('click', () => {
164202
const startPrice = document.getElementById('start').value;
165203
const endPrice = document.getElementById('end').value;
166204

167-
const filteredProducts = products.filter((product)=>product.actualPrice >= startPrice && product.actualPrice<=endPrice);
205+
const filteredProducts = products.filter((product) => product.actualPrice >= startPrice && product.actualPrice <= endPrice);
168206

169-
if(filteredProducts.length==0){
207+
if (filteredProducts.length == 0) {
170208
mainDiv.innerHTML = "No results found"
171209
}
172-
else{
173-
const filteredData = filteredProducts.map((product)=>
174-
`
210+
else {
211+
const filteredData = filteredProducts.map((product) =>
212+
`
175213
<div class="card">
176214
<img src=${product.image} alt=${product.name}/>
177215
<h1>${product.name}</h1>
178216
<p>${product.description}</p>
179217
<p>${product.discountedPrice} - <strike>${product.actualPrice}</strike></p>
218+
Average rating - <h5 style="display:inline">${product.avg}</h5>
180219
<button>Add to cart</button>
181220
</div>
182221
183222
`
184-
).join(" ")
185-
mainDiv.innerHTML = filteredData;
186-
}
223+
).join(" ")
224+
mainDiv.innerHTML = filteredData;
225+
}
187226
})
188227

189228

190229
const sortBtn = document.getElementById('sort')
191230

192-
sortBtn.addEventListener('click',()=>{
193-
const sortedproducts = products.sort((a,b)=>a.discountedPrice - b.discountedPrice);
231+
sortBtn.addEventListener('click', () => {
232+
const sortedproducts = products.sort((a, b) => a.discountedPrice - b.discountedPrice);
194233

195-
const sortedData = sortedproducts.map((product)=>
234+
const sortedData = sortedproducts.map((product) =>
196235
`
197236
<div class="card">
198237
<img src=${product.image} alt=${product.name}/>
199238
<h1>${product.name}</h1>
200239
<p>${product.description}</p>
201240
<p>${product.discountedPrice} - <strike>${product.actualPrice}</strike></p>
241+
Average rating - <h5 style="display:inline">${product.avg}</h5>
202242
<button>Add to cart</button>
203243
</div>
204244
`
@@ -209,4 +249,3 @@ sortBtn.addEventListener('click',()=>{
209249

210250

211251

212-

‎arrayMethods/style.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,3 +125,51 @@ body {
125125
width: 100px;
126126
}
127127
}
128+
/* Container of the category nav */
129+
#categoryNav {
130+
margin: 20px auto;
131+
padding: 0;
132+
text-align: center; /* center the list */
133+
background: #f8f8f8; /* light background strip */
134+
border-radius: 8px;
135+
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
136+
}
137+
138+
/* Remove default list styles */
139+
#categoryNav ul {
140+
list-style: none;
141+
margin: 0;
142+
padding: 10px 0;
143+
display: flex; /* horizontal tabs */
144+
justify-content: center;
145+
gap: 20px; /* space between tabs */
146+
flex-wrap: wrap; /* wrap on small screens */
147+
}
148+
149+
/* Each <li> acts like a tab/button */
150+
#categoryNav li {
151+
cursor: pointer;
152+
padding: 8px 16px;
153+
background: #ffffff;
154+
border: 1px solid #ddd;
155+
border-radius: 20px;
156+
font-size: 16px;
157+
color: #333;
158+
transition: all 0.3s ease;
159+
}
160+
161+
/* Hover effect */
162+
#categoryNav li:hover {
163+
background: #4cafef; /* highlight color */
164+
color: white;
165+
border-color: #4cafef;
166+
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
167+
}
168+
169+
/* Optional: active/selected tab class you can add dynamically */
170+
#categoryNav li.active {
171+
background: #4cafef;
172+
color: #fff;
173+
border-color: #4cafef;
174+
font-weight: bold;
175+
}

0 commit comments

Comments
 (0)