Skip to content

Commit eae64a7

Browse files
Ashutoshbind15Ashutoshbind15
committed
add pagination
1 parent 2059df5 commit eae64a7

3 files changed

Lines changed: 132 additions & 34 deletions

File tree

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

Lines changed: 54 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ const searchForm = document.querySelector("form");
22
const searchResultDiv = document.querySelector(".search-result");
33
const container = document.querySelector(".container");
44
let searchQuery = "";
5-
const APP_ID = '33b1a0ef';
6-
const APP_key = '5e12645236de1c7eb43b725fd06a49ee';
7-
//console.log(container);
5+
const APP_ID = "33b1a0ef";
6+
const APP_key = "5e12645236de1c7eb43b725fd06a49ee";
7+
//console.log(container);
88

99
searchForm.addEventListener("submit", (e) => {
1010
e.preventDefault();
@@ -17,8 +17,57 @@ async function fetchAPI() {
1717
const baseURL = `https://api.edamam.com/search?q=${searchQuery}&app_id=${APP_ID}&app_key=${APP_key}&from=0&to=100`;
1818
const response = await fetch(baseURL);
1919
const data = await response.json();
20-
generateHTML(data.hits);
21-
//console.log(data);
20+
generatePagination(data.hits);
21+
displayItems(data.hits);
22+
}
23+
24+
const itemsPerPage = 10; // Number of items to display per page
25+
let currentPage = 1; // Initially set the current page to 1
26+
27+
// Function to display items for the current page
28+
function displayItems(data) {
29+
const startIndex = (currentPage - 1) * itemsPerPage;
30+
const endIndex = startIndex + itemsPerPage;
31+
const itemsToDisplay = data.slice(startIndex, endIndex);
32+
33+
generateHTML(itemsToDisplay);
34+
}
35+
36+
// Function to generate pagination links
37+
function generatePagination(data) {
38+
const paginationContainer = document.getElementById("paginationContainer");
39+
paginationContainer.innerHTML = "";
40+
const pageLinkContainer = document.createElement("div");
41+
pageLinkContainer.classList.add("pagination");
42+
paginationContainer.appendChild(pageLinkContainer);
43+
44+
const totalPages = Math.ceil(data?.length / itemsPerPage);
45+
46+
for (let i = 1; i <= totalPages; i++) {
47+
const pageLink = document.createElement("a");
48+
pageLink.href = "#";
49+
pageLink.textContent = i;
50+
if (i === 1) {
51+
pageLink.classList.add("selectedLink");
52+
}
53+
pageLink.addEventListener("click", () => {
54+
currentPage = i;
55+
displayItems(data);
56+
57+
let links = pageLinkContainer.childNodes;
58+
let j = 1;
59+
60+
for (let link of links) {
61+
link.classList.remove("selectedLink");
62+
if (j === i) {
63+
link.classList.add("selectedLink");
64+
}
65+
j++;
66+
}
67+
});
68+
pageLink.classList.add("paginationLink");
69+
pageLinkContainer.appendChild(pageLink);
70+
}
2271
}
2372

2473
function generateHTML(results) {
@@ -46,4 +95,3 @@ function generateHTML(results) {
4695
});
4796
searchResultDiv.innerHTML = generatedHTML;
4897
}
49-

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

Lines changed: 34 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
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;
66
box-sizing: border-box;
77
}
88

9-
109
img {
1110
width: 100%;
1211
height: 100%;
@@ -38,7 +37,7 @@ section {
3837
}
3938

4039
.container .brand {
41-
font-family: 'Potta One', cursive;
40+
font-family: "Potta One", cursive;
4241
text-align: center;
4342
font-size: 4rem;
4443
color: whitesmoke;
@@ -94,7 +93,7 @@ input {
9493
}
9594

9695
.search-result .title {
97-
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;
9897
color: rgb(248, 54, 174);
9998
margin: 20px 10px 20px 0;
10099
font-size: 1.8rem;
@@ -118,7 +117,7 @@ input {
118117
}
119118

120119
.view-btn:hover {
121-
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.295);
120+
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.295);
122121
}
123122

124123
.item-data {
@@ -158,3 +157,33 @@ input {
158157
font-size: 2rem;
159158
}
160159
}
160+
161+
.pagination {
162+
margin-top: 1rem;
163+
display: flex;
164+
flex-wrap: wrap;
165+
justify-content: center;
166+
padding-top: 10%;
167+
padding-bottom: 1rem;
168+
/* width: 100%; */
169+
}
170+
171+
.paginationLink {
172+
background-color: white;
173+
color: black;
174+
padding: 1.5rem;
175+
text-decoration: none;
176+
border-radius: 15%;
177+
margin: 0.5rem 10px;
178+
font-weight: 800;
179+
font-size: 1.2rem;
180+
}
181+
182+
.paginationLink:hover {
183+
background-color: rgb(222, 222, 222);
184+
}
185+
186+
.selectedLink {
187+
text-decoration: underline;
188+
text-decoration-thickness: 2px;
189+
}

‎Projects/Recipe Finder/index.html‎

Lines changed: 44 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,54 @@
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>
3152
<script src="assets/script.js"></script>
32-
</body>
33-
</html>
53+
</body>
54+
</html>

0 commit comments

Comments
 (0)