Placeholder Image

字幕表 動画を再生する

  • Hello, everybody.

  • Kyle here from Web have simplified.

  • I know, I know you have seen a 1,000,000 weather app tutorials before They're all over the Internet.

  • But in this weather app tutorial, I'm going to be doing one thing in particular differently, that none of the other tutorials I see do And this could down the road potentially save you a ton of money.

  • So make sure you don't miss that.

  • Let's get started now was quick.

  • Take a look at the application we're going to be building.

  • First thing you do down here, enter some location that you're interested in.

  • You'll see we get a list populated to the bottom, and as soon as we find a location that we want, it'll show us the status.

  • Give us an icon.

  • His balls are wind, speed, temperature and precipitation, and this also is based on the location here.

  • So this isn't Fahrenheit and miles per hour because we're in the U.

  • S.

  • But if, for example, we decided to go with England and we click here, you see that the temperature is now in Celsius and the wind speed is in kilometers per hour because it's based on the location that you type in.

  • Now, to get started with this weather, we need to have some A p I to access in order to get both the weather information as well as this location information down here for the different places on Earth.

  • So to get the weather information, we're going to use the dark sky a p I All you need to do is create a simple account on here.

  • It's easy and free to do.

  • And here's all the FBI documentation we need And the important thing you need from here is an A p i ke as well as the documentation on where to call.

  • Get your a p.

  • I quit.

  • You just click on the consulate here.

  • It'll show you're a pikey.

  • I'm going to be resetting this after this video so don't actually use this ap ikey.

  • Make sure to create your own because this will no longer work afterwards.

  • And the one crucial mistake that most people make is they take this ap I ke and put it directly into their JavaScript on the client side.

  • And the problem with that is, if we go back to the documentation and scroll down a little ways this a p I if you sign up for a paid account, will actually charge you for the number of requests that you make after a certain amount of free request.

  • So if you put your A P i p in the Java script itself, then you're gonna be opening yourself up to someone stealing that a p i ke and using it for their own means while charging you fort.

  • And this is a mistake so many people make.

  • So in our video, we're gonna make sure that we put our A p i ke inside of the server so that no one has access to it except for us you think we're going to need is we're going to need to use the Google is a P I.

  • Which is what's populating this little list down here, which is going to be the Google places a p I.

  • It's quite a bit more difficult to set up, but I'm gonna walk you through all the steps needed when we get to that point.

  • The first thing we need to do, though, is set up our server using know Js.

  • So let's open up our visual studio code here in the very first thing that we need to do is type in N p M in it.

  • And this will allow us to set up our project with a package deal.

  • Jason, we just hit Enter a bunch of times here to get all the default options, and illiteracy will have an empty package.

  • Jason here.

  • Next, we want to install all the different dependencies that we're going to need for this project.

  • Luckily, since our project is mostly front end facing, we don't have very many dependencies, our main dependencies here that we're going to have.

  • So it's a m p m I.

  • We have Axios, which is going to allow us to call the AP eyes that we need.

  • It works very somewhere to fetch.

  • Does if you're familiar, that and also we're gonna need express because that will just make setting up our server much easier than if we use the default note.

  • Http module and also we want a few development dependencies.

  • So we'll say mpm I dash dash save Dev, These will essentially only be for one we're developing and we want Dottie Envy toe load in our a p i ke as well as node mon toe automatically refresh our server for us.

  • Now that those air done, let's set up a simple script here in order to run our server.

  • So what is called us?

  • Deb Start.

  • And we're just going to set this to Newman and we'll call it server that Js This is just going to be the file we create that has all of our server code.

  • So let's create that file now, serve a dodgy s.

  • Luckily, as I said, this is a really basic experience application.

  • The first thing we want to do is we want to actually load in our environment parables.

  • So we're going to check our environment to make sure we're not in production.

  • And to do that, we could just say that our note environment, a variable is not equal to production.

  • And if that's the case, we wantto require that Dottie Envy Library that we loaded in for development and all we want to do is call dot config.

  • This is going to load in everything we put inside of our Dottie envy file.

  • So let's create that Dottie and B file right now and in here.

  • We're going to put our A p i ke so we may find that a Paki, Remember, it's on the consul section.

  • We could just copy to say, Packy and this is the dark sky a p i ke.

  • So we'll just call it such and set it in there.

  • And now we have access that a pikey from inside of our server by just calling.

  • This will say constant dark sky a pikey.

  • And we're just going to set this equal to our process dot envy, which this is going to populate that variable for us.

  • And again, we want Dark Sky, a pikey just like that.

  • Let's expand our browser Lovett and there we go.

  • Now the next thing we want to do is actually set up our server.

  • So we're just going to say, Content Express is equal to require express, and we want to set up a trap, which is just going to be the express function being called.

  • And lastly, we need to set up what we want are apt to use.

  • This is going to be really basic.

  • We want to use Jason because we're going to be sending Jason to our server.

  • So we'll say express Jason and we also want to set up our static folder.

  • So we're gonna say app that use express Thet IQ and this static is just going to be inside of a public folder.

  • This is just standard practice to use the public folder here and our a p I is only going to have a single endpoint.

  • So I'll say apt outpost.

  • And we want this to be our weather end point.

  • This is going to get our weather for us from the dark sky, a p i and again like I mentioned, this is where a lot of people mess up.

  • They actually put this inside of their front end, which means that a P I ke is exposed to anyone that has access to the Java script, which is anyone that knows how to use the developer tools inside of the browser.

  • It's very unsafe, and we definitely don't want to do that.

  • Is that if you were going to implement this later, for now, we're just going to leave it blank, and we're going to actually tell her server what to do.

  • So we're gonna say ap dot listen, tell what the port in our case will just use 3000 and then this is going to return a function here, and this is going to run when the server starts up.

  • So we'll just say, Consul, that log that the server has started that way.

  • We just know when things are working and if we save that and we do and PM run, Dev Start, which is that command we created in our package dot Jason, we should see everything start up just fine, and that's perfect.

  • And now if we go to our local host 3000 you see that we cannot get slash, which is perfect, because we haven't actually set up an end point for our server here at slash.

  • But we know that our server is actually running right now.

  • Before we jump any further, I want to set up a dot get ignore file.

  • And this is for when we're using version control to store stuff we don't accidentally check in our environment variables or a node modules.

  • So we want to ignore environment variable folder and our Node Modules folder here.

  • Make sure you put that isn't underscore, and that'll be that we never accidentally check this into our version control because we don't want to expose us anywhere.

  • As I said, since people can use this to charge us now let's create our public folder here.

  • This public folder is going to contain all of the different code for our front end.

  • So the first thing we're going to have is an index dot html.

  • This will just be our main page.

  • We're gonna have a Stiles Nazi SS for style in our weather app as well those script dot Js which is just going to run all of the different JavaScript we need.

  • In order to call the AP, I I want to get started by rendering out our index dot html page.

  • An easy way to get started with this is type exclamation point enter in visual studio code and it will create the boilerplate code for us.

  • Next, we're just gonna title this weather app and we also want to include in here our style tag.

  • So we'll say wink, a trip is going to equal that styles Nazi SS.

  • And we need to tell the browser that this is a style sheet, so that knows how to actually parse this data.

  • And lastly, we wanna have a script tag here which the source is just going to be equal.

  • Script out J s close that off and make sure that we defer.

  • This is that it's going to load after a pages done rendering now inside of the body here, we can actually do the code for our weather out.

  • So let's take a look at what we have.

  • As you can see, we have a container here which contains this header section with an icon as well as the information for our status location in all of the different details of our weather.

  • And then finally this input down here with our different options for the places.

  • So the very first thing we're gonna do, because we want to wrap everything inside of the container.

  • So it's going to give a class here of container Close that off and everything inside of here first thing we're gonna have is our header.

  • So again, what if she's a dead for this?

  • Give it a class set that equal the header And the only thing that we needed said of our header is their icon icon is going to be inside of a container again.

  • What is called this icon container.

  • That's because we have this nice white circle around it and our icon, we're actually going to be using canvas poor because we're going to be using a library which will importer icons and the library takes canvas icons.

  • So we're gonna credit canvas, given an idea of icon so we can reference it later.

  • We're also going to give it a with here of 100 a height, which is going to equal 100.

  • Close that off and that's all of our header section done.

  • Next, we wanna work on the content section of our page.

  • So after a header, what's creating negative?

  • And this day, if we're just going to give here a class, which is going to say content, I can't type today, apparently, and inside of this content section, we have our general information as well as our details.

  • So what's credit did for the general information?

  • We just call it general information, make it nice and straight Ford's that we know what everything is doing, and inside of here we're just going to have to dibs first if it is going to have the class of status and close that off.

  • And the second did that we're going to want down here is going to be our location.

  • I don't know the first thing that we notice If we refresh this page, we want our default text so we won't enter a location to be here.

  • We want to find the weather to be our default text for our location.

  • And this is just what's going to load as soon as we refresh our page.

  • We want the same thing down here for all of our different details of our weather.

  • So now we can go down into our detail section, which is going to be after our general information.

  • Make sure this is a div with a class of details section.

  • I really can't type today.

  • There we go.

  • Now, instead of this detail section, we're gonna have a bunch of different details and we're just gonna give them a generic class of detail so we can share all of our different styles between these different sections.

  • And each one of these details is going to have a diff with a class of title just like this.

  • And our title for the 1st 1 is going to be wind, and then we're also going to have a diff, which is the value.

  • So we just give it a class here of value, and this is just going to say to be determined as a default value.

  • Now it's copy this down two more times because we're gonna have three details in total.

  • And we want this one to be temperature in this next one is going to be a precipitation.

  • And there we go.

  • The last thing that we need to do is actually put in our location input.

  • So to do that would scroll all the way down to the bottom.

  • Here, we want to put this inside of all of our containers.

  • Stow.

  • So let's just put it right here.

  • We're going to give it a div that is going to be wrapped around.

  • Just gonna call that our city search container because it's just the container that we're going to put our search bar inside of, and then we need input, which is going to be our texted put.

  • So we'll make sure it has a type of text here, and we want to give it a class of citysearch.

  • There we go.

  • That way we can actually use this and we're just going to give it a placeholder as well.

  • Which is going to say Enter location?

  • Because, as you can see here, it has that placeholder text and we'll close that off.

  • And that's all of the actual code that we need.

  • And you will notice one thing.

  • We have a link down here at the bottom that says, Powered by Dark Sky, and this is required to use the dark sky, a p I.

  • It actually is mentioned in the documentation, so we need to make sure to put that link.

  • So let's go down at the very bottom of page outside of absolutely everything, even this last container native.

  • What is going to put an anchor tag?

  • A trip here is going to go to https colon backslash bash got dark Sky Troops can't spell dot net slash powered by, and this is just required by the documentation.

  • As I mentioned, let's also give a quick classes weaken style this as our dark sky logo and close that off and we want to say, powered by dark sky Perfect.

  • Now we have all the requirements that we need in order to actually render this properly.

  • Now, if we go over to our page here and we refresh this, you'll see that all of our information is being shown up by Zoom in quite a bit.

  • We can see all of our different sections are showing up.

  • Obviously, nothing has styled yet, but that's okay.

  • Now that we have all that out of the way, all we need to do is set up our Google maps.

  • A p I.

  • Let's go over to the Google Maps page here.

  • You could get this special's going to console dot cloud dot google dot com and we'll bring it to this page here.

  • And all you need to do is create your own application.

  • Before you're gonna create a new project, we're gonna call it whatever we want.

  • I'm just gonna call it weather app tutorial so that I could easily no, this is and we click create.

  • There you go.

  • This is going to set up.

  • Our project is going to take a little bit of time.

  • But that is no worry.

  • Now that we have our project created, we can select this project.

  • You should see that it says weather app tutorial up here or whatever you named your project.

  • And from here we actually want to start setting up our project to use the correct AP eyes.

  • So all we need to do to do that is go to the A P I and service is section which is in the menu, and we click library from here.

  • We can search all the different AP as we want to use.

  • And there's two in particular we need to use.

  • The place is a p I, which you can see right here.

  • Click on it and we want to make sure that we enable this as soon as that's done being enabled.

  • We need to go back to the library section and enable one more library.

  • So we'll just go back a few times and it's still here.

  • We need to use the Js maps, so let's see if we can find it by typing in Java script or maybe maps, maps and there we go maps JavaScript, a p I.

  • We also need this enabled so that we can use the Google Maps job of script a P I.

  • As soon as we enable both of those, we need to set up in a p i ke, which we can use inside of our JavaScript.

  • And now this AP ikey is a little bit different than the other a p I cases that we've been worrying about because we can actually share this ap i ke in our public Java script because it's not anything that we can get charged for.

  • So in order to set up that a pikey, we just go into this text box here type and credentials.

  • You see, credentials pops up and here we need to create some credentials.

  • We want to create an AP AKI so we can use in our application and we want to actually restrict this eight Jackie.

  • So click restrict key and assumes that loads we want to throw down here.

  • We want to strict by a p I.

  • And we want only the place is a p I and the maps JavaScript, a p I the two that we just enabled.

  • Now we can click Save and this AP ikey will only be able to be used for those two particular AP eyes that we want to use now with a p i ke set up last thing, we need to do is look at the documentation to set this up.

  • To do that, we're going to go to the place is a p.

  • I click on that scroll down until we find the documentation and we want to make sure that we look at the Java script documentation.

  • And inside of here is all the documentation we need to set up.

  • This place is section, and the most important thing here is that we want to be able to load our library properly.

  • So let's just make sure that we click here to choose our A pikey.

  • This is going to load up real quick, and we already have our weather app tutorial selected as well as a credential that we just created.

  • So we'll insert that and we're going to copy this.

  • This is a script tag we need to include inside of our JavaScript.

  • So let's open this index dot html up scroll all the way to the top.

  • Make sure it's above our normal script tag.

  • We're gonna pace that end, and we need to make sure we add defer to this so that it loads after the entirety of our javascript and html was loaded and not before.

  • Now, if we say that we are overloading in the Java script a p I that we need in order to use that drop down list.

  • Now, with all that boring stuff out of the way, we can finally jump into the fun part of this tutorial which is creating the actual job script that's going to call this whether a p I forests and return the information to get started.

  • We first want to get our each team male input element.

  • We're gonna call it our search element, and we could just do document dot query selector.

  • And right now, we don't have anything good to select by.

  • So let's go into our index that each team will scroll down here and we're just gonna put a date attribute on here.

  • We're just gonna call this data citysearch and I would we can use this data attributes instead of our query selector instead of brackets just like this.

  • And this is going to get us our search element.

  • Next thing we want to do is create our search box.

  • This is going to come from that a p I for Google that we just set up And to do this, we could just say new google dot maps dot place places sorry dot search box.

  • And this is gonna be capital search box.

  • And instead of here, we just passed that search element that we just queried.

  • So it's essentially says at best, there's elopement right here.

  • We want to set up a search box, and then we can set up a listener on that search box so we can say search box dot ad listener.

  • And it is not at event Listener.

  • This ad listener, this is specific to the Google A P I.

  • And the listener we want is places changed.

  • This means any time that the check for the box instead of our HTML has a place selected inside of it.

  • This is code inside.

  • This function is going to be called and it doesn't actually pass the place that was changed.

  • I wish it did, but it doesn't.

  • We actually have to get that place from the search box so we can say the place is going to be equal to search box, don't get places, and that's actually returns an array of places, and in our case, we only want the first place.

  • So we're going to get the first place that's being returned.

  • And of course, we want to check first to make sure that this place is not equal to know.

  • So if it is equal to know, all we want to do is just return because we can't do anything if we don't have a place.

  • Now, where do we check to make sure our place exist?

  • We want to get the latitude and longitude so and the reason we're doing this is because if we look at the documentation for dark sky, scroll down just a little ways Here you'll see that we need to have both the latitude and longitude inside of our coal.

  • For what?

  • The a p.

  • I.

  • S It doesn't actually take a city or anything.

  • So in order to get the latitude, we could just say place, dot geometry dot location.

  • And this is going to have both the longitude and latitude so we can say dot wet.

  • It's actually a function and we could be the same thing for this One is dot elegy for longitude.

  • Make sure he typed that out and you can get all the information on all the different methods and properties that this ap I returns to us by just looking through the Googles ap I documentation right here for the places section.

  • But since I already know what it is, this is all we really need to worry about forgetting the latitude and longitude.

  • Now we can do the fun stuff which is actually calling our a p I which we created, which is slash weather and sending it the latitude and longitude that we need.

  • So in order to use fresh, we need to tell what method we want to use.

  • In our case, this is going to be a post method because in our server we set this up as an app that post next we want to send it the different information we're gonna need for our headers.

  • This is just our application knows that we're standing at Java script.

  • To do that, we want to use content type.

  • We want to set this to application slash Jason.

  • This just says that we're going to be sending Jason to the server and for the except which is just capital.

  • Except we want to set this as well.

  • Toe application Dodge a son slash Jason.

  • Make sure I spell that correctly and it's just says that we're going to be getting Jason back from it.

  • And now we can actually send the body of our application and this body needs to be a Jason object.

  • But we need to string ify it.

  • So we need to say Jason dot string if I and in here will pass the object we want to send to our server.

  • In our case, we want to send the latitude and we want to send the longitude and just like that, that's all the information we need to send my spell, whether correctly and this is going to post to our server, then obviously we're going to have a dot then which is going to take in the data that we returned, which is going to be a response.

  • We need to convert that response to Jason so we'll say resident Jason And then again, we're going to have a dot then which is going to give the data in an actual object format for us and instead of here what's gonna call function that we're going to create, which is going to called set whether data and inside.

  • Here it We're going to pass the data as well as the location.

  • So we'll say place that formatted address and this formatted address is just going to send it.

  • Zoom this out.

  • It's going to send us this string down here so that we can place it up here, which is going to be really nice for us.

  • Now back to our actual application.

  • Assume that in so Caesar to see.

  • And we're going to go to our server and rocks.

  • You're just going to in here consul dot log request dot body.

  • We just want to make sure that we're getting the information sent to our server.

  • So if we check our walks down here as soon as we enter a location, pushes refresh our page.

  • First, make sure all of our job script changes.

  • Aaron here and type men will see that we get all of our stuff being pre populated, which means our a p I integration worked flawlessly.

  • And if we click this, you'll see it sends to our server and logs out latitude and longitude and that's perfect.

  • Now, inside of our server, we can use this dark sky.

  • Ap ikey, in order to call the dark sky a p I and this is all going to happen on the server.

  • So no one has access to it.

  • Which again is the one thing so many people miss out on when doing these types of tutorials.

  • It's now, let's open up the dark sky a p I and see what the r O looks like.

  • Let's just copy this over.

  • This gives us our forecast, which is exactly what we want.

  • We're gonna paste this in here instead of a string in tribulation.

  • So the first thing we need to do is pass in our key.

  • So let's just replace this variable here with our dark sky.

  • A pikey just like that.

  • Next thing we're going to do is our latitude.

  • So again, we're just going to replace that here with a request dot body dot latitude and we want to do the exact same thing.

  • This is going to be far longitude, so replace that.

  • But instead of latitude, we want longitude.

  • And now this is the euro that we're going to use for our server.

  • So we're gonna set this into a variable call.

  • It girl is equal to that and The very last thing we want to do is we want adequate parameter, which is called units.

  • We're gonna set that equal to auto.

  • This just means that our units are going to convert based on the location that we query.

  • So if we query somewhere in the US, for example, it's going to be imperial units and if we career somewhere in England or in Europe, it's going to use metric units.

  • And now we can actually use Axios, which works just very similarly to fetch.

  • So we want to first require access, appear constant access is going to be equal to require.

  • And we're just gonna technic Axios here, every go and now we can use access.

  • In order to do this.

  • We just call it like it's a function and we're going to pass it an object.

  • The first parameter of this object is the You are all that we want to query, which in our case, is just this euro variable that we created.

  • Next thing we need to do is since we're using access, we could just say response type and set it to Jason.

  • And this does all the fancy stuff with headers that we had to do over here with fetch for setting the content type in the except and this just says, Okay, we're gonna be getting Jason, so don't even worry about it.

  • Also, it takes care of the step here where we had to do that dot Then for resident Jason, it does all that automatically force.

  • So now, here, inside of our dot Ben, we just have the data of our request back from us.

  • And if we look through this FBI, you can see it gets sent back a ton of different data and all we actually want is our current data.

  • So in order to get that, all we need to do is say whoops, data dot data because it's going to be coming inside of an object and data here is just the actual data from the response.

  • So now, once we have data is where object starts here, and we want to get just the basic current information.

  • So we're just going to say dot currently and this is going to be the section instead of our code, which is the most up to date current information for a budget, latitude and longitude.

  • We sent to dark sky, and we want to send this as Jason back down to our server.

  • So we'll say resident Jason.

  • And this is going to send a Jason version of this currently variable back down to our JavaScript here inside of our event.

  • Weaken.

  • Comment out this function here.

  • We could just do a simple consulate log of our data.

  • And if we save that, go back to our weather application.

  • Refresh this here and we again type and location click on this.

  • And if we inspect our page, you see that if we go over to our consul, you see, we get an object, your intern and this object has all of the different information that we need inside of it.

  • As you can see, we have her icon that will be using.

  • We have a precipitation are summary, etcetera, etcetera that we're going to be using to populate all of this information instead of that function, set way the weather data.

  • So now it's actually create that set weather data function.

  • Scroll down here we can say function set whether data it's going to take our data as well as a place.

  • And instead of here we want to get all of our different elements, and right now, we don't have an easy way to do that.

  • So again, we need to add some selectors to these elements.

  • So wait right here.

  • We're just going to say this is our data precipitation free situtation can't spell very well right here.

  • We have our temperature, so we'll say Dada temperature.

  • And this is just so that we can select these elements and our job a script again.

  • We're gonna do the same thing for wind Sroka ways.

  • We have our location, data, location, and we have our status.

  • So data status.

  • This should be everything that we need to select inside of our job script.

  • Back in, Dr JavaScript, What's great variables?

  • Fifties.

  • So the first thing we want to do is get our location element.

  • We're gonna set that equal to document that query selector for that data location selector that we just created was copy that down a bunch of times.

  • Next, we're going to have status.

  • So the status element if I can spell that, Really?

  • It is not a good day for me for spelling.

  • It's gonna be data status next.

  • After that, we're gonna have a temperature, and this is gonna be data temperature.

  • And it's just really fun.

  • Repetitive stuff, of course.

  • Precipitation and precipitation.

  • Body little Ah, no, no, no fun.

  • And finally, very last one here is going to be wind and remove that extra one that we don't actually need.

  • And now we can have the fun part of actually setting our data.

  • So the first thing we'll do is we'll say our location element dot text content.

  • This is just going to be the text here which is going to replace enter location.

  • And this is just going to be the place that we sent down here.

  • Next, we want to do our status, so we'll say status element dot text content and is going to be equal to data dot summary.

  • And as you remember, oops, I cannot spell it all.

  • When we looked at our consul logs over here.

  • Open that up.

  • You see that we had a summary object instead of here, and this is just the summary statement.

  • Next, we're going to do temperature text content, and this is just data dot temperature.

  • And if you want to get all this information, it's of course available on the dark sky, a p I, as well as in the council long that we printed out.

  • Next, we have precipitation dot text content, and this one's going to be a little bit more confusing because we want to convert this to a percentage because it actually returns to us.

  • It's decimal, so we'll just say data that precip probability.

  • And we won't just multiply that by 100.

  • So we get it as a percentage and put a percent sign afterwards.

  • There we go.

  • And lastly, we're going to do wind element, not text content.

  • We're gonna set that to the wind speed, which again is inside of here.

  • Now it's closed that out.

  • Save this, refresh our page and we're gonna enter in a new location.

  • Click on this and you'll notice that nothing actually happened.

  • So let's inspect our page to see if we got an error.

  • You see that we did get no air, But as you will notice, Of course, we didn't uncommon out our function.

  • So stupid mistake.

  • Uncommon that back out and refresh our page type in our location again.

  • Save this annual C.

  • We get everything being populated up here.

  • Well, it looks like wind and precipitation or not being populated for some reason.

  • So let's look at why that is.

  • I'm sure we have a consul dog hair.

  • We click over to our counsel, you'll see that we had percent.

  • Probability is not defined.

  • So that's of course, Have a slash here instead of a dot bilaterally done.

  • Okay, Refresh one last time.

  • This should do it again.

  • We'll type in Boston.

  • Well, actually, do Norway.

  • And there we go.

  • Everything's perfect.

  • Temperature, wind, precipitation.

  • Everything is pulling through.

  • And our entire AP, I set up minus, of course, the icon which we need to use.

  • And we're gonna be using something called sky cons, which is set up through dark sky.

  • So they integrate really nicely.

  • We could just go over here to the CD and Js for Skye con, and we just want a copy of this Min ified version here is just gonna be slightly smaller going to our index.

  • And of course, we just want to put this somewhere before a normal script tag.

  • So we're gonna create a script tag for it, make sure it's differ and we want to set the source here equal to that source, and this is just going to pull in that sky Cons library, and we can check out this guy Khan documentation.

  • So let's just search for that.

  • We'll go in here for Skye cons and, as you can see, is really straight for documentation for how to set these up grown a creative variable which is called Icon, which we're going to set equal to a new sky con.

  • And instead of here, we can define the color.

  • In our case, we're going to be using the color here, which is just too, too, too was just a really dark, great color for us.

  • Make sure this is actually sky cons instead of Scott Caan.

  • And now we have an icon and we can actually set and use.

  • So let's do that down here.

  • We just say I conduct set.

  • This is where the I D that we set on our canvas element went, As you can see here are canvas has an element of icon as an I D.

  • So we use that exact I d inside of this set here and just want to tell it we want it to be data dot icon because this dark sky FBI returns the string of the icon that we need to set.

  • And lastly, since these air animated icons we could just call icon dot play to make it start playing.

  • Now, if we refresh our page again, we'll search for Boston.

  • Click on this.

  • You'll see that we get a nice animated icon up here.

  • It looks really blurry, but that's because I'm zoomed in to 200% of my browser so you won't actually have this problem.

  • Also, we want to set a default icon for one.

  • Our page just loads because as you can see it, there is no icon.

  • So we'll just do that right here.

  • Will say, I cannot set again.

  • We'll get that icon here, and we're going to set this sequel to Clear Day.

  • This is just the default sonny image, and we're going to play this now If we refresh our page, you said we get the nice little animated son icon showing up on a page and right there, that's all the JavaScript code we need.

  • So now we can work on style on our page to make it look just like this over here which is going to be really fun to do open up our styles, that CSS.

  • And the first thing we want to do is the actual body style, because we have this nice yellow to orange colored background.

  • In order to do that, we just select our bio men here.

  • We want to set the background, and we're gonna want to set this tool, Vinnie rig radiant.

  • And we want this.

  • Just go to the right.

  • So we're going to put the yellow color on the left and the orange color on the right, and I'm gonna paste these colors in.

  • We're gonna be using his orange color and this red color and you can use really whatever color you want.

  • It doesn't matter.

  • So now if we save that, go back here, refresh, you'll see that we get that nice or in just red color showing up.

  • Next thing that we want to do is work on making sure all of our content is centered.

  • In order to do that, we're going to use display flex, which is a really easy way to make a center things so we can set the justify content to center as well as the line items to center.

  • But we need to make sure that our page has at least a minimum height of 100.

  • So we're gonna set the minimum height here, 2 100 view height.

  • It's that way everything will be centered.

  • And lastly, we just want to set the margin to zero and the patty into zero.

  • So we don't have any weird borders around the edges of our page.

  • Save that.

  • Refresh our page and you'll see now everything is already centered and looking pretty great.

  • Now to make styling everything really easy, we're just going to do a nice little trick that I do on every single page that I work on, select all of the different elements on our page before and after.

  • And we want to set the box sizing to be equal the border box.

  • And also, I'm gonna set the font family so it looks a little bit nicer.

  • I'm going to be using a fun called Gotham rounded.

  • You may not have this font on your default machine, but that's okay.

  • You can choose any fun that you want, and I'm gonna set this default front to sand surf as a fallback and refresh and you see already are fun.

  • It's starting to look quite a bit better.

  • Get the back 200% and now we can move on to styling our container here.

  • So let's like that.

  • It's just docked container, which we put into our CSS already, And this doc container is going to be fairly straightforward.

  • We want to set a maximum with here of 90% because, as you can see, we don't want to ever touch the edges of our screen or go past it.

  • So maximum with of 90%.

  • And we wanna have an overall with of 1200 pixels if our screen gets too big.

  • Because, as you can see here, if I expand the size of my screen at a certain 0.1200 pixels, it'll stop getting bigger because we don't want it to become massively huge on big screens.

  • So we have that maximum with here of 1200 pixels.

  • Next, we want to set the background color so this background colors just simply going to be white, very straightforward and also a box shadow.

  • Now, Box shadows a fairly difficult property to work with.

  • Essentially the first few values that you have is your offset for the wide direction in the extraction.

  • So first year of extraction, then we have y directions.

  • And then we have how much we want the shadow to kind of spread around in Blair and the color of the shadow.

  • So now if we saved that, go back over here, refresh, you'll see that we get a shadow at the very bottom because we offset by zero in the extraction, but by five on the wide direction.

  • So put a black border five down on our shadow, and it also spread out 10 pixels.

  • So, as you can see, it's a little bit around the corners, but mostly on the very bottom.

  • And again, box shadow is a fairly difficult thing to work with.

  • So I'd really recommend looking at the documentation for if you want to get into the nitty gritty of using box show next after we're done with our container, all we need to do here.

  • Lastly, we want to add a little border radius.

  • Give that nice rounded corner will say five pixels, for example.

  • We can now move on to style and the content of our page and the content is essentially everything that's not inside of the header.

  • So to do that, we're gonna add a bunch of padding to say 40 pixels, that we have nice spacing between the edges of our content and the inside of the content.

  • And also we want to set the margin top to be also a large number of 50 pixels because we don't want this text to come anywhere near our icon.

  • Now that we have the content style, let's work on the header header is going to be a bit more involved.

  • First thing that we want to do is actually set the background color for a header.

  • This background color, we want to be the exact same as our iconic color.

  • So again, if you remember it, that's just going to be 2 to 2.

  • Said that in there like that and we also want to set a height of 120 pixels and the reason we're hard coating this height is, though we can easily position our icon inside of it.

  • We're gonna set the display of flex and we want to justify the content inside of it in the center because we want this icon to be centered.

  • Also, we want to align our items to be flex end because we want the icon to show up at the bottom and not the top of the container.

  • And finally we need to add a border radius to this is well, so we'll say border radius.

  • And we only want this to be in the top left corner of our screen of the five pixels, and we want to do the same thing.

  • But for top, right?

  • And if we go back, Refreshers, you see, we have the nice rounded corners.

  • And if we get rid of these two borders, you'll see that our corners over here when we refresh our square.

  • So we need to make sure that we have the border radius here, as well as on our actual container itself, so that everything works perfectly.

  • Now let's go back here to make sure we have everything we need and we can start working on icon now.

  • The icon is going to be a bit difficult as wealth of style because we're going to need to position this using position relative.

  • So what set that position to relative?

  • All we want to do is put the top here 2 50 pixels and we want to set the padding to be 20 pixels.

  • And the reason we're doing the padding is so we can get some space around our icon where the white will show through.

  • So in order to make sure it's white, that shows through, we want to set a background color and his background color will be white.

  • Also, we're gonna set of actual hard coded width of 140 pixels and a hard coded height here of exactly the same thing 140 pixels.

  • And lastly, in order to make this a circle will set the border radius to be 50%.

  • Just like that.

  • Saved that.

  • Go over here and refresh and you see all right Con does seem to be a little bit too high, though.

  • Let's increase this top here to 70 pixels and refresh it.

  • And now it's actually dead centered inside of our line, which is what we want now under the meat and potatoes, we have our actual information for our weather.

  • The first thing I want to style is the general information.

  • So we're gonna select that class, which is just general information.

  • This is going to be again.

  • Just using display affects I really like display flex for setting up columns and items.

  • We're gonna set the flux direction to call them so that they're stacked vertically on top of each other like this.

  • And we want to just align the items in the center.

  • That is the real power of using fucks box.

  • That really makes it easy.

  • Tow line things up to center.

  • Also, if we're going to give a little padding around this so that nothing is too close to each other now, we can style the actual status.

  • We're going to give it a font size flips.

  • Make sure that I actually put this inside of here.

  • Font size, we're gonna use three are Ian, and we're also going to do a font weight of bold.

  • Now let's go back to our weather.

  • Have to refresh that, and that's looking perfect.

  • We can do essentially the exact same thing, but this is gonna be for our location instead on our location is doing to have a fun size of two r e m of fun, weight of normal, and we also want a little bit of a margin on the top.

  • So we'll say margin, top of 10 pixels.

  • Save that refresh.

  • And that radio, Our status section is exactly as we want it.

  • And all we have left is these details, sections and our button at the bottom.

  • So what's select our detail section again?

  • Type out that class name and we'll put everything inside of here.

  • And as you guessed it, we're gonna be using display flex with justified content space between this time so that we can get our elements based out as far apart from each other as possible.

  • And we're going to put the margin on the top to be 40 pixels again, just spacing everything out for us.

  • Next, we can move on to the actual detail.

  • Make sure I spoke this properly.

  • I'm terrible.

  • It's going today so onto the detail and instead of here again, you guessed it display flex.

  • This one's gonna have a full extraction of column because, as you can see here, everything's vertically on top of each other and we want to align our items in the center.

  • We also want to set a flex basis of zero.

  • This just means that everything is gonna grow from zero so that nothing is going to be different sized or two larger, too small.

  • Everything is gonna take up an even amount of space.

  • And lastly, we need to put flex grow.

  • We want to send this to a one so their elemental will grow if they can, in a padding of 20 pixels again spacing around everything.

  • Now, if we save that, go look over here already.

  • You can see her items are spaced out from each other, but of course, they're too small to read.

  • So let's increase that size quite a bit.

  • We could go into our detail here.

  • We can select the title and all we want to do for this is we set the font size to be to our Ian.

  • We're gonna make it flex, grow as well.

  • So it takes up much faces possible.

  • And we want this to be bold because this is our title.

  • So I said it.

  • The bold and the color is just going to be kind of a light ish great color 777 that we have blinds a little bit in the background.

  • Save that and they're your titles or set up perfectly, and all we have left is the value I just got on here detail that value.

  • And we want to put the font size of to R E M and a margin on the top again to space everything out of 20 pixels.

  • Now, if we refresh that every go, This is looking great.

  • But of course, you'll notice we don't actually have these borders between our elements.

  • So in order to do that, we're going to our index dot html.

  • We want our middle one to be bordered.

  • So what is going to give it a class here of bordered?

  • And instead of our styles, we can select that by saying dot detail dot bordered.

  • So the centre one in this case, we want to set a border on the left who is going to be one pixel solid, and we want to use that exact same 777 color.

  • We're gonna do the exact same thing on the right as well.

  • Now, if we save that and refresh, we get our border spread down the middle, and all we have left is our actual styling of our city selection box.

  • Right here.

  • First, we want to select the container it's inside of.

  • So we'll just say this city search container and yep, you guessed it display flux again.

  • And this time we're just using it so that we can send to our content.

  • And if we say that refresh, you'll see that puts it right in the center of our page for us.

  • Next thing we wanna do is actually style be select itself.

  • So we'll say Citysearch.

  • And instead of here, we're gonna put a large margin on the top again.

  • Just a space Things out.

  • We're gonna put the font size to to R E M again make it more readable for you guys.

  • Remove the outline so outlined.

  • None Border on this thing is going to be one pixel of that same exact solid 777 color.

  • And we're going to give it a nice little bit of rounding of five pixels, some padding inside of our input elements.

  • Lettuce spaced out from the edge is not right up on the edges, and we want the with to be equal to 100% so we have plenty of space to type in.

  • Now.

  • If you refresh that, you'll see that our input looks great, but you'll notice as we start typing our techs down here is still incredibly small.

  • So we need to use the goo a p i to style that.

  • And they have all the classes set up where you need to use them on their A p I.

  • But I'm just gonna list them out for you guys because I already know.

  • Is that what they are?

  • The first thing we need to do is the p A C item instead of here.

  • We just want to change the font size to be to R E M.

  • And we want to set some padding around it.

  • This p a C item is essentially each wrote inside of this drop down here, So we're just giving them a bit of padding and a larger concepts.

  • Also, this icon, if we type in here, use this icon that shows up on the left when my demon soc is there.

  • See, we don't actually want that icon, So we're going to remove that by selecting a p a C icon and we're gonna set the display here to none.

  • Lastly, all we want to do is again select P a C item query.

  • And this if we tie pin down

Hello, everybody.

字幕と単語

ワンタップで英和辞典検索 単語をクリックすると、意味が表示されます

B1 中級

JavaScriptで天気予報アプリを構築する (Build a Weather App With JavaScript)

  • 3 0
    林宜悉 に公開 2021 年 01 月 14 日
動画の中の単語