Skip to content

Commit 798dfb0

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1774 from Ashutoshbind15/feat/pagination
add pagination
2 parents d6b24b1 + 79da618 commit 798dfb0

3 files changed

Lines changed: 127 additions & 104 deletions

File tree

‎Projects/Recipe Finder/assets/script.js‎

Lines changed: 55 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@ const searchResultDiv = document.querySelector(".search-result");
33
const container = document.querySelector(".container");
44
const accordionHeadings = document.querySelectorAll('.accordion-heading');
55
let searchQuery = "";
6+
67
const APP_ID = '33b1a0ef';
78
const APP_key = '5e12645236de1c7eb43b725fd06a49ee';
89

10+
911
searchForm.addEventListener("submit", (e) => {
1012
e.preventDefault();
1113
searchQuery = e.target.querySelector("input").value;
@@ -16,8 +18,59 @@ async function fetchAPI() {
1618
const baseURL = `https://api.edamam.com/search?q=${searchQuery}&app_id=${APP_ID}&app_key=${APP_key}&from=0&to=100`;
1719
const response = await fetch(baseURL);
1820
const data = await response.json();
19-
generateHTML(data.hits);
21+
generatePagination(data.hits);
22+
displayItems(data.hits);
2023
}
24+
25+
const itemsPerPage = 10; // Number of items to display per page
26+
let currentPage = 1; // Initially set the current page to 1
27+
28+
// Function to display items for the current page
29+
function displayItems(data) {
30+
const startIndex = (currentPage - 1) * itemsPerPage;
31+
const endIndex = startIndex + itemsPerPage;
32+
const itemsToDisplay = data.slice(startIndex, endIndex);
33+
34+
generateHTML(itemsToDisplay);
35+
}
36+
37+
// Function to generate pagination links
38+
function generatePagination(data) {
39+
const paginationContainer = document.getElementById("paginationContainer");
40+
paginationContainer.innerHTML = "";
41+
const pageLinkContainer = document.createElement("div");
42+
pageLinkContainer.classList.add("pagination");
43+
paginationContainer.appendChild(pageLinkContainer);
44+
45+
const totalPages = Math.ceil(data?.length / itemsPerPage);
46+
47+
for (let i = 1; i <= totalPages; i++) {
48+
const pageLink = document.createElement("a");
49+
pageLink.href = "#";
50+
pageLink.textContent = i;
51+
if (i === 1) {
52+
pageLink.classList.add("selectedLink");
53+
}
54+
pageLink.addEventListener("click", () => {
55+
currentPage = i;
56+
displayItems(data);
57+
58+
let links = pageLinkContainer.childNodes;
59+
let j = 1;
60+
61+
for (let link of links) {
62+
link.classList.remove("selectedLink");
63+
if (j === i) {
64+
link.classList.add("selectedLink");
65+
}
66+
j++;
67+
}
68+
});
69+
pageLink.classList.add("paginationLink");
70+
pageLinkContainer.appendChild(pageLink);
71+
}
72+
}
73+
2174
function generateHTML(results) {
2275
container.classList.remove("initial");
2376
let generatedHTML = "";
@@ -50,12 +103,5 @@ function generateHTML(results) {
50103
`;
51104
});
52105
searchResultDiv.innerHTML = generatedHTML;
106+
}
53107

54-
// Add event listeners to accordion headings
55-
const accordionHeadings = document.querySelectorAll('.accordion-heading');
56-
accordionHeadings.forEach((heading) => {
57-
heading.addEventListener('click', () => {
58-
heading.nextElementSibling.classList.toggle('active');
59-
});
60-
});
61-
}

‎Projects/Recipe Finder/assets/style.css‎

Lines changed: 26 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600&display=swap");
2-
@import url('https://fonts.googleapis.com/css2?family=Potta+One&display=swap');
2+
@import url("https://fonts.googleapis.com/css2?family=Potta+One&display=swap");
33
* {
44
padding: 0;
55
margin: 0;
@@ -37,7 +37,7 @@ section {
3737
}
3838

3939
.container .brand {
40-
font-family: 'Potta One', cursive;
40+
font-family: "Potta One", cursive;
4141
text-align: center;
4242
font-size: 4rem;
4343
color: whitesmoke;
@@ -93,7 +93,7 @@ input {
9393
}
9494

9595
.search-result .title {
96-
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
96+
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
9797
color: rgb(248, 54, 174);
9898
margin: 20px 10px 20px 0;
9999
font-size: 1.8rem;
@@ -117,8 +117,7 @@ input {
117117
}
118118

119119
.view-btn:hover {
120-
box-shadow: 2px 10px 20px rgba(222, 38, 201, 0.295);
121-
color: rgb(233, 37, 181);
120+
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.295);
122121
}
123122

124123
.item-data {
@@ -162,77 +161,33 @@ input {
162161
}
163162
}
164163

165-
.accordion {
166-
border-radius: 7px;
167-
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(3, 3, 3, 0.23);
168-
list-style-type: none;
169-
padding: 0;
170-
overflow: hidden;
171-
margin-top: 3px;
172-
}
173-
174-
.accordion-item p {
175-
color: #fff;
176-
font-weight: 30;
177-
letter-spacing: 0.2px;
178-
margin: 0;
179-
padding: 20px 15px;
180-
position: relative;
181-
}
182-
183-
.accordion-item:nth-child(1) .accordion-heading {
184-
background-color: #f5d4df;
185-
}
186-
.accordion-item:nth-child(2) .accordion-heading {
187-
background-color: #fa9fbdf5;
188-
}
189-
190-
.accordion-item .accordion-heading::before {
191-
color: rgb(19, 7, 7);
192-
font-weight: bold;
193-
float: right;
194-
margin-right: 5px;
195-
transform: rotate(0);
196-
transition: transform 0.3s ease-in-out;
197-
}
198-
199-
.accordion-item.open .accordion-heading::before {
200-
transform: rotate(90deg);
201-
}
202-
203-
.accordion-item {
204-
border-bottom: 1px solid #ddbdbd;
205-
}
206-
207-
.accordion-heading {
208-
background-color: #f4f4f4;
209-
padding: 10px;
210-
margin: 0;
211-
cursor: pointer;
212-
background-color: #fceded;
213-
font-size: 10px;
214-
cursor: pointer;
215-
width: 500px;
216-
font-family: Georgia, 'Times New Roman', Times, serif;
164+
.pagination {
165+
margin-top: 1rem;
166+
display: flex;
167+
flex-wrap: wrap;
168+
justify-content: center;
169+
padding-top: 10%;
170+
padding-bottom: 1rem;
171+
/* width: 100%; */
217172
}
218173

219-
.accordion-heading p {
220-
display: none;
221-
letter-spacing: 1px;
222-
margin: 0;
223-
padding: 15px;
224-
text-align: justify;
174+
.paginationLink {
175+
background-color: white;
176+
color: black;
177+
padding: 1.5rem;
178+
text-decoration: none;
179+
border-radius: 15%;
180+
margin: 0.5rem 10px;
181+
font-weight: 800;
182+
font-size: 1.2rem;
225183
}
226184

227-
.accordion-content {
228-
display: none;
229-
padding: 10px;
185+
.paginationLink:hover {
186+
background-color: rgb(222, 222, 222);
230187
}
231188

232-
.accordion-content.active {
233-
display: block;
234-
}
189+
.selectedLink {
190+
text-decoration: underline;
191+
text-decoration-thickness: 2px;
235192

236-
.accordion-heading.open p {
237-
display: inline-block;
238193
}

‎Projects/Recipe Finder/index.html‎

Lines changed: 46 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,55 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<meta name="keywords" content="Recipe App, food, dishes, menu, fast food, burger, pizza, chinese, italian, indian">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta
7+
name="keywords"
8+
content="Recipe App, food, dishes, menu, fast food, burger, pizza, chinese, italian, indian"
9+
/>
710
<meta property="og:type" content="webApp" />
811
<meta property="og:title" content="Recipe Finder" />
9-
<meta property="og:description" content="Find your everyday cooking inspiration on Recipe Website. Discover recipes, cooks, videos, and how to prepare based on the food you love." />
12+
<meta
13+
property="og:description"
14+
content="Find your everyday cooking inspiration on Recipe Website. Discover recipes, cooks, videos, and how to prepare based on the food you love."
15+
/>
1016
<title>Recipe Finder</title>
11-
<link rel="icon" href="assets/icons8-bagel-96.png" type="image/icon type">
12-
<link rel="stylesheet" href="assets/scroll.css">
13-
<link rel="stylesheet" href="assets/style.css">
14-
</head>
15-
<body>
17+
<link rel="icon" href="assets/icons8-bagel-96.png" type="image/icon type" />
18+
<link rel="stylesheet" href="assets/scroll.css" />
19+
<link rel="stylesheet" href="assets/style.css" />
20+
</head>
21+
<body>
1622
<section>
17-
<div class="container initial">
18-
<lottie-player src="https://assets9.lottiefiles.com/temp/lf20_nXwOJj.json" background="transparent" speed="1" style="height: 200px;" loop autoplay></lottie-player>
19-
<h1 class="brand">Recipe Finder</h1>
20-
<form>
21-
<input type="text" placeholder="Search Your Recipe...">
22-
<lottie-player src="https://assets10.lottiefiles.com/packages/lf20_tnrzlN.json" mode="bounce" background="transparent" speed="1" style="width: 80px; height: 80px;" loop autoplay></lottie-player>
23-
<!--<ion-icon name="search"></ion-icon>-->
24-
</form>
25-
<div class="search-result">
26-
</div>
27-
</div>
23+
<div class="container initial">
24+
<lottie-player
25+
src="https://assets9.lottiefiles.com/temp/lf20_nXwOJj.json"
26+
background="transparent"
27+
speed="1"
28+
style="height: 200px"
29+
loop
30+
autoplay
31+
></lottie-player>
32+
<h1 class="brand">Recipe Finder</h1>
33+
<form>
34+
<input type="text" placeholder="Search Your Recipe..." />
35+
<lottie-player
36+
src="https://assets10.lottiefiles.com/packages/lf20_tnrzlN.json"
37+
mode="bounce"
38+
background="transparent"
39+
speed="1"
40+
style="width: 80px; height: 80px"
41+
loop
42+
autoplay
43+
></lottie-player>
44+
<!--<ion-icon name="search"></ion-icon>-->
45+
</form>
46+
<div class="search-result"></div>
47+
<div id="paginationContainer"></div>
48+
</div>
2849
</section>
2950
<script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>
3051
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
31-
<script src="assets/script.js"></script>
32-
</body>
33-
</html>
52+
<script src="assets/script.js"></script>
53+
</body>
54+
</html>
55+

0 commit comments

Comments
 (0)