├── favicon.png
├── pexels-photo-315191.jpeg
├── updates
├── README.md
├── index.html
├── style.css
└── app.js
/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/japanihon/pexelsApi/HEAD/favicon.png
--------------------------------------------------------------------------------
/pexels-photo-315191.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/japanihon/pexelsApi/HEAD/pexels-photo-315191.jpeg
--------------------------------------------------------------------------------
/updates:
--------------------------------------------------------------------------------
1 | ######
2 |
3 | ######
4 |
5 | ######
6 |
7 | ######
8 |
9 | ######
10 |
11 |
12 | ######
13 |
14 |
15 | ######
16 |
17 | ######
18 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Pexels Api
2 |
3 | Pexels Api App
4 |
5 | https://user-images.githubusercontent.com/77374408/211253547-46b5321b-ab4b-42c8-b1ca-910f07389637.mov
6 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
10 |
11 |
16 | Pexels Api
17 |
18 |
19 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 | body {
7 | font-family: "Roboto", sans-serif;
8 | }
9 |
10 | header {
11 | display: flex;
12 | flex-direction: column;
13 | min-height: 30vh;
14 | justify-content: center;
15 | align-items: center;
16 | }
17 | header h2 {
18 | padding: 2rem;
19 | }
20 | #logo {
21 | text-decoration: none;
22 | color: black;
23 | }
24 | .search-form {
25 | padding: 2rem;
26 | display: flex;
27 | }
28 | .search-form input {
29 | font-size: 2rem;
30 | padding: 0.5rem;
31 | width: 100%;
32 | border: none;
33 | border: 2px solid rgb(74, 68, 131);
34 | }
35 | .search-form button {
36 | border: none;
37 | padding: 0.5rem;
38 | font-size: 1rem;
39 | background: rgb(74, 68, 131);
40 | color: white;
41 | cursor: pointer;
42 | }
43 |
44 | .gallery-info {
45 | display: flex;
46 | justify-content: space-between;
47 | align-items: center;
48 | color: gray;
49 | padding: 0.5rem 0rem;
50 | }
51 | .gallery-info a {
52 | color: gray;
53 | }
54 |
55 | .gallery {
56 | display: grid;
57 | grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
58 | padding: 2rem 0rem;
59 | width: 80%;
60 | margin: auto;
61 | row-gap: 5rem;
62 | column-gap: 3rem;
63 | }
64 |
65 | .gallery-img img {
66 | width: 100%;
67 | height: 100%;
68 | object-fit: cover;
69 | }
70 |
71 | .nav-button {
72 | min-height: 30vh;
73 | display: flex;
74 | justify-content: center;
75 | align-items: center;
76 | }
77 | .more {
78 | padding: 1rem 3rem;
79 | background: rgb(74, 68, 131);
80 | color: white;
81 | border: none;
82 | font-size: 1.2rem;
83 | cursor: pointer;
84 | }
85 |
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | // All requests made with the client will be authenticated
5 |
6 |
7 | const auth = "563492ad6f917000010000017ed482ce11774ffd8b7c41325c666e9f"; //ADD THE AUTH KEY
8 | const gallery = document.querySelector(".gallery");
9 | const searchInput = document.querySelector(".search-input");
10 | const form = document.querySelector(".search-form");
11 | let searchValue;
12 | const more = document.querySelector(".more");
13 | let page = 1;
14 | let fetchLink;
15 | let currentSearch;
16 |
17 | //Event Listeners
18 | searchInput.addEventListener("input", updateInput);
19 | form.addEventListener("submit", e => {
20 | e.preventDefault();
21 | currentSearch = searchValue;
22 | searchPhotos(searchValue);
23 | });
24 | more.addEventListener("click", loadMore);
25 |
26 | function updateInput(e) {
27 | searchValue = e.target.value;
28 | }
29 |
30 | async function fetchApi(url) {
31 | const dataFetch = await fetch(url, {
32 | method: "GET",
33 | headers: {
34 | Accept: "application/json",
35 | Authorization: auth
36 | }
37 | });
38 | const data = await dataFetch.json();
39 | return data;
40 | }
41 |
42 | function generatePictures(data) {
43 | data.photos.forEach(photo => {
44 | const galleryImg = document.createElement("div");
45 | galleryImg.classList.add("gallery-img");
46 | galleryImg.innerHTML = `
47 |
51 | 
52 | `;
53 | gallery.appendChild(galleryImg);
54 | });
55 | }
56 |
57 | async function curatedPhotos() {
58 | fetchLink = "https://api.pexels.com/v1/curated?per_page=15&page=1";
59 | const data = await fetchApi(fetchLink);
60 |
61 | generatePictures(data);
62 | }
63 |
64 | async function searchPhotos(query) {
65 | clear();
66 | fetchLink = `https://api.pexels.com/v1/search?query=${query}+query&per_page=15&page=1`;
67 | const data = await fetchApi(fetchLink);
68 | generatePictures(data);
69 | }
70 |
71 | function clear() {
72 | gallery.innerHTML = "";
73 | searchInput.value = "";
74 | }
75 |
76 | async function loadMore() {
77 | page++;
78 | if (currentSearch) {
79 | fetchLink = `https://api.pexels.com/v1/search?query=${currentSearch}+query&per_page=15&page=${page}`;
80 | } else {
81 | fetchLink = `https://api.pexels.com/v1/curated?per_page=15&page=${page}`;
82 | }
83 | const data = await fetchApi(fetchLink);
84 | generatePictures(data);
85 | }
86 |
87 | curatedPhotos();
88 |
--------------------------------------------------------------------------------