Infinite Scrolling with JavaScript using API

he was gone guys of day one will be fine all right so I want to give you a quick demo of this video we are using an infinite scroll using javascript and with the help of Jason placeholder we can get a lot of data using in the JSON format you can simply go to the JSON placeholder typical comm which is basically a pic restful api and you can use it in javascript so why don't you see that we have a bunch of lists of instructions are simple some photo on it and some title information so while I scroll down you see a loader appears up and it will load our content right so depending on the pages depending on the data that we have it will it will lose the data and fetch it so and so that's what we are going to build from all from the scratch so I hope you guys will enjoy so let's jump in and get started all right guys so let's get started so I have my two images inside a folder I created a folder with the name of Internet scroll using javascript and I have two images inside my directory so there I'm going to create my very first file with the name of index dot HTML and I also need this styling for the styling I need the style dot CSS file and the last thing that we need is the main dot J's file for where we will put our all the JavaScript inside it so that will be main dot J's so first go inside the index dot HTML and if you have installed the live server so you can simply click on the open with the live server or you can download from the extensions okay so the first thing I'm going to do is to just click the explanation mark and the tab that want to create the very basic structure for the HTML and I just want to make this little bigger and inside the body I have created a header and said that would be infinite so infinite scroll using javascript and so there will be the header and inside that I'm using the Emmet which is building in the BS code so simply I just all I need is the dot for the class which will be rapper and sorry I just need to close my caps lock and ID to be main - rapper I click the tab and that's that's all its that's all its gets through the Emmet and I also want the album's class and also inside that I want the div with the image - album so basically what I want is that everything that we have inside it must contains and some body and the album and si image so I have an image source I give it just for now is a be underscore G dot PNG that's the name of my directory and I also want here inside the album's I want to have my post in album information so album - info and inside that I want to have my class of album - body so I give it the class for album - body so for now I just give it the lorem 20 tanks alright saves it so that might be that's fine from here right so and then I also want the loader after that so just down here I want to add some loader so class of the loader inside that I want to have my circles which are - so all I need is to do is to just multiply with the two times and that's what it gets and the last thing I want to add the script here so just after after the tip closing div I want to give it the script and give it the source of scripts so it should be main dog juice all right so dad there must be that big must closed right here not here so I just close that up and saves it and I don't understand why doesn't it yeah there you see so that's a very basic simple structure for the HTML now I want to go work with this styling so all I need is to do is to go inside the style dot CSS I might don't give the link here so I need to give a link of style dot CSS and now move back here and give it the box - sizing to be border - box and the padding zero margin of zero and inside the body I want to give it the background of rgba of charity - 1469 and opacity to be is 0.7 and basically this is the red/green/blue alpha so that's how it looks like and I also want the font family to be just spin I don't know what it's pronounced to be so Joseph in cents and sans-serif and next we have our display flex color to be white and I want the Flex Direction to be in column so flex direction using in columns and I want to put that into the center so aligned - items Center and justify that I move dad everything's to the center so that's you see justify content to the center and the minimum height should be about 100 viewport height all right now you see everything moves into the center and I want to give it the a margin of 0 and padding to the bottom to be about 100 pixels all right next I want to give my header so for the header all I need is to do header text align Center and having to be 20 pixels font size to be 25 pixels that should not be - 15 pixels saves it so this looks like this and fall color to be void which I'm using hash codes and the background should be something ratures which has a color code of 8 2 7 5 8 2 7 5 B 1 that should look like this purple alright now next we have border radius of 5 pixels and that's you see here right it's it has a Potter of radius 5 pixels before the h1 we have the font family I want to have it Segoe UI and weird honest and centered and the background color to be 675 c9c and box shadow to be six pixels top right left bottom so 0 9 0 e 1 3 butter radius to be 3 pixels and padding to be Terry pixels and margin sorry sorry that's fine it's it's fun family and so actually I don't want to have my background color for the h1 it should be font size to be 52 pixels and margin bottom to be I believe there's no need for the margin bottom and tax a line to be Center and color to be white all right so next we have our albums which is our main class so inside the album we have a position to be relative background color to be hash 675 c9c box shadow to be six pixels 8 pixels 10 pixels 4 pixels all right a color would be 0 9 0 e 1 3 all right so now we have our border radius to be three pixels padding to be 30 pixels margin 50 pixels top right and [Music] fifty pixel and left right to be zero so you don't find a left bottom to be zero and display flex with to be eighty viewport Brit and Max with to be 800 pixels all right so this looks like so far still know as what we want so next we have just saves it and go back inside the albums we have the image - album so go back so go inside it so inside the albums we have our image album so image - album so it's a position to be absolute and top to be - 36 pixels and left to be 372 pixels so this looks like still this image doesn't source what we want but although we have a very nice tip behind it behind the image so rate of fifty eight pixels and height of 57 the next we have our border radius to be 50 person and background white color and next we have our background to the wipe display flags so this looks like this and align the items into the center and also justify the content into the center and padding to be seven pixels top right and left bottom to be 10 pixels saves it so still it looks like this alright next I want to have that for the image just simply grab the same class for the image tag here and let's suppose I want to give them bit 50 pixels and height to be 50 pixels and border radius to be in rounded form so border radius should be 50% 50% oh sorry it should be 50 pixels and that image should be 50% alright so that looks very nice now okay so next we have to work with the loader that we have so for the loader all I need to give it the height of 50 pixels and I want to that's fine for now I give the height to be 50 pixels and for the circle because we are creating a loader here so for the circle I need to give it display:inline-block and background color to be 9 8 6 7 even fit of 40 pixels border radius of 50 percent all right that's fine and we want to I want to transform it for the scale of zero margin of minus 10 pixels we need to use some keyframes here so I add the keyframes and let's what I want to rotate that so rotate it to transform and rotate that to be 360 degree and but it's it's not showing you up because we haven't I just haven't show its opacity so let's suppose I want to give it loader and it shows only when it has the opacity of one because by default the opacity will be zero so so we set up the elbe we set up the loader and loaded our show it should show when by default opacity should be zero and it works by the true with JavaScript we can load when we when we scroll down our our albums while we are working with adjacent placeholder but right now we're just creating the animation so for the loader all I need to have is I give it the height of 50 pixels so I want to give it any mission of rotate and that will be for three seconds linear infant in tonight right saves it so you see there is nothing yet for the circle we have our background color width we set up the height so let's hide should be about 40 pixels and borrow a radius of 50 percent transform scale to zero let's give the animation type so animation grow 1.5 seconds linear infinite saves it and you see that it's not showing because we haven't applied any color so I want some pseudo classes so start circle and for the nth time and off type the second one must have its color which should have background color of hash DC d 6e 5 saves it and animation - delay to be about 0.75 seconds saves it so all I want to do is to grab same color and give it for the third one and any mission delay of only 0.2 seconds save that and so keeping it rotate 360 degree transform that and next we I want to have our keyframes copy this paste it and give it that transform we gave it a scale off for the visibility of oil and so that will be two dimensional and keyframes to fifty percent all right so fifty percent that should be grew and now you see it looks like this that looks more better so girl is basically coming from this animation one point five seconds [Music] one thing that I've been missing here is yeah it should rotate all right so that looks like this so once we give it the opacity of zero inside our loader so if I give it the opacity of zero so that they'll hide all right so we want this a pasady to be one and build is only when we are scrolling down for the restful api so right now I just want to hide this we don't need that so we are done with our front-end HTML and CSS alright let's move back to another part for this now in this video we will discuss about the JavaScript so I first want to have my gram I mean wrapper so Const main wrapper equal to document dot you can also use document dot get element by ID or the curie selector so i'm using get element by ID to get my IDs so the ID is the name - rapper and next we have our loading sir Khan's loading equal to a document dot Curie selector for the class you can use it also so that will be dot we have a class for the loader so next we all I want to fetch fetch the result so I use the async and async function that and name of the function so let's suppose I want to get the photos from here so get photos so const response equal to a weight fetch it and i just simply need to do is to grab this all URL from the JSON placeholder and put that inside here and if i want to i can also apply some limits as far as pages are concerned so i can do is i use question mark underscore limit let's force the limit i want to give it dynamically so i'm using string interpolation so put that limit inside it and next i want to give it the page so underscore page is also dynamically working so i'm using dollar and the page alright so next i want to have my data so data once we can fetch it we can get the response so response which is in JSON format you remember that Jason is the keys value pair and I want to return the data okay so that will fetch all the up all the photos from from the API and I want to because we are assigning dynamic data so for now I am going to use is the let limit will be for a tree and the page let's for now but is about one okay so now I'm gonna do is to show all the results so this this basically fetched all the records all the fetch all the records from here and now next I want to create the learning but before creating the load loading I want to use a sync function not the async function actually I want to get all the album's so all the photos from here so async async function so show photos so basically we want to get all the photos and inside this show forest function I create the photos equal to a weight and get all the promise get albums so we get photos here and so photos dot for each I'm using hierarchical JavaScript function so photos done for each and the callback I'm using arrow functions so so photo you can also use functions as well if you're interested so cons photo element so document dot create element so basically what I want is that I want to create a new element with the name of Dave and because we want to get some because we don't want to get the static data so all I am doing is just just cut this out and put that all down here and later on I will grab all this div by using backticks so I want to create a div with a class of album with that class of albums so I want to grab this and I want to create the day first so I created a div the day with the create element and next I want to give it the class of give the class of water element dot dot class list and add the class of we have the class you see here we have the class for the album so I just simply need to put that inside here so now we have the div class for the album and now for the photo element I want to have to show inside my HTML so I use dot inner HTML equal to i use backticks and for this now I have created this and put this all inside those backticks all right so just indent this chord I believe that looks fine and after that now because we want the dynamic results so I just simply put this out using string interpolation so photo dot so basically I'm using thumbnail thumbnail URL so copy this and put this inside here and next I want to grab the title for this so that should be so album - info and that should be okay that's fine and photo dot title okay so that's fine and now I want to basically this whole is wrap inside the main - rapper now I want to append this all so all I need is two main rapper dot append the child and put that all into thee and that will be all into the photo element alright so so now I all need is to just call this so I call this function and saves it alright guys now we are getting the all the listing point one to show the loading so function sure loading is the name of the function so I want that the loading should show the class which which will be which will be the class for the show that we have created in the CSS so once the opacity building one now it will be shown all right so keep remember that now inside the style dot CSS I give it the opacity of zero but if I just keep it control Z you see now it's showing us so now by default it should be have the capacity of zero and while we want to show it it only show when we have the pasady of one which has the class of sure alright so now I want to set the timeout here so I wanted time set the timeout that we create a function and [Music] inside that I want to give it the loading after after some period of time it will it will remove the class of further show because we want to load more content so I give it the class for the show to remove that and inside that another said timeout here and want to create more pages and want to open more pages once like I want to load more pages because we are scrolling down and then call the function of show photos right so definitely while be a scrolling down the pieces will be loaded and it will call the function of show photos which you see on top all right so now this will call the function and I want to have the delay of three seconds and that they'll have the while we just remove that that will have it live only for one seconds all right so now I want to create that event for that so remember that in inside there is a pin your property I use the add event listener property so ya add as an even so I add that even for the scroll because I want to use a scroll even here and the function and inside that I want to have some destruction here because I want to have multiple properties so that's what you can fetch from different resources I get this resource on Stack Overflow so scroll top plus client height and I also want to have here is called op scroll height so that will be scroll height so scroll height and client height so I just want to give it the document dot document element so I want explaining about what basically this should be comma here so I just destructured that because called off use at the top of the document while I scroll down it has some multiple values the height of the document while we scroll down and the client hide so these are all the properties that's provided by the document element you can also consult our law to see this and I all I want is that if if if scroll from the top adds up with the client height and have the values greater than equal to scroll height so and I gave it a value of minus six and I want to call the function sure loading right so it will Lord's the data while we have the value greater than scroll height and this should be some generic value that you want to have depending on yours so let's have a look refresh no need of refresh this that you'll be using we're using live server so I want to give this seven in order to check our results so let's let give it a limit of seven saves it and now you see now while I scroll down the loadings the the loader starts and show the results right so I believe that's working nice and I believe you guys will enjoy so if you really loved this videos you please leave a subscribe leave a like and subscribe my youtube channel for more videos like this so that's it guys so I wanna see you in the next bar

Channel: AB Nation Programmers

Views: 1,248

Keywords: Infinite Scrolling with JavaScript using API, Infinite Scrolling with JavaScript, Infinite Page Scrolling Example Using Html CSS and Javascript, Javascript Scrolling Effect Tutorial, Scrolling Window in JavaScript, infinite scroll vanilla js, javascript, JavaScript infinite scroll using JSON Placeholder API from scratch, javascript tutorials, async await, abnation

Id: hGJybwDUMj4

Length: 34min 12sec (2052 seconds)

Published: Wed Feb 19 2020