Build a Reddit Search App With ES6, Fetch & Parcel

[Music] hey what's going on guys in this video we're gonna create a front-end JavaScript application that uses the parcel bundler and the reddit API to search articles and we can limit them from either 5 10 25 50 or 100 and we can also sort them by relevance or by date alright so if you have taken my udemy course my modern JavaScript from the beginning course and you like these you like the type of projects that we did in here this is gonna be very similar and if you haven't taken the course and you do like this project I'd highly recommend it I'll throw in a promo link in the description for 10 bucks and as you can see it's a 21 out dot 21 and a half hour course and there's no prerequisites aside from just HTML we start from absolute scratch all right so let's take a look at this application so if I try to search without any search term it's just going to give us an alert that says please add a search term we're using bootstrap 4 for our UI and if I put something in here like let's say burgers and search you'll see it'll reach out to the reddit API and we're gonna display a bunch of stuff so we're gonna display the image if there is one if there isn't one we're gonna display this little reddit guy and then under the image we have the title and then we have the self text if there is any we're also going to truncate that make it shorter if it's really long and then we have a read more link that will open that reddit or subreddit whatever it is on another in another tab and then we also have the name of the subreddit and the score down at the bottom in a bootstrap badge alright and these are card columns so it gives it that grid look alright so that's what we'll be building guys hopefully you enjoy it and let's get started hey guys if you've been watching my videos for a while and you really like what I do when I've helped you out a lot consider becoming a patron even for one dollar per month it pushes me to keep bringing you guys the best content I possibly can there's reward tiers for discounts for you to me courses personal support and more so check out the patreon link in the description below for more info all right so we're gonna get started here first thing we need to do is set up parcel which is very very easy if you've never used it or even heard of it don't worry about it it's a package manager similar to web pack but it's zero configuration so it's very very simple to setup so what we're gonna do is just create a new folder for our project I'm just going to create it on my desktop and I'm gonna call it find it fi nd di T and we're gonna go ahead and open that with vs code or whatever text editor you want to use is fine and we'll just bring that over here okay we'll just split that up and then what we're gonna do is go to parcel J org if you don't already have it installed and just go to get started and we can simply install it with either yarn or NPM I'm gonna use NPM and we need to install it globally so what I'm gonna do is I'm going to open up my terminal in vs code you can use whatever terminal you want but I'm gonna go ahead and do NPM install or I - G and then we want to do parcel - bundler okay and that will install it for us and that's really all we have to do to get it installed you can then run it from absolutely anywhere alright so now that that's done what we're gonna do is create our package dot JSON file with NPM and knit so package name is good version description we'll just say let's say reddit search app and entry point index j s is good and go through this author you can put your own name if you want and license I'll say MIT alright so we have our package dot JSON file now what we want to do is create an index dot HTML file and we also want to create an index dot JSP okay so this is gonna be our source code what parcel is gonna do is it's gonna package it up for us and it's gonna put it into a dist folder and that will be the actual code that we can deploy and you can simply upload it to a shared host or however you want to deploy it alright so if we look at the parcel documentation here basically all we need to do is include our index J s file and then we can run Parcel index.html and that will actually start a dev server so let's do that let's go to our index.html I'm gonna use Emmet just to put in some default head body tags stuff like that and we'll go ahead and change the title to find it and then we're gonna just reference that index J s file so we're gonna put a script tag here with the source of dot slash index dot JSON and then in our index J S let's simply do an alert will just say alert one two three and save all right so now what we need to do is simply run this command right here parcel index dot HTML alright now what that did is it it compiled everything into this dist folder so if we look in here we have an index.html we have a source map and we have a find it dot J s file so the we don't touch these this is our compiled code this is what we want to work on and we can actually create modules and we can import them using either common J S or es6 modules ok and it'll all get it'll all get compiled into this one JavaScript file and that's what we use that's what we deploy alright but while we're working we have this dev server that runs on localhost one two three four so let's go to that will say HTTP and let's go to localhost one two three four and there we go we see our alert one two three okay so we'll just get rid of that I just wanted to test it out make sure that that's connected and then we're gonna go back to our HTML and we're gonna create our UI before we start to get into the functionality now we're gonna be using bootstrap so I'm gonna grab the CDN from bootstrap CDN calm and we want to go right here just get the CSS this link tag I'm gonna copy that and put that right above the title okay we don't need the JavaScript for anything so we just need the CSS and then for the UI it's pretty simple so what I'm gonna do is just paste it in and go over it instead of typing it all out I know most of you guys already know a lot of this stuff I do have a bootstrap course on udemy too if you just search bootstrap it'll be the first the first result so we'll paste this in I'm gonna close this up and we're gonna go over it alright so at the top here I'll just save it and at the top we have a navbar which is very simple no links or anything it just has a container inside of it it has the brand and it has a class of BG primary and B and now far dark which makes it blue with white text okay and then under that we have our search container which is this whole section here anything with an ID we're gonna be grabbing within the javascript okay the classes are just bootstrap they're just for style so we have a container that restricts this box in the middle the div with the idea of search is this whole thing as well and then that has a class of card and card body BG light gives it the gray background and then our form has an ID of search form we have our first field our input field wrapped in a class of form group has an ID of search input anywhere where you see these mb classes these these are just margin-bottom classes they're just pushing stuff down okay and then this is for the checkbox so this is the first checkbox here that this the sort by relevance and then we have the second one which is the sort by latest okay and notice that they have the class of form check input and also the wrapper class has a class of form check and form check inline which makes it go horizontal and then we have the limit so that we have a select list as the name of limit ID of limit and then we have all of our options and 25 is selected by default and then finally we have our button and then right under that we have our results this is where everything's going to go that we search for and we output but we're gonna generate it within the JavaScript and then output it alright and this result should go under the div with the ID of search okay so that div ends here and then we have our results so now that we have that all set now it's time for the java script which is the main part of this tutorial so first thing i'm gonna do is just bring in a couple things let's bring in the search form so we're gonna say document dot we're gonna use get element by d and remember we had we gave that an idea of search - form okay we also want the input value so we'll say search input set that to document dot get element by D and that had an idea of search - input all right so let's add let's add an event listener to the form okay so when this form gets submitted we want something to happen so let's take the search form variable and we're gonna call add event listener and then the the event that we want to listen on is gonna be a submit event okay and then when that runs we want to run a function now we could put a callback function like that but I'm just gonna use an arrow function and when you have an event listener you pet you can pass in an event parameter as well so we want to put an e here as a parameter for our function and then use an arrow and then inside this arrow I'm gonna say e dot prevent default to prevent the forum from actually submitting to a file okay and we'll test this out by just saying console.log and let's just console.log one two three we'll open up our console with f12 and let's go ahead and make sure let's reload this and just type anything in search and now you can see we get one two three down here all right so our event listeners hooked up now what we want to do is we want to get the sort by we want to get the input and we want to get the limit so let's say let's see let's get search term so I'll create a variable called search term and we'll set that to the search input which we have defined above but we want the value from it okay so I want to make sure we do that and then we can just test that out real quick all right so now whatever I type in here shows down here we log it alright next thing we'll do is get let's a get sort so we'll say Const sort by now there's a few different ways you can get checkboxes or I should say radio buttons we're going to use query selector and then we're going to use a special special selector called checked or I guess it's a pseudo selector so it's a query selector and this works just like jQuery basically we can use any kind of selector so we're gonna say any input that has the name of sort by okay which is both of them the relevance and the latest but we want the one that's checked so we want to use colon checked okay and let's see if we can get that say sort by alright so now I'm gonna just relevance is checked by default oh well actually you know what we need the value all right so we get relevance click this one and we get new okay go back relevance go back new good so that's working now we want to get the the limit so for that let's create a variable called search limit and I'm gonna set that to document dot get element by D as an idea of limit and we're talking about the Select list here right here ID of limit and then we want the value of course all right and just to test that out let's take this console.log here and just move it down and let's change this to search limit so now whatever I choose it's a 10 we get that down here good so the next thing I want to do before we move on to making our request to Reddit and all that I want to make sure that we can't submit an empty form an empty input so let's say check input and for that we're just gonna do a simple if and we're gonna say if search term is equal to nothing then what do we want to do we want to show a message okay so we're gonna create a custom function called show message and then this will take in two things one's gonna be the message so we'll say not show we'll say please add a search term and then the second will be the class class that we want to add to the div because we want it to be a bootstrap alert message so I'm gonna say alert - danger all right so let's create that function we want to go outside of this event listener in fact I'm gonna put a comment here that says forum eventlistener and then we'll go down here outside of it and let's say show message and we'll say function show message okay and that's gonna member that takes in two things it takes in the message itself and it takes in a class name now this is going to be the same message show message function that we used quite a bit in the udemy course it's going to basically create the alert div from scratch okay so we're gonna use some some Dom manipulation methods with vanilla JavaScript so first thing we want to do is create the div so we'll say let's say Const create a variable called div and we'll set it to document dot create element which does just that and the element we want to create as a div next thing we want to do is add our classes to that div so we can just say div dot class name and set that to what we want now I'm going to use backticks here because I'm gonna use a variable so this is this is a template string it's part of es6 now with bootstrap your class should be alert and then whatever the color you want are the type in this case alert danger but remember this alert danger is coming in right here it's coming in as this parameter class name so instead of putting this we want to put a variable so we want to use this syntax and we want to say class name okay because if we put alert success in here it'll be agreeing it's it's it makes it more scalable we can just put alert success if we want a green or if we want blue we can do alert info or whatever blue is and so on all right so next thing we want to do is add the text obviously we need some text in our message and that's going to come from this right here so what we're going to do is we're gonna take that div and we're going to append a child to it which means we're gonna put something inside of it and we want to put a text node and in JavaScript to create a text node you use create text node okay now you could put some text in here but obviously we want our message so I'm gonna put the message variable that comments coming in from here okay so we're almost there now that we created everything we need to get it into the Dom so it displays so we want to do two things we want to get the parent container which is going to be this I this div right here with the idea of search container and then we also want the div that we want to put it before which is going to be this div with the idea of search so we want to get those two things so let's say Const search container equals document dot get element by D search - container that's the parent and then we want to get search so we'll say Const search get element by D search all right so now all we have to do is insert the message so we're gonna take the container search container and just call a method called dot insert before which does just that it inserts before so we want to insert the div before the search element so that it shows right up here so let's save that let's try it out we'll reload and we'll leave this blank and click search and there we go please add a search term now as it is now it's just gonna stay there and I don't want that I want it to go away after us after a certain amount of time so we're gonna say timeout timeout alert and we're gonna use a function called set timeout which is just a JavaScript function and it takes in a callback so we could do function but I'm gonna use an arrow so I'm just gonna put an empty set of parentheses and then an arrow and all I want to do here is remove the alert so we're gonna say document dot get element by ID actually know it's a class so we're gonna use query selector so dot alert and then we want to remove it so we can say dot remove all right now this set timeout takes a second parameter so we want to go put a comma here and then the amount of time that we want it to wait so we'll say 3,000 which is 3,000 milliseconds which is three seconds so let's test it out we'll reload and we'll click search and then it should go away in three seconds there we go all right so that functionality is taken care of I know that was quite a bit but I think it's good to create it from scratch within the JavaScript rather than like creating a div with alert an alert danger because if we do that we'll have this red line and it's just it's it gets kind of messy so I think it's good to do it that way even though it's a little longer alright so now that we have that done let's move on so let's see we checked the input once we enter something in search I want this to clear up so all we have to do for that is take the search input dot value and set that to nothing okay then we're finally ready to search Reddit so what we're gonna do here is obviously we're gonna use the fetch API but I want to do this in a different file ok that's basically the reason I use parcel is so that we could use modules so we're gonna create a new file in the root here make sure it's not in your distal Durr and we're gonna call this reddit API dot J s all right and then in this reddit API we're going to export default it's gonna be an object and we're gonna have a function called search all right and this is where we're going to make our request now in our index file we have to bring in this module so we're gonna go up to the very top and let's say import I'm gonna use es6 syntax we can do that with parcel and we'll say import reddit from dot slash reddit API just like that and then down here when we want to search reddit we can use that excuse me we can use that variable that we just assigned so reddit and we can call the search function like that and we're actually going to have it return a promise so we will be doing like dot then but for now let's just pass in our search term let's pass in the search limit and let's pass in sort by okay and these are all things that we defined up here search term all this stuff here we're just passing it into our reddit search function all right so we'll go back to the reddit API dot j s and just to make sure that this is getting called let's do a console log and let's just say search okay so now if we reload and we type something in and search we can see that that's connected okay now we're good what we're gonna do is we're gonna use the fetch API here so we're gonna say fetch and we're gonna pass in the URL so the URL is going to be HTTP wwe.com slash search and then we want to do dot jason and then we want a query so we're gonna put question mark which which allows us to use a URL parameter Q equals so query equals and then our search term and remember this should this should actually take in our search term our search limit and our sort by so we want this to be our search term now I actually wanted to use backticks here so we don't have to do any concatenation or anything we can simply go like that okay so it's gonna equal search term so with the fetch API we do a dot then okay but this isn't actually gonna give us the data this first dot then it gives us the response and then we need to basically say that we want that response in Jason and then we do another dot then and it gives us the data alright so we'll say data and let's use an arrow function and let's just console dot log the data alright so we'll save that reload and let's type in here burgers I don't know why I chose burgers but I did and then it gives us this it gives us an object with a kind of listing and then data data is what we're interested in so if we look in data you can see it has this children object which is actually an array of objects 25 by default and these are our posts so in in our posts we have another data so we have some digging to do to get to what we want and in this data is where all the stuff is so if we go down to like title which is you can see there's a lot of stuff but the title is here we have the URL we have the permalink so this is where all the stuff is so we have quite a bit of digging to do in the API now before we do that I just want to add the rest of our parameters because in addition to the query we can put another another parameter with the ampersand and we can say sort and we're gonna set that equal to our sort by alright and then we'll do another one and we'll say limit equals and we'll set that to our search limit okay and I should probably should have showed you the reddit API documentation will say reddit API search and let's see so right here yeah so see you can take limit maximum default is 25 as you saw a maximum 100 Q is a query which is a string no longer than 512 characters and what else did we do sort which can be relevance we did relevance and new you can also do hot top and comments if you want and then there's some other stuff here if you want to experiment so this is this is the information for the the search endpoint alright so now that we did that let's figure out what we want to return I don't want to return just that data object because there's just so much stuff I don't want to return this so we're gonna go data and then dot data which will be that all right so let's let's log this data dot data and then what do we want children so dot children and that will give us that will basically give us the array this array here right so if we try it what what I do sort by is not defined let's see what I do I didn't do it I didn't capitalize the B alright and let's test the limit - we'll do five okay so now now we're looking at data data dot children which gives us the array of posts now I don't want to return the object I want to use the map high order function to get just the data so what we can do here is let's not log this let's return this so we'll go like that but then we'll take the map function and we'll pass in data and set that to data dot data so that way we're returning just this part of this or of these objects okay because that's what we want we don't care about the kind we just want this alright and then the last thing we want to do here is return this whole fetch because what this does is it allows us to make our search function return a promise okay good because fetch returns a promise and we're returning that so we can now do search dot then in our index file well one thing I did forget is I just want to add a dot catch in case there's some kind of error when we have promises we can do catch and we'll say error and we'll just console.log it like that okay so that's that's our whole file that's all we need and if you wanted to add to this and you wanted to use other end points or something from the reddit API you could add another function like I don't know popular or something like that all right but we just we just want this to be a search app for now so now let's go back here and this should now return a promise so we can say dot then actually let's put this on a new line dot then and then what it's gonna give us is the data or I'll call it results so results will use an arrow and then let's make sure we're actually getting something so say console.log results and save all right let's try it and there we go so 25 results and you can see it's only it's now just the data we're not getting that the type or what was it kind T 3 or something like that we're just getting the data because we did the map we mapped it to that these high order functions are really really handy all right so now that we have the results we want to output them into our UI so let's create a variable called output and I'm using let because I'm going to be manipulating it I'm gonna start it off with just a div actually it'll be a div with the class and we're gonna use bootstraps card columns so we'll go ahead and give it a class of card columns and then let's see we're gonna want to loop through our results and then create a card for each one but before we do the loop let's go down here and let's say output plus equals which is an append we're not overriding output we're adding to it the ending div to that div we just created okay but in here we want to loop through our results so we'll take that results that we got from our reddit dot search from the promised and we'll call for each okay which is another high order function that just loops through just loops through an array so we'll say results dot for each and here we'll say post we use an arrow function and then I actually just want to put a comment right here say loop through posts so in here we want to take that output variable and append to it so plus equals and I'm going to use a template string so that we can use variables within it and we just want a bootstrap card for each of these posts so if I go to get bootstrap comm and I go to documentation components and card I'm just gonna grab this right here this first one and stick that in there okay and I'm just going to get rid of this inline style right here with the width we don't want that and then we can fill in all of our dynamic content that comes from this post all right but before we do that let's see if we can output it on to the screen when we search so we'll go down below the output right here and remember we have that idea of results which is right here this is where we want to output everything so we'll simply say document dot get element by D results innerhtml equals output okay and that that'll output all of this from here all of the looping through all the cards and then the ending div so let's save that and let's reload this and just search for burgers and now we're just gonna get a bunch of static cards because we haven't filled in anything any dynamic content all right so let's put in the title right here so we can use this syntax so we can take the post that comes from here and we can call dot title so if I were to now search for burgers you can see that now we're getting dynamic titles now this here that in the paragraph this is where I want to put what is it the self text I believe it's called you know what let's let's console.log our results and just so we can see what's available so we'll go right here and say results all right so if we look in here we have I think it's self text that I want right yeah self text and notice that this doesn't have some of them it's just blank but if there is self text I want it to display here so we're gonna go ahead and say post dot self text and let's save that okay now undefined undefined why shouldn't be undefined oh I put a capital T here it's all lowercase okay so now this is the self text notice how long some of them are actually there's only one that has it it's really long so I want to create a truncate function that will shorten this up so we're gonna go down below our show message and let's say truncate text and we'll create a function called truncate text which will take in two things it'll take in a string we'll call it my string and a limit actually let's call it text and limit and then we'll say Const let's say shortened and what we'll do is set it to text dot index of because what I don't want this I don't want it just to cut off in the middle of a word so what we're doing here is we're making sure that it's gonna actually be the end of a word when it gets cut off so we're gonna put a space and we also want to pass in our limit alright and then we want to say if shortened is equal to negative 1 then we want to return text this index of if it does if it doesn't match if it doesn't match a space then it's going to return negative 1 okay and then finally we just want to return TxDOT substring and here we're gonna pass it we want to start at zero and then whatever the shortened is is gonna be the second parameter and there's a lot of discipline T of truncate functions you can find just search Stack Overflow if you don't like this one but this one seems to work all right so now we can just wrap the self text in truncate text okay and let's see that's gonna take in a second parameter of however long we want this so I'm gonna make this let's say a hundred words long and save and let's try this again and see how long that text is okay so there we go and I'm sorry not a hundred words a hundred characters so that's all set now let's do the image because right now we're just having this blank image here there's no source now this is where things can get tricky because not every post has an image and the images are actually stored in a preview object inside of an images array and some of them don't even have the preview objects so we have to do some testing before we can output it or else it'll be defined undefined so if we look at let's say this first one and we go down to preview if it has it which it does okay some of them do not have this so we have to test for it but if we look in here it's that the images is tucked away so we have preview then we have images which is an array and the array has one value in it and that's an object if we look in that object we have another object called source and that source has the URL so that's that's where we get the image URL so it's root it's really tucked in there and that's that's what's difficult about working with api's is just grabbing the data cuz because sometimes it's just so far in there and you have to do a bunch of maps and all this crap and if statements to check and see if it's a it's there if it's to find so what we'll do is check for this preview if it has it then will will will navigate to this URL and use that as our image source so we're gonna go above the output but still within the loop within the for each and we're gonna say check for image okay so we're gonna say let's image equals post dot preview now what I'm gonna do here is use a ternary operator which is like a shorthand if statement so I'm gonna say post preview and then we use the ternary operator and we say post dot preview we basically want to find this URL we're saying if this exists then let's grab this URL which is post dot preview remember there was an array called images we want the first value so zero and then we want the source and then we want the URL okay else okay so the colon is else then we just want to use the little reddit guy which I forget we just search say reddit image and I think I used this one it's not the one I used let's see no it wasn't that one oh it was this one right here so I'm gonna save you image and then I'm just gonna grab this URL so basically saying if post preview exists we want to grab the image if not then we're gonna use this static image so we're just gonna put that in alright so hopefully you guys understand that you could add you could use an if statement here it would just be longer and then what we'll do is go to the image tag into the source and we can now just put image which is this variable okay I guess I could use Const here different people have different opinions about letting Const I like to use constant s I know it's going to change but you know some people like to use let all the time and it's it's just preference so let's try this out we'll save we'll reload burgers and there we go so now we're getting all the images and this one for instance doesn't have the preview so it's showing that little reddit guy and you can use a different image if you want alright guys so we are almost there now we want to do is let's see let's do the link so we're gonna go down to this a tag and we're gonna add right here we can just do post dot URL and then I just want to make sure that it opens in a new tab so we're gonna say target equals blank and then we'll change the text from go somewhere to read more so let's try that out okay read more and there we go okay so let's search for something else let's do J s there we go so just some JavaScript stuff PHP so we can search for anything and the limit if we want to do five PHP it gives us five results one two three four five columns is a little weird but let's see let's do latest ten oops PHP latest ten and there we go ten results okay so I also want to add the subreddit and the score down here at the bottom so I think that's I think that's all we have left to do so let's go under under the a tag let's put an H our and let's put a span I can't use Emmet in here huh span let's do class badge and let's do badge - secondary which will make it gray well I haven't actually typed out each tip ending HTML tags in a long time and will say subreddit and we can get that with post dot subreddit okay and then we're gonna do another span with a badge so what I'll do is just so you'll just copy this down and let's change it from badge secondary to badge dark and let's change the text to score and we can get this with post dot score alright so let's try it okay there we go subreddit Score and to make sure it looks responsive good we make it really small and it gets it gets stacks awesome alright guys so that's gonna do it for this project now if you wanted to deploy this you have your dist folder here with your compiled code in it now we didn't have to use parcel for this you could have taken the code that's in the reddit API file the search here and put it right in your index J s and just use that but I wanted to use parcel because I don't know I wanted to do something different I wanted to make it more scalable if you wanted to add add more modules to it you have the ability to use like post CSS and some other features of parcel as well I think it's a great technology alright so that's it guys if you like this video please leave it a like and I will see you in the next one

Channel: Traversy Media

Views: 44,453

Keywords: reddit api, es6, javascript, parcel bundler, fetch api, javascript fetch, es6 project, javascript modules

Id: VITzIZB-bXU

Length: 45min 52sec (2752 seconds)

Published: Mon Feb 12 2018