ReactJs News App using the New York Times Articles API

stream will be starting in a moment okay so we are live now and uh for this project for this video for this stream uh we're going to be taking a look at the new york times api once again and specifically we're going to be looking for the articles api and basically as you can tell we're just going to be returning some kind of image with a title and some text and some description of what the article is about and i think this would be for uh articles from today backwards i think so i haven't really taken much of a look to it but basically we are going to follow the same process if you watch the last stream and the last youtube video so um first of all i'm going to start with uh going to create a new application so you have to sign in first of all if you don't have an account with new york times you have to sign in and create an account and validate your email and then once you sign in you can just come right here and create a new application and you can see i was fiddling around with this i created a new application called t news where this is now my api key but i'm not going to use this for now instead i'm going to create a new application so i'm going to say new app and then for the app name i'm just going to say t articles right the description isn't necessary so i'm not going to place it and then we're going to be dealing with the article search api so i'm going to enable it right there and then i'm going to say create that oops not be created why did i do something wrong app could not be created let's say test let's say test something's wrong something's wrong something's wrong let me reload the page upload this page sign in ready it's still not signed in what's happening with this thing what is happening okay there you go so i'm signed in and let me go and create a new application already let me delete this um oh you know what you know what let me not delete it i'm just going to create a new application say new app say t articles like that and let me just say articles up and then the article search api i'm going to enable it once again and then create and this should create a new application for me so uh i've created and you can see this is now my api key and i have a secret as well and basically this app id which i'm not really going to use okay so uh before i continue i just want to say that i've already conversed my react application so the react application is called ny times dash app and as you can see uh on the top what i did was npx create react app and y times dash app and that's basically it uh once it finishes running this is all that we're going to get so right now i'm going to cd into ny times dash app and then i'm going to open visual studio code and then i can now close this window close this window and then i'm going to go back into this apis into our api so that we can take a look at this so i'm going to copy this first of all because we need it and then in vs code i'm just going to create a new uh a new file just paste that in so that i don't have to keep coming back to this page to pay to copy it and then i'm going to go into apis tab right there i'm going to article search api and you can see they give an example call of what of what's really uh well the the kind of data that we're going to get back from the api and you can see at the end it says your key so your key here you're going to substitute it with your api key that you've just generated and i think even if you were to copy this down of course it would take a moment but if you to copy this and use it i think it would still work i'm not sure but i think so but i generally recommend that you you get a new api key for yourself so i'm going to grab this and i'm going to copy it paste it right there and i'm going to explain why and then i'm just going to go to this navigate to this and change this in my address but to my api key which is this that i need to copy so copy that paste it inside there and we should get back some data and i'm using a json formatter that's why my uh the json data appears like this so you can see that the status is okay meaning uh it's a status 200 http request a gate request we have a copyright there that we're not really going to use and we have the response and you notice you notice that the response is an object that has an array called docs so inside this array we have the abstract which is basically like the title of the uh of the article we have the web url which is the actual source of the article we have a snippet here we have a lead paragraph we have print section print page the source which is basically in new york times for every article inside here basically and then we have multimedia which has all of this and then if we scroll down quite a bit right about here we have the publish date we have the document type the news desk we have the section name we have the sub section name and final you have the byline which is uh basically who wrote the article um i think once we have all of that i think that will be our data structure here because this starts again so that's basically all the data that we're going to need so uh why was i copying this and i need this page to be open as it is right there so the reason why i was copying this is because it's not a good idea to commit your api case to github so we would like a way to hide it when we commit this to github and we can do that by going into the root of our application and creating a hidden file called dot v which we have to hide in our git ignore so if you go into git ignore and just place it somewhere there and say ignore the dot env file as well once you save it you'll notice that it it becomes grayed out like that so everything inside this file is not going to be committed to github and this is where we'd like to place our api key so i'm going to cut this out and i'm going to say i'm going to say react underscore up and articles api key equals to this to my api key so i'm going to save that now the reason why i was copying this is because uh in our application i would like to substitute this with our api key now node.js provides a way to do this using process.env and i'm going to show you how to do that so right away let me close this right away i'm going to go into my source folder and i'm going to agree i'm not yet started my server because so if i had to start my server before node.js can process this as well as the uh excuse me if i have to start the server before node.js can process this dot env file then it will just throw me an error which i want to avoid so i want to create some basic layout of our application before we start our server so that we avoid that error so what i'm going to do is insert my app.js i'm going to delete all of this and i'm going to return a fragment and inside here i'm going to return a div um i don't want to structure this i'm going to return a div right um rather than a div let me just say a section and then i'm going to remove these two from the top and i'm going to say import react from react and then we need a few things as well we need the use state which will uh which we'll use to set up our state values and then we'll get the use effect hook as well which will use to fetch our data basically from the api and that's where we're going to substitute our api key uh from the one that is in the dot env file so right away let me change this to an arrow function change this to an arrow function like that and right now i'm going to set up my state values where i'm going to say um articles and set articles this will be your state and by default it's going to be an empty array because once we face the data we're going to be populating it with this docs array so it's going to be populating this empty array so that's why you have an empty array to start with and then another thing that i want to do is i want to be able to place a search box so that let me go back into this file you'll notice that we have article search.json and then a query here that says election so if i were to change this query to something like politics for example then i want to be able to rerun this get request with our api key so that we get articles about politics so this next state value that i'm going to set is going to be controlling uh the query that we're going to place inside here so i'm going to say cost uh first they call it cost term and set term that and this will be use state and by default because by default i want to fetch uh like uh let me say articles from about everything really then i'm going to set my state value into a string called everything everything like that okay so once we do that then i want to set up one final state value which will control our loading animation so i'm going to say const is loading and set is loading and this is going to use state and by default it's going to be true because anytime that i'm not displaying any data on the screen then i want to show a loading animation and then once we fetch our data from the api then i want to remove the loading animation so we're going to be targeting this function and set it to false and right away let me set up my use effect so i'm going to say use effect set up a callback function and then oops this should be curly brackets and an empty dependency array empty for now it's empty for now we we're going to set it into this term once we set up our our form to uh to search so inside this form i'm going to place a try catch block a try catch block and inside here i'm just going to console error the error so console error the error and then i'm going to say insert my try block i'm going to say const page articles and fetch articles is going to be an asynchronous function so this should be async and an arrow function where i'm going to say constant response let me just call it res equals to um a weight page and we're going to be fetching the url so i'm going to place it inside backticks so that i'm able to use variables inside the string so i'm going to go inside this and just copy this copy this and we no longer need this file so don't save that and i'm going to paste it inside here now remember that i want to substitute this term right here for what we have inside here so what i'm going to do is just grab this and remove it and i'm going to set up a variable using dollar sign and curly brackets like that and set that to the term right there so i'm going to say term what this means basically is that uh the query here will be cel will be substituted to whatever term that we have inside our use state and i'm going to show you that in a moment but let's deal with our process.env first so in order to access our our api key from our dot env file then we need to target this variable right so i'm going to copy this down and once again i'm going to remove this placing my dollar sign and curly brackets and i'm going to say process dot e and v dot and then paste that in which is the name of our variable okay so once you do this this means that it's going to run this request right here it's going to substitute the query term for everything that we have for the term everything which is basically our state value inside there and then once it reaches the api key node.js is going to access the react up articles api key from our dot env file that we have right there so uh before i save this file and start our server what i want to do is just outside this i'm going to say const articles equals to await res.json like that and then i'm going to say console.log the articles to see what we get back so console of the articles and then i need to call this function so whether this function end is it here right articles nope what'd i do what did i do wrong oh i did this wrong okay this shouldn't be inside the tri block this should be outside it and then this this bracket should go down there is that correct is that correct if it's wrong we'll know in a moment so i'm going to save this and then i'm going to start my server so npm start and then this should fetch once our server starts then we should be able to see something on the screen on localhost 3 000. and sometimes my machine takes a while to run this so we might sit here in some awkward silence for a moment okay so our dev server is up and running or almost up and running it's still loading it's taking quite a while okay there you go so i'm going to open up my console right there and we should get an object which is basically correct and you'll notice that it's an object and this is also an object and then we have copyright we have the response and we have the docs which is basically our array that we want to to target so the next thing that we need to do is get this from the console and get it to to display on the screen so what i'm going to do is let me close this so what i want to do is um after we console this then i would like to populate this empty array and i can do that by saying set articles set rt calls into articles dot and the reason for dot is because i want to access the response object and then access the docs array okay so i'm going to say dot response dot docs which will now populate uh this empty array in the u state with our docs array that we get from our data so once i save that and just to show you that it works i'm also going to console response dot docs like that and we should get an array of 10 items there you go so this is working this is working and now this has been populated our set articles uh state value has been populated with basically our docs array okay so once i do that then i'm going to go inside my section right there and i'm going to say um what we're going to say i want to map over my data so i'm going to say articles dot map and then say for every article i'm going to return an arrow function and i'm going to structure quite a few things and these will be coming from article and i went to the structure let's see the abstract we wanted the byline the headline okay headline also here let's see headline where is headline okay there you go okay so let's just begin to destructure our ab struct abstract our headline we have our byline and remember our byline has objects inside it so i want to be able to distracted those objects i'm going to place a full colon and then place other curly brackets and i'm going to destruct the original which is basically the the name of the person where is it by land so the original is the name of the person who wrote the article and then once we get the abstract the byline and the headline we want the lead paragraph so we also need to destructure lead underscore paragraph and then we need the newsdesk the newsdesk and then once we get the news desk we need the section name probably so section name and then we need um section name web url yeah there it is web url and then the id so section underscore name web underscore url and then underscore id which will be our unique key value and then finally i saw something i wanted and i want the word count so i'm going to say what underscore count like that and then once i get all this data then i want to structure how i want to display so i'm going to return an article an article with the key of sorry underscore id like that and then once i get these articles then i just want to start displaying my data so i'm going to say i want to return an h2 that says the headline headline like that and then below this h2 and i've just remembered that we don't really have access to these images you can see uh the images are sort of stored like in a local repository or something so even if i were to get this image from here all it would do is show like a small bitmap image which it doesn't really look nice that's why i've not destructed the image from here okay so what do we need we need um the headline and then we have we need isn't the abstract the same as the um okay we need a paragraph that says the abstract right struct and then once we get the abstract we need a an href that goes to the actual url so i'm going to say web underscore url and then set the target to equal underscore blank which will be opened up on a new page and then here i'm just going to say web resource resource like that and then once we get this then what do we need to do next is oh this is the lead paragraph what i mean isn't the lead paragraph the same as the abstract need paragraph is this and then this is the abstract okay they're not the same so what i want to do is for the abstract i'm going to return an h4 and then below this i'm going to turn a paragraph that says lead paragraph like that and then this is newsdesk newsdesk section name and the byline okay so once i do that then i want to return a ul with list items how many are they they are one two three and four like that that the first one would say original which is basically the name of the person the second one will say uh newsdesk like that the third one will say section underscore name and then finally we are going to have what counts count so let me save this and let's see what we get back in our application oops i'm seeing 21 errors objects are not valid as react i'm waiting for the error found [Music] set articles into actuals dot response did i do this wrong what did i do wrong set articles into articles dot response dot docs hmm what did i do wrong what did i do wrong let me remove this console log articles goes to await res.json which is basically this and then set articles into articles.response.docs right and then console error the error okay then we're fetching the articles okay and then we are saying articles. what's the what's the object that we're trying to access that it's telling us this let's see let's see the response the docs hmm okay so i can see that this is running this is running which means our console.log right here was working right our console.log was working so probably our issue would come somewhere here is it probably on the byline where i destructed it let me remove all this let me remove all this let's see and our application works so that means likely i destructed the byline wrongly so let's see by line and get the bylan and i want the original isn't that correct so i'm getting i'm getting the buy line right and then i want the original okay what was it what was it where's my byline i don't even have my byline inside here okay here it is let me see if i disable that what happens if i disable that okay so it's not this let me disable this and it's not that wait what what what what let me go on a bigger screen what what what what what uh we have articles map we have article okay we have abstract we have deadline original we have our return objects are not valid as we are telling found object with keys mean okay okay okay i get you now i get let me just confirm why we have underscore id that doesn't look right i mean it looks right but it doesn't look right in my application underscore id underscore id let me change this to something else let me change this to abstract let's see if this works still nothing still nothing works the above error occurred in the h2 component why didn't i see this headline headline is an object headline is an object headline is an object okay okay okay okay okay so there we are took a moment to find so i need to destructure the main inside the headline so i'm just going to save press a full column and save main so inside here i'm going to return main instead of headline it takes a while sometimes but you know it works so reload this and get rid of the errors encounter two children the same key let me turn this key to underscore id so that we no longer have that error and there we go okay okay okay so now that we got something displaying on the screen what i want to do is grab table css from cdnjs.com so grab tailwind css copy the link tag go inside my public folder and inside index.html uh what okay it hung there for a moment i thought it crashed remove these comments remove this and then just place this here and then grab this remove it change this to ny times articles like that and then change this theme color to white like that so save that and then this should reflect in our application right there so the document now goes into the title sorry now says ny times articles okay okay okay so what do we need to do now i want to add a div inside here and this day will have a class of showcase and then i'm going to add another div inside with a classic overlay with an h1 that says you are or rather let's say viewing articles or articles about and then i'm going to explain what i'm going to place inside here and then right inside here then we're going to have our form which we haven't created yet but i'm going to create it after we we've styled this component a bit better so inside this h1 i want um i want the h1 to say whatever term it is that we have passed inside here or we are searching for inside here or the default term that is inside here so for example all i have to do is just say uh i want the term the term really time like that once i save this then it should say viewing articles about everything so i'm going to save that and we should see viewing articles about everything right there so if i were to change everything now just to prove to you that this actually works notice that we are viewing articles about everything which is basically something of something so if i change this to election then we should see articles about election because this election now gets substituted inside this term and which will get updated and this will get rerun and this should now also say election so i'm going to view uh it says viewing articles about election right there and you can see it's automatically going about election somewhere there what i like some somewhere there election in the senate you know and so that proves that our state bodies are functioning so let me just tell this up a bit close this place this to the side close it down like that and uh first of all i want this to have a background image so let me go into pixels.com excels.com and grab news let me search for news and just grab something like what you can drop this this looks nice okay there you go so i'm going to copy the image address and then inside my index css because i want this to be a background image i'm going to remove this and i'm going to remove this and this and i'm going to target the showcase class and i'm going to set the background to url like that and place it inside strings and set this to no repeat and center and cover and then set the height to 300 pixels so once i save this then we should see it reflecting right there okay so we have our background image which looks nice let me change this to 400 pixels like that and then i'm going to target the overlay class into the showcase so showcase overlay and i'm going to say the background color for this should be rgba 000.5 which is basically uh a transparent block and then i'm going to set the height to 400 pixels as well and then display flex align item center and just like contact center which then bring this right at the center right there and i'm going to set the flex direction to column to column because uh once we add our form then i don't want this to be side by side by the form instead i want them to be in column form so i'm going to save that and then they should come right there with a dark black background image so let me reduce this to reborn 0.4 and i realize i'm talking a bit faster so sorry for that in case you are not following basically all we were doing is i added the background image and then i set the height to 400 pixels which is basically the height from here up to here and then i'm going inside the overlay class which contains the text with our h1 and we're going to add the form in a moment and then once you do that then i'm also setting the height to 400 pixels because i'm already adding a background color on this and i want it to take up the the same height as the image does so that it has this transparent black or almost translucent black and then display flex uh flux direction column and align item center and justify content center just make sure that the div is aligned vertically and horizontally to the center as you can see right there so that's basically all i was doing okay and let me see if this can be to the right on smaller screens so that it moves just a bit to the right and then i'm going to go inside my h1 inside here give this a class name of um text for xl and font bold and text white like that and then say text center like that and then say margin bottom of four for our imaging when we add the form and then go inside this overlay and say padding on the x of 5 just so that in case you're being on a smaller screen it has a bit of space between the margin and and the text okay so let's tell our this section so inside this section i'm just going to say give this a class name of um what should i say padding on the x of 5 and padding on the y or sorry padding on the top of 10 parting on the bottom of 20 yeah that should be correct so that we have this space right there excuse me and then once i do this then i'm going to target my h2 inside here give this a class name it's of font bold and text for xl as well to be 2xl that's nice for smaller screens okay and then just say imagine bottom of two pushes it down just a bit from this and then let me go inside here and give this a class of grade and grade columns that's one and a gap of 10 because it's really confusing i don't know where each of these articles end so i had a great graph to separate them just a bit okay so this webs resource link i want to push it to the bottom right here so i'm going to target it grab this and just press alt hold down alt and just press the down key to move it down like that and it should move down right there and then um i'm going to give this a class name of underline so that it has an underline so that we know that this is a link so it's looking nice and then inside this you are going to give this a class name of margin y of four so pushes it away from the top and bottom right there and then i'm going to say inside this i'm going to say newsdesk other flags that we know why we are saying washington and this this this will be section name like that and then this is what counts like that okay looking nice let me place this inside a spun spawn inside here and grab this as well place it inside a span and grab this as well and place it inside a spun and then i'm going to grab these three spans because they are also going to have the same styling of font bold like that okay there you go looking almost nice so let's see let's see i think this looks nice really let me see let me see let me add uh this the abstract the h4 oh this is an h4 okay instead of this being an expo let me make it into a paragraph because it's so much easier it's more of a paragraph really that's what i mean and then let me add a class name here or rather you know this looks fine this looks fine in terms of in terms of a um a news article and then let me go into my body and give this body a background color of dark gray so background color of let me see ee a dark gray not a drug that gradually but a light gray and then go back into app.js and inside this article i'm going to give this article a class name of bg white so that it stands out from from the gray background color and then i'm going to say padding on the y of 5 and padding on the x of rather padding on the y of 10 and padding on the x of 5 so it pushes inwards just like that and then say rounded large so that the borders around here have rounded borders so that's what we have currently it's looking nice looking very nice okay so what is remaining let me add a bit more margin between these headings and which one is it here let me say five okay um so what is remaining for this screen is basically just to scale it up and scaling it up is going to be easy where i just want to target this h1 for example and i'm going to say this h1 and i'm going to say that for large screens i want the text to be let's say 6xl make it bigger right about there and then also increase the sizes for this so i'm going to go inside what was this this is an h2 and i'm going to say that for large prints once again increase the text to 2xl let's see how this looks did i do that correctly oh it's already to excel so let's say for excel for xl okay okay okay and then [Music] i want to limit these articles to a specific portion of the screen so they don't go all the way end to end because this is this is really hard to read if your eyes are going to be going end to end so what i want to do is for large screens right there i'm going to go inside this article and i'm going to say large i want the width to be um let's say 9 over 12 which is 75 percent of the screen which should reduce it as you can see and then for large screens once again i'm going to say mx auto which will now center this article right there look at that looking very nice even on bigger screens looking nice okay okay so once we do this uh then the only thing that i think we're remaining with is just to implement our form okay so let's do that right away and i'm going to create a new component inside my source folder close this down and i'm just going to call this search bomb dot js like that and i'm going to say array fce and we're importing the search form and um what do we need to import we need to import the use date because i want the state to be managed by the form locally so use state excuse me and i'm going to set up my state values right away and i'm going to say const what they call this um text and set text and this would be equal to use state and by default it's going to be an empty string okay so once i do that then i want to create the form and i'm going to create a form right there with no action and i'm going to create an input and the input will be type of text and with the placeholder that says let's say eg politics politics right there and then we're going to have a submit button a button of type submit just saying search right there is that it let's save that and let's render it to see how it looks so right where was it where did i have my comment for the form right here so i'm going to remove this comment and i'm going to say search oops i want to render my search form component really i want to render my search from components i'm just going to say search form and once i click enter then it should import it automatically for me right there okay so we have our search form let me save that and let's see how it looks we should have an input right there and then a search button right there so let's tile up the button a bit i'm going to give this a class name of bg green dash 400 let's say padding on the y of 1 padding on the x of 2 and rounded borders so rounded large and then let's say text white and then let's go inside the input give this a class name of padding y of one padding x of two like the button and then oh i've just realized um i want i don't want the the left border radius on the bottom so what i'm going to do is go inside the button right here or right here sorry and then say rounded uh dash right that's large which should remove this butter radius right there and then for the input i'm going to do the opposite where i'm going to say rounded does left dash launch like that there you go so we have our input right there and then we have our search button right there and i don't think i don't know what they've noticed but i've clicked the button and it has reloaded and i've just realized that i didn't add our loading animation so let me do the loading animation first so remember we set up some state values for loading and ease loading and set is loading sorry so what i want to do is uh the loading animation is dependent on this because this is where uh this is the uh the structure of our data how we are representing this on on the device so i'm going to cut this out and i'm going to place some curly brackets inside here and i'm going to do a conditional so what i'm going to say if is loading is true then i want to say um wait a minute what uh wait wait wait do it oh yeah okay if is loading is true then i want to return an h1 and h1 that says loading and then once it's false then i just want to return everything that we have inside here and remember that is loading is set to true by default right here so if i save this then we'll only see loading on the screen right there let me start this to be bigger give this a class name of text center merging top of 20 point bold and text for excel git excel 6 xl okay so uh by default because it's true then we have loading so we want to uh we want that when we fetch our data then we want to set is loading to false so that this no longer shows and instead this section with our data shows so just to show you what i mean if i change this to false you'll notice that loading it goes away and then we get we get our data but we don't want to do this manually so what we're going to do is once we see we fetch our data right there and once we have populated our state values then we just go below this and say set is loading to false like that and you'll notice that see that if i reload we have a loading animation and then once everything is loaded then we have our data displayed so that's simple it's just that and then another thing that i want to do is by default i don't want to reload the page every time i click this so what i'm going to do is inside the uh the form i'm going to place an on submit event on submit and i'm going to place it a function and i'm going to call this function handle submit and right away i'm going to click this function i'm going to say const handle submit equals to under oops this is an arrow function equals to android targeting the synthetic event of e where we're going to say oops where we're going to say e dot prevent prevent default like that so that once i save this and i try to submit this again you'll notice that it no longer reloads it no longer reloads because we are preventing the default now one thing that i want to do is insert the input we do we want to have an unchanged attribute so that every time that the input changes inside here then our form will manage the local state and then once we submitted that it's going to search for articles with whatever input we have inside there so i'm going to say unchanged equals to and i'm going to place it in an inline function where we're targeting the e event once again right there and i'm going to say uh once you target the e the synthetic event of e then i'm going to say set text which is our state value right there so we're going to say set text into e dot target dot value which will basically give us whatever is typed in and just to show that it works i'm going to go on a bigger screen right there and open up my console and i'm going to open up my components tab oops there you go components tab it took a while to load and remember this is now our form that we have and notice that the state is currently empty because by default we have set it to empty but if i come and change this to election for example you notice that it's not changed to whatever we have inside there so that means that this event the target to that value is actually working okay so um what do we need to do next what we need to do next is um once we have rendered our form right here then we want to pass in some props which will target this the term that is inside here and then we can now destructure uh the prop from here we cannot destruct it into the actual component and then we will set whatever we are destructed inside here so that it will uh go inside the input and when it reloads that explanation confused me okay let me try again inside our app.js we are going to pass in some props inside our search form component so that the probes are going to be targeting this term our state value of term which is inside here and it's going to be checking for whether we have changed the time or not so that when we submit uh the form then all of this is going to be run once again and then it will only return the results containing the time that we entered inside the form i think that's a much better explanation okay uh what props do we have inside here let me get out my cheat sheet and we have uh we have such text so i'm going to say search search text and we're going to set this to um we're going to set it to text which is basically uh the state value that we have inside here remember and then once we set this to text then we want to say uh we are targeting the text sorry we are targeting the text that we have inside here and we once we target the test then we want to say we want to target our set term function inside here and set that term into the text that we get from the input so i'm going to say set term into the text is that correct if it's not correct we're going to know in a moment now once we do this it means that we can now access this probe from our component let me save this we can now access this prop from our component with this crash okay did not and we can destruct it inside here by saying search text such text like that and then inside our handle submit then we just want to say uh such text we change it into that we pass in the text that we have our state value right so this this means that this prop is coming from right here such text which means that whenever this text changes then this prop is going to be targeted and it's going to uh it's going to call on this input once again which will change our which will make this function run once again but all is not complete yet all is not complete remember that all of this is dependent on the dependency array that we have inside here and what we want to rerun whenever all of this is called on once again is the term so all you have to do is just pass in the term inside here and then save it and then let's see if this works and let's say let's see joe biden let's see it says showing results about joe biden and there you go we have results about joe biden so it's looking nice looking nice but one thing that i want to do is now change this into capitalized text so that we have um capitalization for every word so i'm going to go inside this h1 and right before my media query here i'm going to say capitalize like that we should now capitalize it like that so if i were to say um animals it updates the state inside here because we have term right there so that it updates the state and we have results about animals and if i were to search for uh wildlife wild life then we have results about wildlife looking very very nice and uh what else can we search for um aoc i like aoc let's search for aoc let's see you see aoc anyway you can read those articles by yourself and of course just to make sure all of these articles do work but remember we're using the new york times api so they will always take you to the new york times api uh the new york times website i mean so you see that everything is always about the new york times website even this one will take you to the new york times website but then it knows uh but then it it shows really uh the type of article that you're looking at so i think that will basically be it i think that's a very good project we have implemented our search right there we have implemented um you know let me see if i can change this background image to the top so what i'm going to do is um i'm going to grab this all right i'm going to grab this and then add a media query oops at media mean width of let's say around 10 24 pixels oops i want to change this really i want to target the showcase and change this to top instead of right we should do that so we have some kind of article on the background that looks as if we are reading something so i'm going to save that and that's i think that will basically be it for this project it's looking quite nice looking quite nice now remember that from our api as a as i'd explained earlier is that we can't really access these images because they're technically not links to the images instead they're just like some stored local local valley if i get a way to access these images then be sure that i'll do a follow up for this video where i'm going to show you how to do it but remember that if you're doing anything anything all you need to do is practice practice and some more practice you just need to get uh to get used to doing things by yourself because you can't you can't really uh depend on tutorials of your life so this this actually works really nice and i really love it elections it's looking very nice if i do say so myself looking very nice so thank you guys for watching once again if you're watching on youtube remember to leave a like and subscribe leave a comment oh ah i would really like to know how you found out about me because i realized that uh i was taking some analytics the other day and i realized that my viewers are from all over the world and i really like to know how you really came to know of me or for my channel whether by accident or not and once you do that remember to leave remember to subscribe to the channel as well and leave a like and share the video so thank you for watching thank you guys for following the stream and i will see you in the next video

Channel: tsbsankara

Views: 3,306

Keywords: HTML, HTML5, CSS, css, css grid, css flexbox, javascript, es6, es7, react, reactjs, frontend, front end, web, web developer, web development, netlify, vscode, tailwind, tailwindcss, tailwind css, nytimes api, nytimes articles, new york times articles, news app, news application in react js, search form, building a search form in reactjs, styling react components using tailwind css

Id: m2aYEl14ekY

Length: 55min 12sec (3312 seconds)

Published: Fri Feb 12 2021