In this lesson we will be creating the front end side in this lesson we will be using J.
Quarry.
In general we would be using JavaScript to create the dynamic parts.
But in this lesson we will be using J query which is a tool to easily create a javascript.
This is the sample codes this code will show next stop HDMI all on the button element.
This code is to hide a button.
This code is to send data to the back end using objects.
You can easily understand the codes if you read it from the top.
There is another javascript library called react.
This is also becoming very popular if you wish to work deeper with JavaScript.
You can start with react although I do have to warn you that the entire library has quite a volume.
If you have some knowledge on javascript frameworks you may be able to understand if you are new to
it.
I wouldn't advise you to start with react since it is for more advanced developers.
For example we can look into the tutorial here scroll down you'll see code settings classes or using
elements to be returned.
You might not understand it just by reading the code from the top but once you do understand how to
use react you will be able to develop a great page very quickly.
Here you can see react component.
If we go through all this in this course it'll take too much of the time.
So you have the pros and cons about react if you wish to use it.
That's fine if you are quite new to framework you can follow me with Jake worry.
Also the site we will create won't be such a complicated one so you wouldn't need to go through the
hassle and using ranked.
Even with J query I will not be explaining each script in detail will be copy and pasting the codes
we need to create the site.
Now let's start in J query.
We have four types of projects for user interface mobile queue unit and sizzle.
Let's look into the J.
Query user interface.
Let's see the demos for example.
Dragon Ball.
This code will enable you to drag the object around the screen.
Let's see the source code.
You can click on View Source to see the sample code and the div.
We have the square with these three codes.
We can set the square to be dragged around.
There's so many more things we can do let's look at date picker.
I bet you've seen one of these in registration sites or travel agency sites.
You can create a box that will show you a small calendar for you to choose a specific date very easily.
Let's check out the source code.
It's very short and simple.
You create a date picker with a p tag then you set the date picker as a function.
There is a lot you can do with the user interface.
You don't have to go through each and every code but it's always good to take some time to look into
the options you have.
Now let's go back to the top.
The Q unit is for unit testing and sizzle is a factor in this lesson we will be using the J Cory mobile.
Let's look into it.
Go to demos will choose the demo on the top.
The purpose of the J query mobile is to optimize the site to a mobile friendly interface.
Let's see a sample.
Click on buttons.
We're looking at this site through a regular browser.
If you are using Chrome you can click on the dots on the right hand corner choose more tools and click
on developers tools once we click on it you will see this small window open up on the left top corner
you will see a small smartphone looking button if you click on this button the screen will be minimized
as if you are looking at the site with the smartphone you can see that the buttons have been optimized
here I went back to the previous page.
Let's check on slider you can see the slider which fits nicely in the mobile screen.
Let's clear the settings and go back to the site so that was a quick look at what Jake worry mobile
can do.
Again we will be using Jake worry and Jake worry mobile.
The website is a TTP.
S call on slash slash.
J.
Query mobile.
Dot com go to downloads.
You will find Jake worry.
Mobile one point 4.5 zip file on the top I will include this in our source code.
So you do not have to individually download this file if you prefer to download it.
Now you can do so from this Web site lets start downloading the zip file.
Once we've finished downloading I want you to see these codes telling us what else we need to prepare
the first code is included in the zip file.
The second code is showing the J.
Query one point one one point one which is not included in the zip file.
This last one is also included in the zip file.
This means we need to download the J.
Query one point one one point one copy the link and open the site.
Now we will directly save the site once we save the site.
We can close the browser.
You can see the zip file in the Minjae s on the desktop.
We're going to move it into the project right click on static folder choose new and click directory.
Name it C S S and hit.
OK.
We also need to create a directory to save the image file.
So right click on static again and choose new click directory and name it.
I m g and hit.
OK again go through the process to create another directory.
We'll use this to set the JavaScript So let's name it to J.
S drag then men file to the J S directory hit.
OK to this message you can see that the main file is in the J S directory unzip the zip file in this
folder look for J carry one point 4.5 Min J S file drag this to the J is folder and hit.
OK go back to the unzip file and look for the J query mobile.
One point four point five men see SS file drag this file into the C S directory.
We just made and hit ok let's close all these tabs for now as we click on the C Ss folder you can see
that the min C S S file is in the C S S directory.
Now look for the images folder there are some logo images that we want to access so let's drag the entire
folder to the C Ss directory and hate OK let's quickly check the directories in the C Ss folder you
will find the images folder and the men C Ss file and the J S folder you'll see the J query mobile one
point four point five men J S and the J query one point one one point one men J S right click on the
tabs and close all the tabs.
Now we need to download some of the logo images so we need to go back to the browser Google drone and
hit the image tab click on settings and choose advanced search set the file type as pink file filter
the image rights to free to use share or modify even commercially.
Now hey advanced search.
Choose whichever image you want and download I'll choose this image here right click on the image and
save image onto my desktop minimize your browser you can see the drone image that we downloaded let's
change the file name to drone ping now drag the image onto the image folder hit ok we quickly went through
the settings but I will have all this in my source code now we are all set.
I'll see you in our next lesson where we start creating the front end.