fetch

05 Giphy fetch making img tags



Sharing buttons:

again here we are to continue talking

about JavaScript and working with you

know external api's and you know so far

we're doing pretty good we've got fetch

working for us and it's printing a bunch

of URLs and we just need to turn these

URLs into images on our web page okay

and then later we can connect it to the

search the search parameter that you

type into the box here and then we'll be

in pretty good shape to apply some

styles and then our site will be done

right so let's let's talk about it right

so here I am

and so far I've I've looped through all

my JSON data and I got the URL okay

so what I need to do next is I need to

generate for each one of these I need to

generate an image tag and insert that

image tag into the Dom and I'm gonna put

it like right here where we're at you

know I put this comment gif images here

right so it's gonna go in this thing

that's class results right so let's

actually you know be kind of good if we

gave this an ID and that would kind of

imply there's only one of them but we

can actually use this class results to

maybe actually maybe the ID would be

good let's put an ID on this because it

should really only be one of these we'll

call it results as an ID also right okay

cool

so we got that and now let's let's

generate it here so essentially we got

to get a reference to the so the to the

results element first and why don't we

put that inside here let's say and I'm

gonna put it before the for each loop

okay so I'll say Const let's say element

let's say results element equals

document dot get element by ID

and then we'll say results and it'll

need to zoom out just a little bit okay

so we got the element here and we'll use

this to you know insert all of our

images over here and we can do that with

innerhtml

right so let's make another variable I'm

going to say let results equal you'd

make this even maybe how about results

string or result HTML equals an empty

string right and we'll want to put this

into the inner HTML right so there's our

mechanism right we're gonna get a

reference to an element in the Dom we're

gonna make a string put a bunch of HTML

in this string and then insert that

string into the inner HTML so when you

do enter HTML essentially it just

replaces everything inside of the

element that you're targeting so all the

inner HTML everything here is replaced

right so and it'll be replaced with

whatever is in result string so right

now it would be just an empty string

right there'd be nothing there but what

we're gonna do is we're gonna generate a

bunch of images here so what we'll do is

we'll say you know results results HTML

plus equals means append to so we'll be

adding you know whatever we put on this

side everything inside these quotation

marks will go inside of you know this

string or be added to the end of it

right and actually I'm going to use the

backticks here instead of the straight

quotes right so we can insert variables

in here and what we want to use is an

image tag oops right just like you would

use if you were making a regular HTML

page and the image tag always takes a

source right source attribute and you'll

put the the URL here so basically the

URL is is this guy right

so let's actually to be hard that it'd

be kind of long to type this whole thing

in here so why don't we break

this thing apart right and what we'll do

is we'll say Const URL equals object

images fixed-width URL right and then we

can take the URL and put it inside here

like this right

oops I'll take a URL like that right

okay and that looks pretty good and

actually we should put a couple other

properties here so we should probably

say what the width is

right and we can get that also from our

from our object right if I recall it's

let's actually I think it's this dot

width like that right but let's test it

so if I take off the URL up here where I

just print the fixed width object right

then when i refresh here oops oh I got a

problem what did I miss there let's see

a template literal expression cannot be

empty line 41 let's see

oh I got to put something in here let's

put width in there right and then we'll

refresh oh there's all our cab okay it's

actually working right so I got all the

cats there they're all different heights

and then there's all the data so I was

corrected with the height they give us

the height also and then they give us

the width right so this one's height of

150 and with the 200 and then down here

this is high to 200 and width of 200

right so maybe let's also get the height

so this will be object dot images dot

fixed-width dot height you know and we

can insert that over here height equals

and then we'll insert the height like

that and there we go right and if you

want you can break this into multiple

lines if you're using the back tick

right so so if you want like maybe it's

easier to read if we write it like that

you know where we put the attributes

each on their own line and then really

our images should have an alt also and I

don't know that they give us that

information you know what I think it's

actually up higher so let's see if I

just go up two images right here oops

and and refresh here you can see it

gives me all these images and they give

us I actually you know what we got to go

up even further let's go up to object

and see what object looks like right

what did they give us here they gave us

analytics bitly URL embed images Oh slug

funny cat animation title maybe we

should take the title and include it as

the alt tag so I'm gonna go here and add

another attribute so I got to make sure

I don't lose this little arrow at the

end and the back tick and we'll say alt

equals and what I was I gotta put that

quotes and then the dollar sign here and

then we'll get what was that object that

title

right so we can do that if we want to

follow the same pattern that we're doing

up here we can say Const title equals

object dot title and then we can just

use title down here so maybe that's kind

of a nicer way to do it right so let's

refresh and then let's check our work

okay so this looks pretty good and I

think it's working here what if I like

this cat with the iPhone there so what

if I go here and I inspect this and I

look at the image tags that I'm creating

and you can see there's the source it's

got a height of 200 with the 200 and

then an alt of cute cat gif okay so

that's pretty good I think we're in

really great shape here too to continue

so why don't we stop here and then we'll

add a couple features and get our search

our search form working in the next

video