Hello everyone and welcome to this online Coding Bootcamp. This Bootcamp has been designed specifically to make your coding journey easier by utilising all of @YouTube functionalities such as the Timestamps and Cards. We will be using the Timestamps to break up our Bootcamp into sections, so that you can easily navigate to and from each one using the description below. I will also be using Cards in order to direct you to an external project you can try, based on where we are in our Coding Journey. I have also provided Code Sandboxes at the bottom for those stuck on code setup for the learning sections. I would advise to always type out the code to each exercise yourself, but as a safety net, they are provided as well. This 12hr+ Bootcamp is unsponsored and free and will always be free, so if you enjoy it please do give a big thumbs up and Subscribe! If you liked this course, and would like to buy me a coffee: https://www.buymeacoffee.com/aniakubow Weekly coding tips from my newsletter partnership: http://bit.ly/JS-tips Content: 00:00 Introduction 03:34 Code Editors -- HTML -- 06:05 HTML Introduction 08:22 HTML Boilerplate setup 10:55 HTML Elements 17:53 Online Portfolio Project -- CSS -- 20:05 Check-in 21:02 CSS Introduction 23:37 File set up 27:42 Class names and Id's 30:48 Pop Quiz 37:52 Box Model 39:56 Colours 44:12 Unordered and Ordered Lists 49:33 Images 54:22 Styling classes as id's 57:07 The Data property 59:00 Flexbox 01:01:45 Pop Quiz 01:03:41 Flexbox website layout 01:09:43 Commenting out Code 01:13:37 Gradients in CSS 01:15:53 Box Shadows in CSS 01:17:18 Button Styling in CSS 01:25:51 Fonts 01:29:25 Generic Website Layout 01:34:28 making a NavBar 01:46:54 Anchor Links 01:50:17 Creating Sections 02:13:50 Forms in CSS and HTML 02:26:55 Font Awesome 02:32:12 Break points 02:38:35 Z-index -- JAVASCRIPT -- 02:49:24 Check-in 02:51:07 Introduction to JavaScript 02:52:12 JavaScript file setup 02:58:39 Variables 03:16:15 Control Flow 03:16:40 If Statements 03:26:09 Operators 03:55:39 Fizz Buzz Exercise 04:00:59 for loops 04:07:58 Arrays 04:14:42 Objects 04:24:50 Functions 04:37:51 A Progress Exercise 04:48:20 Arrow Functions 04:52:21 While loop 04:55:23 Built-in-Objects Introduction 04:56:02 .length() 05:01:29 .concat() 05:06:41 .join() 05:12:06 .pop() 05:18:46 .shift() 05:22:13 .unshift() 05:25:32 .push() 05:35:51 .splice() 05:41:47 .forEach() 05:50:25 .some() 05:59:49 .map() 06:07:19 .filter() 06:17:06 .reduce() 06:22:27 .every() 06:28:25 .split() 06:34:25 Array work - Exercises to practise 07:18:06 .addEventListener() 07:26:09 .removeEventListener() 07:33:57 querySelector() 07:39:59 Check-in and Project suggestion 07:40:51 Math.random() 07:53:08 Let's make a Responsive Burger NavBar 08:10:12 Date 08:19:29 setTimeout() 08:29:00 setInterval() 08:44:11 Classes in JavaScript 08:52:16 Check-in and Project suggestion 08:52:58 Keys 09:01:46 switch case 09:22:51 .sort() 09:24:52 Introduction to Algorithms 09:25:16 .includes() 09:27:34 .contains() 09:29:52 .createElement() 09:38:22 Check-in and Project Introduction 10:27:07 Check-in and Project suggestions 10:28:16 Introduction to HTTP 10:36:55 fetch(). GET POST PUT DELETE 11:07:24 Check-in and video suggestion 11:07:53 Storing Projects on GitHub 11:15:58 Where to go next Code Sandboxes: at 04:05: To get started: https://codesandbox.io/s/tender-tdd-n... at 02:53:49: JavaScript set up: https://codesandbox.io/s/distracted-f... at 04:40:24: Functions Exercise : https://codesandbox.io/s/eager-tu-t2691 at 04:50:00: .length() https://codesandbox.io/s/xenodochial-... at 05:06:34: .join() .https://codesandbox.io/s/infallible-j... at 05:13:33: .pop() .shift() .push() https://codesandbox.io/s/optimistic-a... at 05:41:50: .forEach() https://codesandbox.io/s/sharp-ellis-... at 05:55:12: .some() https://codesandbox.io/s/admiring-lam... at 06:07:19: .filter() https://codesandbox.io/s/unruffled-wa... at 06:17:06: .reduce() https://codesandbox.io/s/hopeful-shad... at 07:18:06: .addEventListener() https://codesandbox.io/s/kind-torvald... at 07:26:09: .removeEventListener() https://codesandbox.io/s/ecstatic-rho... at 07:33:57: querySelector() https://codesandbox.io/s/ecstatic-lov... at 08:10:12: Date https://codesandbox.io/s/great-framew... at 08:19:29: setTimeout() https://codesandbox.io/s/clever-chand... at 08:29:00: setInterval() https://codesandbox.io/s/cool-frankli... at 08:52:58: keys: https://codesandbox.io/s/lively-river... Generic Sandbox Setup: https://codesandbox.io/s/hopeful-shad... Portfolio final code (edited): https://codesandbox.io/s/html-lesson-...
hello everyone my name is annel Kuba and I'm a professional software developer YouTuber and your host for this 12h hour
plus YouTube coding boot camp now what exactly makes this a YouTube coding boot
camp you may ask and why the 12 hours plus well this course has been specifically built out making the most
of YouTube's functionality in order to help you on your coding Journey what I mean by this is this is a video boot
camp which will very much take the full form of a part one being you coding along with me in the video part two
being me presenting you with some exercises and challenges that you should attempt by yourself before we go through
the answer together and three at the end of each major section I will be
directing you to a project I think would be suitable for you to try with the knowledge you have gained so far this is
going to be an external video on my channel so I will be directing you to the video I suggest via a YouTube card
at the right moment in time this is also why we are calling a 12-hour plus video
as the learning content that you will be exposed to on your boot camp Journey will amount to the boot camp itself and
six suggested external projects to put in your developer portfolio now I am not
going to Sugar Code it coding can be hard to get your mind thinking like a developer takes practice and a lot of
repetition to help us do this I have Incorporated that repetition into each section by
providing you with questions and tasks to complete this is why I cannot stress
that the best way for you to learn is to get on your laptop and code along with me and not just take notes I find that
learning code is always better done by doing okay so what exactly are we going
to learn on this coding boot camp let's break it down in the first section we
are going to start off with HTML so the language that describes the structure of
a web page we will then move on to CSS or cascading sty sheets this describes
how HTML elements are to be displayed and finally move on to JavaScript most
of our time we'll be focused on JavaScript as there really is a lot to learn with this language this is where I
will be focusing most of my energy by providing you with some fun lessons accompanied by some exercises and
projects i' like to make the lessons very visual to break away from the generic teaching patterns we so often
see in software development here are just a few examples of what you will see on this
course this of course is a free course and I will be providing you all the necessary documentation and links in the
description below as well as a breakdown of all our lessons and where you can find them in this video thanks to
YouTube timestamps you can see a full list of what we're going to learn if you click on the expand button below so go
ahead and do that this course has been a while in the making and is available to everyone and anyone right here on my
channel I really do believe that anyone should have the opportunity to learn how to code which is why this course is free
and will always be free so what are we waiting for let's do it don't forget to
click and subscribe if you enjoyed this course and I look forward to having you on
board okay so let's jump right to it first off I want to have a quick discussion about how we're actually
going to be writing our code to write our code we are going to
be using a code editor now there are many choices for you to choose from I
have chosen four that I have used in the past in no particular order we've got
play code code pen jsfiddle and codee sandbox these are all online editors for
us to get started straight away for no other reason than for me having to
choose one I'm going to be using Code sandbox for this course this means that
the editor that you'll be seeing in this video will be code sandbox however you are absolutely free to use any of the
other three or find your own because what is important is the file structure it is also important to know
note that you can have a code editor directly on your laptop this is something that we're going to be doing
towards the end of the course two options that come to mind are visual studio and
atom okay so here is a recap of all the code editors available to you please
have a go at using all of them see which one fits you best or otherwise let's get
going with code soundbox okay so let's get started now
in whatever code editor you have chosen please go ahead and make an index HTML
file in the root of your project this would literally involve you creating a
file and calling it index with the extension HTML so your code editor knows
to make this an HTML file if this has worked you will see an icon pop up to
the left it might be that your code editor has some other files as well for example
code sandbox has this package Json this is because it's an online code editor so
it needs a couple of extra files to get us started if you are struggling getting to this point don't worry go to the
description below where I provided you with a link in order to get started that
link will provide you with this setup that you see right here okay so once you comfortable and
have your code edger of choice set up with an index h HTML file in the root of
your project let's carry on but before we get right into any code
at all what exactly is HTML hypertext markup language or HTML
is regarded to be a comparatively simple language which is great HTML is the
standard markup language for documents designed to be displayed in a browser but what do I mean by markup language in
computer text processing a markup language is a system of annotating a document in a way that is syntactically
distinguishable from text meaning when the document is processed for display the markup language is not shown and is
only used to format the text so for example here we have used the Bold tags
to make the text in between the two tags appear to be bold when viewed in the browser the idea and the terminology
evolved from the markup of paper manuscripts for example the revision instructions by editors which is
traditionally written with a red pen or blue pencil on author's manuscripts such
markup typically includes both content Corrections such as spelling punctuation
or movement of content and also typographic instructions such as to make a heading larger or bold face web
browsers receive HML documents from a web server or from local storage and render the documents into multimedia web
pages HTML describes the structure of a web page semantically and originally includes cues for the appearance of the
document HTML elements are the building blocks of HTML pages with HTML
constructs images and other objects such as interactive forms may be embedded into the render page HTML provides a
means to create structured documents by denoting structural semantics for text
such as headings paragraphs lists links quotes and other items
HTML elements are deled by tags written using angle brackets such as this this
is an opening tag most opening tags that be accompanied by a closing tag in order
for this to become an element so for example here we have the tags to make text bold browsers do not however
display the HTML tags but use them to interpret the content of the page but enough chat let's get to seeing some
code it is important to note that for this course we're going to be using the latest version of HTML and that is HTML
5 standard here is the basic file structure for when working with an HTML
file as you can see here I've gone ahead and created an index HTML file so I've
called the file index and by giving it the HTML extension my code editor knows
to treat this as an HTML file the first tag I want to show you is right here so
that's the tag it is a tag that tells the browser that this is an HTML 5 document as mentioned
there are previous older versions of HTML so just be aware of that on your journey as a web developer the browser
needs to know what version of HTML the document is in order to render it
correctly next we tell the browser where our HTML is starting we do this as even
though we only have HTML in here for now we can actually write CSS and JavaScript in this document too
something that I will show you later down the line in this course we going to be using this HTML opening tag and
closing tag as the root of our document everything else that we want to get
picked up by the browser has to live inside it next we have the head tag and closing
tag this is where we store information mainly this is not to be confused with a header
the head will store information that is not visible in the browser it's for storing and not
displaying next we have our title tag this is for naming our project we do
this so we can store what we want to call the project that we are working on and store this in the head so make sure
is in between the opening tag and the closing tag of the head once again this
is not a title that we will see in our browser however if you look at the tab
of the browser your project is in you should be able to see it it will also show up in search results so for example
in Google next we have the body itself now this is where the visible stuff will
be this is essentially where we are going to start coding out our web page so let's get to it first up I'm going to
talk to you about text first we have loads of different headers in HTML we
can start with an H1 header so that being our largest header hello and this
can go all the way down to H6 so if I just go ahead and change
these like so go H2
H3 H4 H5 and an
H6 okay we'll save that and open up our browser so you will see here now all the
headers in chronological order there is nothing P H6 so I can even put an H7 tag
like so hi and you will see here that it just
doesn't get applied this is just standard non- formatted text so that covers the headers we can
also do paragraphs so this is what a paragraph tag would look
like I am a
paragraph and there we go unlike headers paragraphs do not have a hierarchy it is
simply just this next up let's make some text show up in bold so we have two ways
of doing this I can do this either with a B tag so similar to here I'm just
going to do it on the paragraph put in a tag and a closing tag of the parts that
I want to make bold so for example here I made the whole paragraph bold or I can
simply make one part of it bold so in this example I've chosen the I or I can
use the strong tag now there is one major difference in this what is
interesting about the strong tag is that it also has semantic meaning to the browser meaning that the browser will
read this text as more more important than the rest now we also have the EM
tag so I'm just going to use it here so you can see what it does first and the closing
tag this tag has what you call it stress emphasis in the browser it will make
your text appear italic and once again it will tell the browser that we should be stressing this word also so it has
semantic meaning so to recap both of these the strong and the EM tag have
semantic meaning and they are also inline elements what this means is that
an inline element does not start on a new line and only takes up as much width as necessary this is opposed to a block
element which we will cover in a bit before we move on however I just want to cover two more tags that are relevant
for text the first is the a tag this a tag so this one right here
which I'll do it up here write an a
tag this a tag is short for anchor and we can use it to link a location within
the file or link the tag to a completely different web page so here I have
written an a tag I'm just going to put the words
GitHub then my GitHub
page now what I want to happen is that when someone clicks this word right here
so GitHub or to be precise the word in the anchor tag I want them to be taken
to my GitHub page which is online at the moment nothing is happening this is
because we haven't finished our anchor tag yet we need to give it an attribute
many elements can take attributes attributes are stored in the opening tag so right in here and give extra
information to the browser in the case of the anchor tag I want to give it the location of where I want the user to be
taken if they click on the element this is how the
href which is the attribute that I need to give my a tag will look I would
simply write href equals and the full or absolute path to
my GitHub page this will look like so I'm just going to move that out a little
bit for us to see now what I mean by absolute path is that it is the full
path to what you are linking to so for example I would have to include the HTTP
or https part of the URL just putting www will not do at the moment this might
seem obvious however when you start linking to pages in your projects you will start dealing with relative paths
to so here we have an example in the first example you will
see me linking the a tag to a relative path so a file called about HTML in the
same directory as the file we are in and then below you will see me linking the a
tag to an external website by providing the absolute path to the web
page let me show you this with an example I'm going to create a page so
I'm going to just go here here and call this about
HTML so we have that page here there's nothing in it yet now in my index HTML
let's say that instead of linking to my GitHub page I want to link to my about page let's do this here in the H3 tag
and I'm just going to change this from an H3 to an a tag and give it an hre
attribute in which I'm going to give the relative part
to my about page so simply put that if I
now click on here it will take me to my about page if however I want to link to a file
that is in a folder so let's go ahead and create a folder I'm going to call it
details I am going to put my about file into that folder now I'm going to have to go into that folder
and then get the about page so that is the Syntax for doing that I'm going into the folder called details and then I'm
getting the about page great okay it is now time to use
everything we have learned so far in the HTML section in order to build our first
project this project is going to be an online portfolio the portfolio itself
will be built out in HTML and CSS we will be be implementing a little bit of
JavaScript towards the end of our course as well so make sure to save this project as you go okay let's do it
online portfolio project coming up next I'm going to delete the text in
here so we're ready for the next section so we have just learned about inline
elements in HTML if you are curious as to how many inline elements that are out
there here is a complete list for you we have only gone over a few however there
are a lot more to go I don't feel we need to go into each and every single one of them I have used the most popular
ones and I'm going to teach you a few more as this course goes on now let's have a look at the Block Level elements
here is a full list of all the Block Level elements that are available to you you might already be familiar with some
as we've already discussed H1 H2 H3 four five and six tags as well as the
paragraph tag however the one that I think is the most important for the next part of this course is going to be the
div tag the HTML content division element or the div is the generic
container for flow content it has no effect on the content or layout until styled in some way using CSS as a pure
container the div element does not inherently represent anything instead it's used to group content so it can be
easily styled using the class or ID attributes let's go through this in an
example so in here I'm going to create my first div element I'm going to give an opening tag and a closing
tag as mentioned in the slide we would usually use a class attribute so similar to something like
this and then call it container so we can style it up in the CSS or simly we
can use an ID to to get to grips with these two concepts of IDs and classes we
need to start talking about CSS let's do that in the next
lesson okay so we have made it to the end of the HTML section as mentioned
there really are a lot of HTML elements that exist in HTML and while we did not
cover all of them we did Cover the most popular ones as we move on in the course I will be introducing new HTML elements
to you as well as showing you how to style them we will be doing this with the help of CSS so saying that the CSS
section is up next once again as a reminder please do code along with me in your IDE of choice I have provided some
templates for you below in the description if you need help on the setup or if you get stuck through the
next section so please refer to the description below to grab that template
now it will have a time stamp next to it to make it clearer as to which one you should use at this point in time
now let's get to it cascading sty sheets or css is a sty sheet language used for
describing the presentation of a document written in a markup language such as HTML CSS is a Cornerstone
technology of the worldwide web alongside HTML and JavaScript CSS is designed to enable the
separation of presentation and content including layout colors and fonts
this separation of presentation characteristics enable multiple web pages to share formatting by specifying
the relevant CSS in a separate do CSS file which reduces complexity and
repetition in the structural content as well as enabling the CSS file to be cached to improve the page load speed
between the pages that share the file and its formatting separation of formatting and content also makes it
feasible to present the same markup page in different styles for different rendering methods such as on screen in
print by voice and on Braille the name cascading comes from the specified
priority scheme to determine which style rule applies if more than one rule
matches a particular element don't worry if all of that went over your head we're
going to be going through this with examples now one way of adding CSS to
your div would be to add the style attribute to your opening tag so to do
do this I would simply add the style attribute like so and equals and then in
quotation marks I would set the property of width so I'm not making this up this is a CSS property and then I would put
the width in pixels so PX for pixels and
then end it with a semicolon when we get inside these quotation marks we are no longer writing HTML we are writing CSS
so we've got our width let's also set a height so I'm going to say height 200
pixels semicolon and a background color of
Green Save and there we have it we have successfully
styled our first div now this is great however as you can imagine you don't
really want to be writing all of your CSS in the HTML file it could be very unmanageable and get very messy to solve
this problem we're going to store all our CSS in one file let's do that in the
next
section so the first thing that I'm going to do is as mentioned separate my
style from my HTML page and create a new file which I'm going to choose to call
Styles CSS so I am telling my code editor that
this is now a cascading stylesheet by this extension like so the next thing we actually need to do
is link up our stylesheet to our index HTML file I'm going to do this with the
link tag so this is a HTML tag that will allow us to link our stylesheet to our
HTML file I'm going to do this above the header up here so
link then pass through
stylesheet and add the href so I'm linking the Styles
CSS document that I have written here make sure that it matches correctly otherwise this will not work
okay now to separating it so I'm essentially going to get all of this in here so as we said everything inside
quotation marks is considered to be CSS so let's go ahead and cut that out I
also don't need the style attribute anymore so I'm going to close that now
as we want to apply styling to the div I'm going to have to somehow tell my
stylesheet that that's what I want to style I could do this like so I would
grab the div open up some curly braces and paste
everything that I had previously and you will see our rectangle is back up our div is
once again styled now to make this look a little bit neater and more readable it is common to have this layout when it
comes to CSS let's save this file and let's carry on
so we have styled our first div however what if I want to create another div so
let's just go ahead and paste another div here and press save you will see that another div has been made with the
exact same styling that we have seen here we have two divs with the exact
same styling this is great when it comes to
not having to repeat ourselves and sty suing over and over again like we would have had to in the HTML if it looked
like this so we would have had to have that and once
again this and so on and so on and so on thanks to our sty sheet we don't have to
do that anymore so I'm just going to get rid of that
again great let's put in our second div and save now as divs are considered
to be the building blocks of HTML perhaps I don't want all my divs to look
like this now one option will be to use
another block element such as a section and give the
section some styling that is similar but not exactly the same as a div so I'm
just going to change the color in this case for now so there we go we've got a div a div and
a section however you will find that you'll soon run out of elements to use
this is why we have classes and IDs I'm going to show you this now in this next
section we're going to have a close look at classes and IDs and use cases for
both let's get to it so here we have two
divs let's say I want the second div to have styling that is different from this div I could easily give it a class and
let's call this one the about
me class and let's go in
here now to get this class right here I would have to use a different
type of syntax to denote a class I would have to use a dot in my Styles sheet
okay so by writing dot I am telling this file that I need to look for the class
of about me now I can give this a background
color of blue and there we go the div with a
class of about me is now blue what you might notice however is how the about me
div still has the styling from this div right here so it is still 300 pixels
wide and 200 pixels even though we didn't tell it to be those Dimensions
right here that is because we are essentially adding on top of the styling
that it already has so we are overriding the background color green with the
background color blue if you wanted this div to be completely separate from The Styling that it has
here here we would have to remove the styling from the div element itself so
we could do so like this by giving this a class that is separate so I'm going to call this
class header this is not correct we will change this but it's just to show you
for now so in here I would go dot
header and there we go the abat me has now disappeared because we have not given it a width and a height let's fix
that width 300 pixels
height 100 pixels and there we
go now let's go back to here you will notice that used a div with the class of
header this is not really correct we should not be doing this as we already have an element that is
specifically a header so let's go ahead and use that there we go and now we
don't want this to be a class anymore we just want this to be the element so let's delete that too we can also do the
same for a footer as there is already a pre-existing element for us so there we go okay now
it's time for a quick pop quiz let's do it here you have your index HTML file
all it has is it is a body with a background color of light Coral so I've
applied styling in the HTML file to give the body a background color of light
Coral now based on everything you have learned so far how do you think that you
would add a cirle element to the body
okay have a go at this yourself all I want is a circle I want the circle to be
any color you want and any size please put that in to the browser here so it's
visible for us please style it up as you wish I'm going to pause here while you
have a go at doing this please have fun if you don't get it that's absolutely fine because we're going to be going
through the answer together see you in a bit
okay so I would do it like this I would open up our body because the div has to
be a child of the body I will then go ahead and put a div I would style it to give it a
background color and let's make it light
SE green we won't be able to see anything if we refresh our page because we
haven't given this a width or a size or a height so I'm going to go ahead and it
has to be in here give it a width of 100
pixels and a height of 100 pixels just going to get rid of this for
now so we can see everything okay so we have a square and
the one last thing that I will need to do so I'm actually going to give it something called a border radius
and get 50 pixels and there we go we have now created a circle in our
body I hope that was fun don't worry if you didn't get it that's what I'm here
for we're going to be going through the answers together and please feel free to uh use the internet if you ever get
stuck that is absolutely fine too now I want you to essentially add a style
sheet what you have done so far so we can take out the style and put it into a separate file or our stylesheet so just
like we did in the lessons I'm going to pause here so I'm going to open up this
as well because you will be needing to add files and some structure please have a going and do this first feel free to
use what you have learned before as a hint you will have to link up your stylesheet and add the styling into the
stylesheet have fun I'll see you soon
okay so the way I would do this is this first off we actually need to link our
stylesheet to our index HTML file so let's go ahead and create it
first I'm just going to write Styles CSS so I'm giving the file the CSS file
extension to tell our IDE that this is that this is a CSS file if I click enter
you will see a little icon show up to see that that has worked next up I would
actually need to link this file to my index HTML file so I'm going to do it in
the head and I'm simply going to write a link going to make it a self closing
link I'm going to add the hre go to the Styles CSS file and I'm
also going to tell my IDE that this is a style sheet
for good measure okay so now we've linked our stylesheet we've created a file I'm
actually now going to take all of the styling so I'm literally just going to cut it out we don't need this style
anymore because we're literally going to put it in here now the next thing we need to do is
actually add all of this to the div so I'm going to pick
out my div by giving a class of
circle and then I'm going to grab that class cuz it's a class name we need a DOT and the word class and just put all
of this in here like so I'm also going
to get rid of this oops we were class going right
Circle and get the body so this time I'm not telling it it's a class I'm just
grabbing the element of body itself and once again pasting what we had
before like so and we have done it we have recreated what we have written
previously by taking out the styles from our index HTML file so all our styles
are now in a separate file okay so hopefully you see that there is no
styling in here anymore we just have a body and a div with a CLA of circle and
in here we have the body element which is styled and the class of circle so
anything with the class of circle will have this styling okay so I've hope you've enjoyed
this pop quiz if you didn't get it that's absolutely fine if you had to rewind and look at a lesson again or
perhaps use the internet that is totally fine that is absolutely normal as a software developer we'll be doing a lot
of these quizzes and a lot of the challenges so I hope you enjoyed this one let's carry
on okay so you've just seen me use three CSS properties that is the width where
we set the width with the pixels the height where we set the height with the pixels background color where we set it
to Blue and I also like to use border and Border radius these are my five most
used CSS properties I would say if you look at the border you can see that that
it takes three values if I want the border to be solid then I put solid and
then I choose a color and then I choose the Border width and the Border radius is something that allows me to soften
the edges of a rectangle it is also what I would use to create circles we'll be using all of these in our project before
we move on I just want to show you what I mean when I talk about Border in this next section we're going to look at the
Box model here we have our div I have named it
here as content in purple our div also has a padding so you can access the
padding by the padding CSS property and then you can see the border the border
is just above the padding and lastly above the Border you will have a property called a margin so all divs
possess all of these three properties and we can use them to our advantage let's go back to our stylesheet
so let's take the about me so as a reminder the about me is a div with the
class of about me if I add a margin to it so I'm going
to add margin 10 pixels you'll see the about me now has a margin of 10 pixels
here here here and here if we change this to padding our div now has a
padding so an inner padding of 10 pixels from the actual div
itself just going to switch that back to margin I'm also going to add a border so
once again I want a solid border let's make it black and then it already has a default
width but I'm just going to change that to 10 pixels and click save one other thing that I did mention
is the Border radius and I'm just going to choose 15 pixels
and now you'll see that our div has softened
edges because we've applied a border radius so that is just some of the
properties that are available to me in CSS there are quite a lot out there but
for the purpose of this course I'm going to be using the most popular ones now the next thing I want to talk
to you about is colors in this next section let's talk a little
bit about colors hex colors are a way of representing colors from various color
models through heximal values a heximal color follows the format r g g BB this
is where R is red GG is green and BB is
blue these heximal integers can be in a range of 0 0 to FF to specify the
intensity of the color this hex color for example represents black and this
one represents white a simple example of this is this one right here this color
is pure red because the red component is at its max value of FF and the green and
the blue components are at their lowest of O however when you get into the
design aspect of things and people really want to customize their colors you're more likely to see something like
this using hex color codes to represent different colors is an easy way to differentiate between colors once you
understand how they work you can easily change the red blue or green values to create a different shade this is
particularly convenient given that you have such a range of color options with hex color codes which guarantees color
exactness we also have the RGB color model the RGB color model is an additive
color model in which red green and blue light are added together in various ways to reproduce a broad array of colors the
name of the model comes from the initials of the three additive primary colors red green and blue the main
purpose of the RGB color model is for the sensing representation and display of images in electronic systems such as
televisions and computers though has also been used in conventional photography before the electronic age
the RGB color model already had a solid theory behind it based on human perception of colors
RGB is a device dependent color model different devices detect or reproduce a
given RGB value differently this is because color elements such as phosphors or dyes and their response to their
individual RGB levels vary from manufacturer to manufacturer or even in the same device over time what is great
about the RGB model is that we can also add a level of transparency so here by the 0.5 we are
indicating that this color we want it to be at 50% opacity I'm going to show you
this with an example it is absolutely your choice what you'd rather use if
you'd rather use the preset colors that we have already here whether you'd rather use the RGB or the hex for here
I'm just going to choose to change this so I'm going to change it from background to RGB and
then don't forget our semicolon so we just Chang this to this
sort of brownie red color and now if I want to make it transparent by 50% I
would simply add 0.5 I can change the level of transparency so I can make it super
transparent or less transparent if I wish same for the hex so with hex colors
it is a little bit different we don't write RGB in front or hex we simply get the hash like so and then get our are
six numbers and letters to represent the color that we
want with some code editor tools it is possible to click on the actual color
itself and just choose from the selector right here
also so for example similar to that so that is three ways of adding
colors in CSS you could either choose the default colors choose your own RGB
color or choose a hex color the choice is totally up to you now let's go back
to building our page just going to save this for now so we have our header which
currently doesn't have anything in it it is just a header that is purple we have
a div with the about me which is here and we have a section which is blue
lastly we also have a footer which currently doesn't have anything as this is a portfolio page for myself I want my
footer to contain some information I want to put this information in a list
let's learn a little bit about lists Now using just HTML we can make two
different types of list an ordered list so with numbers and an unordered list so
just with bullet points or similar I'm going to show you how to do this now so
in my fo out I've deed decided that I want a table of content let's do this first with an ordered list so I would
use the o tag for this o for ordered list I'd make an opening tag and then a
closing tag so you won't actually be able to see anything for now it's not
until we start adding list items as denoted by the LI tag so once again an
opening tag and a closing tag until we can see things so my first list item is
going to have an About Me section so if I click save you will see a list item
that is ordered by ordered I mean it has the number one I'm just going to make
the height of the section here smaller so you can see it and make our header 50
pixels high as well so let's have an about me a contact page we have a form and a
link to my GitHub if I wanted to change the
starting number of my ordered list I would simply add an attribute of start
to it and pass through the number 50 like so so now my ordered list starts
from the number 50 however I decided that I don't actually want an ordered list at all I want an unordered
list that makes a lot more sense in regards to what I want to try achieve
the bullet is a default that gets given with a UL tag if you want to start this
up in a different way we're going to have to use CSS for example I'm just going to put the
styling in the HTML file just for this just for now and I could do something
like this list style type and then pass through a square so
now we get little squares instead of bullet points I can also have the type
be a dis and of
course Circle other things that I can do to sty my list I'm going to do it in the
HTML file rather than the stylesheet for now just so I can show you quickly and
that is change the line height so I'm just going to pass through a line height
of 100 pixels so that's what it would look like more space out 10 pixels and so on and so on
I can actually also use percentages for this so I know we've been using pixels quite a lot but if we want to use
percentages that is absolutely fine too similarly to here instead of having
the width be 300 pixels I can actually use my browser width to decide on the
height to decide on the width of my elements so here you will see my
header width is now 50% of the browser if I extend this you will see that moves
around with it it is now responsive I'm just going to get rid of
this for now because I'm happy with the default Heights and we'll style this out
a little bit later one thing that I'm also going to want to do that we have learned already is actually link these
up with our anchor tags so let's go ahead and do that now we don't actually
have an about page built out yet or a contact page but there's no harm in just
leaving this like so so we don't forget to do it
later so once again we need the hre and I'm going to put the absolute
path to my GitHub page so you'll already see that that has created an anchor link
which again we can style to our preference for example if I don't want to line that I can get rid of that if I
want to change the font if I want to change the color if I want to have it change if I hover over it that is
something we can do and once again here I'm just going to leave it for now
because we haven't written the page so that is just a placeholder for us to remember to do that later okay so we
have our header we have an about me div we have a section and we now have a
footer now that we have lists down I want to show you how to embed images
into your project there are two ways of doing this I'm going to show you how for this I'm going to use my About Me
section I'm going to open up our div so what I am saying essentially is I want
my image to be inside the div
here and I'm going to use use an image tag like this what is important about image tags
is that they are self closing we don't need an opening and a closing tag so you
can use it like that or simply like this it is up to you the image tag needs two
attributes the source attribute in which we provide the path to the image we want
to embed and the alt attribute the alt attribute holds a text description of
the image which isn't mandatory but is incredibly useful for accessibility
screen readers read this description out to their users so they know what the image means alt text is also displayed
on the page if the image can't be loaded for some reason you know for example network errors content blocking or link
Rod I would always advise to have an ALT text so for this one I'm going to put
Ana Kubo head
shot now for the image one way of adding an image into the image tag is to Simply
go on the internet and find a absolute path for the image you want so for example if I go to the
internet I find a hedgehog I then copy image
address paste it up here here you will see there is an image or a rather large
image of a hedgehog which then of course I can use CSS to change the sizing
of this is okay however it's probably not the best practice for projects such
as this I would advise to store any images you use in your project directory
so let's go ahead and do that now so in my my file structure I'm going
to create a new folder I'm going to call it images where I'm going to sort all my images for this project now inside here
I'm actually going to upload a
file and it's going to be my avatar we can store PNG files JPEG files
it's totally up to you so now we need the relative path so I'm going to go
into to my images folder and then going to get the
Ana make sure to type it out exactly as you see it PNG file and click save great
now I'm also going to style this image so I can either choose to use the image tag and sty it up however I'm not
confident this will be the only image tag that I use so I'm going to use a class to do this and I'm going to call
this Avatar like
that and then choose a DOT because we are working with the class name go
Avatar and set a width of 100 pixels for the image
great I'm also going to use border radius and give a border radius of 50
pixels to make my avatar look like a
Circle okay so this is looking good I have my first image I'm just going to shut down that folder let's go back to
our index HTML file you will see that this code editor
is actually reformatted this for me to be more readable so now my image tag
consists of the class attribute a source attribute with the relative path to my
PNG file and an alternative text so it's more
accessible the next thing that I want to talk to you about is IDs so we've already styled something by elements so
when we were grabbing elements such as the header and section we've also used
classes such as denoted by this dot but we can also use IDs now before we move
on I'm just going to explain a little bit more about this first so for example we can grab things by elements such as
the D we can add classes to elements and grab
them in our CSS thanks to a DOT and we can add IDs to our elements and grab
them in our CSS thanks to the hash IDs and classes are essentially hooks but
what is the difference between them well IDs are unique each element can have
only one ID and each page can have only one element with the ID now this isn't
Just A good rule of thumb this is something that's quite important if you are a purely HTML and CSS person the
difference might not be evident but when we start working with JavaScript this will really make a difference for one
your code will not pass validation if use the same ID on more than one element validation should be important to us all
so that alone is important and a big one classes however are not unique you can
use the same class on multiple elements so similar like we did with the divs you can also use multiple classes on the
same element any styling information that needs to be applied to multiple objects on a page should be done with a
class and one last thing elements can have both so for
example my div here can have a class of about me and then also an ID as
well this is however optional but sometimes a very good idea to have so
I'm going to write a tit here so I'm going to choose to have an H2 tag the closing tag and I'm going to
give an ID of
name in it I'm going to have my name so Ana Kuba and hit save this will not do
anything for now I can however style it so I'm just going to show you what that would look like if I did I would use the
hash to get the div with the ID of
name and then I'm just going to choose color not background color because we're working with text for this one and I'm
just going to choose blue and save you will also note that
because H2 tags and image tags are not
in line they display as block they actually stack over each other and don't fit in my my section anymore I would
ideally want my image element to float to the right I'm going to show you how
to do this with something called flexbox before we move on I just want to talk to you a little bit more about other
properties we can assign elements in HTML so for example we have the data ID
let's have a look at a few more in code okay so as we know we can have
elements so I'm just going to make a div here so here's my first tag and my closing tag and I can give a class name
so for example box an ID for example
Main and then I can also have data set readon properties as well a data set
read only property starts off like this it is in fact a custom data
attribute what this means is that I can make up any word I want as long as it has data in front of it so as a recap
the attribute will begin with data and for Slash and can have anything after it
I can have data ID such as this I can have a data
user such as Joe I can have a
let's get rid of this for now
data data date
of birth it is completely and totally up to
you so that is just something to keep in mind as we will be using data IDs for some of our projects and later on in our
JavaScript course so as long as you uh make a note of this you should be fine let's carry on with
our lesson in this next section we are going to be looking at Flex boox let's do
it flexbox or the flexbox layout module aims at providing a more efficient way
to lay out aign and distribute space among items in a container even when
their size is unknown the main idea behind the flex layout is to give the container the
ability to alter its items with or height to best fill the available space
a flex container expands items to fill available free space or shrinks them to
prevent overflow most importantly the flexbox layout is Direction agnostic
this is supposed to the regular layouts that we have while those work well for Pages they lack flexibility to support
large or complex applications let's go over some Basics and
terminology so here we have three child elements in yellow in an orange
container so that is the parent div they are in at the moment the three child
Elements which are divs are displaying as they should as a default so stacked over each other we're going to talk
about the properties for the parent so the orange Flex container now let's
initialize this to use display Flex I'm going to show you how to declare a flex
Direction This establishes the main axis that's defining the direction Flex items
are placed in the flex container so in this example the flex direction is row
and we are making all our elements in the parent container display as a row alternatively we can also set the flex
direction as column and we will see our elements align like so next we have Flex
wrap by default Flex items will all TR fit onto one line you can change that
and allow the items to wrap as needed with this property so I'm just going to show you now Flex wrap wrap I've also
numbered them for you so you can see a little bit better now let's change that to row so once again 1 2 3 and I've
added another diven there of fourth so you can see how that is wrapping instead we can also use something called
justify content to essentially make our divs Bunch up to the start Bunch up to
the end using Flex end and then Center as well
we also have space around space between so hopefully you're seeing these small
changes in the divs and space evenly along with many others such as align
items align content Flex grow and a few
more okay quick pop quiz let's do it so here we have my index HTML file
all it has really is a link to my stylesheet and a div with a class of
child which I have styled up to look like this now how do you think using
display Flex that you would get the child to appear in the right hand side
right here no matter what or how big a screen is it will always stick to the
right end of our screen have a think about this based what we have learned please do have a go
at trying this out in your own code editor and I'll see you in a
bit okay that's right I hopefully you've got it if you haven't don't worry I'm going to show you the answer now I would
initiate the parent by writing display Flex so the body is the parent of the
child because the child is in the body that is the one up from it is the
body and then I just use justify content
Flex end and there we go no matter how big the screen is square or the
rectangle will stay to the right now how do you think I would make it stay in the
middle that's right I would change this to Center and now no matter how big or
small our screen the square will always stay in the
middle okay that was our quick pop quiz
let's carry on okay let's get to using what we have leared in our project so
far for this I'm going to use my section as the parent div so here we have the
parent div itself I'm going to go in here and in the section I'm going to use
display
Flex so what we are doing here is defining a flex container it's going to enable a flex
context for all of its direct children so what that means is anything that I put inside the section is going to be
affected I'm going to save that and then in here I'm just going to create some divs so here's one div and it's closing
div I'm going to give it a class of
test I'm just going to put one 2 3 4
five and then in here I'm going to style it just so we
can see it a little bit this is just for test purposes so you can see withd height 30
pixels and I'm going to give it a background color of red
and a margin so we can see each one a little bit more of five pixels so there
we have our five divs inside my section perhaps let's actually make the
about me a bit
higher a bit bigger so there we
go okay so here we have our blue section with five five
child elements now if I use flex
Direction row they won't change because they're already in a row however if I
choose column you will see here that all of my divs are trying to squash
into the section and because the section height is 100 pixels it doesn't matter
that these these test Dives are 30 pixels it's squashing inside okay to fix this we need to use
flex wrap
wrap now you will see that instead of squashing our divs are
essentially still lining up in one column however once it gets to the end
of the section they are wrapping over they are wrapping over so if if you follow my mouse it goes like this 1 2 3
4 5 we can also justify the content of the section so
justify content
Center and you'll see that they are all aligning to the center so if this was my
Axis they're aligned to the center right here if I change this to be Flex Direction
row they all centering around this axis instead instead of Center I'm going to
put space between and you will see all the divs
are spacing out with equal spacing in between each one I can also choose space
around and now you'll see that each one has the same space around
each div so that are just some examples of what we can do with flex box the most
important thing is that it makes everything Dynamic so for example I'm just going to
get rid of this for
now and apply Flex box to the body so our body is the tag that accompanies all
of our elements inside here so let's go get the body
so again I'm going to use display Flex to initialize Flex box they are as
default displaying inline I then want to get the flex
direction to be
column okay so that's step one the next thing we're going to do is actually get my section and instead of have a
hardcoded width I'm going to I'm just going to put
100% same for the header
100% And for the about me I'm also going to
have 100% I'm also going to get rid of the
margin like that and instead I'm going to apply margin top 10 pixels and
margin bottom 10 pixels another way of writing this is to
write margin 10 pixels 0 10 pixels
0 okay so that's just another way of writing essentially the same thing I'm
adding a margin to the top to the bottom keeping it zero here and keeping it zero
there too so now you'll see this is much more
responsive and no matter where we're viewing this on our Mobile on a browser on a tablet it will look much more
professional commenting out code so you might see me commenting out code uh this
just means that the code is unreadable at times and really helps us when we develop code because you can write
pseudo code so anything that I don't want my ID to pick up I'm going to
comment out and we comment out by simply selecting the code we want to comment out and pressing command and then the
forward slash on your keyboard okay so have a go at doing that I'm going to
show you an example of what I mean by this here we have a star sheet I would
simply grab that and press press command slash to comment it out and then once
again command for slash again to uncomment it so that we can use it
please have a go at this yourself you're going to be seeing me use this quite a lot in the course so have a go have fun
and let's continue so I'm just going to comment
this out the about me so this is how you would comment out in CSS you need to put
a d and a asteris as well as an ending Aster Dash and that code will then be ignored
okay so once again press command and then the forward slash to bring it
back and command for slash to comment it out or you can simply type out this here
and here too both will essentially work just to recap what we've covered so
far with flex box I'm going to use apply Flex box once again to these five divs
so again this is in the section I'm going to apply display Flex to the
parent div as the section the blue section is the parent of these five divs
here if you look here the five divs are inside the section making it their
parent so I'm going to use display
Flex you will now see that by default all the divs are displaying in
line I can then use justify content to Center the divs I
can use justify content to space them evenly I can use justify content to
space between I can also align items to flex
end if I want them to be at the end I can align items to
Center so if I want to display them straight bang in the middle I would align item Center but also justify
content Center there we go and now they will always be in the center of that div
no matter what so I'm happy with my section I like
the fact that the divs are always going to be in the center no matter what and
if I go small they will even squash up like so but always remain in
one line so that is looking good if I wanted them to wrap well you guessed it
I would use flex wrap wrap so
now you will see them wrapping over each other
so whatever you
want now I've decided that I actually want the section not to be a solid color
I want it to be a gradient I could simply I'm just going to comment this out for now so once again command and
forward slash and I'm going to use background image
I'm also going to use linear gradient and pass through two
colors so just for example I'm going to pass through red and yellow and then don't forget
semicolon and we have now created a linear gradient I could also customize
this even further for example if I write
two two right and then a comma you will see that the gradient is moving
in the other direction I could also have to bottom right and once again you will
see the gradient is moving towards the bottom right hand corner you can of
course customize this as much as you want if you're really particular about a certain angle you can even pass through
the exact angle you want by degrees and you'll see that happen one
thing I can also to do is add in multiple colors or as many as I want so
I'm going to pass through green and if you're feeling really crazy
just going to get rid of the degrees for now you can have a
repeating linear
gradient and really go wild on the customization of everything so there
really is a lot to play around with the CSS I'm just opening a NeverEnding Pandora's Box for you to really go
wild okay I don't particularly like it though however so I'm going to just remove it and keep it like that just for
now another thing that I want to show you that's quite retro is adding box Shadows so for example this is probably
a good place to put an ID so say I just want to add a box Shadow to the middle
div it already has a class however I'm going to add an ID too so this is me using a class and an ID on one element
and I'm going to put
main save that now in my Styles I'm going to use the ID of
Main and add a box Shadow I'm going to put 10 pixels 0
pixels 10 pixels so now you'll see that my middle div has a box shadow that is
quite solid it is not very
opaque I can also make it a lot softer
and change its color okay so here we are defining the horizontal Shadow here we
are defining the vertical Shadow here we are defining the softness and here we
are defining a color if I want to move a little bit closer I simply
change the pixel Direction okay so I wouldn't say our
portfolio is looking good but we are exploring all the options that we can used to make it great one last thing I
want to show you is buttons so this is going to be a HTML tag right in
the About Me section under the image I'm going to
use a button tag so if I click save you
will see a button I can also add click me
now the benefits of using the button tag is that it will come with a pre-made button already if we hover on it it will
slightly change you will see that we are slightly clicking it if we click it you'll see a little animation happen so
that's stuff that's already built into the button tag itself we can use it to
take us to another page an external link submit forms anything we really want you
might see that some developers choose to omit the styling of this button completely and just use a div instead
that is also an option however we're just going to style our button here so once again I'm just going to grab the
element itself so that now when we use a button tag anywhere in our project it
will be standardized and looked the same so I could do something like give it a
border of zero that will get rid of the borderer of the button
I can give it padding 020 pixels and that will give it
a 20 pixel padding from the left and right and a zero padding on the top and
bottom I can also change the font size to 20
pixels a background color of rgba in case I want to change
this to be slightly transparent further down the line at the the moment one it means it's solid there is no
transparency we get our semicolon R rgba now I want to add
some gradients so I'm going to add a linear
gradient to top left and then pass
through some colors so I'm going to pass
so I'm going to pause through rgba 0 0
0
0.2 R GPA GPA 0 0 0
0.2 30%
just going to fall back this a little bit better so we can read it rgpa 0 0 z0 ending
colon so you can already see it's not a solid color it's just very slightly
linear graded perhaps less offensive than this it is just a b more
stylized then a box Shadow
inset two pixels two pixels 3 pixels
rgba 255 255 255
0.6 in set - 2 pixels - 2 pixels two pixels RGB
a 0 0 0 0.6 once again the ending
col box Shadow so already that's looking more like a button you might see online
it obviously is quite labor intensive CSS is a skill that you have to practice
at quite a lot there's a lot of really amazing CSS artists out there I really
do recommend you check out codepen to see them all it really is amazing what people can do
with this
scale I'm going to make this white as well just going to give it some text
Shadow before we move
on Pixel one pixel pixel
okay so I think I'm happy with that for now this is obviously a much more extensive way of styling using
everything that I have taught you so far it's just a lot more detailed and I really get to the nitty-gritty of linear
gradients and box shadows and everything now the reason that I have done this is
because I want to show you how to add styling if we hover on a button at the moment nothing is happening I want the
style of the button to change if our Mouse hovers over it and if we click on
it so to do this I'm going to actually get our button again so I am
literally grabbing the element and then using this syntax like
this hover I'm simply going to give it a background
color rgba save so now if we hover on the
button it ever so slightly goes that little bit lighter and the same for if
the button is active so once again we grab the
button active so I'm not making these up this is already inbuilt you could say if
the button is active I want to add a box
shutter we can add the on har an active onto any element it doesn't just have to
be a button which is quite handy we can do it for divs we can do it on the
header itself we can do it for just about anything and so I'm just going to show
you how this would look and then if we click on it you will
see it's ever so slightly the Box Shadow is turning white around it like
so so there we go just to prove we can do this whenever
we want I'm going to go in here get the button
tag by command D I can actually select both of these words right here and replace it with a div and instead give
this a class of
button and then in my stylesheet instead of just grabbing the button element
because that doesn't exist anymore the class button does however so once again
I would simply place that and just fix this up a
tiny little bit by giving it a
width and making sure that it fits in the About Me section so I'm just going
to change this to 250 and then let's do text
aligner so there we go you will now also see that there's no blue surrounding square around it this is because there's
no longer a button element it's now simply a div that we sted as a button and I would personally prefer to do it
this way and I do recommend it to you too in this next section we are going to
be talking all about fonts let's do
it now that we have covered buttons I think it would be a great time to talk about fonts mainly because I am not a
fan of this font right here so I'm going to go into my body and set
a global font for anything in the body so font family and choose I'm going to
choose this one right here so just as a default and what this is saying is that I am
choosing Gil sounds to be my first font if for some reason our browser doesn't support it Gil sounds Mt as a third
backup calibri as a fourth Tre buter Ms and as a fifth sounds serif I don't
think it's always necessary to have so many sometimes you could just have three so let's go ahead and just cut that down
if we really want to customize this further we can import fonts to use two
so I'm just going to show you how to do that I'm going to go to Google fonts Google fonts provides loads of
free fonts for us to use so for example say I want to use Roboto in my project I
would simply go here and select which styles of Roboto I want I'm going to
choose regular so I'm just going to choose one for now now I'm going to choose to select the link tag rather
than the import tag so I'm going to choose to copy this right here and then
in our HTML file where we link the stylesheet I'm also going to
link to the Google fonts API in order to
get the Roboto font so I'm just going to save that and
now instead of the font families that I chose I'm going to choose to have Roboto
and as a backup s s siif Sans serif is just one of the ones that are provided
for us whereas Roboto is a special font you could say so right in here our font family I'm
going to choose Roboto which is the one we have just taken from the Google API and as a backup I'm going to have the
Sans serif default font so now you'll see that all the font
in our entire body so that means that in the section the About Me section and in
the footer is going to have Roboto this is because body is the parent to all of
these elements inside of it if for some reason I wanted to apply
a different font to the footer I can essentially override the font in the body so I would
get the footer and then use Font family
like so and the font will be overridden so that's looking good one last thing
that I want to show you how to do before we go to town on making this look good rather than just learning is to remove
the line under the links so I would grab the a tag and then I would get text
decoration none and there we go we have now removed the lines on the hyperlinks while the
hyper links still exist okay so in this section we are going to explore layouts a little bit
further let's do it okay now I want to talk to you a
little bit about website or app layout I'm going to break this down for you by
div as that's essentially the building blocks of any website or app so let's get to it so at the moment we have built
this site right here if I was to break it down by by div our page layout would
look similar to this so we've got our header in purple and then we have our
hero section which has our name image and button and then below that the About
Me section and then below that the footer however as we want our website to
look more like this we essentially want our website to look like this so this is the finished
product you will see the layout is a lot more complicated in terms of split out
areas in regards to the layout if I was to tell you what this looks like in terms of divs you would see something
like this we have divs next to divs on top of divs it is essentially our
Website Layout so let's go back to what we have built so far now in this
specific code editor when I can choose to view the browser in the editor itself
I can also view it as if we were viewing it on a browser so I'm going to open up
here so as you can see here it is really visible because we are now viewing this on a laptop browser and everything has
been stretched you will see however that we still have one div up here an orange
div a yellow and red div and our footer if I was to inspect this page so we can
inspect this page by essentially clicking control and then left clicking
the page and then getting our inspect
tool and this should show up all our elements so I can actually pull this
down so we can see this a little bit further and what you will see here is our
header our about me div a section and our photo what is great about this is I
can also select elements to expect on the page so for example if I want to select the About Me section you will see
here that I've selected the About Me section and in it I've got an H2 tag an image and a div that is styled as a
button this is really useful for seeing div size you will see even though I am
essentially floating over the div with a class of button you can also see the div
actually on the browser and it takes up all this space right here so once again
I'm just going to float on it and there we go this is because we haven't assigned the div Max width or a width so
it literally stretches to our browser same for the h2 tag not the same
for the image however as we did assign it a width I'm going to show you one more thing that is quite useful if you
are not sure about how a style can affect an element so for example if I go
on the about me div which has all three of these elements inside I'm just going to
click here I can actually edit it from my
console so here you will see for example background color I can essentially change this to whatever I want this will
not change anything in the project this is simply changing it for us in the browser and is a quick way to
essentially change things for us to see what it would look like in the finished
product let's try another one so I'm going to inspect let's inspect this one right here and then let's change the
height 100 pixels and there you
go okay so this is a cool way of inspecting and seeing what something potentially might look like you can do
this on any website I can go on to any website I want so for example if I go to
google.com let's go on the main search page let's inspect it I'm going to
select an element so let's just select this input right here and it's already
given me all the CSS for it so I can go ahead and change the font size to 30
pixels and there we go once again I am not changing this on the actual Google
code repository I'm just changing this in our browser this is essentially private for us to view only on our
laptop in this browser okay so now that you hopefully understand a little bit more about divs
and layouts and how to inspect them in browsers let's carry on okay in this
section we are going to focus on everything we have learned so far by building a nav bar let's do
it just going to move this back here make that a little bit smaller for
us so we can see now let's get to using what we have learned in order to create our header or
essentially our Navar so let's go back to our
HTML I'm just going to rename this to Ana Kubo
portfolio once again that will not change anything for us this is just sort of metadata it is what our project will
show in the browser so as you can see in this one you will see Ana Kubo portfolio
show up here as the title of the tab and let's get to making the Navar so
I've called this header but I'm actually going to change to Navar as I think it makes more sense and it is important to
make things as readable for anyone that goes onto our project as possible so
here we have a navbar this is again a element that is provided for me I did not make this up it
exists now in our Navar well I want to have a logo so I'm going to put in an
image I also want to have a list so we've done this before I'm going to make
an unordered list as opposed to an ordered
list make sure that is a closing tag and in here let's have some list
items so here's our first list item and I'm just going to have 3 2
three now my first list item I want to be about me my second I want to actually connect
to my GitHub page and then my third I want to say contact
me now each of these I actually want to make an a link so an anchor link so as a
reminder an anchor link we can link to a specific place in this page another page
or an external page such as GitHub so let's just do that now I'm
going to leave some of these placeholders
so there's one there's two and there's
three okay now we're going to add a logo to our navbar similarly to how we did it
here so let's not forget that we need to add a source which at the moment I'm
going to need blank CU we don't have anything imported yet make sure the formatting of this is correct and then
we also need an alt for the visually impaired and I'm going to
have Ana Kubo logo so with my logo I'm just going to
actually import it by dragging it in so let's go to downloads now with my logo I'm actually
just going to drop it in so here it is I've searched for my logo on my computer and I'm just going to drag it into the
images folder we have already made so we will see it in our images folder right
here so once again we need to navigate to this file so I'm going to go into my
images folder going into it and getting the JavaScript games logo and it's a PNG
file so make sure that is correct and there we go we have our logo
in now I can already see it's too big I don't really like that so I'm going to add a class to this element so the
opening tag of the element and I'm just going to put
logo now let's go into our stylesheet I'm going to get rid of header because it doesn't exist anymore
change it to the nav element I'm going to get rid of the background
color next I'm going to the class of logo and make the height let's make it
30 pixels and I'm also going to give it a margin
so it's not so squished margin
15 30 pixels so once again this is a shortcut I could have essentially
written margin top 15
pixels margin right 30
pixels margin bottom
pixels margin left 30
pixels okay but this is a shortcut I am essentially saying this is the top this
is the right and then I'm repeating it so that is some useful knowledge for you
I'm just going to get rid of that now and use the shortcut instead okay so we have our logo however
everything is stacking on top of each other okay it's stacking block we need to change this and we're going to do
this with the responsive layout tool we used earlier and that is flex box so on
the Navar I'm going to initiate it so display flex and then use
justify content I'm going to choose to use space between for this one as I want
the space between each of them to be equal don't forget we've added a margin here so I'm talking about the space
between here and the whole div of and this div including the margin so
that looks evenly spaced to me the next thing we want to do is sort this out
because I don't want these Stacks over each other either I want them next to each other so for this I'm going to get the
unordered list tag I'm going to add a class to it
this because we are already using another unordered list in here so I need to pick this out by class or ID but I
think it makes more sense to use class in case we want to use this again and I'm going to call it
n bar so now I'm going to get the class of
Navar once again I'm going to use display Flex so I'm initiating
it I'm going to use just a y content Flex end let make sure it's
always at the end of the page and then we use something called
list style
type none this is because I don't want the little
dots nav bar Signet it's a class so we need the dot we are telling this we need
to find the div with a class of Navar let's initiate flexbox
justify let's initiate flexbox display Flex okay and now let's justify
content I'm going to use flex end this time because I want everything to go to the right of the page so there we go
that's happening and then I also want to get rid of these dots right here I don't really want them so we can do that with
something called list style
type none so we did see this before but we saw the circle and disk this time I
just want none okay this is looking good however I do want some space around each individual list element so I would get
the list element itself and go margin I'm just going to
use the short hand again so 15 pixels and 5 pix Source okay so that is now
affecting this list item this list item this list item but also these down here
once again this is a short hand so I'm affecting the top margin the right
margin the bottom margin and the left margin I'm going to show you one more
cool thing that you can do I can actually manipulate the text itself so
if I want the text to always be uppercase I can do that from my CSS I
don't have to go back into my HTML and write everything out again so that is quite cool and I'm just going to make
the font size smaller too make it 12 pixels okay my navbar is looking good
one more thing and that is actually we need to decide where these are going to go so let's go back to talking about
pffs so I've already shown you how to link to an external page and that is using using an absolute path so like we
did here so we are literally going to a web page that is my GitHub page we have
also discussed how to link to other pages in your project and we've briefly talked about how to link to elements in
your actual page so I'm going to show you how to do all three of them now so
we already know that to connect to a GitHub page or an external page you need
the absolute path similar to this now let's create a contact me page so in
here just going to save this file I'm going to create a directory called pages
and in it I'm going to create a contact HTML page don't forget to make
sure that this file is actually in the Pages directory now I'm just going to
put some boilerplate HTML in here change the title to contact page and
remind you that this is now not the relative path to our stylesheet why is
that that because our stylesheet is not in the same folder as our contact HTML
file okay this would be implying that it's in the same folder we need to go
out of this folder and into the root of our project so I'm going to show you how
to do that if I indeed want to use the same style for my contact page I would have to go
out this project so this is how you go out a folder going out of the folder
with these two dots and then I would need to get the Styles CSS
file so I'm just going to put something like an H1 tag here so we can see what
is happening
contact and go back in here so now in here I once again need to put
the relative path so I'm going into the Pages
directory and I'm getting the contact file click save now if I click the
contact me I will be taken to the contact page just going to show you what
this looks like in an actual browser contact me the contact page in
our actual browser you will see that the URL has changed this URL will be
whatever location you are in obviously I am using an online IDE so this is a
specific URL link for that IDE and then we are going into the pages
folder and then getting the contact page okay this is opposed to being on the
homepage there is nothing extra after it the index HTML is our root
okay so back to the homepage so we have linked up an external site we have also
linked up a page in our project the last thing I want to show you is how to link
to an element in our page so I can do
this with an anchor link all I need to do is actually use an ID and I'm just
going to write about me okay so now that is essentially linked to something but we need to tell
it where to go I'm going to choose to link it to this section right
here so I'm just going to write h2 tag the h2 tag is going to say about me
and then using open up our a tag name and I'm
literally copying this
ID so close that tag and then I'm going to close that tag
here save I'm also going to just make this
hero section A little bit larger so we can see this more visibly so this is the About Me section
I should probably rename this it's going to make it 500
pixels so now if we click about me you will be taken to the About Me
section once again let's view this in an actual browser about
me and it is coming more into view we can change exactly how much we
want this to scroll into view in our CSS but just know that it is coming more into our view as the
user okay just going to change this back
so we have our links however I don't really like these default colors they're not really doing much for me I don't
like this purple I'm going to show you how to change the color of the links based on certain actions that happen so
if we click it if we hover over it and so on let's go to our
stylesheet now I already have an a tag already done here this is when we
decided to remove the line so as a a reminder this is what an a tag will look
like without any interference however I've decided to get rid of the text
decoration now I also want to change the links to be black so there we go that's
happened but there's a lot more that we can do with these I can get the a tag and by writing this kind of syntax like
this I can change the color to be any color I want so now if I hover
over a link the color changes so this is a great thing to remember when you
really start to get to the nitty gritty of design and ux and UI you can even go
really wild and change the font size if you wish it is totally up to you the world is your
oyster just going to get rid of that for now as I'm not really a fan of that type
of look and there we go okay I think we are now ready to move on to the hero
section so I'm going to call this part my hero section if I just show you the
final product of what I want this to look like here we go my hero section is going to have my name a little bit about
me a button so I can get hired and an image so let's get to doing that now I'm
also going to make it responsive in responsive design page elements reshuffle as the view point grows or
shrinks a three column desktop design may be shuffled to two columns for tablet and a single column for a
smartphone responsive design relies on proportion based gids to arrange content and Design Elements while responsive
design emerged as a way to provide equal access to information regardless of device it is also possible to hide
certain items such as background images and so on decisions about hiding content or
functionality or altering appearance for different device types should be based on knowledge about your users and their
needs so let's get to it let's make our first responsive section so back to the
HTML file so I've named this section about me however I want to change that I don't
want to make this about me anymore I'm going to change this to be called a hero section so in our stylesheet let's find
the about me and change it to
Hero now for this to work I essentially need to split this section into two
sections okay so if you remember back to here I want two purple sections so that
each can hold different information and can essentially stack over each other if we go into mobile view okay so that's
what we want so let's build that out now let's make one
div let's make one one div
here and then another div here just so we can see what is going on
I'm going to call this class hero info and then the second one
class second for now I'm not going to keep this class it's just so we can see what
is happening so now
if I go hero info make sure it's a
class and second let's make it withth 300 pixels
height 300 pixels back background color
red and then the same for this one you will see that they are stacking over
each other let's also get rid of the height of this hero image so we can see so they are stacking over each other
just going to perhaps give a margin so you can see that a bit better too margin five pixels lgin five pixels we don't want
this we want them to essentially be next to each other but only stack if they go into mobile view so in the
hero I'm going to use display Flex to initiate Flex
box okay they are stacking however we do have all this extra information here too
so let's go back in here and take the button and the image so make sure to
take all of them and the h2 tag okay I'm just going to put that in
to Hero info so now they're in here and then we have a second Square here
so that's looking great if it's a larger browser however they're still sort of
collecting to the left I'm also going to use justify content space
between okay I think that's looking a lot better for what we need please bear
in mind I am building the site so it's maximum to these proportions this is just for the tutorial if you are
building this out to use on the browser please be conscious of of the fact that this in the browser will look like that
but yeah for this tutorial this is going to be the max that we're going to view this website in okay the next thing we
need to fix is that I actually want these to not squash in like so I want
them to actually stack over each other so you might remember a little something called Flex wrap and
wrap so now as soon as the two squares don't fit
on the same line they will wrap over each other like
so okay so that's one option and that's the second we can also even get to the
nitty-gritty of what happens when we are at this stage because obviously there's a lot of Blank Space here but that is
something I'm going to leave to a later on lesson let's get comfortable with this part first so there we go our hero
image is coming along nicely we've got our hero information and then
our second Square here too I'm just going to give the hero information a
larger margin I'm going to stick it to 30 and I'm actually going to get rid of
this second styling for now you can see what is happening so I'm going to get rid of that and I'm also going to get
rid of this class the only reason I added it so you can visually see it but just be aware that if we put anything in
here the same styling and same logic will apply and I'm also going to get rid of
that for the next part let's actually add some text so let's go back to our
index HTML here going to get rid of the contact page
too make this a little bit smaller so we can see
everything so we have our name I'm just going to start this to look better because we already have an ID for it
here so I've said blue but I don't actually want that let's just make it a bit
larger so I think 45 pixels would be good enough right and then make it
black I'm also going to make this an H1 tag on than H2 as we want to prioritize
this and then I'm going to also put a paragraph okay and in the paragraph I'm
going to put I am a professional
software developer and
YouTuber I love to teach anyone and
everyone how to okay so that is looking good however
you will see because there's no div here at the moment the text is stretching I don't really like this
let's fix it it in the so let's check what this is in the P tag the parent of
it is hero info so let's go to Hero info and give it a Max width of 300 pixels
that's not a width that's a Max width okay so it will mean that this will change if I go any smaller the max width
will always be 300 great now I'm actually going to get rid of this image here I've decided that
I don't want it here anymore I'm going to have an About Me section and I think that will fit much better into it so I'm
just going to put it here and make sure that it's formatted
correctly the next thing I want to show you how to do is create custom thematic
breakes so a thematic break I'm going to show you what this looks like as a
default under the paragraph here so I can put in a thematic break similar to
this it's just a simple line it's essentially a break however I don't like it I don't really like how it looks I'm
going to create my own so I'm actually just going to use a div for this and I'm going to give a
class of styled
break so let's go into our CSS styled break
I'm going to give it a width so I'm essentially just going to make a rectangle and round off the edges width
give it a height 5 pixels so that we can see it a little bit and then give it a
background color I'm going to go with the purple
that I'm really into at the
moment so there we can see it right here and then I'm going to going to give it a
border radius we're going to round it off of 2.5 pixels so that is half the
height and then let's give it some margin so once again top
margin side margin bottom
margin side margin and there we go and finally I
just want to change this button it's not really the style that I'm going for of course this was a great button to show
you all the different things that we can do to a button but let's change it for the sake of this
design so I'm just going to get rid of the majority of this
now save that going to give it padding and pixels
instead let's give it a background color I'm going to use the orange that is in
my logo EF 866
C I'm going to give it a width 80 pixels of course a border radius because
I'm partial to border radiuses I say 20 pixels I say the font should be
white that is white and I also want the text to be
be uppercase so whenever there's a button we're going to transform text to be uppercase and font size 12 pixels
let's also align the text so it's Center so text align Center there we go so I've changed the
button however I'm not going to change much about the hover actually maybe let's change the hover to a slightly cuz
at the moment it just goes red let's change it to a slightly more orange orange
so I'm going to use 744b this is one I found on the
internet earlier okay I think that's looking good and if the button's active well we
still have the box Shadow inser and I'm quite happy with that I'm going to keep it let's go back to here now and instead
of Click me I'm going to put higher me and we'll link that up to something
soon okay so we have this here the one last thing I want to add is an image so
once again I'm going to drop in an image that I have previously
made it's an image called working illustration I'm just going to drop it in
here so let's just make sure that I don't want that one in there just going
to change it working
illustration illustration PNG great and inside this
div I'm going to get the image tag I'm going to open it
up I'm going to use the source of the
relative part I'm going to into my images folder and I'm going to get the working
illustration PNG great so there is it's very large
don't worry don't forget to give it some alternate text for the visually impaired
working illustration of a
woman awesome let's also give this a class we can sty it I don't like the size so
Class Hero image and let's go into
here and write under the I like to keep everything roughly together so under the
hero info I'm just going to have hero
image and let's make sure to give it a size that is makes sense so it
fits just going to give it that size right here and once again I'm going to give it a margin because I don't like it
being so close to here I'm going to say margin 30
pixels okay so if we go into the larger size like this we can see both and if we
start moving into the tablet so ideally this looks good and this looks good
however I don't really like it when it's like here we'll have to fix that as I said when we start doing more responsive
work so this is talking about break points but for now let's carry on so I'm
liking how this looks here let's get rid of this now we don't need this now we don't need to see how
the div is looking and there we go
I'm also going to get rid of this hero background I don't want it to be this color
anymore I just wanted to take on the color of whatever is the
body so in the body here I'm going to say background
color and this is a sort of off Gray
and perfect next up the abat me section I'm just going to move this over
for now like this so we can work on the About Me section so let's go back in
here so once again I'm going to have to split out the About Me section into two
divs so as you can see here in the purple Under the hero div and then each of the two purple divs is going to have
a different amount of divs in it stacked on top of each other so let's do it
hopefully this is becoming more clear to you we're going to do exactly what we did for the hero section but to the
About Me section so in this section right here I'm going to make a
div I'm going to call it I'm going to give it a class
of about me so there's our one div and there's
our second div
once again I'm just going to give it a CLA so we can see what is happening so
second into here under our
section about B and
then second so width 300 pixels height 300 pixels
background color blue and
margin pixels and then same for the
second once again you will see the two Dives now what is quite good about this is that they are in the section their
parent is section so we are already adding the flex wrap to it meaning that they will stack however there got a lot
of other stuff in here too so let's sort that out
first off in the About Me section well it is confined to a height so let's get
rid of that okay so there we go it's now
stretched it also has some other things in here which I don't want so let's go
back in
here I'm actually going to so in the first box box I want to put in my image
so let's do that for the about me let's get the image and then in here put in the image
so that is looking good and then in the second box I'm going to put the h2
tag okay and then we have some socials which looks fine if we view our site in
a browser of these proportions however if we get any larger the socials go to
the right I don't want this happening I want them to stack over each
other so I'm going to take one of these I'm going to remove them from this
section so that's looking better and I'm just going to create
another section so it's got its own separate section
now and let's just post them in here okay so this is the great thing about
classes I've essentially reused The Styling for sections so now each of my sections has this red and yellow
gradient I could just repeat section section over again and there we go I don't actually
like the colors of the section so let's just make it white have background
color white and there we go so even though
this is is technically two sections you can't really see the difference but they are staying in the correct layout that I
want at all times great now let's get to some
styling okay now I'm just going to get rid of the blue boxes for now and we also don't need this second box right
here so I'm going to get rid of that second and I'm actually going to call this info
instead that makes more sense and once again and just get rid of the height and
the background color for the about
me let's make sure that the image always stays in the
center let's do justify content space
evenly okay and let's add some text for the About Me
section so once again I'm just going to use a paragraph
tag and I'm just going to put some text this can be just a little bit about
yourself it's totally up to you I'm just putting some placeholder text here for
you
okay so we have our text it is quite long once again we get this problem so we can easily fix this with you guessed
it applying a Max width so we gave it the class of info I'm going to say
Max with 300 pixels okay it's looking
better and I'm also going to give it a margin of 30 pixels everything in here
I'm basically giving a margin of 30 pixels I just think it looks quite nice let's do the same for the image here
margin 30 pixels actually no let's get rid of it
from there okay so this looks good however it
doesn't look so great when we suddenly switch it out so I'm going to apply some styling to the
section of course Please be aware that it will apply to this but I'm absolutely fine with that I don't mind I think
it'll look quite good so let's find a section and give it a margin we just
want the top so I'm going to put 40 pixels and then the size we want
zero padding there we go
actually we might make it zero zero okay I think that's already looking
better we slowly getting there slowly but surely so there we have it you can of
course feel free to edit this as you wish I'm sure some of you have uh different ideas when it comes to styling
this is only a tutorial for you to take and use as you want let's check the
about me is linking correctly and boom there we go about me boom it's taking us
directly to that section I'm really pleased with that and let's just check for mobile that is also looking good
too okay now I want to put some Social Links here however first before we move
on let's actually create a contact me form so that's what I'm going to do forms up next
okay so next up we are going to learn all about forms so let's start creating our form using HTML and CSS first for a
form we will need some type of script in order to actually submit the form so it's going to be a great segue into
learning a little bit of JavaScript but before we get onto that point let's get it working visually but
so let's decide where we're going to do this well I'm actually going to create a new section for this so once again I am
creating a section there we go and in this section
I'm going to use a form tag so once again this is not something I'm making up this is pre-made for us and opening
up our form you won't see anything in it now this is because we actually have to start putting stuff into our form
first now I'm going to put an h2 tag in here that is absolutely fine you don't
just need to put inputs uh into a form so here is my first thing that I'm going
to put into the contact form and that is just an H2 tag you'll see that showing
up right here now the form element can contain
one or more of the following form elements an input tag a text area tag a
button a select option an option itself a field set a label and an output so I'm going
to show you some of these now let's create our first part of this form and
that is a way for someone to input their first name and last name so I'm going to create a label this is we can actually
see what the form options are for so label for first name make sure that is
an equal sign and I'm just going to put first name like so so we can see it and the
next thing we need to do is create an input so here we have an input tag I
want to specify that the type of input we take is text I'm also going to give an ID so we
can work with it later so this is just correct things that you need to put with an input field first
name and I'm also going to give it a name of first name this is also that we
can use it with our JavaScript later on and in here I can also put in a
placeholder we can do this by simply adding another attribute and I'm just going to
put John so there we go that's how you put a placeholder in of course this will
disappear if I start writing on it it's just a placeholder as mentioned at the moment
this isn't connected to anything that's what our JavaScript is going to do I'm just going to really push that out for
now so we can see everything in full so there we have our first label let's do
the same for a second
name second name second name or maybe we could put
last name that probably makes more sense last
name and then again I'm going to put a placeholder name of d so that is one
example of an input it is a text input I'm going to show you another
now so another input that we can have is a radio button option if you don't know
what a radio button option is I'm going to show you here so once again we use the input
tag I'm going to put type radio and you will see
we get a little dot that you can select show up like that so that's pretty cool
once again it has no functionality and once again we need to give it an ID and
a name so I'm going to go with ID and I'm going to use this for [Music]
displaying office work name office work and it actually does
need a value even though you can't see it for now I'm going to put in anyway
it's for later on in our JavaScript and once again let's not forget to give it a label so label this is for the button
itself for office and then I'm just going to
put office so what I'm getting here which I'm going to put that label below
that looks more sense that looks better so you can select
office like so just going to do a few more so I'm
just going to do maybe three so we got office and change this one
to remote work and once again make the label say
remote work so we can see it visually in our browser and then this one I'm just going to put
other other okay so now I have three options three
little buttons that is looking cool so we've
got a text input we've got a radio button what else can I show you well there's also another type of button and
that is a checkbox so why don't we go ahead and create that it is also an input
tag type we're going to put checkbox
so once again you can see it's already a checkbox and once again I need to give it an ID and this time I want my check
boox to tell me if its contract work so I'm just going to put ID
contract name contract and
value contract this might seem like Overkill but it will make sense when we start doing the
JavaScript so we've got input let's give it a lb
label for
contract and then just we can see the text contract
work okay and once again I'm just going to create two
more make sure they are format Ed correctly
too and that label is spelled correctly
Bell so we've got contract work let's make the second one full
time so once again full time and this
one we'll put
spons ship
sponsorship great so we have all our fields that we want we now need an onsubmit button and this again is going
to have to be an input so there we
go submit so we've got a button here
type submit value
submit and then I'm going to add the class that I use for this button here because I want all my buttons to look
the same class button
Tada so I don't actually need this here because it's picking up from the value
and there we go okay this is looking good let's just make sure to make it look nice so this
is where some of our layer Works going to come into at the moment if I pull this out it's just all appearing on one
line I want it to be a stor of each other and then on one line for some
occasions so let's do it like so I'm going to make a
div I'm going give it a class
of input section so at the moment you'll see that
that has split out this first one here let's do the same for the second
batch of inputs once again closing
div make sure to format correctly so it's more
readable and then last one
and I'm closing div and make sure to format it so it's more readable so now
instead of them all being in one line because I put them in three separate divs the three divs are stacking over
each other so that's one step in the right direction let's go to our
styling and then towards the bottom so I'm going to do it here
input section I'm going to put margin I'm
going to space them out the top not the
sides okay so that's looking much better I mean it would be nicer if this
perhaps fit on one row instead so let's do that up here
too I'm want to put the first name and surname in a separate div
it's one div it's a second
div and then I'm going to give this a class so that the first name is over the
input I want to give it maybe input group they are grouped
together so this one and then here do input
group do input group display
Flex Flex Direction
column and then let's give it a Max with two so just the width we find
well actually perhaps we don't need this and then for the input section display
plugs okay and just give this a margin so it
gets a margin just to the right that would be
0 5 pixels 0 0 okay and this is looking a lot
better nice let's perhaps give the form a bit of
space down here so I'm going to put up here form
margin nothing from the top nothing from the side 40 pixels of the bottom and
nothing from the other side okay great you can of course play around with these
as much as you like it is totally up to you it's obviously however you wish to
display these things same for the footer perhaps you want it to appear in the
middle once again I'm just going to use display reflex and justify
content Center to do that great this is all looking really good
there's three more things that I want to do before moving on to JavaScript and that is learn how to use icons create a
new page and talk about breakpoints so let's do
it in this section I want to talk to you a little bit about how we can include
pre-made icons into our project with the help of something called font awesome
let's do it font awesome is the most popular way to add font icons to your
website font icons are created using scalable vectors so you can use high quality icons that work well on any
screen size I'm going to show you how to do this now so I'm just going to minimize
this you can already see all the cool icons that we can use all we need to do is get
started so start get started for free I'm going to put in my email address and
then get sent the startkit code so you will see that I've already got it sent
to me but you should receive some code that looks a little bit like this
this okay so click to confirm your email select a password so I'm just
going to select a strong password Ania
Kubo just going to leave this to 2020 and all let's go okay so you first
need to add your kits code to a project so I'm going to copy this script and
head over to my index HTML file well I will put it in the header so just under
the link here I'm going to put in my special link to font awesome now I'm
going to pick a free icon so let's just go ahead and for the sake of this use
this one make sure to be in free you can of course choose a paid one too but for
this I'm just going to use a free version and then you can choose the
color you can essentially edit this as much as you like I'm going to click start using this icon and then I'm
simply going to copy this go back to our code and then the index HTML file where
you can see these divs here I'm just going to replace it like
so and there you go you will see my user Circle show up now I can of course edit
these more and more if I want however you might have to upgrade for this there is so many and so many you
can choose from for example if I want to start using this icon just going to copy
that and once again put that in my project and you will see I can go ahead
and replace all of them okay so that is how you would use
Font awesome icons there are plenty of free ones there are p ones too and you
can of course edit them the colors and how large they are based on your
preference if I want to pick one out I can simply pick out one of these words so I'm going to choose
far as it's the class name that is appropriate for all of them so I know
that we mentioned that elements can have more than one class name this is a great example of that I'm going to go in here
I'm going to pick out far and I'm going to give each one a margin
of three pixels okay so that immediately spaces them all out at the moment these
are not linked to anything but please feel free to link them up using the href similar to how we did with the list
items that is also an option too now let's move on to creating new pages so
as you can see I have my contact me section right here let's go ahead and
move it to the contact page cuz I think it will make a lot more more sense there so I'm going to essentially take this
entire section so I'm taking the entire section here you will see now that the form is
gone and I'm going to actually put it into my contct HTML page and save so
now if I click on my contact page you will see that the form shows
up once again I'm going to put this in my my browser click on the contact and
there we go as a reminder you will see that the URL has also changed so the URL
is taking us to the Pages directory and then our contact page at the moment this
page is not really built out we cannot even go back to our homepage from this page we will need to essentially delete
the URL in order to do that so that is something that you might want to consider working on if you do want to
have more than one page in your project let's go back okay so even though this is looking
great I am also going to keep a copy of this in my index HTML file there's no
one telling me that it can't be in both places so I'm going to keep it like that okay so I think we are now ready to move
on to talk a little bit about break
points so so far in this tutorial we made a web page with RS and columns it
was responsive but it did not look great when we changed the size of the screen to just about here we were left with a
lot of white space to fix this we need to talk about break points and media queries can help us with that we can add
a break point where a certain part of the design will behave differently on each side of the break
point media query is a CSS technique introduced in CSS 3 it uses the at media
rule to include a block of CSS properties only if a certain condition is true for example here if the browser
window is 600 pixels or smaller the background color will be yellow let's
check it out okay now let's see this with an example so here we have our page once
again I am happy with it when it's in mobile I'm happy with it it's in browser
I'm not happy with it when it's around here okay so let's change that I'm going
to guess that the width of my page is about 600
pixels so if anything is under 600 pixels I want the text to stretch and I
want to make the image disappear so we can do this like this I'm going get at
media only screen and Max
width 600 pixels just going to make this a little
bit smaller so we can see so now if our browser is under 600 pixels I
want the hero info to have
a width of 600 pixels
so you will see 600 over 600 over 600 over 600 and under 600 and you will see
that text is now spread so once again over
600 under 600 so perhaps we can even make it larger let's make it Max
width 800 700
you could just fill around with this whatever feels good to you so there we
go and that's when the switch happens you can even see it in slow motion there we
go and then make the max with 650 or 700 actually just to make it fit
the whole way and there we go okay now let's make the image
disappear so make sure you are in the curly braces and at The Brak point of 700
pixels I want you to get the hero image and
visibility hidden okay so we can see the image and
then can't see the image it's disappeared I'm also going to make the
height 0 pixels so that looks a lot better and there we go
so I'm pretty impressed with that I think that looks a lot better we are simply getting rid of the image once it
gets the 700 pixel break point you can also have as many break points as you
like so obviously there's ours and boom then it disappears it is totally up to
you try again with a color just to get some practice with it let's do about the
footer so the footer changes color that should be quite simple for us to see so
let's scroll down to the footer and then right below it add media only screen and and then
Max width so let's set the max width is time to 500 pixels so as soon as our
browser gets to 500 pixels so if we're going this way
500 over 500 pixels over 500 pixels over 500 pixels under 500 pixels the color
will change so let's grab our footer so let's grab our
footer and make the background color
blue refresh once again over 500 pixels over
500 pixels over 500 pixels over 500 pixels under 500 pixels blue over
under over under so that is pretty
cool now of course we can also have Min width as well so if I change that to Min
width and save the opposite will happen so a lot of developers actually design
mobile first which means they will make sure that the design looks perfect in a mobile form you will find that most
websites do get visited the most from mobile so perhaps this is the shift happened it also means that if you
design mobile first you will need to use the minwidth on your media queries
because as you get larger so then you start designing for tablet then you'll apply a style and then if you want a
different style for desktop where you can add another Min width so that's it
Max width and Min width it just depends what browser you are designing for first
and what you feel most comfortable with okay let's move on I think it's now time to start writing some
JavaScript but before we do that let's recap everything we have learned so far about HTML and
CSS let's take a quick break to talk a little bit about the Zed index I'm going
to do that now the Zed index property specifies the
stack order of an element an element element with greater stack order is always in front of an element with a
lower stack order I'm going to show you what I mean by this and how we can use the Zed
index so here we have my index HTML file I'm just going to go ahead and put
into divs so here is one
div let's give it a class first block
and then div second
block now let's go into our stylesheet which is in the source
folder let's grab the first block so just like we did here we need to get the
class so I'm going to use a DOT for class and then open up our Kye braces so
that is our first block I'm going to style it up a bit so I'm just going to give 100 pixels width and
a height of 50 pixels and a background color of
coral and I'm just going to copy this we're going to have two blocks so it's the first block and it
was the second block so once again that is a class so we need the dot and I'm just
going to pull it second block and let's give it another color so we can
tell so there we have it now I can actually move so I'm just going to give
this a position of
absolute by saying position absolute I'm saying that I want the position of the
first block to be absolute what I mean by this is by giving the position property the value
of absolute we are making Mak sure the element is positioned relative to its first positioned ancestor element so I
have given the body some styling if I was to just commment that
out and refresh that is the absolute position okay it will always be there
that is absolute and if I was to do the same for
the second block it will be in the same position they're not uh appearing in line or
block I would then move I can then move the second block so let's give it a left 50
pixel so I've literally moving the second block which is a light SE green 50 pixels to the right by giving a left
spacing so given it left spacing of 50 pixels I can go 150
pixels I can go 80 pixels okay that is just one example of how I would use
position absolute and left now say we had this styling but I actually wanted
the second block to appear below the first block okay so what I mean by this
is I want the orange block to be more visible and the green block to be below it I could do this with the Zed index so
I can either choose to get the first block a zed index of one and that would move it
above the green or second block which has a default Zed index of
zero I could also have chosen to give the second block a zed
index of minus one okay both things would do the same
thing that is how the Zed index works sometimes when you have more than one or
more than two elements apart from yours on your screen you would have to increase the Zed index from -1 to - 2 -3
or - 99 to be sa if you do really want it to be at the very very bottom of the
stack okay so that is how the Zed index works I'm going to ask you to do this by
yourself with a little challenge so I'm just going to get rid of all
these so make sure in your style CSS you just have a body with a background
color and then in your index HTML file I'm just going to refresh
this we're going to have a first block a second block a third block and a four
fourth block so third
fourth so that is my index HTML file that is my
stylesheet I want you to essentially build out the four blocks as circles so
I want you to create four circles and stack them on top of each other so
but visibly on top of each other like we just did to have the first block at the top and the fourth at the bottom okay so
four blocks or let's just be more precise four
circles that are stacked on top of each other as a clue I've made this example
this is what I want you to recreate in your browser you can make the colors different you can make the space faing
different that part is up to you okay I'm going to pause here while you have a go at doing this so once
again this is what your index HTML file should look like and this is what your style sheet should look like
okay good luck I'll see you in a
bit okay so if you've managed to do that well done and if you haven't don't worry we're going to go through the solution
together so I'm just going to make sure that I've saved these files we don't need the index JS file for
now so the first thing I would do is grab my first
Circle I'm just going to grab the first Circle let's open up our Cy braces let's
actually style it up so we can see it I'm going to use 50 pixels and a height of 50 pixels and then a border
radius 25 pixels to make it a circle making sure just SP border radius
correctly and background color let's say
salmon and I am actually going to reinstate this cuz I do want it to be in the
center so that is my first Circle I'm actually going to make it a
bit bigger why not it's a bit small so there we go my first Circle I'm
actually just going to copy this for the second Circle and let's give it another color
this time let's make it a bit
lighter it's not lighter let's make it lighter
we go and then we need a third
circle once again I'm going to make it even
lighter and a fourth circle which once again you
guessed it I'm going to make even lighter so we've got our four circles
now I want them to stack over each other so let's do that first well I could do
that in the body so I can simply write Flex
Direction column and there we go they are stacking
over each other I'm also going to give it a
margin left so we can see it 150 pixels it's just for us let's get
rid of that and now let's do some positioning and
Zed indexing so for this one position
absolute so it might appear to be disappeared but it's just because all the circles will now be in the same
position roughly or exactly so there we go so that is our absolute positioning
now the first Circle well that was the darkest wasn't it so let's give that a zed
index of Min -4 and I'm also going to give it a top
of 400 pixels so now it's moved all the way down there that is fine for now we
will be adjusting these this one I want to be the third last so I'm going to
give it a minus 3 index and top 300 pixels
actually maybe let's make it go down a bit more so let's go 350
pixels okay so you already see it is
stacking this one we're going to give it a zed
index of minus 2 and a top of 300 pixels there we go and then finally the
full circle which is the top Circle I mean I just leave it as it is
in fact so top 250 pixels and there we go we have now
completed the challenge it is absolutely fine if you chose to do the Zen indexes the other
way so use positive numbers or choose different colors or choose uh different
sort of styling as long as you've got them stacking to look similar to this you have passed the challenge so well
done I hope you've enjoyed this little challenge with me let's carry on with our
lessons congratulations everyone you have now finished the CSS section of our
boot camp next up it is time to focus on JavaScript now even though we have
finished the CSS portion there will be some extra lessons in the next section to as CSS and JavaScript are often
closely intertwined for now I would save the project we have been working on and
put it away while we will go back to it at one point in the course that part of our learning is now over and we should
start up a new project or window in our code editor JavaScript is considered to have
a different way of thinking than CSS and HTML it can take a while to get used to
it and for it to stick this is why this section is going to have a lot more
exercises and projects along the way don't worry though when you understand
the way of thinking in JavaScript it will become second nature to you something will just click patience and
persistence will be key in this section so please do pause and go over a section again if something is not clear the
first time round once again I will be providing code playgrounds for each of
the lessons so if you do start a new section or for some reason your code editor is not working please use the
timestamp code playgrounds in the descriptions below Okay so what are we
waiting for let's do it JavaScript we will be starting off with some Basics and moving on to the fun stuff once we
get an understanding of the fundamentals first such as what is a variable a
function and so on okay now it's time for the JavaScript
portion of our course but what exactly is Javascript JavaScript is a scripting
or programming language that allows you to implement complex features on web pages every time a web page does more
than just sit there and display static information for you to look at you can bet JavaScript is probably involved it
is the third layer of the cake when it comes to standard web Technologies two of which we have already covered our
HTML and CSS JavaScript is not to be confused with Java which is a completely
different language in itself so to recap JavaScript is not Java it is a
completely different language JavaScript is also one of the core Technologies of the worldwide web this is alongside HTML
and CSS JavaScript essentially allows us to have interactive web pages so as in
the case of the form that we are currently working on it will allow us to add functionality to that form and send
off information for us what is even more exciting is that we can actually add extra levels or superpowers to our
JavaScript code with so-called application programming interfaces or
apis apis are readymade sets of code building blocks that allow a develop to implement programs that would otherwise
be hard or impossible to implement think of it in a way as Lego blocks you're building something in Lego and then you
suddenly see a whole other part that's already been pre-built for us we can essentially take that part and put it
into our project that is what an API is in a nutshell don't worry we'll be
looking at some real examples of this later on so in this part of the course this is
going to be the biggest part of the course as there is a lot to learn we've already covered the Core Concepts of
JavaScript next up we're going to have a look at variables and then control flow
which includes if statements for Loops operators then classes functions methods
and HTTP there's a lot to get through I'm excited let's do it in this section I
want to talk to you about file setup when working with JavaScript let's do it
so up until now we've only been working with HTML and CSS this is some boiler
plate for our HTML which we discussed in the previous section I also have a link
to link our stylesheet so our style CSS file which is here we have told in our
IDE that this is a CSS file by giving it CSS extension file extension and hence
we get this little logo right here now how do we get to adding JavaScript well
first off I'm actually just going to make a Javascript file I'm going to call it index
JS so JavaScript JS is for the JavaScript we are telling our IDE that
this is a Javascript file and enter and you will see the JavaScript logo shows
up which means this is correct this has worked we've got our index JS
file now if we go back to our index HTML I can use a script tag so similarly to
how do I did here I could simply put a script tag like so so opening and
closing script tag and then the source of this is going to be my
index JS file now it is best practice to put
the index GS and sty sheet in a file of its own or a folder of its own sorry so
I'm going to make a new directory and call it Source in it I'm going to put my index
JS and style CSS this might not make sense now but when it comes to building projects and
deploying them onto the internet it makes sense to have the source folder different to the build folder so that is
how we would do it this however means we get some error messages because before
the index HTML file was in the same directory so the same the root of our
project with the star CSS file it can't find anymore because we are telling our
index HTML file that the stylesheet is here with it in the root it is not nor
is the index JS so we need to fix this by going into our source folder and
getting the stylesheet and once again going into our source folder and getting
the index JS file and there we go we have now fixed the
errors now if you do wish to keep your script file in the header and this is
important so I'm just going to open this up yet we would have to actually wait for all the HTML to be
loaded before applying any JavaScript so to do this I would have to add this
piece of code which we will start talking about much later in this lesson so I'm just going to show you for now
but keep it in mind because we will go back to it I would have to use a ad event listener to listen out for when
the content is loaded so like that and then once all of
our HTML has loaded then so don't content loaded and only then will we be
able to execute any JavaScript Okay so so that is one approach it is totally up
to you if you use it this way or you can get rid of that and simply move our script tag to
be at the very bottom of our body so in this case you'd have to remember to
write all your HTML above the script tag at all times each way is correct the
first one is considered to be maybe a little bit more foolproof but both work for small projects each one is fine I'm
going to carry On by using this approach for this course okay I think we now have
the setup down if you are using the code sandbox like I am there is a preference
that I like to use if you go into the file and into the preference settings
and choose sandbox settings in the prettier settings I have chosen
then to essentially get rid of my semicolons this is a personal preference
as well I don't want the semicolons are being added if I save a file I've also
chosen to use single quotes so these are two of my preferences this is what
you're going to be seeing in the course so if you like the way I write it then please feel free to change these or if
you don't want to that's absolutely fine too the choice is up to you so that is
how you go into it once again it's file preferences code soundbox settings and
prettier settings these settings the prettiest settings will essentially be applied each time you save a
file great let's Carry On First lesson
of JavaScript let's go first up variables okay so before we get started
I just want to take a little moment to talk to you about the file structure here so as previously we have our index HTML
file in the root of our project meaning it's at the very base of our project I
have then created a directory called Source in which I have stored my stylesheet so just like we were working
with before when it was just CSS and HTML however I have put it in its own folder and then we have an index JS file
in here now too so this is new I have named it index and I have told my code
editor to treat this as a JavaScript file based on the extension I have put
these in a source folder it might not make sense now you might think why am I bothering to do this however when it
comes to actually deploying what we built this is a very important step I'm not going to go into it too much now
however just be aware of that it is something that we're going to cover when it comes to deploying our project okay
so as a recap make sure the index HTML file is always in the root and store
your stylesheet and index JS files in a source folder
okay let's get to our first lesson of JavaScript so in JavaScript you can store values in something called
variables they are legal identifiers quite simply it is this so
the variable X here equals 1 it is important to note when you declare a
variable its name must be unique you can assign numeric value to your variable so
like this number one here you can also assign a string value so by string I
essentially mean a word or a number or a Boolean
that is in between two quote marks that makes it a string an
array so an example of array would be this I am opening up my array so I'm
getting these two square brackets and then passing through a string and then another string that is an array
of two strings we can also store booleans
so true or
false and finally we can also leave our variables undefined so that we can assign it value later on now by
definition variables means anything that can vary so let's see this in action
just going to get rid of all these for now we're stripping it back to just
saying that VX equals the numeric value one now let's grab X so I'm going to
grab X and assign it the value 23 note we are not declaring it again so
we're not putting VAR here x has already been declared up here we are simply assigning it a new value and that is the
numeric value 23 I'm going to use something that is inbuilt essentially
and that is a console log so I have not made this up this is for our use and I'm going to console log the value of x to
view this I'm going to get my console log up so in here in our simulated
browser I can click on Console in order us to see what is essentially going on
in the back so this is how we would view it I am seeing that yes I'm console logging 23 I can also console log
directly so just hard code something like hello and that will show up in our browser too so I'm console logging a
string and am console logging a numeric value this is essentially the same as me
inspecting the page in the browser so once again let's go to Google similar to
our example before and I'm going to inspect the page so once again control and left
click inspect and click console here this is
exactly the same as what we are simulating in this online IDE so let's
refresh that now I can also reassign this another value so if I click save
now X is now five you can imagine it as me just taking this value and sticking
it on top of here and then on top of here if I however get this and put it
there and refresh the value of X is 23 this is because we read JavaScript from
top to bottom okay now let's talk a little bit
about Scope when defining variables it is important to know that they have scope
variables have two types of scope Global scope and
function scope Global scope means that variables can be accessed in a whole Javascript
file right here and function scope means that the variables can only be accessed inside a
function let's have a look at this in code so I'm just going to get rid of this
here I'm going to write a function this function so this is the first function that you're going to see
print name this is essentially the Syntax for a function you tell the file that you're
writing a function so once again I did not make this up this is how you tell the file that you want to write a
function this however I did make up this is a name that I have chosen to call my
function I've chosen to call a print name we then open up some parenthesis we
do this so we can pass variables into our function and then we use some cardi braces and this is where all the magic
happened so this is where I'm going to write my code to invoke the function
we then do that so just as an example I'm just going to put console
log High
Ana and there we go you will see that because I'm calling my function I get
high Ana if I get rid of that essentially nothing will happen I
need to call the function in order for this to work okay now I'm going to declare
variable so I'm actually going to say VAR name and declare this as Ana now
instead of Printing High Ana here I wanted to print whatever name I want so I'm just going to pass through the
variable like so so console log High Ana if I clear my
console log you will see that that is working
that is because our variable is stored globally okay it can be accessed within this
function I can change this to Chris I can change this to
Rob this is a great example of a variable having a global scope however
what if I move this variable to be inside another function so let's have it here
function print last name
and then let's call our print last name function and in here just going to put
console log
Pi name last
name don't forget a
space let's define last name so last
name Deca just going to move this over for
now so now we have two functions this function prints out the first name and
the last name so maybe let's change it to print full
name and this one just prints out the first name they both work as both of
these variables are Global but what if I took this variable and put it only in
here so now just going to make it more clear
which one we are working with print
name and this one is print full name
so now print name we'll pick up hi Rob this is because the variable is being
declared here however we are not picking up the name here you will see in the
console log that print full name is simply printing out High Deca this is
because this variable here now has function scope we cannot access it in
this function it is scoped to this one only so I'm just going to move this over for
now so you can see everything so let's recap that again this variable so V name
is Out Of Reach for this piece of code okay hopefully you now understand a
little bit about global scope and function scope let's move on
now what is const
and let and how do they differ from V so when es6 came in it introduced two
new ways to create variables let and const so what is the difference between
them and VAR let's focus on let and VAR first let allows you to declare
variables that are limited to a scope of a block statement unlike far which
defines a variable globally or locally inside a function I'm going to show you
a great example of what I mean by this just going to move this over so
here we have a function function find X you will see that v x is here defined as
one and then inside these squ braces we declare VX again we say VX is two
now if I console log X here gives me two and if I console log X here it also
gives me two this is interesting as I would have expected X here to be one as
I would have thought that v x here is outside of its scope however with v that is not the
case let me show you the same thing but with let so I'm just going to change this and
this to let and click
save you will now see that X in here is 2 and X in here is one that makes a lot
more sense to me this is because X here is outside of the scope of here so X
should be one so I've written the same function simply replacing let with
v this is what I mean when let allows you to declare variables that are limited to scope of a block statement
unlike VAR which defines a variable globally or locally inside a function
hopefully you can see how using VAR can be very confusing for writing code this
is just one of the reasons that let and const were invented and why VAR is very
rarely used today in professional coding standards however it is useful to have
this knowledge just in case you see it being used in projects now finally there is is
const const works in the same way that let does in that you cannot access it if
it's defined inside a function or block statement however it is also constant as
the const would indicate once you have defined it you cannot overwrite it later on this is pretty useful when working
with big projects and declaring what you do not want to be changed let's have a look at this in our code editor so for
example here I have const count and I'm just going to put some
integer values in here like so now if I get count and try to
override it so I'm just going to put 1 two 3
8 you will see here count is readon we cannot override count if I was to
console log out count you would see this orig array not this one we cannot
override cons okay so there we have it let's
recap V declarations are globally scoped or function scoped while let and cot are
block scoped V variables can be updated and redeclared within its scope let
variables can be updated but not redeclared and const variables can be neither updated
or redeclared let's have a look at some more examples together so I'm just going
to get rid of this for
now okay now time for a little practice question just going to move that over
here and move that back here we have two functions one here and one that has been
commented out both of these functions will not work as count is not defined F
so it hasn't been declared and nor has name using either const or let how do
you think we would solve these functions in order for them to work as a clue you just need to declare them using const or
let here so have a think about it which variable do you think would suit count
here would it be let or
con okay so I'm I'm going to show you now this function increment essentially
takes the count which is currently zero and then assigns it the value of whatever count is at that current moment
in time plus one so when we call this function it should add one to whatever
the current count value is if I choose
const this function will not work this work because count has already been declared as a con and is read only
meaning we can't reassign it in new value I would have to make this
let so now if I console log
increment and return the count I will get the value of
one great let's move on
here we have another function that currently does not work this is because name is currently
not declared we need to tell our JavaScript whether to use let or const
so here we have a function that uses the name variable we have written a function we have called it send text and then we
are simply console logging hey name you left your bag at my house and then we
are calling that function so as you can see here we can't do it at the moment it
is not working we need to decide whether name Doug is let or const what do you
think it should be okay well I can tell you that the
name Doug if I choose let that technically will work however
it's not the best practice as the name is not going to change we are not reassigning a new value I should be
using const because the name will not change hey Doug you left your bag at my
house okay so hopefully that has enlightened you a little bit more into the uses of let and const once again we
will not be using VAR from now on V has essentially been replaced by let and con
with es6 and we will not be using it from now on next up we're going to learn about control flow
okay and now it is time to move on to control flow JavaScript supports a
compact set of statements specifically control flow statements that you can use to incorporate a great deal of
interactivity in your application this next section provides an overview of all of these statements so if statements for
loops and relational operators let's start off with if statements the if statement executes a
statement if a specified condition is truthy if the condition is falsey
another statement can be executed but what exactly does truthy and falsy mean
to explain this let's look at falsy first a falsy value is a value that is
considered false when encounted in a Boolean context JavaScript uses type
conversion to coers any value to a Boolean in context that require it such as conditionals and loops there are
eight falsy values this is the keyword false the number zero the number
negative zero big int when used as a Boolean just as a bit of insight big int
is a built-in object that provides a way to represent whole numbers larger than 2 to the^ of 53 it's not really necessary
for now but just keep that in mind an empty string value null so the absence
of any value undefined an Nan or not a
number this makes it very easy for us to Define what is truthy as it is everything unless it's a falcy so some
typical examples of truthy values are the number 2 five six basically any number that is not Zer or negative Z
strings the Boolean true and that's just off the top of my head as a rule if it's
not one of these eight you can consider it to be truthy
okay but enough chat let's actually get to learning this with examples of code first so as mentioned the if statement
executes a statement if a specified condition is truthy so the simplest
example of what I can do to show you this is write an if statement so if and
then whatever I pass through here is truthy execute this block of code so I'm
just going to put a console log here it is
truthy now I can be very basic about this and simply pass through the Boolean of true if I pass that through I am
indeed printing out it is truthy this is because true is truthy the same for the
number three because three as a number is truthy as you can see here the console
log is printing out it is truthy and then I could pass through a string like
this once again it has printed out again because this is truthy now just going to delete that
clear our console log if I pass through a zero and
save well you've guessed it nothing is printing because this is falsy so we are
not executing this because if this is true or truthy then we execute this line
if it is falsy well we do nothing so once again if I pass through false
nothing and if I pass through an empty string also nothing I can also do things
like this so if a is bigger than
two console log truthy and let's set a here so con a
equals the number one it's clear here our console well a
if a is 1 one is bigger than two that is
false so we do not get anything printed in our console log however if I change
this to our five it is truthy why because five is indeed bigger than two
so this statement is true or in other words truthy and we can print out our
console log so this is great it's very useful when
it comes to programming there's a lot of if else statements that are used on a daily basis one other thing that I want
to show you is the if else statement okay so if this is true print out
console log otherwise print out it is
false see okay so now if I go back to a
is one I am printing out it is falsy so
before nothing would happen so when we think back to when we didn't have this nothing would happen however we have now
giving it an else statement so if this is true print out truthy otherwise print
out it is falsy so once again let's read that if this is false then skip that and print
out this is falsy so I'm just going to replace it with actual Boolean if false
it is falsy and if true it is
truthy if a is deeply equal to
1 so if one deeply equals 1 it is truthy or if a deeply equals 5 well it
is faly because because one does not deeply equal five this is something
we'll go into in a little bit it essentially means deeply equals because this is not a thing in JavaScript that
will not work we need to either have this or this but don't worry we'll leave that for another
time now we also have the else if statement so I'm just going to get rid
of this get rid of that
let's have a variable I'm going to call it const time and set the time as an
integer to be 10 now
if time just to be clear this is going to be in 24hour time so that's 10:00
a.m. or actually maybe let's make that more obvious so let's make 14 14 hours
so 2 p.m. for those of you who don't know 24hour time that is 2: p.m. if time
is smaller than 12 console
log good
morning and then instead of just an else I'm going to have a if I'm going to have an else if time dly
equals 12 console
log oh it's noon it is
noon and then else now I could have time is larger
than 12 or I could just leave it like that because we've exhausted all our
options if it's not this and it's not that well then we know that it's
afternoon okay so as you can see here if the time is currently 14 it is the
afternoon and we get a message that says good afternoon now if I change the time
to 12 oh it's noon and if I change the time to 9 good morning so that is a great
example of an if else statement we can really go town on this so if I really
wanted to I could get rid of this and write else if time is
larger than 12 and time is smaller than
18 console log good
afternoon else
console log good
evening save that and let's try so once again good morning 12 oh it's noon and
then let's get a time between 12 and 18 so 14 good afternoon and then if we go
19 good evening so yes there's a lot of flexibility with this you can go on and
on and on there's really no stopping you with an if statement now we have done
two things that I haven't discussed yet and that is as mentioned this triple equal sign and the double and we will
get onto this this is of course a mathematical operator this means that
whatever is on this side is larger than whatever is on the right side and the opposite for
here okay so before we carry on I just want to take a moment to talk to you about operators as we have actually seen
someon action but you might not know what they were called or how they really work so I'm going to take the time to
explain that for you so there are a lot of different types of operators that we can use in
JavaScript the most basic is the arithmetic operators then the assignment
operators comparison operators logical operators and tary operators there are a
few more but these are the main ones so I'm just going to focus on these let's
start off with the arithmetic operators first so the arithmetic operators well
there's six that you should know and that you can use in JavaScript in order to make your life a lot easier if you
did do maths at school some of these will be really familiar to you or you might pick them up a little bit easier
but don't worry I'm going to go through all of them now so first up we have modulus well modulus is simply something
that will tell us what the remainder is after we use it so for example I could use it in this situation so I'm just
going to show you like a simple mathematical example if I put through the number five and use modulus
3 well three goes into five exactly once
and we leave two as a remainder so our console log will print out the number
two what do you think will happen if I put a four in what do you think my console log will spit
out well it would spit out a one that is because four goes into five once and
would leave one remainder let's do something a little bit more complicated
let's try 20 and great we would get a zero this is
because four fits into 20 exactly five times and leaves zero as a remainder the
use of modulus might not be super clear to you now now but if you try one of my game tutorials which I'm going to suggest for you during this course it
should become super obvious as to why I love modulus I use it in Pac-Man I use
it in snake I use it in pretty much all my grid based games so please do check them out when the time comes to
it next up we have the increment operator well this is something that you might
have seen in the for Loop it is simply incrementing a number by one so in our
for Loop you to see an i++ being used this is the increment operator I'm going
to show you how to use it I can use it like this so let's say let count equals
4 and then if I got count and used Plus+ and then console logged
count well you would guessed it I would get five this is because we are getting
count so here we have assigned the value four to our variable of count so here it
is four but then we use the Plus+ or the increment operator in order to increment it by one so when I conso it out here I
would get a five the decrement operator is pretty much the same so once again
let's go let count once more I'm going to get rid of it
here let count equal 20 count negative negative so that's the
decrement operator and if I console log count I should get
19 next up we have un negation this simply means that if let x equal 4 and
then I console log X well I would get a four but if I put a
negative in front of it I'm simply adding a minus 4 to it so un re negation
is essentially just adding a negative to make something negative okay it's it's really that
simple now the UN plus we can use this to essentially turn strings into numbers
so let me show you what I mean by this so I'm just going to get let Y and I'm going to use four but put it in a
string now I'm going to console log it's not liking that console log y so
I'm console logging y as a string we can tell it's a string because it's a different color to these it's a string
here we know it's a string because it's in these two quotation marks but if I put a
plus well that changes to a number okay so that's a great
example of using un plus and finally the exponent
exponential operator this will calculate the base to the exponent power so once
again let's get Z this time and get a four
console log Z so let's make 4 to the^ of two I would
write 4 to the power of two like so and 4 to the^ of 2 is indeed 16 so that's
really it I don't want to focus too much on this section because this is just I guess a math lesson something that you
would have learned at school perhaps just a sort of recap into how you would use it in JavaScript so that was pretty
Swift if you want to make a note of these please do as mentioned I will be using all of these in the course so you
will get plenty of practice let's carry on next up we have assignment
operators an assignment operator assigns a value to its left oper round based on
the value of its right oper round the simplest assignment operator is essentially this x = 4 I have assigned
the value of four to X so let's clear that and let's I'm going to put a
console log down here console log X you will see that X is four so that's
it in its basic state however the AR a few other assignment operators that I
want to show you once again there's a lot more but these are the most popular ones so I'm just going to go through
them with you so we've gone over what assignment
is what about addition assignment well addition assignment is pretty cool it
can work like this so I can get X and use plus
equals 5 okay so let x equal let's start
off with six what I am saying here is that I am getting six and adding five to
it however this is not to be confused with this x +
5 so this wouldn't work we are not assigning anything back to X if we conso log X X is back to thinking it's six
right so this won't work if you want to essentially write what you would in mathematical sense in JavaScript
you would need to write this this is essentially the same as writing x = x +
y so just keep that in mind next we have subtraction assignment
so I'm just going to clear this for you well it's essentially the same so I'm just going to commment this out at the
moment X is 6 so we're getting 6 if I get six or X and use minus equal
five well you guessed it X will be one this is because we assigning x a new
value after we minus five from it essentially we are doing
that next up we have the multiplication assignment X multiply equals y or let's
say 5 will mean that we get 30 once again this is the equivalent of getting
X and whatever ever X is we are getting it and multiplying it by
y division assignment is the same we are getting X we're using divide so that is
divide and we are assigning the new value of x after we've divided it by
five so once again the meaning of this will look like so remainder so this is
one of my phase we're going to use modulus equals 5 we get a one because if
we put 5 into six and R is currently six has a value of six we get a remainder of
one so once again this is the same as writing that this is simply the short
hand for it and finally the exponentiation assignment this would be
x equals say five
just going to Coma these out so they don't interfere with
anything let's clear that and we will get the equivalent of
if we wrote this okay so 6 to the power of
five great so those are some of the more
popular assignment operators that you will see when you're working with JavaScript once again we will have
plenty of time to practice these I just want to show you them for now so make a note of them hopefully you've got it I
mean the format is pretty much the same for all of these so yeah that's
assignment operators for you let's move
on now we're moving on to comparison operators two of which you've already seen that is greater than or equal than
and I'm going to show you a few more and discuss them in a little bit more detail so let's do
it a comparison operator operates its operant and returns a logical value
based on whether the comparison is true the operant can be numerical string
logical or object values I'm going to show you what I mean by this exactly
so each of these is essentially going to return a Boolean response or true or
false so let's start off with the equal so let's go ahead and get our
console log up again I'm going to get X so let x equal
and what don't we go with 20 sure why not the numerical value of 20 is now X
for this session now if I want to check if something so this variable is equal to
something I would do this I would get X and if x
equals 20 well we get true let's just clear
that so we can see it better so we're getting true because X
we have X here does indeed equal 20 now you may remember me from another lesson
saying that this does not exist if I wrote that I would essentially be giving X the value 20 and we don't want to do
that this is an assignment operator now this is how we are writing equals from
now on so if you want to check this is why it's called comparison operators if we are checking if x equal 20 does it we
get a true does x equal 21 we get a false okay so we're getting
Boolean responses now what is also cool about this equal is that we'll pick it up if
it's a string as well so if I pass through a string
and pass through a 20 I will get true so that is pretty
cool okay let's move on not equal so let's get our console log out again I'm
going to get X which we know has the value 20 and then I'm going to use something called a bang and an equal
sign okay so this bang essentially means not equal that says not equal and let's
just put A2 so I get the answer true the Boolean
of true this is because X which we know has a value 20 does not equal two so
that is true so we get a true however if I put X does not equal
20 well we'll get a false because X does equal 20 this is 20 this is 20 so saying
X does not equal 20 would be false this also works for a string so it will
pick that up as a string it will know that's still a 20 despite it being a string it will recognize it either way
and that will also respond with a false deeply equal up next so this is
very similar to equal let's just get our console log up again and get X which we know has a value of 20 now I could use
deeply equal so once again let's put 20 so once again our console log will let
us know that it's true because this statement is true X which we know has the value of 20 does equal
20 however if I put this as a string we get a false this is because
unlike equal deeply equal doesn't just need it to be the same value it needs it
to be the same type as well so we need this to be a
integer value or a number in order for us to get true on this
statement okay similarly to straight not equal so
let's get our console log up again get our X which has the value of 20 and I
could put bang equal equal so that's a bang equal equal and then let's put
through a two so again we know that will be true now let's put a
20 great we were expecting that to be a false so in this case we would get a
false right because that is recognizing that it is 20 but it's a string so it's
saying okay fine this is false and then let's ask ourselves does 20 does a numerical value not equal 20 as a string
value according to this it would be false according to this however
so let's put this as a string we would get true this is because
even though our X here is 20 this is 20 as a string so this is not
recognizing the two values to be the same and we are getting a brilliant response of
true I appreciate this could be quite confusing the first time you see this
but don't worry with some practice and me just repeating this to you you will
eventually get it I really do advise you to be coding along with me and trying these out yourself that is the best way
to learn learn by doing I'm here to teach you but you really should be doing this on your laptop as
well okay let's move on greater than so this is one that you would have seen in
your full loop I'm going to get our console log now we know that the value
of x is 20 but let's check what our console log thinks so let's get X is X
bigger than five true it is bigger than five so that
is how greater than works we can use it to return a Boolean statement based on
how we compare it to another integer we can also do it for greater or
equal than so X is greater or equal than
20 well we will get a true because X does indeed equal 20 however if I did X
is bigger than 20 we get a false okay because X is not bigger than 20 x is
equal to 20 once again less than so let's get our
console log up X is smaller than 20
false that is because x equals 20 so if I less than or equal to 20 we will get a
true great okay I think we've
covered all of these for now I think we're ready to carry on I do
understand how it can be confusing because we are dealing with a lot of true and falses and booleans and stuff
that you've learned for the first time so please do take your time with this experiment with the numbers pass
different things through to your console logs change X go wild I'll see you in
the next lesson okay now it's time to move on to
logical operators so let's do it now for this one I thought I would
show you with an example as it's quite a difficult one to get your head around it is to do with the and so this is the and
the or and the Not So the bang and for this illustration I've chosen to create
an array of fruit so we know it's an array because we have these two square
brackets here and it's assigned to a variable and then in it we have three items we have one string of Apple One
String of banana and one string of grape now I've written an if statement
if fruit so we get on array and we use the JavaScript method of
includes so this is a JavaScript method I did not make this up It Works by us
putting an item in its parenthesis and if the item exists on the array this
statement is true okay so this will come back as true as Apple does exist on our
array and then we are checking if our array also includes banana and only if both are true so if
this statement is true and if this statement is true then we
execute this line of code and we get both fruits
exist okay so that's how and works if this code is true and this code is true
then we can execute this line of code this is one example of how you would use
and in code if I however changed this
statement to let's find a fruit that doesn't exist on it let's put a pair let's clear that
out so a pair so now this statement is true but this statement is false well
just okay so now this console log doesn't get shown this code does not get
executed this is because we need both of these to be true that's what the N does
it wants both of these to be true in order for us to execute this
code same as so let's clear this again so say this one is true so let's make
this apple and let's change this so once
again it's now it's showing but let's change this to I don't
know coconut once again this will not show
this is because we need both these statements to be true in order to show
this code and that is a great example of the and operator in
funtion now let's have a look at or so or is essentially these two lines here
let's talk through the code so here we have the same piece of code however we
are checking for coconut and we are checking if coconut exists in our fruit array well it doesn't so we know this is
false this is a false statement however this one is true and
we are seeing our code that's how or works if at least one of these is true
then we execute the code if both were false so let's put
Peach and then let's put
hair so now you will
see that this code does not exist execute this is because this is false
and this is false so we don't execute the code we need at least one of them to
be true we need one to be true that's what the or is so we need this one or
this one to be true in order to execute the code and finally let's move on to not so
not is like the bang that we saw previously by putting a bang here I'm
ass essentially saying so we know that cherry doesn't exist on our fruit array we can't see it
so we know that this statement is false if I got rid of this this would be a false
statement and we wouldn't see anything in the console L because this is false so we don't get any message showing up
however by putting a bang in front of it it turns it to true and we see the code
so that is how not works please once again have a good with this yourself it
is a lot to get your head around I hope this example has made a little bit clearer because I know there's some very
confusing explanations out there I think doing it with an example is always best
if you want try also maybe console logging out so this is something that I would find
useful so I would console log out this and then perhaps the second one too
just to see what exactly is happening happen in behind the
hood so we've conso like this one this says false we've conso of this one this
one's true so we're not going to get the code we need both of them to be true in order to get this code
okay so there we go just to make it a
bit clearer perhaps let put first statement let's clear this out a bit
and then put second statement so yeah you will
see the first statement is false and the second statement is true we need both to be true in order to see the code so that
is why it's not working okay I hope that was clear like
I said please do practice these uh to get your head around them I do have plenty of tutorials on this I will get
around to sharing them as soon as I can I just need to go through a few other things with you
first and lastly we have the tary operators so let's check them out the
Tanner operator is essentially another way of writing an if statement it is a
little bit more on the advanced side but I do think that I should cover it now however feel free to make a note of it
and perhaps use it when you're a little bit more comfortable with if statements if statements are great I just want to
show you a Shand that exists as I would hate to not show you I think this knowledge is important but just know
that it exists don't worry too much about implementing it for now if you don't want
to so the Tanner operator allows you to simplify your conditional logic into one
nice simple oneliner what I mean by this is that I can take one 2 3 4 five lines
of code and put it into one first off I'm just going to talk to
you a little bit about what is happening here this is an if statement I have set
is game over so let's just pretend we're playing a game here uh the game is
currently not over so game over is false I have set is game over to false I have
assigned it the value false so if we go to our if statement if is game over
equals true so the game is over you know you've lost the con log will say sorry
you lost otherwise we console log carry on
playing so at the moment game over is false hence we're getting the message carry on playing if I then change it
to true we get sorry you lost easy now
let's get to writing this in one liner code thanks to tary operators I would do this like this so
is game over I'm just going to comment that up
for now is game over question
mark If game is over I want to console
log sorry you lost otherwise
console
log carry on playing okay so I'm just going to move this over so we can see it
all I'm essentially asking so the question mark here is game over okay is
game over and if it's true sorry you lost
otherwise carry on playing I can also change it to
false so now we know that this is false is game over well it's not
so carry on playing let's change this back to
true sorry you lost I could essentially also just use
true or false but it's not really seen to be
done this way it's usually a variable that has a Boolean value that is used to determine the outcome whether it's this
one or this one but I just think that's a pretty cool way I really liked hry
operators I'm just going to put it back there so you can see it I think it's really readable for a developer as well
you literally asking yourself is the game over well we know it's true so return this otherwise return that once
again is the game over question mark well yes it is true so return this one
but if it wasn't we would return that one right there and there we go that's
tary operators in a nutshell don't worry if you don't want to use them and you're more comfortable
using IFL statements like I said this is something that perhaps is a bit more advanced so feel free to skip this
lesson if you
wish the fist bus challenge is one that is considered to be a favorite for software developers to be interviewed on
in a tech interview situation it is for this reason that we are going to go
through it now together based on all we have learned so far in our JavaScript
portion of the boot camp the fizzbuzz challenge will practice your knowledge
of if statements loops and operators it is no wonder why this is such a favorite
on the T scene if you do not manage to finish the
challenge don't worry that is what I'm here for and we will go through the answer together however please do get
your laptop out and definitely have a go with me now I'm going to leave you with
a quick exercise and it's called the Fizz Buzz exercise this is a popular one
that you will see in a lot of coding interviews so it's one to definitely be aware of the rules of his buzz are as
follows start with the number one and count upwards if any number is divisible
by three it is replaced by the word Fizz and any number divisible by five by the
word Buzz also numbers divisible by 15 become
fbas using an if statement I want you to have a go at writing this so just to
help you out if I was to speak out what this if else statement should do I would say something like this if number
divisible by three console log fiz else
if number divisible by five console log Buzz else if number divisible by 15
console log fiz buuz else console log number okay so hopefully that's helped I
want you to have a go at doing this yourself don't worry if you don't get it we'll go through the answer together
okay so hopefully you've had a go that if not don't worry let's have a good at writing the solution together so if
number now I'm going to use something called modulus for this modulus is a mathematical operator that essentially
allow us to divide a number by any number and if there is no remainder then
we know that the number is divis visible purely by that number this is something
that we covered in the previous lesson so please do go ahead and go back if you need that refresher let's go back into
here if number divisible by three and the remainder deeply equals
zero console log
Fizz I'm going to start with off number zero that number equals
zero else if number
modulus five DP equals z
console log
Buzz else
if number modulus
15 deeply equals z so there's no remainder it's divided by 15 and it leaves no
remainder console log fiz Buzz
else console log
number okay so there we go let's start counting one so one 1
2 3 oops three
Fizz four a four five buzz and let's
move on a little bit let's do a 15 15 we're getting a Fizz okay so this
is a problem as we are passing through 15 and it gets stopped here because 15
is divisible by five only no remainder so we get a buzz so what we need to do is swap these out so I'm just going to
put this one up here instead and then put this one at the
bottom then just put Fizz buzz and have Fizz so let's start again number 15 Fizz
Buzz good number five Buzz good number three Fizz let's put 30 Fizz Buzz
fantastic okay this is looking really
good I'm really pleased with how this went one thing that we can do is
actually create a full loop to actually print out all the numbers for us which is a great segue as for Loops are up
next see you in a bit so next up we have for
Loops for Loops a really neat part of JavaScript that allows us to execute a blocker code as many times as we want
I'm going to show you how to do this now so a super simple example and the Syntax
for a for Loop goes like this you start out writing the four and then you need to start with something so we're going
to declare I let I equals zero because we want to start from zero and then as
long as I is smaller than so here we essentially import a number I want to
put in a number that will tell our code how many times we want to execute the
blocker code so let's go ahead and put 10 semicolon and then i++ so this is the
Syntax for a for Loop we would then put the code we want to execute right here so I'm just going
to console log I for now and already bam
in our console log you will see let's clear that so we can see a little bit better you will see 0 1 2 3 4 5 6 7 8 9
now you might notice that I have put through 10 here however we are starting
from zero so this means that we are counting Zer 1 2 3 4 5 6 7 8 9 but we
have essentially executed something 10 times okay now the great thing about a
for Loop is that I can essentially print out the same thing or I could customize
it based on the count so for example example I can have something like and
then the word beer on
the wall so we would start
from zero be on the wall one beer on the wall and so on and so on or I can have I
plus one just going to clear that one be on the wall two be on the walls three
four 4 five all the way to 10 beers on the wall beers on the
wall and there we go that is essentially our for Loop let's move on to talking a
little bit about for loops with if statements so you might notice here that one beers on the wall doesn't really
make sense let's change that with what we leared about if statements so in here
I can essentially do something like this if I =
1 console log and then I'm just going to console
log beer on the wall however we don't want one we want
zero because as you know we are counting from the number zero and then
else console log BS on the wall let's save that
refresh and now you will see that if I equals 0 so the first item the first
time we are looping console log one be on the wall else console log be is on
the wall so that is one example of how to use for loops with if statements now
I think you can already guess what I'm going to try I make you do it involves the fizzbuzz challenge and this for Loop
so similarly to how we got our fizzbuzz game working however we had to manually
type out the value for number to replace it with 1 2 3 4 I want you to write a
for Loop that will essentially go through all the numbers of FSB for us printing out the correct words if a
number that is divisible by 3 5 or 15 is met so I'm going to leave that for you
here here is our Fizz Buzz challenge again and its answer I want you to write
a for Loop that will execute this code up to the number 100 have a go at this
if you don't get it don't worry I'm going to go through the answer
too okay so let's go through the answer well the first thing that I know is I don't want to declare this number right
here I'm going to write a for Loop so once again let's get the syntax of the for Loop for let num equal zero so we're
starting out with the number zero I could keep this as I if you've kept it as I that is fine
it just means that we need to replace all of these with I2 if I equals z and as long as I
smaller than 100 increment I by
One and essentially I can now put all of this code in here however we don't want
to start at zero let's actually start from one so we can do that either by
starting from one here and changing that to 101 so there we go we have now done it
start from the beginning 1 2 3 4 five six let's check for 15 yep and so on all
the way to 98 99 100 so that is one way that I would do it or if you wanted to
I'm just going to change this back you could have done I + 1 I + 1 I +
1 I + 1 and then don't forget to put these so I'm just going
to make sure that that is red together let's
refresh and once again one two Fizz four Buzz fizz fizz Bzz Buzz Fizz Buzz all
the way to 98 99 100 okay well that was fun as I
mentioned this is quite a popular question that pops up in coding interview so I really would take the
time out to understand it perhaps do it a few more times to really get to grits with for loops and if
statements make a note of it otherwise let's carry on now before we move on I want to take
a moment to talk a little bit more about arrays as we are starting to see them in our for loops and functions so arrays
the JavaScript array class is a global object that is used in the construction of arrays which are high level list like
objects what I mean by list like is this so here we have an array I'm going to
call it books and I'm going to open up my array so this is the Syntax for an array and
in it I'm going to have a list of books so M dick
life life of high
and then sapiens so that is my array of
books that is it that's as simple as it gets we can also store numbers so let
count equals 1 2 3 4 we can also store
booleans so results pass results maybe pass results
even though I'm not sure you would see something like this you can store booleans too false true true false okay
so that is three examples of arrays let's use the first one to
continue now with arrays we can find out the length of an array by simply
grabbing the array so I've grabbed the array I've grabbed the whole thing and using a JavaScript method of length so
I've not made this up okay this this is a JavaScript method that will allow us
to get the length of the array so what do you think it's going to come back with it's console
log three this is because there are three items in my array now I can also
do this which is quite cool I can go into my array so I'm going into my array
and then if I pass through a zero because as we know arrays start from
zero I will get Moy dick if I pass through a
one I will get Life of Pi because in my book array is 0 one it's got a one index
position and then I can always pass through a two I'll get sapiens if I pass
through three however I will get undefined as there is no fourth item in my array
I can also add stuff remove stuff to my array but that is something that we'll do in a later lesson for now all you
need to know is that an array looks like this we can access items from our array
by index and we can also get the index length we're using a JavaScript method
of length cool now let's learn a little bit more about loops with arrays so I'm
going to actually get my books back back let's actually get the books back like
so let's say we have a lot more books in here so I'm just going to add a few
more The Hungry
Caterpillar new Earth and a
dictionary so there's a a few books in there now say we have a lot more in there and you're working at a shop and
they want you to find if there is a certain book in your inventory well we
can use a for Loop to do this I would do so like this so I would grab our for
Loop once again let I equal zero and then as long as I is smaller than the
books length so this is where this comes in very handy indeed because we don't
know how long this say it goes on forever and ever and ever and is always changing it's quite nice to have
something like this so that this updates no matter how long the book array is and
then we increment I now
if books and then we can go into the array
so what I'm doing by passing an i is I am passing through a zero so I'm going into the books array and getting this
value and then I'm going into the second item and getting this
value and so on and so on so I'm just looping over if that value deeply equals
and let's say we are looking for the book
sapiens we could just console of
true Okay so so yes sapiens does exist in our array of books how about another
book let's try James and the Giant
Peach and we don't get anything so else console log
F so now we get a false as that book does not exist we could also do
something like this so for example say sapients existed not just once but we had a few sapients in
our inventory so now if books equals
sapiens count equals count + one and then let's store
count up here we're not actually going to assign it anything or we could start with zero it's up to us
else nothing so we can actually get rid of that so
now just going to console log count actually I'm going to console log count
here just so you can see what is happening I'm also going to console L
out each book so you will see here we have three books it's counting there was going one we're adding to the count the
count is then changed to one one then it's changed to two then it's changed to three and it stopped because we have
found three books and we have finished our Loop I'm also going to conso log out
book I I'm going to do it up here so before
the if statement books I and you will see all
the books being printed okay so as it's checking it's checking M dick that it
does not equal SA so we don't add one to the count it's checked Life of Pi that does not equal sapiens so we don't add
to the count it's checked sapiens it matches so we add one to the count and so on and so on so every time we hit
sapiens it adds one to the count so that is a great example of a
real life use case for a for loop with an if statement and working with AAS I'm
going to show you one last example before we move on
okay so I'm going to take a quick break before we carry on with array work to talk to you about objects we're going to
create our first objects in JavaScript so objects objects are essentially the main
unit in objectoriented programming in this section I'm going to show you how
to make your first object in order for us to work with it in the next section
so what I mean by object is this this I'm going to make a cons
user okay so just like we did with any variable at all I've got our user I
declared it as a const now instead of just typing straight away here I would
open up our curly braces to start creating our first
object now objects work in a key value sort of way so I would get a key for
example a name some people like to call this a property some people like to call
it a key it is totally up to you and then we get a value so as you've guessed
this is going to be my user object and the first property or key has
the value of Ana so this is the Syntax for writing
objects you would have the key or property and then have the colon
followed by the value and then a comma if you want to have another key and
value so I'm just going to fill this out a little bit more and what else can I
have I don't know pets dog I don't really have a dog I
wish I had a dog okay so that is my first object if I didn't have a comma I would get squiggly lines so that is why
the commas are important this is the Syntax for an object so we've made our first object now I can store anything I
want in this okay so I can store strings as values I can store booleans as values
so I can have pets true I do own pets even though sadly it is
false uh last name is a string integers whatever we want I can even have an
object within an object but let's not get into that for now so that is my first object now I can actually access
values by grabbing properties with do notation of my
object so if I console log my
object so I'm just going to console log the user because that is what I've stored my object as and here we go I get
the user name last name and my
pets okay now what if I just want to access my name my first name I would do
so by grabbing the property so I'm going to grab that I want the name and then
using dot name and that's it if I want the last
name I would get the property of last name to return the value and once again
that'ss false so that's quite
cool however I can also have an array of objects okay that is where accessing
things get us a little bit more complicated but let's cover that in the next
lesson okay let's look at these objects this time in arrays let's carry on so so
here we have an array this array is different to the ones you've seen before it is still an array however it's an
array of three objects what I mean by objects is this that is one object that
is a second object and this is a thir in my object which I'm going to think of as
a user object I have a username of the user with a string the follower count
with an integer and then a Boolean value for if that user is followed or
not okay so once again we know it's an array because we open up these square brackets and then we have three items in
it they're just a little bit more complicated we have an array of three objects rather than three strings or
three integers or three Boolean values however we're going to treat it exactly the same so just a little bit of a heads
up before we start start working with this array we can still access values in the array so I'm just going to console
log I'm going to move up a bit I'm going to console log our users because it's called
users and if I conso log the first user you get the full object okay so if I
open it out a bit you get the username the followers count and it is followed and it is mode 24
four so that is looking correct now if I then want to access let's say just the
username or just the follow account or just that is followed I would get the
key so the key of username so now I get the string
Mo 244 if I just get the key of followers I
will get the value of 34 and if I do is followed I will get the
value which is a Boolean of false great let's carry
on now I want to write an if now I want to write a for Loop that
will send you Loop over all my users and only send them a message if we follow
them so if is followed is true how do you think we would do
this pause here and have a think about it and I'll see you in a
bit okay so this is how you would solve it we would of course start off with writing the Syntax for our for Loop so
let I equals z and as long as I is smaller than the users length so once
again I am getting the users array I'm getting this and I'm getting
its length so we know that this value value will be the integer of three as
there are three users and we increment I by one now
if users and then I'm looping over user remember so I'm looping of I'm going to
the first one the second one and the third one so I could just replace it with
I if that uses is followed deeply equals true
well then we send them a message what
hi long time no speak and then if it is false well we do
nothing so let's hit save and great I'm just going to clear
that so we followed two users because is followed is true for Angela and is
followed the true for sexy work so we should see the console log message printed twice and that is correct hi
long time no speak if we really want to personalize this we could do something like that so
hi users once again we go into the first object and get the
username plus long time
speak so there we go hi Angela
Buu long time no speak hi sexy Rick 21 long time no speak so this is quite an
interesting example as I'm pretty sure this is on the basis of what some of the LinkedIn scrapers do when they
essentially take your first name and then send you a message or an add request so it's quite useful to show you
this example I hope that was helpful I hope you're really learning more and more about you know for loops with
arrays and if statements I think we're now ready to carry on okay so we made it
quite far into the introduction part of our JavaScript course we've covered variables if statements objects but we
haven't really talked in depth about functions we've seen a function sure but
we really haven't gotten to grips with what exactly the best practices are how to pass parameters and what exactly a
function is so let's do that now so as a reminder we have seen a
function already we used it before the Syntax for a function looks a little bit
like this we would get the word function to let our IDE know that we want to
write a function we would then choose a name of our choice to call this function
so for example I'm going to choose to say send text
so I've chosen to call my function send text the function is doing something
it's going to send a text hence we have written it this way most functions
usually start with uh send get any word that indicates doing something so send
text is perfect we will then open up our parenthesis and then get our cly braces
and write our block of code that we want to execute when we we call the
function like so okay so this is standard this is your standard
function now when choosing a name that you want to call your function make sure
that it is in camel case what I mean by this is that the first word starts with
a small letter and the second starts with a capital letter and so on and so on this is for readability for your
fellow developers so that they can read your code a lot better it's considered best practice and I agree I I tend to
quite like this this kind of format so make a note of that Camel case
for naming functions and this is just a best
practice it won't break your code or anything but you know it's good to have
okay so we have our function here now we want to essentially execute something so
I've been using console log a lot that's because we haven't actually started working with the browser yet I'm just going to use console log again here I'm
going to try not to use it from now on but for now I'm just going to write console
log and let's send a text saying
hey Bobby do you want to hang
out so now when we call our function or when we execute our function or invoke
our function whatever you want to say we get the message in our console log that says hey Bobby do you want to hang out
without calling it nothing happens however with calling
it we get the code to execute we've already discussed Global
variables so I can actually put a global variable up here that says Bobby or the
string Bobby and take Bobby out here so I'm going to close off the
string add the variable of
name and I've essentially replaced Bobby here in the sentence with
a variable of name so now I can easily change the name up
here so there you go Danny Amy whatever you
like great now you might be wondering what these parentheses are for they are for
passing through parameters into your function so instead of declaring a
global variable here I can essentially reuse my function and then pass through
the parameter of name so let's pass through Bobby so I passed through Bobby
into my function I passed through the string of Bobby into my function so I've
essentially passed through a name that I then want to appear here and there we go
so this approach is useful as it allows us to check this out reuse code so now
if if I go like that I can literally write Bobby
Dany Amy I don't know faroq and I can essentially reuse this
to message all these people just by passing through their name into the function so that is pretty cool I'm
spamming people to find out if they want to hang out with me and I could repeat this over and over again reusing this
code so that is pretty awesome that is a great example of why functions are so useful F they are
reusable so now I've shown you an example of how to reuse a function but also how to pass parameters into a
function to I can pass not just one parameter but two parameters so I can
pass through a time which means I can spam people and ask them to hang out with me at different times so there we
go I'm just going to pause through different times hey name do you want to hang out at
and then let's put the time
here and close that off again so it's
correct and there we go I've sent messages to Bobby asking him to hang out
at 10 Danny to hang out at eight Amy to hang out at five and a for ruk to hang
out at 1 simply by reusing this function and passing through to
parameters okay I'm going to ask you to actually have a go at this again by
yourself so I'm just going to clear
this let's write a function and this function I want
to send reminder okay so once again this is the
Syntax for a function send reminder I am writing the function so I'm telling
my IDE that this is a function I've named it send reminder and this is the Syntax for a function and then I am
calling the function here I want you to pause here and have a
go at sending a reminder using the console log to four people that their
meeting is at X time so just like we did before but just have a go at doing this
yourself I'm going to pause here while you have a go at doing this don't worry if you don't get it I'm going to go
through the answer with you soon okay so hopefully you've had a go
at that if you haven't don't worry I'm going to go through the answer with you now so what do we want our message to be
well we want our message to be dear
name so plus name
your meeting is at and then let's do
time okay so once again let's actually pass through a name here so
Freddy and then three let's also send a reminder to so
[Music] Danny Olivia Hana
Freddy Danny at four Olivia at five and Hannah at six Okay so we've done that
and the last thing we to do is actually pass through the variable so I can name
this whatever I want I can name this glob it really doesn't matter it's just
saying that whatever the first thing that we pass through is is what I want
that to be in here okay so there we go that will work too obviously if we put
the time in so if I put three here well it would read de 3 you have a
meeting your meeting is at your meeting is at Freddy and that would make sense
so the order of which you pass these through at is super
important let's just change that back for you okay I'm also going to change this B because that doesn't make
sense and there we go feel free to make a note of this otherwise if you're
comfortable with functions let's carry on with some more
examples okay so I'm just going to get rid of that let's clear
this I just want to show you one more thing about passing through parameters
so we can have Global variables so let's just write another function let's make
it show alert and then once again let's call our
function here I'm going to write name console
log name you or let's just say wake
up now we can have Global variable so let name equals Ana in which case we
don't need to pass through the name into here or here okay this is a global
variable and no matter how many times I invoke or qu the function it will just
use Ana as the name okay this is great as it allows us to
store things in our file as well so I'm just going to invoke it once
I could do something like this Ana wake up this is
your count
alarm so this is very much like most of my mornings I have multiple alarms now
I'm going to put let count up here I'm going to start off as
zero or actually let's start off as one so the first time that I call this
function I get a message say an your wake up this is your one alarm maybe
alarm number that makes more sense this is
alarm number one and I could actually put afterwards
count plus equals 1 so
now if I call the function once so let's get rid of that and call the function
and you wake up this is alarm number one I call the function again and you wake up this is alarm number two again and so
on and so on and so on and so on so this time we are not passing through a
different variable into each function however I am using the function to
essentially add to my count which is a global variable okay so each time I'm
executing this function I am adding to a global variable which is the count okay
so I've executed this functions three times so our count is three as you can
see here our count is three so that is just another example of
how you can use functions so so I am invoking the function in order to update
a global variable okay let's move
on okay now it's time for a little exercise so I hope you're excited it's
going to use everything that we learned so far about functions in order to move something on the browser so as I
promised I'm finally going to introduce some browser work we're not just going to be using the console log from now on
so let's do it okay so here we have a function a
function here is called move Bob and instead of Simply calling the function
I've attached our function to an element
that we have taken from our HTML and I've added an event listener to it don't
worry if this seems like a lot I'm going to talk you through everything now our goal by the end of this exercise is to
move Bob to the right you can see that's where he's looking every time we click
his face okay so I'm just going to talk you through this a little bit
now up here I'm essentially using document and query selector so I have
not made these up okay these are ways of essentially picking out so I'm getting
my HTML document and I'm using query selector this is a JavaScript method
that will allow me to look in my HTML and look for the class name indicated by
this dot right here I'm looking for the class name of face and I'm then storing that element as Bob for our Javascript
file so if we go into here if we look into our HTML I'm essentially looking
for this div with a class of face that has all these other div Liv inside of it
okay so if I select the diff face it's going to take the face but it's also going to take both eyes and the pupils
too I have styled them up for you it's nothing too crazy it's just some simple
circles essentially that make up my face so that's how we do it I am storing
the element with a class of face as Bob next I'm getting that element so
here's Bob I'm getting that element and I'm using a JavaScript method of add
event listener to listen out for any
time we click so once again I've not made this up this is a set thing that we
pass into event listener there's many many more click is just one of them I could do hover I can do so many so it's
going to listen out to anytime we click on the element with the class name of
face or in other words Bob as we have sted for this file and if we do click on
the div or the class of face or Bob then we execute or call the function
move Bob okay don't worry if this is a lot
essentially all you need to do is write the function Bob in order for us to move Bob to the
right okay now what do you think you should do in order to move B to the
right it has something to do with storing a global variable okay you will also have to get
the style of Bob and move him to the left so this is something that I would
suggest you have a pause at here go do some research I'm going to leave this up
for you here okay so have a look at that if you want to have a look at the index
HTML all I've done is added that in so I'm going to
make this bigger so you can see in case you want to take it I'm going to put all of these in the description below so you
can have a go with them yourselves too okay so that is in
my index HTML that's all I've done I've put in the face with all these divs feel
free to copy that I have then linked my style sheet and and then styled it
up okay so here is the style sheet just in case you want to take it please feel
free I am going to also include this code in the description but if you just want to take it down now here is what I
have in my style sheet so I've styled the body with a background color I've
also got the face I've given a position absolute this is going to be important
because we need to know exactly where the face is on our screen we're going to have the background color
and then I made it a circle so the face is a circle thanks to the height the width and the Border radius and I've
also given it some margin left on top next we have the eye container so this
is to hold the two eyes and make them display in line instead of stacked over
each other as is the default for divs and then next up I have the eye
itself which is a white circle with some margin and the pupils to okay so that is
the sty sheet let's go back to our index
JS okay I'm just going to minimize that for now and give us plenty of room for Bob to move so this is a great exercise
for Googling because there will be some Googling involved in this as a reminder
for this exercise we are going to be practice what we learned with functions so you will be storing a global variable
however there will be one aspect that you need to Google and that is how to essentially style an element so the div
with the class of face using our JavaScript okay so that is a clue I'm
going to leave you here don't worry this is quite a tough exercise considering you're new and you've never worked like
this before I really wanted to throw you on the deep end with this because don't worry I'm obviously here I'm going to
show you the solution in a so let's pause here have a go at doing this yourself hopefully find some
interesting Solutions online and I'll see you
soon okay so let's go through the solution well first off let's just start
out by console logging that's what I would do let's just go say
hi so now to check that everything's working correctly if I click on the
face just open that up okay yeah I get a console log that
says hi so let's go ahead and click that again some reason it's not working very well I think you need to view it in the
browser so let's go ahead and inspect get our console log up and great
so every time you click on the face you will get a high so our function
is working this is looking great it seems to be working here now too the next thing I want to do is
actually just move Bob so I'm going to move Bob Bob and then I would use
something called style and then left so by writing style I'm essentially saying
that I want to access the styling of Bob and I want to add something to the
property of left so if I just go ahead and write 100 pixels as a
string that is essentially the same as me going in here and writing left 100 pixels okay so
that is the same but I'm doing it from JavaScript so now let's go ahead and
save that if I click on Bob let's go ahead and do that in here
click on Bob what he's moved 100 pixels to the right see there we
go that seems to be working however I do want Bob to keep moving 100 pixels each
time we click him for this we're going to have to use our Global
variable so once again not sure why it's not working in here oh there we go so it's moved 100 pixels there we go 100
pixels so now let's actually declare a variable so let's declare let
count I'm going to put zero now each time we click Bob's
face I want to get the count and I'm going to use
our plus equals operator to add let's say 50 okay so now instead of passing
through 100 I'm going to pass through count plus pixels so now if I console
log
count refresh the page here we go 50 so I've got 50 my
count is 50 so I'm adding 50 to the left click again 100 that means I'm adding
100 to Bob's left 150 200 and so on all the way to Bob goes by Bob Bob goes off
our screen okay so that is a great example of how a global variable can let
us accumulate a value in a
function there we go once again we've done it okay so I hope that was useful
for you you I hope you enjoyed working with a browser a little bit more and not just using a console log I'll see you in
the next section okay now before we move on I just want to show you something extra
about functions I wouldn't worry about it too much for now just understand what we have learned with functions but I do
think it's important to show you this example because you might hear about it while you're learning and I don't want
you to get confused okay so here we have a function
what I have done here is essentially use document and query selector query selector and documents are things that I
did not make up this is a JavaScript method that will look for the body so
I'm literally looking for the body element and saving it as body now I've
written a function that is called speak so I've chosen to call it speak I have
told our document this is a function and I have chosen for our console log to
print greetings okay so that's all our function is doing now down here I have
taken the body so I've taken literally the body of our browser here and added
another JavaScript method of add event listener now I've passed through click
once again I have not made this up this is something that the event listener takes and then the function speak so now
this means that each time I click the
body just refresh that I will get greetings pop up in our console log this
is because we clicked the body and because we clicked the body our event
listeners listening out for this and invokes or calls the function speak okay
so that is what is happening here don't worry too much about it for now I just explain this for you because I want to
show you how you can write functions another way or how you might see functions
written so this is just the standard function that we're going to be working with for this course however it is
important to know that I can also write a function as a function expression what
this means is I would store it as a con so I say con
speak and then use function here I'm not going to pass through
anything because we're not passing through anything to work with and then I
would say console log greetings okay I'm just showing you
this in case you see it written this way this way is fine too it's just not the way that we're going to be using for
this course I don't really see many people write uh functions this way but hey it's important for you to know so
let's check it out let's click the body and yeah everything is working
fine now a way that is more and one that I like to use uh
occasionally is using the function expression but with an arrow function
what this means is that instead of writing function like so I would get rid
of the word function and then simply put an arrow function here okay so that is just a
another way of writing function it's just syntax if you like it go ahead and use it but like I said I would recommend
sticking to this that is what we're going to be using in this course this is perhaps maybe you see it in a bit more
advanced project but it's still valid okay so this is a function expression
using an arrow function now the reason that this is
changed is just simply because this is how functions have evolved with time people like to you know make things
shorter and shorter as we uh can see in many of our daily situations so this is
just uh an example of that okay that's all I wanted to tell you for this course
like I said please do keep using this I just wanted to show you that for now now
I'm going to talk about the while loop which is different to the for Loop and I'm going to tell you why the while loop essentially Loops
through a blocker code as long as the specified condition is true what I mean
by this is this so while this is the syntax so it's similar to an if
statement while this in here is true we
execute this so I'm just going to put
beers on the wall again and then I'm going to put I
here okay now I'm going to use some of the stuff that we discussed before so I
am going to get let I equal
Zer now while I is smaller than
100 okay so as long as I is smaller than 100 so we already know this is true
while that is true print out I BS on the wall so you already see some stuff happening here it's going crazy I mean
it's already counting a lot because it's not stopping I is constantly zero and
that's that's what it's executing it's executing we need to really stop this otherwise okay yeah we've reached an infinite Loop
so if I is smaller than 100 print out
zero beers on the wall but also get I an increment by one okay which means that
by the time this is run I is no longer zero it's now one one is smaller than 100 True print out one be on the wall
and then increment again so let's see this in action now let's refresh the
page so I just had to restart my ID as that infinite Loop broke everything but
there we go okay so now as long as I is smaller than 100 print out beers on
the wall and the number and there we go all the way to 99
beers on the world as you know we start from zero oh
cool okay so that is just a another sort of cool way to Loop using the while loop
so as long as this statement is true execute this block of code over and over
and over again until it is not true anymore okay so say it with me while
lets you execute a blocker code as long as a statement is true and it will do it
over and over and over until the statement is not true
anymore and there we have it ladies and gentlemen the while
loop okay now it's come to that time in the tutorial I want to talk to you about
builtin objects JavaScript has built-in objects date math string array an object
each of these so each of these five have special purpose properties and methods
associated with it this is the funnest part about JavaScript I think it really
allows us to be creative with our arrays strings and so on so I can't wait to
show you what I mean by what I've just said let's do this with some examples
okay so here we have a JavaScript property that we can use on a string or
an array and it is length you would have seen it before when we were doing the
for Loop we used it to figure out exactly how long our array is but you
can also use length on strings so I'm just going to show you what I mean by
this let's get a con word and let's make our word be
banana if I conso log the word well of course we'll get banana but if I add the
property of length to my variable well I will get six this is because banana has
1 2 3 4 5 six letters okay so that is a very basic way
in which you can use length to figure out the length of a
string a much more interesting way and a way that is used a lot more frequently in JavaScript is using it to find out
the length of an array so obviously I can do something like this const fruit
equals banana apple so I'm just putting strings in here
pair and then if I console
log fruit just like we did with a string you will get the array with three items or
three strings strs in it and if I use the property of length well you will get
the number three because we have three items in our array this is great for if
you're not sure how long an array is maybe it's got like thousands of thousands of things in it or perhaps
it's constantly changing okay so a great example of this is the for Loop where
you want them to iterate for each time there is something in an array so before
we move on on I just want to show you something that tripped me up when I was learning when I started working with uh
the browser and perhaps picking out elements this really tripped me up and it wasn't until a while later that I
realized some JavaScript uh inbuilt things already have length as a property
so I'm going to show you this example I think it's pretty useful so I've also gone ahead and
created some UI for us to work with so I'm just going to clear this out now
what I have done here in this example is created a UI that essentially has three
BS or to be more precise three divs with
a class of ball and then I have styled them up in order to look like this and use
justify content and display Flex to make them appear in line rather than stacked
over each other as is the default for divs so so now say I want to get all my
balls so all the dis or the class of ball so I can work with them in my
JavaScript well once again I would use document query selector but this time
all okay so once again I have not made this up this is something that comes with JavaScript document so we are
looking into our index HTML and then we are looking and selecting all the divs
with the class name so we need to make sure that dot is there because we are looking for a class name if we didn't
have it there well that wouldn't work we need to look for the class name of
bull and then I'm storing it as Bulls okay so now if I
console log balls so when we console log balls
you'll see a node list show up okay so here is our node list I'm just going to
expand that so we can see it a little bit better and in our no list we have the
first div second div and third div we also have a property of length so node
list may look like an array but it's not okay don't treat it as an array I just
want to show you this outlier example of how we can also access the
length of a node list because it exists as property so that is just something
that I want to draw your attention to even though length can be used on strings and arrays there are many
outliers such as the one I showed you I'm showing you this as it really confused me when I first started so I
thought I'd get in there quickly and just explain that JavaScript is quite flexible we've just used length on a
node list which is not an array or a string we are able to do this because
the node list has a length property okay I think I've covered
length enough for us to move on please do pause here and please have a go at
creating your own examples perhaps have a go at you know recreating this have a
pause here have a go or if not hey let's carry on next up we have
concat the concat method is US Toge two or more things we're going to look at
around rays and strings together so let's go ahead and do that now let's
look at a string for our first example so I'm just going to get a string
const word and then I'm going to
say cheese and then const
name Ana so we have two words here now what if I
want to essentially put both of these words together so I'm just going to put say cheese Ania so it's not essentially
one word now it's a sentence but we are still joining two strings together okay so if there's any confusion one string
and then second string if you want let's actually just call this string and then
string two just so we're super clear about what we're doing we are joining
together two strings so now I'm going to get my console log out and then I'm
going to get the first string I'm going to use concat so once
again this is a JavaScript method I am not making concat up let's open up our
parentheses and now I'm going to pass through string
two so there we go I have joined into the two strings together to make one
string that says say cheese an so that is our example with
strings let's have a look about how this works with
arays with the ray is pretty similar but I'm just going to type it out for you so you can see now the important thing to
know when we use this method on arrays is that this method does not change the
existing arrays but instead returns a completely new array okay so just keep
that in mind I'll show you what I mean let's get array one and let's say array
one is I let's use integers this time so our first array is an array of 1 2 three
values and then our second array so array 2 it's going to be 4 5 6 so we're
essentially counting to six but it's split in two arrays so once again let's get our
console log out I would get the first
array I just spell it right array one and then I would use concat the method
of concat which I am not making up this is a JavaScript method and I would pass
through array two and what does that return well it
returns a new array with all of our numbers in it okay so I'm actually going
to store this as something const new
array I'm just going to store it here so you see what I mean by the fact that we
are not changing any of the arrays at all we've created a new array because if
I conso log out array one well you will see this array right here if I console
log out array to once again again you will see that array still exists we have not mutated these in any way and if I
conso log out new array well you guessed it we got a new array which uses both of
these arrays great so that is another thing that you
might want to make note of this method does not change the existing
arrays it returns a
new allay cool now we can also concat strings with
indiges strings with booleans that is completely up to us concat is not going
to you know discriminate against any of that so go ahead we can also do
something like this so let's just make a third array array three
7 8 9 and then by passing through array
three we are essentially join together all three of the
arrays okay so it is quite flexible I hope that was useful once
again please do have a go at writing these Yourself by building that muscle memory is the only way you'll really get
to grips with learning these JavaScript methods
okay so I just wanted to talk to you about the join JavaScript method let's get to
it the join a JavaScript method creates and returns a new string so I'm just
going to say returns a new string because I think that's important for you
guys to Remember by concatenating all of the elements in an array okay so not like
concat it is going to literally take everything in on array and join it together so for this I've actually gone
ahead and used document and query selector I did not make these up this is
a JavaScript method that will allow us to search for the div or element with
the class so we've got a DOT here so we know we are searching for a class name
of text so essentially we are searching for this div with a class name of text
so we're going to search for any element with a class name of text and we're going to store it as a const that I have
chosen to call text display okay so that is how we would get
that div and then I would grab the text display and use a JavaScript property of
inner HTML so once again I'm not making this up to assign whatever we want so
let's just go ahead and write test and there we go you will see the
string text show up in my div which is in this orange
body okay now let's use join on an array to try test it out I just want to show
you how you can use the join JavaScript method and for this I'm just going to
make another array let's go ahead and call it
emotions so I'm going to make an emotions array so instead of saying the word text I just want to use emotions
there so whatever we we type in here should show up in our text display make
sure that this is at the bottom because obviously we will read this first and then whatever is in our emotions we
assign to the inner HTML of the text display which is an element with a class
name of text so I'm just going to put happy there we go happy let's put
sad and let's put confident I think that's an emotion
so at the moment we have these three elements in our array they are strings
so we've got three strings in our array now I can use join to literally
just Bunch them all up together and make them appear as one word so I could do this easily let's get
our emotions once again make sure to put it above here emotions and then use join
like so so you might not be able to tell but if we actually console log
emotions you will see that is just one long string okay that is opposed to what
we were getting before so if I just get the emotions that is an array with three
elements that are strings inside it and once again let's use join and there we go one string so we
can join up all all of our strings like that if I want to get rid of the commas
I could do that too so there we go by passing through an
empty string I'm essentially getting rid of the commas in between so that is also
quite cool essentially what I am passing through here if I do pass through anything at all will replace the comma
so because I passed through an empty string it's been a comma has been replaced by nothing I can also replace
it with that or the number two or three
or it doesn't matter okay so by leaving an empty string you essentially
replacing a comma with nothing to get one word that says happy sad
confident okay now I did say this returns a new string so it won't work if
I just got emotions and you join on it okay that will not work you will see
that has not work worked I am not getting all three words as one I would need to store this because this returns
something okay it like gives something back so we need to catch it and store it something else so const new
word equals and then I just replace this with new word we've called it back and we
have assigned it to the inner HTML so once again I can just put that here too
all numbers it is up to
me so that is how I would use the JavaScript method of join I hope you can
see how it's different from concat it is totally up to you when you would like to use each one I think it just depends on
the problem you are currently trying to solve I hope this has helped so I hope by showing you both you'll be able to
make that choice eventually okay let's move
on in this next section I want to f focus on the JavaScript method of
Pop the pop JavaScript method essentially removes the last element
from any array and returns that element for this I have already pre-made a
cinema board for us so we can see some cinema names in our browser and so that
I can show you the pop JavaScript method in action before we get going I'm just going to explain a little bit about what
is happening here here so essentially I have made this using HTML and CSS to
look like a cinema board similar to what you would see if you're going to watch a movie at the cinema I have then picked
out this lighter red square using document query selector so
I am not making this up document and query selector query selector is a
JavaScript method that will essentially look into our HTM ml document and look
for a element with the class name we know it's a class because of the dot of
display so let's go in here and you will see a div with a class name of
display that is style to be like Coral so we know this is the element that we
mean so I am finding that using query selector and I'm storing it as display
for us to use in our Javascript
file okay so let's think of some movies cons movies equal and then let's open up
an array because we're going to use pop on that array and the movies I want to put in
are Argo
aliens and fear so there we have our three movies
in an array we know it's an array because we open up these square brackets and we have three elements which are
three strings in our array which we have stored as
movies if I console log out
movies and get our console log up you will see we get them back here we don't
want the console L for Nows I'm just going to put it down okay now let's actually get to putting
the movies into our display so I'm going to use display so I'm literally grabbing
this so we're grabbing the light Coral
Square this is actually a JavaScript property so using inner HTML I'm going
to set the inner HTML of my div to be the
movies okay so we can now see the movies in our
browser so it's going to be easier for us to put pop into action now say I want
to just remove the last movie from our
list well I could do this super easily I need to do it above the inner HTML so
before we assign the movies to our display so I'm going to do it up here I'm going to grab my movies I'm
going to use pop like so and there you go you will see I
have now taken this array and essentially removed the last item from
our array now it is important to know that the pop method changes the length
of the array okay we're not creating a new one we have changed this array at
the moment this might not mean much to you but as soon as we start looking at other JavaScript methods for arrays this
will make a lot more sense for now just remember or make note in your notepad
that pop changes the length of the array it does not create a new
one we can essentially do this on whatever we like so I'm just going to delete that for now so we' got all
three of them back now say I instead of had three strings I had three objects I'm just
going to create three objects there's one object second object third object you can see one
object two object three object and in my object I have name Argo it's the name of the
movie and then length let's just say I don't know how long it is but let's just say it's 136
minutes same for this one so name aliens
and let's say the length of the film is 2011
minutes and name Fe and this one can
be 1 to 4 minutes so now I have an array
of three objects movie objects if I console log that out you will see my
three objects so let's click into the first one as our first object second object third
object now if I console at Movies there's three objects so as we can see here I'm just
going to select that and shut it down and if I take the movies and go
pop and then I console log movies
again you will see I only have two objects so once again pop works on an
array no matter what is in the array it can be a string it could be an object it could be a number it will simply get rid
of the last element in your array so yep as you can see we have this object and
this object this one has been removed so the last one has been removed thanks to
pop great okay I'm just going to delete this for
now now I want to show you the opposite of pop and that is shift let's do that
in the next section in this section we're going to talk about the shift JavaScript method
that removes the first element from an array let's do it now in this section
we're going to look at the shift JavaScript method and how to use it to remove the first element from an array
using this method we'll remove that item and return the removed element as well
it is also important to know so make a note of this that this method changes
the length of an array this might not mean
much to you now but when we start looking at other JavaScript methods this will make a lot more sense okay so just
remember that shift will change the length of the original
array let's get up some movies again so this time
let's get the movies Good
Fellas wolf and juman
G now just like we did in the lesson before I'm going to take the display so
I'm grabbing the display which is essentially this light Coral Square so
I'm grabbing it using the document and query s these I did not make up and I am
searching for the div with the class name so dot for class name of display so
I'm grabbing that here and using a JavaScript property in a
HTML I'm just going to whack in my movies array that's a bit too long let's
change the first one to be another film so I'm just going to go with
clue there we go now this it okay so this time I don't want to remove the
last item from my array so I don't want to move jamanji I want to remove clue I
could do so so once again make sure to do above here because whatever we have above here will be put in the displays
in a HTML would grab the movies array and just use shift on it like this okay
so now you'll see that clue has been removed from my array so that's all we
can see in our display I could also do this with numbers so for
example just going to make another array const count equal and then 1 2 3 4 five
so now if I got the count and used shift on it what do you expect would happen if
I spelled shift correctly well I would expect that the one would disappear let's check that out
let's assign it to the inner HTML of our display and there we go so our
array has been taken here and we have taken off the first item from our array
and then we have put it in the display we have changed the array we
have changed its length next up I want to talk to you about another JavaScript
method on arrays and that is unshift I'll see you in the next
section in this next section we're going to be talking about unshift the JavaScript method that adds one or more
elements to the beginning of an array and returns a new array so let's do it
okay so as mentioned the unshift method adds one or more element to the beginning of an array it is also worth
noting that this will change so this will
change the array it will change the original array that we are working on
this might not mean much to you now but once you start looking at other JavaScript methods on arrays this will
make a lot more sense we are going to be changing the original array so once again let's get a const up
this time let's pretend we aren't in a movie theater maybe a play theater so
const play and let's think of some plays so I'm
just going to put one for now I'm going to put [Music]
Hamilton and then I'm going to get the display so here we have
selected the cor light Coral Square so we can use it in our JavaScript and I'm
going to use a JavaScript property of inner HTML and to it I'm going to assign the
place so at the moment we just see Hamilton Hamilton is the only play that
is playing our our theater I want to add some more but I want to add them to the beginning of this array okay I want to
add them here I could do this with the unshift method so for example to do this I would
grab the plays so I'm grabbing this original plays array I would then use
unshift so I'm not making this up this is a JavaScript method and in here I would
pass through let's pass through another play
Wicked so now you will see that I have added another element to the beginning
of my array okay so that is how you would use unshift in a very basic
form I can also add more than one element to the beginning so let's add another one what's another player that
we can add let's add in cats and there we have it we have now
added two new element to the beginning of our original array and if I was a
console log out plays well I guess we can see here that we have three this is not the same as our original array we
have changed the original array so if I console log out plays it should show me
me exactly what we see up here and that is wicked cats and Hamilton we have three items in our array
fantastic let's get rid of the console log next up I want to talk to you a little bit more about the JavaScript
method of push on a race I'll see you in the next
lesson in this section I'm going to talk to you about the push JavaScript method and how it adds one or more elements to
the end of an array let's do it so the push JavaScript method adds one or more
elements to the end of an array and Returns the new length of the array so
this is similar to the unshift method but we are going to be adding elements
to the end of an array rather than to the beginning so once again we are
grabbing the display so I'm essentially grabbing the div with a class name so dot for class
name class name of display from our HTML and that is this Coral box right
here let's make a const so this time let's do actors
names const actors and once again I'm just going to have a simple array of
strings so let's have Brad Pit
now I'm going to get my display so I'm going to get this element here and using
a JavaScript property of inner HTML I'm going to just assign the array of axes
to it so we can see it okay so at the moment we only have one actor being
displayed in our display inner HTML we only have one actor in our
actors's array I want to change this array to essentially add two more actors
to the end of it so I will do this by grabbing the original actors
array using push okay I'm not making this up this is a JavaScript method and
by just passing through another actor's name so let's put Rihanna even though
she more of a singer but she's done a few films I have now added another actor
another element in to our original array so now we have two items in our original
array we have changed so this
changes the original array please do remember that please
make a note of it just like the others this will become more apparent when you look at other JavaScript methods that
work on arays okay and just with the unshift we
can add as many elements as we want so I'm just going to add in I don't know who's got a short name that we can put
in here I'm going to put CIA even though once again not really not really an actress and let's just put
BR and there we go so now we have three actors SL singers in our array we have
changed the original array so that is how push works I hope you can see how
it's similar to unshift I have one last one that is similar in the way these
work which works with adding or taking away items from an array and this one
will deal with if we want to you know add or subtract anything from the middle of our array because at the moment we've
just looked at the beginning or end let's have a look at the middle this up in the next
lesson next up we're going to look at slice the slice JavaScript method
essentially allows us to remove certain parts of an array now it is important
that it does not mutate the arrays it produces new ones so unlike the ones
previously this will not change the original array okay so it does not
mutate arrays it
produces new on that is important please make not of it this is not like pop
shift unshift and push it will not change the array it will produce a new
one so what I mean by this is this once
again let's make an array so const artists and I'm going to make array of
artist so let's use
Shakira Snoop and
seea let's also say Beyonce and then let's put one more
in Swift Taylor
Swift okay so that is my array of artists now say I just want
to take out Snoop from my list okay because they' all be women so let's do
that let's get the artist array now I'm going to use slice and to
use slice you can pass through two things so you can pass through a start
and an end right so a start index and an end
index I'm going to show you what I mean by this the star index if I wanted to
take out Snoop which would be 01 so I'm just going to console log this
to see what is happening here and then I would pass through a
two so now I have taken out just Snoop
this is what I mean that it does not mutate the array the array here is the same I've essentially taken out just
Snoop so now I can store just Snoop or something so may
artists and even though there's just one now in here I don't know why it's so
female heavy but you know that's just the way I did it male
artists artists Slice on to so now we've
stored Snoop as a male artist I'm just going to cost male artist so now if I console
log mail artists I will get Snoop and if I console blog
artists well the array will be the same we have not changed the
array so what happens for example I'm just going to clear this out so we can start
again if I wanted to remove every artist that doesn't start with the letter s
well that would mean removing the last two artists
so const not s
artists please do bear in mind that this is not how you would search for Strings
that start with the letter s we are just using a static array for this example
that doesn't change okay we are just giving examples how to work with slice you are not literally search for you
know strings starting with the letter s this way if we however want to remove
the last two items of any array no matter what is in the array it does not matter what is in the array we are
removing the last two we would do it this way and I would do so by grabbing
the artist's array and then using slice and I can actually just pass through one
0 1 2 3 oops
three so now if I console log not s
ists I would get Beyonce and Swift I don't need to pass
through a end so as we mentioned we pass through a
start and an end I don't need to pass through an end because we just want to continue to the end of the array so
anything from index 3 onwards will get taken off and saved as not s
artists okay okay hopefully that makes sense just for syntax purposes the
Syntax for using slice would be array so whatever array we want the JavaScript method of slice so I did not make this
up and we would pass through a start and an end that's pretty much it make sure
these are indexes so as if you're starting from Z 1 2 3
4 great so we have our artists Now using
what we learned how do you think that I would put in the first three so I just want to display the first three artists
in my display have a think about
it well I'm going to store them con as const s
artists and then I would get the artists I would use slice and pause through zero
and 0 1 2 3 as we want to stop after the third so here 0 1 2 3 we don't want
anything past that and then I would get the display use inner HTML so the property
of inner HTML oops in a HTML like that equals and then s
artists and there we have it we have Shakira Snoop and sea playing at our
very exclusive theater that only allows artists to start with us to play weird I
know let's actually change it to a small s just to be on the side of best
practice next up we have the JavaScript method of
splice so the splice JavaScript method changes the content of an array by
removing or replacing existing elements and and or adding new elements in its
place okay don't worry if you didn't understand any of that I'm going to show you what I mean now now let's make a
array I'm going to call it movies so what kind of mov should we
have let's have Elf Annie and let's have Hero 6
okay I'm just going to put these movies in our display so I would do this by grabbing the display okay I'm grabbing
this I'm going to use inner HT HTML to essentially assign the content of this
array to the inner HTML of the display so I would do so by just grabbing the
array like so and there we go we get elf Annie and
hero six so array is essentially showing up in the inner HTML of our display now
what if I want to remove Annie I could do so with splice what I would do is
essentially grab the movies array use the splice method so I'm not making this
up I'm using it on my array and because I want to remove Annie
well I would pass through a one this is because Annie is in the 01
first position or index one in my array so if I pass through a one well you'll
see that Annie and her have been removed but if I pass through a one again you
will see that Annie is the only one being removed okay so that is how splice
works I've just removed the item in the array with index number one I can
actually also add add another parameter to this so I want to replace Annie with
something else I'm going to replace Annie with
Mulan and I can do that like so okay let's try a different example
okay let's do something else just so you get used to using splice so back at our normal array that's the one we are
starting with now I'm going to get rid of hero and replace it with something
else so I would do this by finding out where hero 6 is in our array it is the 0
one two it's the second index so two that would remove hero so I could just
essentially pass through a two if I wanted and then
add but then if I try to add hook so I'm just going to add
hook you will see that will not work okay this is because we need to pass
through a second parameter this is essentially a third parameter but we're reading it as a second we can replace
things by the third parameter so for this to work I would have to put in a two just like
that now what if I didn't want to replace hero six with hook I simply just
wanted to add hook into my array here so let's do that again well if I wanted to
add hook here it would be in the second index and then I just want to add hook
so I would actually just use a zero so there we go obviously it's not
fitting on one line I'm just going to delete that for it to work I would just pass through a zero into my splice
method this is because I want to remove zero elements before index 2 okay so I'm
removing zero elements before index 2 so nothing's changing I'm just simply
inputting hook into my array I think the best way to think about it is like this
so let spliced array equal and then we
get our array and we use splice and then we pass through the
first parameter which is the start index so just as we before if I wanted to
replace Annie I would go 01 so I'd po one that is the start index so I go like
that and then our second parameter is the delete count and it's the delete
count from the start so if I wanted to then delete any I would go 01 and I
would delete any however if I didn't want to delete anything at all I just
wanted to input a element like we did with hook I would put through a zero and
then after that we would put through the item that we want to replace so for example hook so once again that is the
start index that we passed through the delete count and then the
replacement okay so I'm just going to move this out the way so you can read it if you ever need to think about it
that is the Syntax for splicing in an
array start delete count replacement okay let's carry
on next up we have the for each JavaScript method let's do
it the for each JavaScript method executes a provided function once for
every array element what I mean by this is that if I decide to change example
all of these pink flowers yellow backgrounds to Red I could do this in a
single line of code I'm going to show you how now so first off let's actually get the
yellow circles in an array so we can work with them I'm going to do this by
grabbing them first so let's go to document and prary selector all this
time so I am not making this up wey selector all will essentially look for
any class name so dot means class name class of circle in our index HTML
document okay so what we are doing is going in here and looking for any div with the class name of CLE so this one
this one and this one we need to use all because we are looking for more than one
and now let's save them as something so I'm going to go const circles because we
have three so it makes sense to use the word circles so now if I console
log circles you will see a node list so you
might remember that node lists aren't particularly arrays okay it's a node list but we can
treat them similarly for for each so we have our first Circle our second Circle
and our third circle just going to get rid of that so that is what is stored in our const
cyclus okay so this is the Syntax for for each we have the
array and then we go for each and then we open up our
parenthesis and in here we can call this whatever we want okay it's just the
first item of the array so it's hypothetical it's made up I can call it
X and for each item or X in our array I'm going to do something right so
that is how it would look I'm going to show you this with our actual array so
it makes more sense but just remember that's the syntax So based on that syntax is what I
would do I would grab our array in this case node list to be
precise and then I would use for each open up our parenthesis now for
each item in our circles node list or whatever array we are working with I
can I'm just going to get call it Circle instead of X okay so right so for each circle in my
circles I want to change it to Red so I would use style once again I'm not
making this up style background color this is something that we did in the previous
lesson so I am essentially adding a background color to the style of circle
we have this color right here but I want to change it in my JavaScript by writing that and let's just change it to
Red amazing so we have now done that I'm just going to minimize this for you so
once again for each we get an array or a node list we can do a node list too and
we use four each and then for each item so we can call I can call this glob it really won make a difference it will
still work it's literally whatever we want to call it and for every item in
our circles I change it to Red okay so that is one example of how
to use four each let's go back to bases and just do it for a normal array using a console
log so if you want to write that down actually make a note of that that that is how you would change each of these to
a different color please feel free to have a go this yourself pause here if you need to pause longer I'm going to
carry on just going to get rid of this so let's do another example let's
make an array so const names
equals Ania Bob
B and then
Melanie so that is an array of names now if I was to get the names and
for each name okay so for each name once again I
could call this I don't know dog if I wanted to it really
doesn't matter it just means for every item in array let's change it back to name
though because it makes more sense than dog and then if I just want to console
log out each name individually rather than there's an array I would do
this so let's get our console log and there we go we've actually done
a mistake here because it's saying that this is one Element so one two well done
for anyone that spotted that let's actually fix that and there we go Anna
bobie Melanie we are printing out each item of an array so each name as we
chose to call it in our console
log I'm just going to do one more example and that is with numbers so
const numbers let's say we have actually let's make it more realistic const scores so
here we have an array of random scores here we
go and then it turns out that the person and count of the scores forgot to add
two points to everyone at the beginning so all of the scores in our array no matter how long the array I mean it
could literally be like really long you don't know how long it goes let just make it go over our vision so we can
pretend that we don't know how long the array is using for each I can add plus two to
each of these numbers so scores for each so for each score whatever we want to
choose to call it we can call it I we can call it score for each
score let's just use console log again so we can see it I want to
add two to each score as we print it out so as you can see
here let's just look to the beginning going to clear that out so it's easier to read we can also if we want to do
more things or just have one line of code use kly braces like
this so that would be the correct syntax with the for each it will work the same
so you will see here
then we have added two to each of the scores so 32 1 to 34 5 43 1 2 5 4 five
and so on and so on and so on
okay just format that a little bit better and we have finished Okay so we've covered using
four each four elements in our browser we've covered it for Strings and we've
covered it for working with integer in arrays too the four each method is very
powerful it is considered to be a loop just like the four Loop so it's very similar to that it's just your
preference as to when you'd like to use each one and if it's more suitable for a
certain problem let's carry on in this lesson we're going to talk about the
JavaScript method of sum for this lesson I'm going to start off with some simple examples of some
first and and then end with a more complicated example just to show you the difference between a basic example and
how you might use some in an actual real life project so let's get to the basic
examples first the sum JavaScript method tests whether at least one element in an array
passes the test implemented by provided function so what I mean by this is let's
get an array and let's call it scores and our score is going to be 23
56 76 and 59 out of 100 now I want to
check whether some scores are above 50 okay and if some scores are about 50
well then let's just say we pass the test okay so these are our overall scores for the year if at least one of
them is 50 or above 50 I pass that's the sort of score I go to so let's do it now I'm going to
essentially console log it out so we can see I'm going to get these
scores so scores my array of scores I'm use the JavaScript method of
sum so I have not made this up this exists it's a JavaScript method and for
each score if that score is bigger than
50 okay well we get are true this is because two of our scores are bigger
than 50 so now if I change this to be lower than
50 we get a false this is because none of the scores are above 50 so scores sum
some of the scores above 50 no false that's how we would read that line okay
so that is a very basic example of how we would use sum so just remember with sum we are checking if any of the
elements in our array meet a certain Rule and if any even one even just one
meet that rule we get the Boolean of true otherwise we get a
false let's try again so I'm going to some write something else just so you
get a better understanding of some
const countries let's get some countries up
so [Music] Afghanistan
[Music] Poland South
America okay so we have an array of three countries now countries
some country so once again this is very similar to for each this is the
syntax so I can call this whatever I want I can call this glob and I can call
this glob essentially it doesn't matter we are just giving this a value so we can check for each item in our array and
if glob an arrow function for this as well so if glob so for each glob or country
let's actually change it back country and if each country is we check
each country and if any other the country deeply equal
Poland then we want this to return true so we're just finding out if Poland
exists on our array so console
log that and we indeed do get true so that is how some works with strings for
example so we are getting the array then we use some to check if some of the
elements in our array match our Rule and if some do even one then we return a
true however let's put another country that is not an array
Russia then we get a false because Russia is not in our countes
array great so that is how some works with a basic example I'm not going to
show you more complicated example to show you how you might use some in a actual real life project don't worry if
this is a bit too much for you I just want to show you in case it comes up I do use this example in my Tetris
tutorial so if you want to have a go at that please do make a note of this it will definitely help you understand what
I'm doing in that walkthrough okay so here we have I'm
just going to clear this up for us here we have three hearts I have a hole in
one of the hearts so if you see here I have one div that has a heart but it
also has a child div in it that has a class of hole which is this black thing
right here and then another heart and another heart so what I have done is essentially in my JavaScript picked out
each div the class of heart so if I console log out Hearts
because we took them all we searched for them in our document we search for them by class name and the word heart so the
class of heart we use Query selector all and document to do this once again I did
not make these up this is a JavaScript method and if I console log heart I get
a node list of these three parts the first one of course having a child div
inside now unlike before I'm actually going to create an array out of this so I can use another JavaScript method
called array from which will essentially make an
array of the divs for me so now it's gone from being a node list to an array
see one HTML div element another another we have an array ladies and
gentlemen great so that is what I get back when I cons loog Hearts so now if I
get my hearts array I want to write something thing that says if there is a hole in any of
my hearts I am heartbroken so Hearts sum I'm going to
store this as const is heart broken
equals heart sum and then for each heart so I am checking in my array of div
elements for each heart for each div with a class of heart I'm checking if
that div has child nodes so there's another thing that I'm not making up is
a JavaScript method that's going to help us check if the heart has
any child nodes so now if I console
log is hot broken I get true this is because there
is indeed a hole in one of my hearts hearts or precisely if I was to talk
about this in programming languages one of my hearts does have a child element
inside it okay so that is how I would do it if I was to then get rid of this hole
so I'm just going to go ahead and get rid of that
here go back here and once again delete that and console log is
heartbroken I get false this because I now don't have any child ndes in any of
my hearts so that is just one uh example of a slightly more complicated way that
you could use some of the JavaScript method of
some great I hope that made sense please do write this down and have a go at this
if you want um once again it is simply just
checking if any of my heart divs have a child div I could even
just have it blank and it would pick it up as that is technically a child to the
parent div but you know because we want to see it I'm just going to give it a class of
hole which I previously made here okay it's just a simple black
hole and there we go okay I hope that made sense I hope you've learned a
little bit more about Su uh we will be using this in projects to really build your muscle memory so don't worry if you
didn't get it so much this time hopefully it should be a lot clearer by the end of this
course now I want to take a little bit of time to talk about the map JavaScript
method okay so the first thing you need to know about the map JavaScript method is that it is quite similar into the
four each however it creates a new new
array okay so what I mean by this is that it takes an array and for every
item or element in the array it will apply a function to it or some
functionality and then create a new array from it this is unlike for each in
which if you remember or if you want to have a look back we were just printing out the result each time sort of like a
loop this will literally create a new array for us but enough chat let me get to showing you with code so the Syntax
for map looks a little bit like this we have an array and then we use map so
once again I am not making this up this is a JavaScript method and then we map
to each item in our values array so for each
value like so and whatever we do here will affect the value we then have to
store it as a new array of values okay
so that is the syntax let's get to actually using it in a real life code
example so for this I'm actually going to use integers for this I think it will be the easiest to see this with integer
values I'm going to make an array of pages so this is the ages of everyone in
my house got 21 I don't actually I don't live with this many people but you know
it's for the sake of the tutorial so let's just assume I live let's have a young person there too uh in a house
with six people from the age ranges of 2 to 56 now this was the last time I counted
everyone's ages it's been 3 years on exactly from now and everyone's aged 3
years so I need to add three years to everyone in my array but I don't just
want to console l out I actually want to store this in a new array okay so we can
say ages it's 3 years ago from now
2018 and con ages 20 21 so this is what we want we want con
ages 2021 so I would get the ages from 2018 I would use map and as we said
remember values array for each value in my array so I'm going to go with age for
each each age in my array get an arrow function up and for each age I want to
add three years so now the console log ages
2021 there we go I get an array with all the ages updated by 3 years so that is
my household's ages in 2021 so that is a simple example of how
to use map remember it does different from for each because it creates a new
array have a go at doing map again if you want have a go at doing this one
just make sure you know the difference it's super super important okay let's try this out again
this time I'm going to use objects so to do this let's create an
array of object this time I'm going to say housem
and then let's open up an array so we know it's array because we have these two square brackets and in it let's have
our first housemate our second housemate let's just have three housemates this
time so I'm just going to do the same that we did before but this time working with objects so I'm going to have the
name of my first housemate his name is
Ahmed and his age is going to be 24 so you will see I'm using a string for
Ahmed and an integer for the age our next housemate is going to be
Ellen and she's going to be
35 and then we have
Woody and his age is going to be 30 so here's my three housemates okay each
housemate is essentially an OB object with a name and an age now I'm going to do this again so
housemate 2018 I want us to essentially create a
new array of just their ages and making sure these ages are up to date so 3
years later in 2021 so we need to add plus three to each age now based on what we did before
how do you think we would do this just have a pause here think about it
remember the syntax that I Told You So map would work with values we get our
values array and then we map out for each value use aror function and value so that is
the syntax and don't forget this creates a new array so I need to store this as
values to so that's just a separate name okay hopefully you've had a go at
this or at least thinking about how we would do this I'm going to show you the solution now so once again we would get
our old array housemates 2018 and use map okay so for each housemate this time
we get the housemate because that is the first item as a housemate or the first
object as a housemate and for each housemate's age
we add to so now if I console Log House makes
2021 let's have a
look we have indeed added two to each age and return that as
an array okay so we have got the ages CU for each age we added two and
that's what we are storing in housemates
2021 okay great that was a little bit more of a complicated example of how to do it with objects I hope that made a
lot of sense I'm not going to do anything with the Dom for this one as I don't really feel we need to um but
again if you want to please do practice this please do search online for more
examples if you need I will be using map in some of my tutorials so once we get a
hang of a few more things we will be doing them as well so don't worry you'll have plenty of opportunity to practice
the map JavaScript method okay great I'll see you in the next
lesson in this next section we are going to be talking about the filter JavaScript method and how it's
used so first off it is important to explain that the filter JavaScript method is used for you guess it
filtering the method essentially creates a new array so make a note that creates a new
array with all the elements that pass the test implemented by the provided
function so what I mean by this is we're going to write some code and if our array passes the rules in the code we're
going to create a new array with those values okay and then we're going to
stick it in here so for this example I'm going to start off with an array of of shows I've
put in some shows that I'm already into so lupan kraai 24 and Mr Robot we're
going to use filter on this array first off to find out which of these show names is less than five characters so we
can put it in this box right here and it fits perfectly and then we're going to do some more filter work this time with
objects and arrays so I'm just going to show you the simplest way of using filter and how I would do this is I
would grab the shows array and then we said that we want to only filter out any
string that is less than five characters in length Okay so let's do that we can
easily filter out every single show name that is less than five characters or
equal to five characters by getting the shows array using filter so I did not
make this up filter is a JavaScript method
and then similarly to four each we would grab the word so I can call this
whatever I want okay I can call this
I I can call this puppy it's totally up to you this
is essentially a syntax that essentially means for every element in our
array I'm actually just going to change that back to to word and for every
word we're going to check the length of the word and if the length of the word
equals or so smaller than that is smaller
because this has to be smaller than five and then we want to store this in
something because as you remember filter creates a new array so let's go ahead and store that in
display shows as we are going to be displaying them later on so we have now
stored this new array in something let's see if that has worked so console
log display shows let's get our console log out and
great we now have a new array that has stored all the elements in our array
that are either equal to five or less than five in length by length I just
mean the character count that is how you would use length on a single string if
you remember back to our previous lessons so that is how you would use filter that is a very basic example of
how to use filter for example I could have equal to five and then I would just
get lupah I could have greater than five
and then I'd get cobai and Mr Robot and I can do a lot more other
things so that is just one example before we go on I am just going to show it in our display so once again how do
we do this well if we have a look at our index HTML you will see that the display
is what we need to get so the class of display because that is that element right here you will see that it is
styled to be pale Violet red so let's grab our
display we're going to go into the
document we're going to go into the document search for it using query
selector we did not make that up that's a JavaScript method and search for the class of display and let's store this as
const display or if we want we can
save it as show display it is up to us
what we save this as and then we will get the show display and use inner HTML so the
property of inner HTML I did not make this up and just assign it the display
shows and there we go there they are if we want to start
this up a little bit let's just change the font size and let's make it 50
pixels so there's our three shows
okay let's move on now say instead of an
array we had an array of objects so I'm just going to console log this out so
you can keep it there in case you need it and of course we don't have any shows
for now so I'm just going to comment this out too say we had so I'm going to do shows again however this time is
going to be array of objects so there's one object there's another object and each object is going to be a show object
so this is a more realistic way of how you might see this in uh a working
environment so you'd have your object it's going to have the name
Lupa we're going to have series well I know it's got one series I'm going to go
one integer episodes total five okay and then I
could do the same for all the others so
Cobra Kai it's third series and let's say in total it has 20 episodes or 30 episodes
I'm not exactly sure but we don't need to be accurate for this and then let's put
24 once again I really can't remember how many series this has so I'm just going to be making these up and the last
one is Mr Robot three and let's put
24 okay so now instead of just working with a simple array like that I have a much
more complicated piece of data to work with but we can definitely still use filter on on it so I want you to display
the shows that have over two Series in the making how do you think you would do
this I want you to have a pause here and think about it before you move on so
feel free to get out your code editor have a mess around all you need for this
is to get something like that and then use filter on this array in order to
find all the objects or all the shows
that have series of over two so it would be these three that you need to store in
a new array okay I'll see you in a bit
okay so the way I would do it is this let's go here I would grab the shows
array I would get the filter JavaScript method let's open up and we know that
the syntax would be this show show because each of these is a
show one show two shows once again we can call it whatever we want but for the
sake of readability I've called it show now for each
show well I can't just do length I need to get the shows series and check if it is larger
than two and if it is we want to store it in a new array so let's just call it
display shows again so now if we console
log display
shows I would indeed only get three objects back so Cobra
Kai 24 and Mr Robot okay great that is
how we would do it that is the solution to using
filter I think we're ready to carry on
in this section I want to talk to you about the reduce JavaScript method let's
do it the reduced JavaScript method executes a reducer function on each
element of the array resulting in a single output value what I mean by this
is we can use it to essentially add up loads of numbers together okay so that
is how the reducer works we add up loads of numbers for example if I get an array
of numbers so const scores and I want to figure out what my final score is so I'm
just going to put some numbers in here like so I would get the scores
array get the reduce JavaScript method and this is the Syntax for writing a
reducer okay so you have accumulator you have an accumulator
and the current value let's just put that in
actual parenthesis themselves and then
accumulator plus current value so that is the syntax of writing a reducer just
going to comma that out so we can keep it at all times we have something that will accumulate and the current element
being processed in the array so if I show you this with with actual code I'm
going to use reduce and then the accumulator and then I'm just going to
put through the exact code that we see
above and let's store it as
total now if we console log total we can actually get rid of this because we
don't need this actually we do we need the console log you will see 21 so this
is just syntax you can of course change these to whatever you want for more readability for example I might choose
to have the accumulator be called total score and then the current value
so whatever is being processed is just a score so I'm just going to put score either way the total will be the
same because 5 + 3 is 8 + 6 is 14 and
then we add 7 which is 21 we can do this on whatever we want so
1 2 3 4 that will give us a four essentially if you use this syntax so
that here you can get the total of any array of numbers okay so make sure to
write that down it's just syntax you just need to remember it make a note okay now I'm going to actually
delete this and I want you to try adding these
numbers together so based on what you have learned so far you can of course
what's it not liking there comma um you can of course refer back to the previous lesson or if you've made a
note I want you to have a go writing this in your own code editor okay I want
you to add all the numbers
together please have a go at doing this yourself once again feel free to Google
feel free to go back on your previous lesson just just have a go okay I'll see
you in a
bit okay so hopefully got that once again we would grab the array and we use the reduce JavaScript method so once
again we are not making this up and let's get our syntax so we need one thing here and one thing there I can
call it X and Y but I really would not recommend that no one knows what X and Y is it's not very readable it doesn't
help out other developers reading your code and then I would simply put
X+ Y and score this let's store this as total
and it's console log total and there we go we get the total
of these four numbers if we want to check if this works let's make something easier so 1 2 3 4 and indeed we get
A4 so as I mentioned I really wouldn't call this X and Y I've just done it this
way so you can see that it really doesn't matter what we put at these two values and what we put
here but this this is how I would name it
total and score so we're talking about each individual score and it's
accumulating onto here each time okay it's going bam add add add add until we
get a total so there we go that is the reduce JavaScript
method in this next section I want to talk to you about the every JavaScript method let's do it
the every JavaScript method tests whether all elements in the array pass the tests implemented by the provided
function it returns a Broan value so what I mean by this if everything in our
array matches a rule or a statement return
true otherwise return false so I'm going to do it once again with
the scores cons scores equal and then let's have some
scores there we go I think that's enough we have an array of scores
now well let's put something else let's put test results sure let's pretend we are a teacher in a classroom and we have
some test results now someone has asked us to check if all of our students have
received over 30% okay we just want to know if the students have got over 30% well I could
do this with every I would do it like this so let's get our array so test
results and then use every and then check so I'm going to get
the test results I'm going to get result once again I'm calling this ever I want
and for each result I need to check that it is larger than 30 okay so that's how
we would do it once again I can call this whatever I want it really doesn't matter I can call it I I can call it X
it just means for every item in our array so for the sake of readability I'm
going to call it result and let's console log this to see what we get so we should get a Boolean
of true because all our results are indeed over 30 so I know I've put this
in a console log but another option is to actually save this as something so if I saw this as
const class pass has class pass has
class past equal so if I console log
class or maybe just class pass true that makes more sense readability wise
console or class past true however if I put one of you to 26 we get a false this
is because not every one of our items in the array matches this rule
okay so that is how every Works once
again I'm going to ask you to do it yourself so make a note of this because this is going in a second this
essentially is the syntax so this bit right here on an
array and boom there it goes okay so in this example I'm going
to make a new array I'm going to say const
array animals and then I'm going to have a cat
not C cat a rat a
dog a mouse and that's it so that is my array
of animals I want you to tell me if all the animals in our array if all the
animals length so the length of the string is equal to three so equal to
three right so you need to write a line of code that will essentially give us a
true or false value based on this rule okay so
write code that will return true or
false if every string in the
array is equal 2 three in
length okay so once again I'm going to leave you to it please have a go at this
yourself and I'll see you in a
bit okay so the way I would do it is this I would grab my animals array I
would use every and then I'm going to pass through an animal for each animal
[Music] anal each animal length so this is a
property that we used before dly equals 3 and then let's store the answer or
let's just console log it for now we get a false this is because Mouse
is five characters long if we however change this to ant then we will get a
true because of all are animals so all these strings in our array would be three characters in length so once again
I could also store this as something so I'm just going to cut this out and let's store this as
const three letter animals or is a thre letter animal
because it's going return a true or false is three letter animals is three animals true and if we
change this to an eer we get a
false okay so that is how every works I
think we're ready to move on in this next section I want to take a
moment to talk to you about split and how it works let's do it the split
JavaScript method divides a string into an Ed list of substrings and it puts
these substrings into an array and Returns the array the division is done by searching for a pattern where the
pattern is provided as the first parameter in the method's qu okay so
what I mean by this is this let's get a string I'm going to say
sentence and let's put I will have what she is having so
there is is our sentence now I can use split so I'm just
going to console log this out I can use split so if I grab the sentence and just
use split like that so hold on let's put
a space in between let's get a console log out I have now split this string by
the spaces so by this Space by this space by this space by this space so now
I have an array of strings 1 2 3 4 five six seven seven
elements I have an array of seven strings or seven elements okay because we have split them out and put them into
an array so that is pretty cool
okay so I'm just going to get this and instead of console logging out I'm going to save it as something so
const words that make up the sentence so if I conso log words now I will indeed
have an array of all the words that make up my sentence and now if I go into that
array so this is how we go into an array if you remember we open up our square brackets I can get the first word so I I
can get the second word which is Will third fourth fifth and so on so that is
pretty cool I can also so I'm just going to conso log words split
out by individual letter so now I
have this sentence broken up by letter and spaces to so if you see here I space
will space have and so on so now if I go
into I shouldn't call this words anymore I'm going to call it letters
I can go into the first that will give me an i
letters and go into the second that will just give me an
empty I can go into the second which will just give me an empty space I can
go into the third or index number two and that'll give me a w and so on and so
on and so on okay and
finally I could just do that which isn't really useful to us but it will just put
the sentence in its own array great so just like always I'm
going to delete this now in order for you to have a go so make a note of this
and it's gone let's get a sentence up
so here we have a sentence and it's going to
be come on baby Light My Fire I want you to get the third word
out of this for me how would you do that using Code so get the third word from
the sentence using Code I'm going to pause here where you
have a good doing this we did cover it in everything we just learned so feel free to have a look back or Google the
choices up to you I'm going to pause here while you do
this okay so the way we would do this is I would get the sentence itself use
split in order to split out by space so let's put in a
space okay let's save this as something so const
words so now if I console log words I would get the words and we want
the third so index 01 2 so I would simply go two and there we
have it we have the third word in our array so once again I could choose to
store this as something or like word store that here so now our variable
word is the third word amazing I think
we're now ready to carry on okay it's now time for some array
work we have learned a lot about arrays in these past few lessons and I really want to put it all together so this next
section is going to be quite difficult so please don't be scared if you find
yourself really struggling it's meant to be hard I really want to throw you in the deep end the reason why I'm doing
this is because I'm going to give you plenty of time to solve this by yourself and if you don't get it don't worry
that's what I'm here for we're going to go through the answers together once you have completed this section or once you
have watched this section I really would advise to make a note of this section and practice it by yourself there's
going to be a few ways to solve each of the challenges so practice solving it in loads of different ways if you wish okay
let's do it okay welcome to this section on array
workor as mentioned this is going to be quite a tough section so please don't beat yourself up over it if you don't
get it that's what I'm here for we're going to go through all the answers together so what I need from you is get
up your code editor and in your index.js file I just want you to write this okay
so go ahead and do that now pause if you need we are going to be using everything
we've learned in the previous sections about array work in order to write functions to help us solve these
problems we have a lot to get through okay so this is going to be a lot of
fun okay so each of these is going to take the same format I'm going to ask
you to use a JavaScript method to write a function that does something in this
case I want you to convert something into something else so convert
Fahrenheit values into Celsius values you're going to use a function to
do this and write your code here this exercise or these exercises will involve
some form of Googling for example your going to have to Google how to convert Fahrenheit to Celsius if you don't know
already which I definitely don't okay so
I am going to pause here while you do this the first one will be hard so have
a go at doing it anyway if you don't get it I'll go through the answer with you and hopefully that should give you a
clue into how to solve the rest of these as well so pause here have fun Google go
watch wild and I'll see you in a
bit okay so the way I would do this is
well first off I actually need to get an array so I'm just going to use this array right here
const Fen height I'm going to call it
and I'm literally just going to copy that so now we have an array of
Fahrenheit and we need to convert it to Celsius so well you would probably
Google how to convert one to the other so here we go Fahrenheit in
Celsius or Fahrenheit to Celsius should I say and we know that we can use this
formula so I'm just going to copy that
I'm going to paste it here so we can see it at all times so now we know to get something in
Celsius that from Fahrenheit I would have this number - 32 multip by 5 9 and that will
give me the Celsius value so get Celsius
well Celsius so const Celsius
array because we have to do this for every single item in our array so grab
the fahrenheit array and use map so the JavaScript method that we leared earlier
to map over each of these and apply this logic to change it into Celsius so const
Celsius array equals getting the Farenheit array so I'm getting the fahrenheit I'm getting this and I'm
using the JavaScript method of map to essentially change each one of
these so in my array of
Fahrenheit I could put value and for each
value I would take away 32 and multipied by 5 over
9 just going to put this in parentheses as well so it's easier to
read now I could do something like this so I could say const or
let Celsius array and then
assign so we're going to do our calculation we're going to make a array so changed array of Celsius and we're
going to assign it here and then that's going to get stored as a global variable so now if I cons so first of all we need
to actually call the function get Celsius and then let's console
log cellus array we would get minus 5 60
105 so we've done it amazing however I'm just going to show you a quick trick
well it's not really a trick just it's just a way of returning things out of functions that will be useful for this
section so instead of me getting on new array storing it here and then storing
as a global so that we can console loger out here after calling the function I could just
do this so now if I call my function so
console log get Celsius and call it
I'm returning this okay I'm returning this
array so that is a neat way of doing it and once again you will see that indeed
if we use this array then we're going to get this back
okay so that is looking good now based on what we have done here
I want you to have a go at doing the next one are you ready for it let's do
it I should also say that there are many ways of solving this like you could have passed through the array into here you
could have done so many things so this is just one example of solving it if you have thought of a different way please
do share it with me on Twitter I would absolutely love to
see okay next challenge let's clear this and I'm
just going to uncomment this out so we don't don't have to see it show up in our console look okay so I want you to solve this in
the exact same way that we did before so make sure to have a go at this yourself
please do use Google these are quite hard we are going to be using everything that we have learned so far so also feel
free to go back to the section about sum or anything that you think might help with this section about dealing with
falsy values okay so once again I am going to pause here please do have a go
at doing this yourself and I'll see you in a
bit okay so once again I would start off by making an array so I can test this
out I'm going to call it array one or array because we've already have an
array here oh no we don't we don't call it array let's just call
this array and then I'm simply just going to take this array that's already pre-made for us and we need to check we
need this to return a true because some of these are
falsy okay some of these are falsy so we need a true to come back this for
example is a falsey see so I would do this by grabbing the array
and using sum because we are told to use sum and the Syntax for sum so we would
need to pass something through so an element in our array I'm just going to call it element or item and for each
item we going to check if it is falsy so if you remember back on our
lesson about truth or falsy I'm going to check if the item is
falsy and I'm just going to return this and then let's check for falsy and
invoke the function going to console log that to so we can see the answer and we get a
true okay this is because Nan is falsey if I change this to be a one for example
we get a false because none of the items are now falsy so let's change that back
to not a number because we know that is falsy and we get a true so that is how
sum works it checks if any so if some of the items in our array match a certain
rule then we return a Boolean response and in this case we are checking if
something is falsy so that was what the bang is doing okay it's checking for a false
or falsy item so once again you could have done
this in a few different ways it's totally up to you if you've managed to do this in a different way then please
do let me know please do share it with me on Twitter I'd love to see your solution I'm all about Creative
Solutions so yeah hit me up okay I think it's now time to move on
to the next question so once again I'm just going to get rid of this and let's
carry on using the reduce JavaScript method
write a function that will return the total number of characters in an array so that should be of of characters in an
array of strings so for example this array of three strings rabbit football
and cracking returns 22 as there are one 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
17 18 19 20 21 22 characters in
total okay so I want you to have a go at doing this please use the reduce JavaScript
method to do it so we just recently covered that one and I'll see you in a
bit once again as a reminder this is all you need to write out in your code editor and your code goes here
okay so hopefully you've had a go at doing that yourself if you haven't quite got it don't worry that's what I'm here
for we're going to go through the answer together so let's do
it okay so the first thing I would do is just create an array so const words let's call
it and I'm just going to get this array and I need the so when I console log get
total I need to get the 22 value so well first off let's get the array itself and
use reduce now we know that reduce works with a total and a value and it ACC
accumulates okay so we're going to put that this is these syntax I'm just going to write these Syntax for
now so that is it we need an arrow function here and we'll put total and value so that is the syntax if you
remember oops that should be a plus that is the syntax if you remember from our lessons let's get working on this okay
so we know that this is the total and this is the value so this going to be rabbit football cracking so what we need
to do here is get the total whether each time we add to the total we don't want
to add the values to the string itself we don't want to we don't want to add rabbit and then football and cracking
that won't really do much it doesn't make sense instead of adding the word or the value itself so perhaps let's change
this to word now because we know that's going to be a word we want to get the word length
okay and then one more thing that I need to do is start from zero so this is what
I said about Googling if you Googled this uh you Googled how to do this you might have got this as a response so
let's see if that has worked this is because we're going to be starting from zero so
console log get total let's invoke it
and of course we need to re something from the function so there we go we get
22 if I got rid of the zero well that wouldn't really make much
sense rabbit 88 this is because we are telling it to
start from zero okay it's an initial
value once again there are many ways to do this this is just one way that I would do it if you have your own and are
really proud of it like to share it please do tweet me I'd love to see and I'd love to share your solution with
others too so go ahead and do that this is how I would choose to solve this
problem hopefully your Googling is getting a lot better Google is such an important tool of a software developer
and I hope you can see why this is a total Google exercise and Google would have helped you with this
okay I think we're ready to carry on so I'm just going to get rid of that console log once again again so we don't
have anything in our console and let's get to it using the every JavaScript method I
want you to write a function that checks whether a number or every number in an array is a square number so for example
this would come back as true as 9 is a square number 3 * 3 is 9 16 is the
square number as 4 * 4 is 16 and so on this as well 9 * 9 is 81 so they're all
square numbers okay how do you think you would
use the every JavaScript method in order to check whether every number in an array is a square number I'm going to
give you a hint for this this square number part is going to involve some Googling as it is a very useful
JavaScript method that we have not covered that exists that will help you with this to give you a clue it starts
with math okay it starts with with math sort of like math random and math round
and math seal so there we go have a go at Googling this have a go at doing this
yourself once again this is a Google exercise as well so have fun go for it
and we'll go through the answer together
okay so hopefully you've had a go of doing that let's go through the answer
now so once again I'm going to start off with making an array so cons Square well
let's just so numbers cuz we don't know if they're square or not that's what we're checking we're checking if all of them are square numbers so I'm just
going to get this array and we know that it's true so we need this to return a Boolean of
true so I will get the numbers and I'm going to use every so and get the Syntax
for every so it's going to include me getting an element from an array and for each element we're going to be writing a
rule so I've chosen to call this num just because these are numbers you can
choose to call this I or you can literally choose to call it num number so for each number in our numbers array
so this one this one this one I need to check if this number is a square number
so I did say to have a go at finding another JavaScript method that could
help us with this and there is something called math square
root so here we go math square root as you can see on the mdn website the math
square root function Returns the square root of a number so this is going to help us do this so I'm simply going to
get this right here so I'm going to get that and I'm
going to put through the number so I'm going to use this to get the square root
of the number okay so if I put through a nine here I will get a
three and now I use modulus one so let's get modulus this one because all square
numbers are made up of full integers so I need to check if the whatever the outcome of this so I can actually
console log that console
log I'm just going to put this in
here let refresh it's console log I'm just going to call check
squares inoke the function is a three so that is a full number okay that is a
full number so if the full number modulus one gives no remainder so we are
literally going to check if it is uh divisible by one and leaves no remainder
then we know that it is a square number okay so I'm just going to return
this return I'm just going to get rid
of that two so now I'm just going to put a one one line I'm going to tell you
what this line of cone means I'm getting the numbers array and for every number in my numbers array when I'm getting the
number and I'm getting the square root of the number so as we saw with nine that was a three so that will return a
three and three modulus one leaves no remain remainer so it is a full number
we are essentially checking if the square root of this number is a full integer and if it is a full integer we
know that number is a square number and we can return true as we know all of
these are square numbers so now if I put through something that is not a square number I will get false this is because
the square root of 80 is not a full number so it does not pass this Rule and
we fail this returning a true so let's put it
back to all square numbers once again this was quite math heavy and it did
involve you googling this so I do hope you've got it if not don't worry that's
what I'm here for that's why we went through the solution together if you have thought of a different way of
solving this then please also do share it with me I'd absolutely love to see
your solution okay great let's carry on if you are
thinking like oh how come you've put um parenthesis around this we don't actually have to so there we go I've got
rid of it there and we can also get rid of it here too and here as well it is not it is not
necessary okay it's just an option for us
okay next challenge just going to get rid of this here
and clear out a console log okay next question using an array
method so this time I'm not going to tell you which one I want you to write a function that returns these string
elements of an array that have a given length or larger so for example if I was
to pass through this array and the number five I should get the words
Florida and phone back okay so we're going to be using two
things in order to do this so as a clue I'm going to have const words
array I'm going to get this here and we have
con number five and then I would use that in
my function in order to return something that will give me back Florida and phone
based on these if I was to pass through a three well I would expect everything
to be returned so have a go at doing this I'm going to pause here while you
do it so make sure to take this down in your code editor and go ahead
okay so the way I would do this is like this I would use so I'd get the words
array first return the word array and then I
would use the filter method because we're essentially filtering out we're trying to find which of the elements
match a certain Rule and then this is the Syntax for a filter so I'm going to get a word or as I've chosen to call
word this is the syntax it just means that for every item in our array we want to apply a certain rule which we're
going to write here so if the word
length equals what is larger than
the number so in this case it is three well
return that let's see if that has worked so console log get
words and let's call the function and there we go Florida dog
phone if I change this to five we will get Florida and phone now the reason
it's written like this is that we are essentially writing this function to take parameters or arguments so for
example if I was to console log out this and now use get words and pass through
this array and the number
five and then have an array here and number so once again then
change this to array and number we will get Florida and
phone okay so now I can check this function works for many things so once
again get words I am recycling the function that we have written and I am
checking it works with different array so let's just have
pen ason
copy and then let's pause through the number let's say
three and we will get all three and if I pass through a six I we'll just get
astronaut CU astronaut is the only one that has a length of six okay so that is
how we would check the function many many times we are passing through an
array and we're passing through a number and then when're using that array or whatever array we passed through to
filter and check against that number so if you go here I'm literally taking this
array I'm putting it here and I'm putting it here and then I'm taking this number and I'm putting it here and I'm
putting it here okay and then running my function great
okay so hopefully you've got that if you do have another way of solving this I'd
absolutely love to see so please do share it with me I'd absolutely love to see all your Creative Solutions there's
many many ways to solve this and let's carry on so I'm just going to conso this
out
now using an array method so once again I'm not going to you which one write a
function that converts an array of centimeter values as strings into an array of numbers so once again this is
going to be a fun one as you're going to have to Google there is a really Nifty JavaScript function that will allow you
to convert strings into numbers so I'm not going to tell you what it is but as
a clue just Google strings to numbers in JavaScript and you should be able to
find that JavaScript method so have a go doing this just simply copy this out in
your code editor and let's get to
it okay so the way I would do this is I would essentially let's get an array
so con array and I'm just going to literally use this array right
here and I'm going to return so array three I think we have to call this or
let's just put centimeter values and return where I would get the
centimeter values and then I'm going to use map as we are essentially going to be
mapping onto each element and I'm going to use map so this is my map syntax I'm going to get a
value and for each value I need to do something right
I need to change it to a number so I
don't know if you've managed to find it but there's something called pass float
the pass float function passes an argument converting it to a string first if needed and then returns a floating
Point number so it's going to change it to a number for us okay just like that
so let's go back here and I'm just going to use pass
float and Surround
my value in it so now if I conso
log get values and call the function there
we go I have now got 30 23 5.6 and 1,000
brilliant now we can of course go the extra mile in testing this just as we did before so I'm going to comment this
out for now let's put an array in so I'm just going to put a different array this time
I'm going to put 34 CM as a string 45 cm
as a string and 1.2 cm and I want this to
convert into integers so I would put the array so I'm just saying whatever this
is I'm passing it through as an array and I'm going to return that so there we go that has
worked too I've now converted this other array into integers let's do it again so
console log essentially any strings or array of strings I pass
through into the get value function now should come back as integers so 3
cm 4 cm
oops 4 cm 7
cm console log get
values and there we go we've done it we've written a function that will literally take any array of strings as
values and turn it into integer values cool let's move on
using split and filter write a function that counts the number of vowels in a
sentence so for example here we have a function and if you pass through in West
Philadelphia born and raised it will come back with 12 this is because there are 12 vowels in this sentence so I want
you to have a go at doing this it is a bit on the hard side but it does use
everything that we have learned so far so I want you to have a goat doing it I'm going to pause here while you do
this and I'll see you in a
bit okay okay so hopefully you've managed to do that if you haven't don't worry that's what I'm here for we're
going to go through the answer together so the first thing I would do is let's get our
const saying I'm going to call it a saying let's get this
string okay now what exactly are my vowels so const I'm going to find out
what my vowels are my vowels are a
E I O U but I also need the capitals as well
so a b i
o u okay because we also need to count the capital vowels in this saying so
those are all my vowels it's an array of all the vowels as strings split out
okay so how would I do this well I would of course grab my saying or my string
essentially and I'm going to use split and I'm going to use split to split out
all of this by individual letter so if I console log this out if I console log
out saying and split it out like so you will
get there we go so we split it out into array of
individual letters this is going to help us now because now we can use filter to
check if each one of these matches a certain rule so we've done that we split
it out now I'm going to use
filter to essentially filter out letter by letter so I'm going to grab the letter and letter by letter I am going
to check if that letter is included in the
vowels so if you remember back to the include JavaScript method I would grab the vows array use includes to check if
that letter exists in my
array okay so once again I am splitting up
this to be an array of individual letters like so and then I'm going to filter out and I want to save every
every single letter that is included in this array so if it is included in this
array I want to save it as something so I'm just going to save it or I can I
save it so const just so you can see what's happening actually I'm just going to
console log
this and let's call the function so I'm going to conso the function get
vowel count so there we go I have now an array
of just the vowels from this sentence return to me okay there we go
we filtered them out we've collected all the vowels the next thing we need to do is finally just get the length of this
array now because that's what we wanted we wanted the count of how many vowels
exist in this sentence and it should be 12 and that's what we're getting we're
getting 12 brilliant so that is the solution I've of course written it in
one sentence and I also actually need to return this for this to work so I'm
going to return that like so and now if we pass through any sentence into here
we should get the vow count okay once again I know there's many ways you could
have solved this this is my way that I've written but of course please share
your Solutions with me share them with you on Twitter I love to see them and share them with everyone else cuz I'm
sure they would really appreciate it too so now if I pass through anything I
can pass through I am a
dog so that is a sentence I'm going to CL through a sentence and whatever the
sentence is I want you to check if it
has vowels and how many so I get four 1 2 3 four that looks right let's try
something else console log hello there
everyone and that has eight vows amazing we have now written a function that will
literally return back the amount of vowels we have on any sentence let's
carry on once again I'm just going to comment
these out and we have got to our final question in the array work section in
this one I want you to use split map and join in order to write a function that
capitalizes the first letter of each word in a sentence so for example here
we have a string the Queen's Gambit I want to change it to the Queen's Gambit
like so not in an array that is not necessary so once again get to your code
editor write this out and try solve the solution by writing your code
here okay let's pause here feel free to Google of course or look back on our
previous lessons that is absolutely fine too I'll see you in a bit
okay so the way I would do this is so let's return
something let's get something so con words
equals words identified words
two and there we go now I want to capitalize everything in here so I'm going to grab the words string and I'm
going to Let's maybe call this something else let's call it a title cuz it's a title of a film I just don't like using
numbers in um variables and I'm going to use split again this time but this time
I want to split it by word so I'm going to literally split it out by word if I console log this so
actually console log capitalize and let's call
the function I would get a array with the three words
split out so just like that now I need
to change each of these in order to have a capital letter so I would do this like
this I would get map because we're changing each one and then for each word
or element in my array so once again for each word I want to apply this whatever
is written in here now this is something that we haven't used before that I'm going to use in
order to solve this it's called chart at and it just means the first character so
if I po zero I just mean the first character in my word so there we go you
can already see I've got about T Q and G if I just left it like this and I'm
going to use some in called to upper case so once again this was a great one for Google because I'm using a lot of
stuff that we haven't discovered yet but by Googling we have found them okay so
I've just taken the first letter of each word and changed it from small to
capitals okay now I need to put it back in my word so for this I'm going to use
plus word so I'm getting my word again I'm going to use something called substring to essentially
add it to the beginning of my word so word substring one and replace the first
one with it so that's what it looked like with just substring you can see the capital T and
the original word but if I put one I'm essentially substituting the first
letter Okay so we've done that and the final thing we need to do is use
join oops join on the whole thing however so I'm
just going to wrap all of this in like that so I'm joining the
whole array now I've joined it but I want to join it like so so I want to join it without
the commas and taada we get the Queen's Gambit as a string returned to us just
like we wanted and once again I can pass through anything into here
so Life of Pi just going to comment that out and then pass through a title in
here so Life of Pi is now capitalized let's try something
else The Incredibles and there we go okay I hope
this was useful I think this exercise is really good as I said it was a bit on the the hard side and it did involve a
lot of Googling in order for us to get the solution just like with the last one there was a lot of Googling that you
should have done there as charat is a new one for us and so is substring you
would not have seen them in this course but with the help of Google you hopefully got the right answer or you've
come up with your completely own version of how to solve this as mentioned if you have I would absolutely love to see your
solution I'm all for creative thinking and I'd love to see how you solved this
challenge okay let's carry on in this section I want to talk to you
about the add event listener the event Target method add event listener sets up a function that
will be called whenever the specified element is delivered to the Target what
I mean by Target is an element itself a document or a window don't worry if this
doesn't make sense I'm going to show you this in code so for those of you who have been carrying along with my course
we would have used Advent listener a few times by now however we haven't really delved into how it works so let's do
that now the ad event listener essentially can work on a
Target and then we pass through a event such as a click so I'm
just going to put through event and the function that we want to invoke when the
event is triggered I'm just going to show you this with an example for the Target I'm
going to choose this green square right here so let's go ahead and pick it out
from our HTML file so I want to choose this with the ID of hexag again so I'm
just going to copy that and in here I'm going to use document I have not made up document or get element by ID that is a
JavaScript method that will allow us to look in our HTML document and find the IDE of
hexagon now let's store this as something well I'm going to store it as
hexagon so that we can use it in our Javascript
file so now we have a Target so I'm going to get the hexagon and I'm going to use ad event
listener so the JavaScript method of ad event listener so that each time we
click on the hexagon but only the hexagon so I'm going to pass through a
click here once again I'm not making this up this comes from a long list of things that we can pass
through and once I click the hexagon I'm just going to get a function
so let's write a function alert me I just want to say console log
clicked so now we need need to pass through a function and that function is alert me so let's clear this and see if
that has worked let's click on the hexagon let's get our console log out
refresh that and there we go clicked clicked clicked so everything is working
here let's break this down a bit further so my target is the hexagon itself I'm
using ad event listener I'm passing through an event to invoke a function
when the hexagon is clicked we are listening out to anytime someone
interacts with a hexagon and if that event is a click we invoke the function
here so I mentioned that I did not make this up uh there are plenty of things we
can pass into ad event listener here are just a few so here we have click we have double
click we have Mouse down we have so many this one's depreciated let's choose another one so
perhaps we can work with mouse
over so I'm going to replace with this mouse over now let's refresh and as soon as I
just hover my mouse over we invoke the function so that's pretty cool I'm not even do anything I'm just hovering my
mouse over it and it's invoking that function
so that is how ad event listen works as mentioned I could do it on the window or
I can do it on the document itself as well so this is probably a good time to show you I'm just going to comment this
out for now now I'm just going to get rid of all
this here at the moment in our index GS file we have our script to our Javascript
file at the bottom of our body so we always keep it here we make sure that
all the HTML elements are above it cuz we need to load the HTML elements before
reading the JavaScript however sometimes people like to put the
script tag in the header with the CSS file okay so if I move that here none of
my JavaScript would work this is because we have not read any of the
HTML okay so what I would do do is essentially use get the document and add event
listener and make sure that the Dom
content has loaded before and this is an aror
function and once everything has loaded so once all the HTML has loaded
then and only then can I start to pick up my JavaScript okay so that is another
way of uh picking up JavaScript from our HTML file and it is using the document
Advent listener a lot of people will tell you that this is the more secure way of doing it so it's totally up to
you how you'd prefer I'm going to get rid of this for now but I do use this approach in some my games so just be
aware of that both are completely correct so I'm just going to put this down to the end below all of my HTML
elements so that was a great example of using document with the ad event
listener once again just to recap the ad event listener takes a Target and then
we use the ad event listener so the JavaScript method add event listener and we pass
through an event and the function that we want to call if the event is
triggered so I'm going to ask you to have a go at this
yourself so I'm going to pick out uh another element so I'm going to get the
body this time so I'm going to
use I need to pick it out first so I use document query
selector to pick out the body let's store this as something const
body now how would I make something show up in my console log so just the word
clicked if I click anywhere on the body so anywhere in
here just use what we learned before it's exactly the same have a think about it I'm going to pause
here okay so I would get the body and I would use ad event listen
to pass through a click event and then invoke a function so I can write the function up there or I can simply write
function and then in curly braces console log clicked so there we go I've
just written in one line but it's exactly the same as what we did
before and now if I click the body you will see I'm
getting a message in our console log that says clicked okay
great I just have one more thing to show you about this before we carry on next
up I want to talk about removing event
listeners okay so the remove event listener method removes an event handler
that has been attached with the ad event listener method don't worry though I'm going to show you what I mean by writing
this in code so before we looked at ad event listener so I'm just going to use that once again
I want to add an event listener to my cycle to essentially toggle it from being blue to another color so I'm going
to go into my document and use Query selector to find the circle so I'm
looking for the class of circle so the class of circle and let's score this as
Circle so we can use it in our Javascript file now let's write a function to do
this toggle so function toggle Circle or toggle color maybe the
American color and I'm simply going to grab my circle and then use a JavaScript
property of class list so I'm not making that up I want to toggle toggle is a method once again I'm not making that up
I want to toggle the class list of circle and I want to
toggle CLE so now let's grab the circle and use
add event listener on click let's
say to toggle color so now if I click on
the circle well the circle class will disappear so let's change that to be
something else so I'm going to toggle it got the circle and I want to say red
circle and simply just copy all of
it red so now if I
toggle red circle there we go I'm adding and
subtracting the red ccle class from the div which already has a class of circle
so that's our default and then we are simply adding red circle taking away red circle adding red circle taking away red
circle from it so that is our function at the moment everything works however I want it to
stop working after 10 toggles so when we click on this nothing
will happen so I can do this like this so we need a count have a
count let count equal zero let console log count to see what's
happening too it's nice to do that and if count is
suddenly larger than
10 I want to get the circle and I want to remove event
listener I'm just going to remove the same thing so now let's try it out let's get
our consor log 1 2 3 4 5 6 7 8 9 10 11
and suddenly no matter how hard we click we can't toggle the color anymore and we
can't add to the count that is because our count suddenly got over 10 we got to
11 that's over 10 so we have written that we want to remove the event listener from the circle that says that
when we click we toggle color we have removed it so that is a very basic example of
how to use remove event listener I hope you've enjoyed it because I'm going to
make you write your own now so I'm going to keep the circle
here this time I want you to use what we've done in the previous lessons and
if our circle gets to here so about I don't
know 100 pixels below itself I want you to remove the event listen n so that we
can't click it anymore and nothing else happens okay so we did do this previously in
these set intervals so there'll be a little bit of a clue there I want you to have a go at doing this yourself don't
worry if you don't get it done that's what I'm here for I'm here to help if you want to have a look at the
stylesheet all I have done is simply got a circle that you are going to be working with that we have picked out to
work with and that is my index HTML file and of course my folder
layout okay I'm going to pause here where you have have a go at doing this I'll see you in a
bit okay so first thing I would do is write a function let's say move
Circle and then well to move the circle let's actually let height equal
zero now for each time I want to move the circle I'm actually going to also add a
height of 50 and then we need to assign that new height to the circle itself so let's
grab the circle I'm going to use style so this is not made up I'm going to use
style and then top and assign it a new
height and get the pixel so in here I just need to make sure that the position
of this is absolute in order for this to work so position absolute and
essentially what we have written here so we're getting the circle then we are manipulating its style and we're
going to be adding a top so it's just the same as me writing top 100
pixels so I've just moved it down a little bit so that's what we're going to be doing but in our
JavaScript okay so move Circle let's attach this to an event listener so let's grab our Target I'm going to use
add event listener to essentially on
click move the circle so maybe this isn't enough let's
do 100 why did I add event
listener okay so now click click click
it's moving down it's good but it'll carry on doing that okay so we'll carry
on clicking it and I'll carry on moving down we need a rule that says
if height suddenly gets over 300
pixels you want to get the circle and remove the event listener that we added
so let's pass through these rules again and save so now I get to
300 we can't click it anymore we are over 300 pixels in height and we can't
move it so there we go okay I hope you found this useful
please do write this down please do make a note of it I do hope you're coding along with me as I really do think
that's the best way to learn by coding and not just watching so I hope you enjoyed this and learned the most you
could I'll see you in the next lesson so next up I want to talk talk to
you about the query selector as we're going to be using a lot in this course let's do
it the document method query selector Returns the first element within the
document that matches the specified selector what I mean by this in code is
this so we're going to be using query selector in order to pick out elements
from my HTML you might have seen this in a few examples already but I really want to talk to you in depth about this so
here for example we have a div with a class of circle well we can actually
pick out this div by the div itself or more specifically by its class what I
mean is this so I would get the document as we need to pick it out from the HTML
document and use Query selector so this is a JavaScript method
method I am not making this up and I would pass through so for
example if I wanted to pick out the div at the moment there's only one div in
here so I don't see a problem with that I've picked out the div so now if I console
log this out you will see a div with a class of
circle that's what we have I've picked it out so now I can work with it in my
Javascript file so that is pretty cool let's go ahead and save it as something I'm going
to save it as a circle okay so that is done however what
if I start having more and more divs in my HTML file well then I wouldn't really
want to choose to pick it out by the div element I would want to pick this out by
the circle class so you would think I would just pass it in through here like this but
that is wrong if I write that nothing will get picked out so if I console
log Circle I get null this is because we are
not searching for a HTML tag or element of circle that doesn't exist we are
searching for the class of circle so just like in CSS we need a DOT to tell
our file that we are looking for a class name of SLE and then you will see that
work so that is essentially how I would use Query selector there is also query
selector all this is for if I want to pick out more than one so if I for
example had not just one Circle but two three
circles let's just get rid of this absolute styling
get of this to refresh our page so now you will see
three circles I can pick out all of these circles with document query selector
just going to get rid of that or so now I essentially have a node list
of three circles or three divs with a class of circle so once again if I just
had query selector it would pick out the first div with a class of circle but if
I want all of them I would need query selector or to get a node list a node
list is not to be confused with an array a node list is something
different okay so we have all our s
here I can also use Query selector to pick out IDs so I'm just going to make
let's get rid of these for now I'm going to pick out so I'm going to make a
ID of Main and let's give this a red circle class let's just get rid of let
get that red circle back so now we know that our yellow
circle is here and we know that our red circle has an ID of main however our
JavaScript doesn't know that I can pick out that Circle by grabbing its
ID like so so you will see here I've grabbed the element with the ID of main
so just like in CSS I would tell our Javascript file this is an ID by using
this hash right here and then I'm storing a circle and if I console log
out Circle well we indeed get the div with the class of red circle and the ID
of main so I like using query selector we
can also use get element by ID in which case we don't need the ID as we already
know it's an ID the method already tells our file that we're looking for an ID so all I need to do is path through main so
that is me using get LM ID once again this is a JavaScript
method and I did not make this up there are in fact a few of these
there's get Elements by class name get element by tag name so there are a few
however those are the most popular three that I tend to see when I work on these
kind of projects okay I hope that was useful let's carry on
okay and Welcome to our first external project in this project I'm going to ask you to make a dropdown using JavaScript
CSS and HTML it is going to be a great project as it's going to use everything
that we have leared so far in order to complete the challenge if you want to have a go at this please do click the
YouTube card right here otherwise let's carry on with the course the choic is
totally up to you good luck
okay so I've already shown you some methods and properties that work on the array JavaScript built-in object however
I want to show you some that work on the math buil-in object too so I'm going to
show you the most popular I'm going to show you the three most popular ones let's do it first up is math
random the math random function essentially returns a floating Point suit a random number in the range of 0
to less than one what I mean by this is
so if I just go ahead and conso log math random making sure to spell it
correctly and invoke it or call it like this I will essentially get any number
from zero to anything less than one so if I keep refreshing it it will never
really get to 1 0.8 0.4 it'll just keep going forever giving me completely
random numbers so that is it essentially in a nutshell but how is this useful to me
you might ask well I actually use this quite a lot especially when I need to get a random element from a array or
random number I do this a lot in Tetris so I'm going to use the tetris example
to show you now so I'm going to make a array of
tetraminos so I'm just going to put in three let's have the L tetraamino usually I would have this as an object
but I'm just putting it as a string for now as that's all you need Z tetraamino
and I tetraamino so we have three
tetraminos now how do you think I would get a random tachino from my aray
completely at random well just going to keep this up here for
now for you I would need to get a integer a full
integer and pass it through into my array in order to get something back
right so that would be the equivalent of me writing tetraminos and then passing through a
zero to get by the AL trino so I'm just going to console log that for you so you can see what is happening
so you'll see I get the L touch fromo pass through a one I get the Z touch fromo if I pass through a two I get the
I touch fromo if pass three I get undefined because there's nothing there let's go with one so how do you
think I can use math random which splits out essentially at the moment any number from0 to less than one to give me a
random number I can pass through into my array but it also has to be the correct length
well just going to get this back for now I can actually use math random to
essentially multiply by any number so if I multiply this by
20 I will get any number That Is Random from 0 to just under 20 so less than
20 if I keep refreshing this that is what you will see it will give me
numbers that are anywhere from zero to just under 20 so under 20
now I'm going to use this to get a random number from 0 to 3 but just under
three so I would do this I could just pass a three like that or I could use my
tetraminos length property so that is essentially a three so now if I keep
refreshing I will get a random number anywhere from zero to less than three it
will never get to three so we're close we're nearly getting there but I'm going to have to
introduce another math related function and that is math
FL math flaw essentially rounds
numbers numbers down to the nearest
for integer okay so now let's get
const for const integer or maybe random
integer I would essentially let's also store this const
random number and I'm just going to store the number we're getting
here so now I would need to use math floor to essentially wrap our random
number so now if I console log random
integer well you guessed it I'm just going to clear a few of
things out so I'm just going to comma that out here I'm actually going to console
log random number for you here so you can see what is happening I'm going to get R of that so
it's clear everything refresh so here you will see we get the
random number of 0.27 and we are rounding it down to the
fullest inure so we've rounded it down the rounding down is important as we
don't really want to get a three okay so for example if we got a okay a 2.2 if
you round this up we will get a three and of course 0 one 2 three does not
exist on our array so we will get undefined we can't round up we need to
round down in this situation and that's why math floor works this is opposed to using math
seal which will run round up
and oops math round which will just round to
any round to nearest integer okay so it
will choose which one it's closer to and we don't want that either we want to round
down okay so we have our random integer that has been rounded down so now now
instead of passing a one well we can just pass that random integer through
here because this has a value now it's a full value and the random tetraamino that we get is the Zed tetraamino this
is because it's the 01 one index in our array so one we got
a random number of 1.21 we rounded it down to one and we got the
Zina I could keep refreshing this and never get an undefined because we will always get either a z 1 or a two so
that's perfect that has now worked I hope you can see how useful
this is there are many many more math uh functions for you to use however I do
think these are the most popular so these and this one feel free to have a look at yourself on the documentation
there's so much documentation out there on JavaScript however I do want to focus on these for now so I'm going to give
you a little exercise first so I'm going to keep this notation just so you can
have
it okay let's pretend we are at a bar and
there is a drinks menu so drinks menu and then let's have a
vodka tonic let's have a white wine a beer and a mocktail for
those who don't drink mocktail so your friend essentially ask
you to get him a drink from the menu you ask him what he wants and he says surprise me anything from the drinks menu pick up random how would you use
JavaScript essentially pick a drinks menu at random from this
list I'm going to leave you to it please do use everything that used before in
order to solve this and get a random drink from the drinks menu don't worry if you want to go back and view what we
did before that's absolutely fine just focus on getting this done and if you don't also don't worry because we will
go through the answer together so have a go at that and I'll see you in a
bit okay so what I would do is I would essentially get the drinks menu itself
and I would open this up because we need to pass something through and then I would use math
random invoke that and multiply it by my drinks menu
length and then wrap all of this in math floor so that is essentially the
solution in one line of code let's console lug that to see what we get
and we would get a vcat tonic we would get a beer we'll get a beer again there's a lot of beer showing up and
mocktail so we are getting everything we've got a white wi that is all the items on our drink menu then we are
getting it random okay I'm just going to break it down for you step by
step so once again we would we need to get a random
number so to get this random number we would use
math random and then we would multiply it by the number of items in our array so I
can either multiply it by 1 2 3 4 or I could use the drinks menu array
length property so now if I console log random
number okay so we're getting that random number we just need to round it down now so
const Random integer and to use this I would use math
floor because remember we want to round down and then I would pass through the random
number okay so let's console log that to see if that has worked
random integer okay yeah it's rounding down we got 3.5 and we rounded it down
to three and then finally we would get our drinks menu and pass through the
random integer so let's console log
that and great once again we are getting random drinks from the menu let's try
using math
seal so it's working it's working however
we get undefined this is because we rounded up they got we got 3.14 but we
rounded up to four there is no fourth item in our array so we get undefined we
would also never get VOD catonic okay so no matter how hard you tried your friend would never get a vodka
tonic okay so that was fun I hope you enjoyed that uh that is it that is all
I'm going to cover for the math inbuilt JavaScript objects I think that's fine
for now I mean this is a crash course so I think we're ready to carry
on in this next part we are going to go back to our website to give it a Final
Touch by creating a responsive Burger menu Nappa this is going to be great as
we will be implementing some JavaScript functionality to our website for the first time so what are we waiting for
let's do do it okay so I'm really excited about this
section because we are going back to the project that we started building in our HTML and CSS but we're going to start
applying some JavaScript we are going to start doing this by making our navbar
responsive what I mean by responsive is that it's going to have a different view
in mobile than it does to tablet and desktop so what we are going to be
making is a simple responsive nav bar that turns into a hamburger bar if it is
a mobile and is the way it looks as it is now when it is tablet and desktop
okay so let's get to it the first thing we
need to do to build our hamburger responsive Navar is go into our index
HTML and find our nav bar that we have built out so it's this this section up
here it's got a logo and our unordered list that is called
Navar so in between them is where I'm actually going to put my hamburger uh button so it is a button so
I need a button tag for this and I'm just going to give it the class
of hamurger I'm also going to give it an ID of
hamburger as well great now in here it's going to be a
lesson back to our font awesome icons so I'm going to use an
icon so an icon tag and I already have found a hamburger uh icon for us to use
so I'm just going to type it in here for us now and hit refresh so there it is it's
currently in a button it doesn't look great so let's sty up so I'm going to do this right at the
very bottom even though we will be using this nav bar so I'm just going to cutor out that's our current styling at the
moment just going to put that here okay so let's grab our hamburger by
its class and I'm just going to get rid of the border so I'm going to give it a
border of zero and a background color cuz I don't
like it being white at the moment I want to make it transparent so immediately that just
looks a lot better let's perhaps move it down a bit so it's in line with the
text margin top 20 pixels it's a bit much maybe let's say
15 pixels okay perfect so our hamburger is there however we already wanted to
appear if it's in Mobile not when it's in tablet or
desktop so we can do that using the media query so as a refresher we use the
media query here I'm going to use the same logic just so everything's consistent so what this means is that
anything that we hold on apply in here will essentially change
any element so for example the hamburger element or the element
with the class of hamburger it will apply this styling to anything above 500 pixels in width okay
so we know we don't want to see the hamburger when it's above 500 pixels so I'm simply going to put
display none refresh so now you will see our
hamburger disappears when we go over 500 pixels
great now we want the opposite for this right so as soon as we see the hamburger
we want the Navar to disappear so I'm going to do this by actually we need to make the nav bar
disappear up here so I'm going to get this nav bar and put that in here and above
this I'm going to make nasar display
now okay so there we go under 500 pixels
above 500 pixels under 500 pixels above 500
pixels great that is because the styling that we have for anything above 500
pixels involves the burger deleting Burger disappearing and the
Navar having styling and the opposite for when we're outside of this so when we're in Mobile form we are designing
mobile first okay so this is like the default and anything above that needs
specific styling yeah so that is mobile fast design is the most popular way of
Designing anything now as we do view most of our sites on
mobile okay so now we have that done let's actually get to implementing some
JavaScript to give our buttons some functionality and by functionality I mean I want there
to be a drop down if I click on the hamburger
icon so let's do it the first thing that we need to do if we remember from our JavaScript lesson is actually create a
Javascript file so just as before I'm going to create a directory called
source which is going to store our index JS file so let's add a file called index
JS if you if you've done it correctly you'll see a JavaScript icon show up this is because we are using the
JavaScript extension we are telling our IDE that we want to be working with
JavaScript I'm actually also going to put my Styles CSS file in here which is
going to break everything for now so we need to actually fix that so
we need to go in here and instead of linking to our Styles CSS I'm going to link to the source Styles CSS
and I'm also going to have to link our index GS file so I'm going to do this at the bottom of my file I need to do it
after any or all the HTML tags I need to put the script tag last so I'm just going to
put the script tag like this and as the source I'm going to give the path to the
index GS file so because we on the root of our project we need go into the
source file and get the index CS4 so that is now done once again if
you do remember from our introduction to javascripts with the very first lessons of our JavaScript section I don't have
to use the script T at the bottom I can also put it in the header okay so that
is an option two however if we do put in the header we need to have an event listener for this file so I haven't done
it for here but I do do it in a few tutorials so please go check out some of my game tutorials where I do that so
just be aware that there's two ways of linking your JavaScript bar okay now the first thing I want to
do is actually grab our hamburger so we can work with it so for this I would use document I'm going to use get element by
ID because our hamburger here does have an ID so I'm going to use
that so I'm just going to pass through the name of the ID and of course we need
to store it as something so let's store it as hamburger
button so there we go we've got a hamburger button that's great the next
thing we also need to grab is the nav uh unordered list itself so I'm going to go
const nav and then document once
again and then let's go back here does it have an ID has a class I'd rather just give it an ID we don't have to but
I think I want to show you um that you can have classes and ID so I'm going to do it and I'm just going to put nav list
because it's an unordered list so let's go back here let's store nav list
document get element by ID and then nav
list okay so we have those two things picked out the next next thing I want to
do well what do you think we need to do apart from save this file the next thing
we need to do is actually add an event listener to the button itself so if you
remember I would get the hamburger button and use add event
listener and we're going to be listing out for a click so once again I did not
make this up this is one of the options that we can pass into an event
listener and once we click it well we want something to happen we want to
toggle button so that is a function that we have not yet
written so once again what I'm saying here is I'm grabbing the hamburger element I'm then using a JavaScript
method of ad event listener to listen out for any clicks for anytime we click
the hamburger element itself so just here and if we do click it well I want
to toggle the button so let's actually write that toggle button function now let open up
our parentheses and there we go so now we need to actually grab the nav list
itself and then use a JavaScript property of class list so I did not make
this up I'm essentially going into my stylesheet okay and I'm going to search
for a class which at the moment doesn't exist I'm going to toggle once again I
did not make this up this is a method that will act on the class that we find I'm going to toggle the show
class so yeah we have not written it that's why we're getting a lot of red here we need to actually write it and I
want to attach it to the nav bar so I'm going to get the nav bar and
show and instead of having display n I'm just going to put display
Flex okay so now if we refresh and we click the button there we
go we are seeing our navbar show up it
hasn't been styled yet so don't worry but let's just make sure that works so nothing on desktop nothing on tablet we
are on mobile and then let's click so we're literally toggling the show class to be
on off on off display Flex display none
display Flex display none okay now let's get to styling this a little bit more so
once again I'm actually going to let's make sure to get rid of
the outline
so hamburger
Focus outline
none okay so that gets rid of that weird outline that we had before that blue
one now let's make sure that these display stacked so in here I'm just
going to put display actually no flex
Direction column there we
go and it's totally up to you how you want to style this so I think I'm going to keep it consistent with
uh most of the things in here so that's already looking better and perhaps let's
have the nav bar to the right instead so let's go back in here I'm going to move
this under here it's totally up to you how you want it but I think that's looking
good I'm really liking how this is looking so far you can of course really
sell this up however you wish so let's perhaps outside of here so in the
default so in the mobile view give our list items some styling so I'm just going to go back on
color white and there you go they have have
white background colors and now
padding 30 pixels so you can really go crazy I'm
going to say that I
want 5 pixels and 30 pixels okay so like
that bear in mind this will style anything um below here as well so just keep that
in mind too or you can simply go into the KN
bar like so and this will mean that only the list
items in the element with navbar will be styled in a
certain way so all of these list items because they're in the unordered list with the class of
navbar I'm going to be style that have a background color white so you will see these are uneffective because they are
not in the Navar even though they are list items so that's a cool uh tip for you
let's also give them maybe a border
radius border radius four
pixels and a margin of Zer
pixels which may margin of five pixels so there you
go styling really is a lot of fun you can really spend loads of hours on this let's just check it's working for here
and that styling is not applied ah it has been
applied that is because we need to once again go in here so nav bar this
item and then remove the
styling or we can just take the styling from up here that was our
default so apply that and background color transparent
zero pixels padding
zero padding padding 10
pixels okay so let's try that out again and yeah everything is
looking great great we have built our
responsive navbar let's carry on next up I want to talk to you about
the JavaScript date object the JavaScript date object
represents a single moment in time in a platform independent format date objects contain a number that essentially
represents milliseconds since the 1st of January 1970 UTC but enough talk I'm
just going to show you how it works first cuz I think it's better to show it
visually so first off I'm actually just going to use it as I would use it
normally so there we go console log I'm just going to talk you through this so
what I am using here is the Constructor so I'm creating a new date object so I
did not make this up this is a Constructor and it is how we we essentially get today's date but not
just today's date I've stored it as today so I can show you we get all of this so currently it
is Wednesday it is indeed 2:00 p.m. here over in London so we are granich
meantime that is the simplest way of showing you date it's pretty cool it will work wherever you are and you can
use it to get today's date now there are plenty of other things that we
can do so for example I can also
get the day cons day I can get today and
use get actually let's get the date first so
date console log date this will give me the date so as in
today today is the sixth of the month I can also get the day so once again I
would use today and get day which will give me the day of the
week so let's go ahead and consel up day and that will give me three because it's
a Wednesday so we do get them in uh integer values because you never know what language someone is speaking
we can also get the full year so full
year and I would just simply get today again and full
year such as that we need to get it get full year so let's console log full
year and we get the year 2021 there's so so many we can use as
well I'm just going to show you one more which is
hours and once again I would use today so what we've stored as new date and get
hours and console log hours to get the hours so today at the
moment it is 2: p.m. so essentially what we're working off is this okay that's
what we're using it's absolutely great I love using this it is very useful for so many so many reasons for example we can
use it to find out how much time we have until a specific time so like a
countdown so that is what I'm going to show you now actually one more I'm going to show you CU it is useful as well is
the iso string so ISO string date and I would also get today and to
ISO string because this is quite a popular one to use for programmers uh to really sort of standardize how we deal
with dates and there you go you get it as sort of like a numeric and alpha numeric value so that is a really useful
one a useful one to know too I use it for when I work with apis for example to
give something a time stamp okay so let's actually do this so say we want to build a countdown we want
a countdown to next Christmas okay so how would we do this
I'm going to actually do a countdown here so we know that
Christmas is should we do it in this format
here so I'm just going to use it in ISO string format actually so this is Christmas let's just
set it to 2021 so the 12 month and for me it's the
24th and let's just keep the time the
same I'm just going to put as a string let's clear that and then also need
to put this in the Constructor okay so now we have our
Christmas now if I have the console log and get
Christmas and just minus today or what we have stored as today in our console
log we get the difference in milliseconds okay so that is the
difference in milliseconds we can even use this create a timer to count down the minutes until next Christmas so
let's do this now const minutes equals so I'm just going to get
Chris should we store this as something okay const Mill
second to Xmas Christmas minus
today and then 2 minutes or we get milliseconds to
Christmas and divide the value by
60,000 this going to be a minus okay so that is exactly how many
minutes we have left I'm just going to get rid of that so it's less confusing console log minutes to
Christmas and now let's make our time so I'm just going to use I'm going to
pick out the purple element which I've already made as date so I'm going to use
I'm do up here don't need all this space so let's just condense it a little bit I'm going
to have cons display equals document query selector not all we just
need one and find the element with a class of date and then use
display inner HTML so the property of inner HTML to display the
minutes one thing I can do I don't have to do is change this to a string so I would use two string which is a
JavaScript method so maybe change this to
date display date display
sure what's happening here it's very strange date display inner
HTML let try text
content ah we're looking for the date class that's my fault okay so let's put
the minutes back in okay great great so we have our
minutes there we let's change we don't need to do this as a string then but we do get a very long uh number so let's
actually break it down I just want it to these minutes so once again let's use what we've done before my round this
time I'm just going to round it to the nearest minute let's go in here just going to
make the color of the font white and font size
pixels text align Center
oops so there we have it that is exactly how many minutes we have until Christmas
great so that is why I like the date if you check on this tomorrow it will
obviously change if we wait a minute as well this will go down that's exactly
why the new date is is so
cool so there you go you've seen it changed okay great uh I think this was
really useful I hope you enjoyed it I really like working with the date so yeah hope you learned a lot and I'll see
you on the next lesson Okay so we've come to the part
about the course where I want to talk to you about timers there are three timers that I want to focus on and I'm pretty
excited they are really useful let's get to it first up we're going to talk about the set
timeout the set timeout method essentially calls a function or evaluates an expression after a
specified number of milliseconds has passed what I mean by this is this we
use the set timeout in this syntax we essentially
pass through a function and then the amount of milliseconds that we need to pass or we want to pass in order to
execute that function so that is the syntax please keep that in mind we're going to use it in order
to display some text in our speech bubble after 3 seconds so what do we
need for this well we need to know what 3 seconds is so con
time and 3 seconds is essentially 3,000
milliseconds so that is the time we need to pass we already know what we're going to put through in
here so let's do that so set time out I did not make this
up okay and I did not make up the Syntax for it so we need to put in a function here and then the time because we'
stored that as a variable we could just as well put through 3,00 but we are
going to put through time instead and well what do we want to happen well we want to in a function so let's write the
function now show Bubble Show
text let's open up our C braces and this is the function that we want to invoke
so I'm just going to put it through there so at the moment it doesn't really do much let's just check this is working
though console log all good save and let's wait 3 seconds
let's clear it again so just change that save one 2
3 refresh one 2 three all good okay so
that seems to be working let's actually get our text Shing up so for this once
again I need to grab so I'm going to grab the bubble
so what I would need to do is document so I'm not making this up
use Query selector to search for the class so dot for class of bubble and
let's save this as speech bubble so that is essentially our speech
bubble now now in the function I essentially want to get the speech
bubble and in the inner HTML I want to put some text so let's
put the text hey
dude and safe and there we go we are indeed
getting the message hey dude I'm just going to start that out perhaps a little bit so it looks a little bit better
let's give it some padding 20 pixels
00 okay so there we go we are getting hey dude show up after one 2 3
seconds let's refresh that one 2 three hey dude brilliant so that is how we
would use set timeout to essentially make something happen after 3
seconds we could also make another I'm just going to do something else so
let's make the texture up after 3 seconds and after
10 seconds let's make the whole thing disappear so I'm just going to use
function delete
text so I'm just going to do it in the same way that we did it before set timeout so we pass through a function so
I'm going to pass through delete text and the time that we want this to disappear after so I could just put
10,000 milliseconds so is that 10,00 10,000 milliseconds so that is 10
seconds so that is another way of writing that just passing through the number itself and in
here just put speech bubble inner HTML and I'm just going to leave it as
blank so now 1 2 3 hey dude 4 5 6 7 8 9 10 and then
that disappears okay so that is pretty cool
another way you might see this written is actually instead of the function so I've taken out the function here and
written it like so I have seen it written like this as well so I'm just
going to comment this out for now I could essentially get this set
time out open up our parentheses so we need to pass through a function here and then
let's pass through 10,000 seconds again 10,000 milliseconds sorry and instead of just passing through the function like
this I could literally write the function so function invoke the
function CP curly braces and then put in
what we want to happen so so that is the same as me writing that I just written
in one line it is totally up to you as to how you want to do it I prefer this I
think it's more readable but of course this is an option too so let's check it
out 1 2 3 hey dude 4 5 6 7 8 9 10 and
there it goes okay so that is all I really want to show you
on set timeout I just want to maybe show you one more uh example with an exercise
that you can do yourself so hopefully you made a note of that if
you haven't paused here I want you to use the set timeout
to get rid of the whole bubble after 5 Seconds have a think about how you would
do this if you don't know or just want to see me show you the answer that's fine I'm going to pause here for those
of you who want to have a go at doing this anyway so I'll see you in a
bit so have a go at doing this yourself build out the HTML and CSS you need for
it to work you can simply just build out your own we are just testing if the
JavaScript that we wrote works okay so the way I would do this is
once again let's get our set time out we know that we want to pass through a
function after 5 seconds so 5,000 milliseconds but what is the function
right well I would get a function and let's call it delete
bubble and then let's open up our curly braces and then this time well I would
still need to go in so I'm still going to go in to our document
and use Query selector to find the div or is it a div
yeah div with a class of bubble so I'm just going [Music]
to get that and let's store it as bubble
bubble okay so delete bubble well I would get the bubble and then I would
actually use Style
display and pass through none okay so that's how we would do it and then let's
actually put this in here click save 1 2 3 4 5 and taada the
bubble has now gone we still have this little speech thing so we could have
actually maybe given this a class and let's just say
speech bubble save that and go in here and put
speech bubble instead and once again one 2 3 4
5 and the whole thing has now gone okay so I hope you now feel comfortable using
set timeout because I want to introduce another timer for you
next next up I want to talk to you about the set interval and how it's different to set time
out the set interval essentially calls a function or evaluate an expression at
specified intervals it will continue calling the function until the interval
is cleared or the window is closed so what this means is essentially unlike set timer which will invoke something
after X x amount of milliseconds this will keep calling the function okay it
will keep calling the function say every 3 seconds if we tell it to keep doing it and doing it and doing it until we tell
it to stop or we close a window down so I'm going to show you this with an
example set interval so let's open up our
parenthesis again similarly it takes a function and then the
milliseconds that we need M seconds that we want to
pass until we can invoke the function but we keep doing it over and over and
over again so I'm going to show you this now
milliseconds so let's keep that there I'm just going to comma that out so you can keep seeing it let's say for example
that I want to get some text in here again but I want it to keep flashing at
us so I wanted to say alert so conext equals
alert and then let's get an oton so I'm just going to use that for
the text now let's say that we wanted to keep going every 2 seconds so cons time
= to 1,000 milliseconds so there we have our two things that we need in order to get this working let's
write a function called show alert open up our Kylie braces and then
let's grab this again so we need to grab the bubble up here I'm going to say const
bubble equals document query
selector we need to find the bubble so we're looking for the class of
bubble now in the bubble and this time I actually want to append child so I'm
appending so in here here's my bubble I'm putting something in here okay so
I'm appending something inside uh before we do this actually
let's just check everything's working so I'm just going to console log
working and then let's get at our set
interval and then we need to pass through the function so show alert and the time so 2,000 milliseconds and save
and you will see here in the console
log 2 2 one 2 so each time after 2 seconds
we're going to another working getting printed okay and this will carry on doing that okay it will keep going and
going and going until we tell to stop so we know that is working now for each two seconds I
actually want to put a div inside here so I'm going to create a
div const text
display and I'm going to use create element another JavaScript method
create element and I'm going to create a div and with that text
display I want to give it the inner HTML of the text so that's a lot so I've
created a div we need document here
document so we need to make sure the document is before the create element so there's a lot of new things working with
here this is an advanced example that I want to show you so create element I did not make up document I did not make up
div I did not make up we want to create a div that we are storing as a text display and then is and then in this div
we want to put the inner HTML of alert and then we want to get the bubble and
use a pend child again I did not make this up this is a JavaScript method to
put in the text display after we have given it the text
so just going to refresh that and there we go two seconds alert alert alert
alert it will essentially keep on going and keep on going until we tell it to
stop we are appending we are essentially putting in so each time I'm putting in a
div here again and again and again and again that is essentially what I have
written okay but in code and this will keep happening over and over again so I
hope you've enjoyed this example let's finish off with a little exercise I'll
make it a lot easier I think it's good to start off with a complicated example and then start off easy so using set
interval I simply want you to print out in the console log your
name so how would you do this just going to clear this so it stops running
well you would get these set intervals so you do not make this up set interval is essentially a function that we can
use and then we pass through a function okay so a function and the time that we
want to invoke it so say we want to print our name in the console log I'm going to call this function print
name let's go a console log and then I'm just going to print Ana
so now I can pass through this function name and then let's invoke it
every 5 milliseconds so that is 5 seconds in
milliseconds let's refresh and see if that worked scale console log
here there we go 1 2 3 4 5 1 2 3 4 5 so
it's going three Now 1 2 3 4 5 and we'll
keep doing this until we clear it so that is how use set interval next up I'm
going to show you how to clear this interval using another JavaScript method okay so in this section we're
going to focus on clear interval we're going to use this to clear a set interval that we have running so let's
do it so here I have the set interval that we were working with before I'm going to
introduce another interval called clear
interval using clear interval will stop the time running in my example up here
so I would essentially stop this from running by assigning this to a variable
or an ID I'm going to call it I'm going to call it a const timer
ID okay so if I console log timer ID
well we would simply get just a simple number okay it's just an ID for
us to work with like so we can now use this ID that
JavaScript has given us to clear the time interval so at the moment you can see we're up to
4 if I essentially then get this timer ID and put it in clear interval
well we stop this whole thing from running okay so that's how that would
work but let's see it in a more real life
example okay so in this example I want to essentially
move my bubble down and I want this to happen every 1 second I want you to move
it down to around here okay and once it gets to here I want it to stop so I want
you to have a go at doing this yourself one thing that I will help you
with however as I do think it's important as in this exercise you're going to be manipulating the style using
JavaScript is that I'm actually going to give this speech bubble div so this whole
thing here that holds these two together a position AB absolute this is a tip we
need the position of the speech bow to be absolute in order to give it uh a top
left right or bottom pixel in the CSS so for example
if I was to do this 50 pixels then it would move up 50 pixels but without the
position absolute nothing will happen we need position absolute not
relative for this occasion we want absolute for this to work so
now can move it around wherever I want okay but that is its
default okay so we're going to be using this syntax we're going to be using set
interval to move the whole speech bubble down to around here we want this to happen every 1 second and once it gets
here I want to stop so that is your exercise please please feel free to have a pause here and think about it if you
don't really want to pause and you just want to see the solution that is what I'm going to do in a minute so I'm going
to let you have a go to anyway and I'll see you in a
bit okay so the way I would do this is like this I would of course get the set
interval and we need need to pass through a function and the milliseconds so we already know we want this to happen every 1 second so I've gone ahead
and put 1,000 milliseconds and let's write a function called move
bubble okay so we know that's going to be the function I'm just going to put it in here now in our function what do we
want to happen well as long as the height let's
say okay so let's get height here let height I'm start off with zero
and then I'm going to actually pick out this so I can use it so document query
selector once again I'm not making this up these as a JavaScript method that will allow us to look in here and pick
out the div with the class of speech bubble so we can use it in our JavaScript so class do for class and
let's store this as something so so we can use it in here I'm going to call it a speech
bubble so now if I got the speech bubble and use style so by using style
I'm essentially saying I want to get the style of the speech bubble I want to get
this I want to give it a top and let's say 100 pixels so I need
to this needs to be on a string actually
so they you go see I can move it around now from my JavaScript so I'm also going to use the
height to do this so instead of 100 here I'm just going to put height plus 100
pixels so at the moment it's zero it's up there cool let's maybe put it back where it
was like 100 now I want to increase this height
every 1 second so I would do this by essentially getting that height and
using the assignment operator to add I don't know 50 pixels to it each time and
then each time that happens I want to assign it to the speech bubble so I'm assigning the new height to it oh and
it's already going see they go
wo however it's not stopping so let's fix that if height dly equals say I
don't know 300 then we want to clear the interval and we clear the interval by
typing through or passing through an ID so we need to put this on an ID let
timer ID equal so that we can stop this set interval so I would then get this
and pass that through so
now it would stop there okay I'm just going to console log it to see what was
happening so console log
height 150 200 250 300 and
because height deeply equals 300 we clear the time ID and this has all
stopped I could all make make also make this you know when height is bigger than 300 if you're not sure if it's going to
be a specific amount that will essentially work too so when the height is bigger
than 300 that will
stop okay obviously it's stopped in a different location because we managed to get to
350 you can do bigger than or equal than and that will be the
same response it will stop in the same place great so that is a more
complicated and more real world example of how do you set interval it is one that using my games I use it in Doodle
Jump and Flappy Bird so if you want to check those out please do now would be
the perfect time to do so okay that's it for timing events I will see you in the
next lesson we have got to that stage in the course where I'm going to talk to you
about classes in JavaScript this part is a bit more advanced so I'm really
excited that you got to this part there's a lot of learning to do so let's get get to
it in JavaScript and in many other programming languages classes are the template for creating object I actually
like to think of classes as special functions okay so I know that doesn't mean a lot to you now but just as you
can Define function expressions and function declarations the class syntax actually has two components class
expressions and class declarations as a beginner this is a lot
so I'm going to break break it down for you now so one way to define a class is
using the class declaration to declare a class you
simply need to put the class keyword with the name of the class after it so
I'm going to put for example
rectangle okay and then we need to get a Constructor because this is how we're going to construct our rectangle we're
going to have a height and a width okay so this is the syntax we're
going to use we're going to introduce the this word this height equals
height and this width equals
width so you don't know yet but we've essentially made a sort of template
whatever we pass through into the class so for example if I want to make a a new
rectangle as rectangles come in many widths and many heights I would simply
use new rectangle and pass through a height so let's put 300 and a width of
100 so let's have a look at this we are making a new rectangle and essentially thanks to this
I know that this is the height and this is the width of the rectangle because we're getting this 300 that's passing
through it's going into our Constructor and it's going here and we assigning it to this height so this
whole classes height and the same for width so we're getting this value going
width this is now assigned to the rectangle width the rectangles width okay so
console let's STW this as something const new
rectangle so if I conso log new
rectangle I get Tada so I get a new rectangle based on what we wrote this
based on this template I have a new rectangle so now if I go rectangle
height I get 300 and if I go rectangle width I get 100 so it's a
template in fact I think the easiest way for us to really get to grips with this is to just do it over and over again so
one example of where I use this is Pac-Man I essentially make a
class and I call it a ghost class because I use it in order to make my
four ghosts so here we have our ghost
and then I use a Constructor and in it I pass to a name a speed of the ghost because each
of my ghosts travel at different speeds in my game and then a color of the ghost
as well and then a starting point of where I want each ghost to start at the
very beginning of my game and for this so I know I have a name so this name
equals name because whatever I pass into the Constructor and then need to assign
to this ghost's name okay this speed equals speed
this color equals color and this starting
point equals starting point okay so if I just conso
log the class of ghost nothing is going to happen I just get essentially what we
have written so very boring now say I want
Blinky con Blinky or actually maybe say
const no okay fine let's go Blinky and then I create a new ghost so
I'm using my class I'm using the Constructor so I need to pass through these things blink is going to have a
name of Blinky and then a color of
blue I think he's blue can't really
remember blue he's also oh wait we missed speed so it is important to keep these in the
right order otherwise different things will be assigned different things and it will be wrong he moves at a speed of
300 milliseconds and then it's starting point on a random board it's going to be
position four in onay okay so now con Blinky Inky once
again I would have to get a new ghost and pass through Inky so we
use the name we can also call this a class name as that's what I used it for in my game so then class name class name
so that we can use it to essentially assign class names in the
game whever ink he was that would be the color of the square where's in and then
let's give him a speed of 250 50 milliseconds he travels at 250
milliseconds uh which is faster than Blinky and then gave him a
color of actually this one's blue isn't it and then he'll start position
10 and the same for the other two so Blinky inky
pinky and cide so Pinky
applied let's just make these up well we know that it's
pink we know that is orange so this one is
red let's just say 20 and position
15 Okay so we've stored our ghosts we've created all these ghosts it's great we use a template to do this so now if I
console log if I want to find out what is blinky's
speed I get 300 because that is indeed Blinky speed if I want to find out
Clyde's starting point I get 15 and that is indeed correct so that is
how I used classes in my packman game it was super useful if you do do want to
take a moment to try our project with all you learned so far now is the perfect time after learning classes you
are all set to go and try learn Pac-Man so I really suggest you do Pac-Man at
this moment in time I hope you enjoy it or if you'd rather just carry on learning please carry on watching this
tutorial see you in the next lesson well done everyone you have just
completed your lesson on classes as promised I provided you with an external
project and that is my Pac-Man game in this game of Pac-man you will learn how
to use classes by building out ghosts and using each ghosts properties in
order to move them at different speeds start them off at different positions asking class names and much more if you
would like to try this project please click the YouTube card right here
otherwise let's carry on the choice is totally up to you you can save this project and comb back to it if you wish
as well okay so in this next section we're going to focus on keys or keyboard
events what I mean by this is we're going to link up the keys on our keyboard in order to move things in our
browser so let's do it so I think the best way to show you
this section is just by doing so let's get straight to it here we have our body in our CSS file I also just have a
simple index HTML file with with nothing much in it apart from our body and then
our index GS file let's just make sure to save all of these so the first thing I'm going to do is actually just make a
circle in here because it's the circle that we're going to move when we press a key on our keyboard so I'm just going to
give it a width of 100 pixels height of 100
pixels order radius 50 pixels and background color
Let's Go Blue Violet now let's actually put it in so
I'm going to just put it in here above the script tag as a div with the class of circle so
class Circle and there we go now the first thing I want to do is
actually pick out the element so that we can communicate with it so let's go
ahead and do that now const cirle equals document query hope you are used
to using these by now query selector I'm going to pick out the class of
circle now I am going to write a function that essentially if I press the
arrow to the left I'm going to move my circle a little bit to the left let's say 50 pixels to the left by grabbing it
and manipulating its style from the Javascript file if I press the arrow right it's going to go right if I press
the arrow up it's it's going to go up and if I press the arrow down well you guessed it it's going to go down so I'm
going to write a function for this I'm going to call the function control now through it I need to pass an
e for event okay so I can either pass through the word event or E that is totally up to us and then if event
key deeply equals and then let's say
Arrow left just going to console log this out
for now press left to see if it works and save now of course we need to attach
this to an event listener because we need to actually listen out to things happening so for this I'm going to use
document add eventness I'm going to listen up to the whole document this time so I'm not attaching it to the
circle I'm not attaching to the body I'm listening out to the whole document to listen out for any time there is a key
press up so once again I am not making this up key up is uh something that we
need to pass through into the event listener I could also have key down that will just mean that we're going to
listen out for a key down instead of when we lift our key up off a key on our
keyboard and I'm going to pause through control so I'm literally passing through
this function here so we're going to listen out to any time we've pressed the key
down so now if I press the arrow
left you will see press left this is the Syntax for doing it I
would need to pass through an event so I've written a function I've passed through an event
I can even put e for short that is totally up to us and if the key that I
pressed deeply equals Arrow left well we know that we have pressed the left arrow
on our keyboard okay so that is essentially how you
would listen out for Keys being pressed on your entire web page Okay so we've got our
Arrow left Let's do let's listen out
for an arrow
right console log press
right else if the key deeply
equals Arrow up console log
pressed up else
if arrow down oops
e key deeply equals arrow
down console log Arrow pressed
down okay so let's try it out let's make that deeply
equals hit refresh and just try pressing the arrows to see if you
get each one so up down left and right
perfect now I do want to mention one thing and that is uh the E key code so
this is one way of writing it I could also be very specific and have different different key so I can have the a key so
let's refresh that and if I press the a key this time well then I would get the
Press left so I can do anything I want really um just make sure to get
the spelling right on these before this before the E key there was something
called e key code in which you would have to actually get the key code for
the keys on your keyboard this would involve researching
what key has which code so for example I would have to research that the left
arrow on my keyboard has the key of the integer value
37 and that the key for right would be 39 so that's the key
code and then the up Arrow well that would have the key code
of 38 key code and then the arrow down would
have the 40 integer key code so once
again if I was to try this out on my
keyboard let got our console log up
you will see everything works exactly there same
however this approach is uh nearing
depreciation so we are moving on with this you might see it in a lot of
exercises I know I've used in the past for some of my projects so just be aware
that this um is now being replaced by by E key and then the string of Arrow left
okay so it's just something for you to know I'm just going to switch these back to the way they were so e key deeply
equals Arrow right an e key not key code deeply
equals Arrow up the last one e key deeply
equals arrow down so's just check that again to see if that works conso press right press up
press left press down perfect one thing you can also do is
make this a switch case so I'm going to talk a little bit about switch cases
now so here we've got the whole function written as an if statement however I'm just going to
comment that out for now because we're going to talk about the
switch the switch statement evaluates an expression matching the expression's value to a case clause and execute
statements associated with that case what I mean by this is this so we've
just written our uh Control Function with an if statement however I can also
use a switch statement which might be a little bit neater for this example and we can definitely use it so a switch
case would look like this I would use the word switch to let our JavaScript know that we are going to be writing a
switch case I will then pass through the common denominator of all these if
statements so that is the E key because the E key equals something
each time we are ready to do a switch case for this so if the E key deeply
equals let's write a case of Arrow left
but then we want to
console pressed left and break out of this okay we don't want anything else to
happen now let's do the same for case Arrow right so this is just the
same I'm literally rewriting all of this with a switch case it's the same we are
getting our e key and we are checking if it equals Arrow left and if it doesn't we are moving on to the next case so
Arrow right and then we want a console
log press right and again then break out of
this next up we have the arrow up
[Music] up and if it is an arrow up or if it
deeply equals the arrow up you want to have pressed up and break out of this
switch case and finally
case arrow down we want to console
log arrow press down break out of the switch case and finally we need a
default so as you will see it's expecting a default
case so let's go ahead and do that as a
default I'm just going to say console
log key not recognized okay so let's try that now let's get our
console log up refresh let's press the left key right key up key down key let's
press a random key and key not recognized so great we have now written
our if statement with a switch case which I think looks a lot
neater okay so I'm just going to get rid of this for now if you want to make a note of that please do
otherwise let's carry on so we have our console log saying the
right thing that's great however we're still not moving the circle anywhere so let's go ahead and do that now well I
would grab the circle and first off let's actually give our Circle a position of
absolute okay this is so we can know where it is on our screen at all times
so that is its default position I'm also going to just common this out
for now so we know what the actual default position is of our Circle and it's right there so now if I gave it a
left 50 pixels I would move the circle right by essentially giving it some left
spacing right here I can also do top 50
pixels and the same will happen so let's get rid of that for now
and let's get to doing that in our JavaScript so I would grab the circle
and once again I'm going to need like a y and an X AIS so I'm going to say let X
AIS equal let's just do c case s x AIS
equal zero and if circle is pressed
left so I'm pressing the left button Buton I need to give it some right
padding but because we're here maybe let's start off with the circle right so I'd grab the circle use
style and then to go right so I'm pressing the right button I will need to
add left spacing to
it that would be the X AIS plus pixels
because I need to pass through the x-axis before doing that I want to get the x-axis use the assignment operator
to add 50 to it so let's check that out let's click
our right button and there we go we are now
adding 50 to the x axis each time we press the right button so let's console
log what that looks like console log xais
refresh that this going be quite temperamental 50 100 150 200 and so on
and so on and so on so that is looking good now let's do the
left Arrow left so once again I would get the axis and this time I'm going to use the minus equals operator to take
away 50 pixels and once again assign whatever x- axxis is to to the left of our
Circle okay so
refresh left click right click right click right
click left click left so we're just manipulating the x-axis by adding 50 or
taking 50 away from it and then assigning it to the left of our Circle
okay that's all we are doing let's do the same for Arrow up and
arrow down now so for this we need a y AIS let y AIS equal
zero and then y AIS if we're going up where we need to manipulate the
top so let's start with arrow
down y AIS this plus = 50 and I'm going
to get the circle and use style to add a
top and xaxis plus pixels I'm adding to the top of mine so if I press down I
want to add 50 to the top of my circle and here let's just check that
out to see if that's worked down down down and now here I would - 50 to keep
taking away from the Y AIS and get the circle and you style top again to assign
the new y AIS plus the string
pixel so now we should be able to move anywhere oops y AIS Circle St top y AIS
Ah that's strange let's just copy that I don't know what's happened there fresh go
left down go up and there we go okay so we can now move anywhere
using our arrows and if we press another key well we get key not recognized okay
brilliant I hope that was useful for you let me try to get that whole function in
for you and we go if you want to make note of that that is how I would move
around a element on a screen don't forget to add the event listener and of
course store the values for X and Y
okay if you want to make a another of that too once again the position absolute is what is enabling us to give
a position to the circle each time now that I think we have that down time for
a little pop challenge I'm going to ask you to so I'm going to keep this here
hopefully you still have everything that we learned because let's go back into here I'm
going to change this to be the color yellow and let's change this to the
blue I don't like that color let's chose it another
color here we go light SE green so in this challenge I want you to
make our little friend here so let's give it some eyes I'm going to give it an ie
container display flex and then an i which is just going
to be basically a black circle so let's do that now 20
pixels height 20 pixels P radius
pixels and then it's go to here so here's a circle I'm going to
make another div which is going to have the class
of I [Music]
container and in it a
div with one IE
and another ey background
color black play Flex Flex Direction
I contain no okay and then let's
actually give these some
margin Marin left
Marin top okay so we have a little face
however it doesn't have a mouth using what we learned here so I'm just going
to get rid of this all of it how would you make our little guy
here smile if we pressed the arrow up and be sad if we press the arrow down
so this is a little challenge for you once again if you need to take down
the style that is it I'm just going to I've just commod outt for now but that is the whole thing
here pause here to take that down and our index HTML file just contains the
following content and don't forget to get your folder structure right with the
source folder containing the index GS and stylesheet
okay so yes using what we've just leared so everything about switch cases and keys I want you to make our little guy
here smile if we press the arrow up and be sad if we press the arrow down I'm
going to give you a while to do this so please have a go yourself feel free to rewind and look at the previous lesson
or do some research on the internet that is totally up to you have a go yourself don't worry if you don't get it because
I'm going to go through the answer with you together in a bit see you
soon okay so the first thing that I would do is actually style the face
itself so let's go ahead and make a
mouth this I would get a width of what's our width of our
Circle 100 pixels so let's go 70
pixels height 35
pixels background color I'm actually going to go yellow
I'll show you why because we're going to have a border so
border top left radius I'm going to have as
80 pixels and I'll show you why it all makes sense in a bit border just copy
this border top right
radius 80 pixels and the Border itself it's going to be 10 pixels
solid and black in color and so if I save that now let's
actually give a mouth here so I I and under the ey container I'm just going to put my mouth so
div with the class of
mouth okay so there we go it's it's very big I'm just going to get rid of the Border bottom though border bottom
equals Zer pixels it is a very large mouth let's
let's let's make it smaller okay so I think maybe we need 50 height
25 I make this 60 make that
60 okay so that's looking a lot better this is of course a sad
mouth so let's go back here and put sad
mouth and let's also give it a margin left of 15 pixels
okay I mean this is looking quite good it's quite a big mouth still maybe we
can do something about that should we move it up Margin topus 5 pixels okay so that's good
enough for me sad mouth we made a sad mouth now let's make a happy
mouth so I'm literally just going to copy this happy mouth keep that the same
but this time we want the bottom left and the bottom right and Border top
we want to disappear so that should be the same but reversed let's check that is the case at
the mouth perfect sad mouth happy mouth so let's SK with sad
first now let's get to writing a function just
like we did before that will control what we press so function control and I'm going to pass through an event just
like we did before I'm I'm also going to use the switch case so I'm going to switch out
the E key and open up our curly braces and for
case well this time we're just going to have Arrow
up and a console log press up to make sure it's working
and break out of this
case arrow down just going to have oops not
C console log
press down and once again break out of this and have a
default console log key not
recognized great so now let's hook it up to our event listener so we're going to grab the whole document use add event
listener to listen out for a key down on
and then if we do press a key down on our keyboard we want to invoke the Control Function so there we go should we check
it out press up let's refresh it press up up let down make sure you actually
click on here otherwise it mighton not work up down up down everything seems to be working fine so let's get to writing
some code so we would need to grab the mouth element so
document let query selector and let's grab I'm actually
going to give this an ID so ID mouth
so document well we could use Query selector we just need to tell this to look for an ID of
mouth const mouth equals okay so now we would grab the
mouth and I would use class list add so I'm going to add the style of happy
mouth so once again I did not make this up class list and add I did not make up
I'm going to add the happy month class I don't need that because you already know we already to the JavaScript it's a
class we want to add and I want to first off remove any other class L there so
class list remove sad mouth so I'm going to remove
the sad mouth going add the happy mouth refresh click on our browser and press
up and there we go we've done it and let's do the same for sad so once again
I'm grabbing the mouth I'm using class list to remove anything so remove the
happy mouth because we don't want the Happy mouth there and once again I'm use class list
add to add the sad enough let's do it fresh happy sad happy
sad happy sad brilliant okay so thanks so much for doing this challenge with me
hopefully you've got something similar this is of course not the only solution there's so many ways to solve it this is
just one way that I've chosen if you chose to use key code or if you chose to use an if statement or perhaps you chose
to do it differently than adding and removing a class list that is absolutely fine too please do share it with me on
Twitter I'd love to see your Solutions and let's carry on
okay next up I'm going to talk to you about sort the sort method sorts the elements
of an array in place and returns a sorted array so that's what we're going
to be using it for sort literally sorts arrays the default s order is going to be ascending so let's check it out it is
ascending based on the UFT 16 code unit values what I mean by this is that it's
going to sort it alphabetically so I'm just going to create a const for
us let's have con I don't know
planets and then I'm just going to put a few in Mars Jupiter let going capital letters
because you know they are planets they are important Mars Jupiter
Uranus Earth so this is going to be super easy I would literally get the planets and
use sort sort on them like so so now if I
console log you will see my arrays come back to
me in alphabetical order so that is pretty
cool we can also use sort on numbers so it works on strings and it also works on
numbers let's do it with some ages so let's get some ages up I'm going
to go constant ages equal and then let's have some random ages so 32 45 21 13 78
99 and there we have it I have now sorted my array of numbers so that's it
for sort let's carry on okay now that we have done the sort
JavaScript method I think it's the perfect time to talk a little bit about algorithms if you're interested to learn
a little bit more about algorithms and computer science I have the perfect YouTube playlist for you please go ahead
and click on the card right here to view some of these videos otherwise let's carry
on in this next section we're going to look at the includes JavaScript method
the include JavaScript method determines whether an array includes a certain value among its entries returning true
or false as appropriate so again I'm just going to use an array for this so
I'm going to make an array of
books and in it I'm going to have a book called
Al a book called five of Pi
and a book called Power of Now so we have three
books in our array I can use the include JavaScript method to find out if
something is included in an array so I would simply do it like this
I would get the array itself and if so this I'm not making this up this is a
JavaScript method includes is a JavaScript method and if that array includes the book I'm
looking for so let's put through Alf well this will have a return of a true
or a false so if I console
log books includes Al I will get a true if I search for perhaps the
book sapiens I will get a false so what I
would really do is store this as a variable I'm going to have the const
is in books and then save this statement like
so so now I would simply use this and I can use that variable
wherever I want in my code so at the moment ISM books is false however if it
was elf is in books would be true so that is
how we would use includes I just want to take a little bit of time to talk to you about contain because contains is
totally different to includes in the way that we can't use in arrays we use contains so even though it looks like
includes it is used for completely different purposes I'm going to show you how now so contains if I want to find
out out if a node exists on a specific node I would use contain what I mean is
if I want to find out if the body has a child that has an element with a class
of circle I can find that out so as a beginner it could be quite easy
to get the two confused but I'm going to show you how they are different now so I'm going to actually grab the body so I
need to grab the body I'm going to go document query
selector and select the body so I'm literally selecting the element of body
and storing it as body and called Circle once again I'm going into my document
and I'm going to find the element with the class so dot for class of
circle now I can use includes to find out to get the
body find out if the body contains
Circle and I would get a true this is because we know that is true okay so
that is one way that I would use contains the body does indeed contain a
element with a class of circle if I was to get rid of this class let's replace
it with I don't know Square
we would get a false and let's put that
back and there you go so that is how you would use includes the first
one and this is how you would use contains I hope that makes sense I just
thought it was very useful for us to clear this up now just in case you see both and try using them interchangeably
that will that will not work
in this next section I'm going to show you how to create elements from our JavaScript directly let's do
it the create element method when attached to a document creates the HTML
element specified by tag name what I mean by this is I can actually create
elements in our JavaScript just like we would if we created a
div like this by writing it out in our
HTML so I'm going to do this now I am literally going to recreate
writing a div okay so to see it in our browser I'm
actually going to have to give a div some styling so I'm just going to go simple width 100 pixels height 100
pixels background color
blue okay so to do this I would actually have to
grab our document and use the JavaScript method of create elements so I'm not making this up I'm going to create a
div and put it in a string now we've created a div however
we can't see it yet I'm going to go ahead and store this as a square so our
JavaScript now thinks that the div we created is a
square and I'm going to grab the body so
con body equals document query selector and I'm going to look for the
body tag in our HML file if I console log out
square well you will see exactly that a div that we created so we' created a div
we stored it as a square we now want to put it into our body so to do this I
would use body append child so once again this is not something I'm making up aend child is a JavaScript method and
I would put through the square and there we go you will now see our Square in the
browser that is pretty cool okay one more thing that I'm going
to do is actually create an image this time I'm going to do this so we can move on to the next section swiftly so once
again you will see there there is nothing here I've literally added a div that I've styled to be a blue square
into our body okay and I've done this all with JavaScript the next thing I want to do
so I'm actually going to actually let's keep that for now let's create something
else so this time I want to create an image tag so once again I would get the
document and use create element to create an image tag
let's store this as con image a console
log image well you will indeed get an image tag a closing an opening and a
closing image
tag now let's go ahead and put that in our body so once again I would get the
body which you've already got and use aend
child to put the image in there now if I console log our body CU
obviously the image doesn't have any styling yet the body itself will have an image
tag and a div tag great so that is how
we use create element I've Ted this up perfectly because the next thing I want to show you is something called set
attribute and get attribute so I'm just going to keep this here I'm going to keep I'm going to take
rid of that console log I'm going to keep all these
together and those two together so we've appended a square and we've appended an image and this is so we can see what's
going on in our body the next thing I want to show you is something called set
attribute just make sure we spelling it correctly so the set attribute method I
sets a value of an attribute to a specified element if that attribute already exists the value is updated okay
so that is what we're going to do we're going to set a attribute to our image
I'm going to show you how to do that now so the first thing I want to do is
actually get an image so I'm going to create a folder called images I'm going to put that into my source folder and
into my images I'm just going to drag and drop an image I have so I'm going to
find search for the head shot of myself and I'm just going to drag it into the
images folder so
now if I grab the image itself and you set
attribute I need to pass through two things I need to pass through the key
and the value so I would do this by writing the source and the path so I'm
going to go into the images folder and grab the headshot
gy okay now I would actually have to put the source directory before this this is
because our Javascript file gets sent to our index HTML file which is in the root
of our project so we do need to put that Source folder in there too that is how
we would get the images showing up in browser so that is how I use set
attribute I can set any sort of attribute I want if I console log actually we can use the body too so if I
click into the body you will see I have indeed created
a div up here I've also created an image tag and I've also given it the I've set
these attributes I've set this source and this Source images head shot through
JavaScript so that is pretty cool that is how you can use set attribute and essentially how you can make out the
entirety of your htl elements using
JavaScript you can also use something called get
attribute okay so if I want to get const uh image I can can essentially get the
image and use get attribute and search for the
source ah we've already declared that so const image
path and now if I console log image
path I will literally get the value here
so get attribute we search for an attribute so it's going to search for this and get that for us okay so if I
for example did this image set attribute and this time I did data ID and I set an
ID of four and I used image get attribute so const get
ID or just image ID not get image ID get the image use get
attribute and this time I'm going to get the data ID of the
image and then console log image
ID I will get the number four okay so hopefully that was useful I
think that was the perfect time to start with a project let's do it well done
everyone for making it to this point in the boot camp in this section we are going to build out a full project I will
be showing you how to build a simple memory game in which you have to win by matching all the cards on the board
building this game will help us practice everything we have learned so far in regards to event listeners operators if
statements storing values and variables as well as a few new things too I will
also be showing you how to use a code editor program such as vs code or atom
in order to store your projects on your personal device just as you would as a professional
developer this section will take roughly 1 hour I hope you do enjoy it please do
share your finished projects with me when you have finished them on Twitter on YouTube on Instagram I would
absolutely love to see okay so it's come to that part of our course in which
we're going to take everything that we have learned so far in order to create our very first project that includes
JavaScript HTML and CSS so what are we waiting for let's get going in this
section I'm not going to use the ID I've been using so far this is because I want to show you how to use uh code editors
such as atom or vs code in order to actually store projects as a
professional software developer would on GitHub so to do this I need to talk to
you about those code editors first so just like the code editor that we've
been using that's been hosted on the internet we can have our own code editor downloaded onto our laptop this makes
our lives a lot easier when dealing with projects and saving them onto our computer I'm going to show you which
code it is I prefer to use so atom IO is one of them you can choose to use atom
IO simply by downloading it here or you can use VSS code as I am using a Mac
I would recommend downloading VSS code for Max so go ahead please choose one
it's absolutely up to you which one you choose I'm going to choose to download vs code so simply click the download button
and that download should start in your browser once it has finished I've
actually already gone ahead and downloaded this for myself but you would simply open up the extension
and follow the download process until you have it on your computer so I'm going to ahead and double click that and
the VSS code editor should start up for me just going to get rid of that here
and get rid of that here so now I have vs code on my
computer this is not hosted online this is on my personal laptop and it's where
I'm going to be making my project for this section so the first thing I'm to do is actually
just make this a little bit bigger for us so we can see what is happening now I'm going to click this
button right here so I'm going to open a folder and I've already made a folder
where I saw most of my projects this is personal projects and in here I'm just
going to create a new folder and I'm going to
call it memory
game just like that and click save so now we have a folder called memory game
where we're going to sort all our files let's click
open and there we go this is step
one so we're going to be storing all our files in here just like we did before we need to set up this project so we can
start building in it so I would start off by just creating an index HTML
file and then a source directory and in it my Styles
CSS and my app or index JS we can call it whatever we want the extension should
be JS for JavaScript CSS for cascading stylesheets and the index HTML so that
is the folder structure that we have been working with and one that I'm going to use for this
lesson once again we will need to get the Boiler code for the index HTML setup
as the first step so to do this I'm just going to get the doc
type and then I'm just going to use the HTML tag I'm going to set the
language as English and this is just some boilerplate code
for our HTML file then include a
head use a meta tag charet
UTF 8 so just like we did when we set up in the very first lesson is the same
boiler plate code the title
let's put memory
game and then that's our head done for now and then we need a
body so that is all we need for the boiler plate code the next thing I want
to do is actually link my sty sheet so I'm going to
link making a closing tag and have sty
sheet HF Styles CSS but it's actually in the
source folder so let's go ahead and get
that and then finally I'm going to link my script tag as well so I'm just going
to do that here script tag
and the source is going to be I'm go into the source folder and get
the index JS file so I can put that at the bottom of my body or I'm going to
use the Dom content loader so I'm actually going to choose it that way I'm going to put it in my header so save all
these files and then in my index JS file let's actually make this a bit smaller
too I'm use the event listener to check if all of our HTML has loaded
so I'm going to go and use document add event
listener Dom content loaded make sure to spell it
correctly otherwise you will get all sorts of errors and then just an arrow function
because this is a function we're passing through okay the event we are listening out for and the function that we want to
invoke if we hear it so that is how how event listeners work if you
remember okay so that is looking good just going to make it a little bit
bigger for us just in case anyone can't really
see okay so now it's time to start writing our JavaScript but first off I'm
just going to make a grid here
so the only thing we really want in here so let's get rid of that cuz we can't have it in two
places I'm just going to put a div with the
class of grid and that is where all the Magic's going to happen okay I'm also
going to have a score so let's put an H3 tag
that'll say the score and I'm going to use something called a span tag I don't think we've used it before but the span
tag will essentially allow me to cut into this H3 tag and in it I'm going to
put these score so ID score or result we just put
result okay so there we go we have a div with a class of grid
and a score now if I open this on the browser we would only see the red score in here
so perhaps let's actually style up the grid so I'm going to grab the class of grid so once again dot for
class and I'm just going to give the grid a width of 400 pixels and a height
of 300 pixels let's also give it a border maybe border solid black one pixel so we can
see it and that is it so now to view this in my
browser I would simply go to the index HTML file and copy the path not the
relative path with the whole path and I would simply paste that into my URL and
there we go just like before and then we can inspect the Page by right clicking
here so we can see our console log
brilliant this is looking good let's get to writing some JavaScript so let's go
back to our visual code editor and go into the index JS
file now the first thing I want to do is actually create an array of all the
cards cards in our memory game so I'm just going to get some card
options what kind of card should we have let's make a card array first so cards
we'll just call it cards we don't need to call it cards array and open up our
array now I want to have some objects so here's my first card object and each
object is going to have a name so this card is going to be friiz
and it's going to have an image of some fries so for this I've already decided I
want images in here because all the cards are going to have images all 12
cards so feel free to take mine if you wish just go to my GitHub repository and
find the memory game go into the images you can just
download all of these so I'm just going to so if you click it here you can
download the first one so this is going to be my blank image save's image blank
let's save it in downloads
save let's get the cheeseburger download save image as cheeseburger and
downloads as a PNG image great that's good
fries save image as fries PNG and downloads fine need a few more to
go save image as hot dog so that's four so far we have 5 6
78 ice [Music]
cream save
Shake save image
Pizza image so I've already gone ahead and made the image the exact sizing that
we want so we don't need to do any CSS trickery and then just a plain old white image so that is going to be like a
blank card white image Okay so we've got all the images that we need download for
our game now back in vs code just like before in my Source folder I'm going to
make an
images folder and in here I want to put all the images okay so I'm literally
going to go to my download file and get all these
images and just put them in to here like so so that was pretty easy
let's go ahead and put the first image in so I would go at the moment we are at
index GS file so it is in the same folder as the images so I would go into
the images and grab the fries PNG like so so
we've created our first card let's go ahead and do the same for the others so name let's call this one
cheese image
images so the cheeseburger so the object with the name cheeseburger is going to have the cheeseburger
PNG what's next we're going to do the ice
cream and that image is of course going to be we're going to go into our images folder and grab the ice cream PNG
name Pizza make sure that is a string we're just keeping everything
extremely consistent this is an array of objects that we are
building so images pizza.
PNG name milk
milkshake image into the images folder and just grab the
milkshake and then just a few more we've got a milkshake we have a hot dog as well so
name hot dog image into the images
folder we grab the hot dog okay so we have our six cards now
because I want to essentially mix and match the cards so we need to have two
ches beggers two ice creams two pizzas we need to essentially get everything and put it in Array again so before we
do this I'm just want to explain one thing even though we are in the Javascript file at the moment so the way
to get the images would be in fact to go to the images and get the
following uh URLs I would actually need to act as if I in the index HTML file
okay this is for when we build stuff on the internet just make sure so I'm just going to add that using
command D I'm going to command D and select all the images I'm just going to put source and images at the beginning
okay so that is important you always have to act as if you are in the index HTML
file so there we go now once you have done that I want you to essentially grab
all six of these objects and put them in again great okay
so now if we console log
cards and go to our and go to our browser let's get rid
of these now you will see 12 cards that all have an image part path and have all
have a name now we need to mix them up before we start putting them in our grid
so let's do that we can do this with uh a JavaScript function that we have
learned already along with math random so how do you think we would sort
this cards array okay what do you think we would do to
get this cards array and sort it
randomly well I would use sort and this is a bit of a cool trick I would open up
our function and then I use 0.5 minus math
random how this works is that math random essentially if you remember returns a random number between 0 and
one or just under one so if that random number happens to give you a number less than 0.5 then you get a negative number
and if it's over then you get a positive number and we are sorting things absolutely at random we're sorting the
whole array at random okay if that doesn't make sense please take the moment out to have a think about that
research it it is a sort of just math problem it's not really a programming problem so I'm not going to focus too
much on it have a go at researching it if you don't understand but it is phical trick definitely make a note of it if
you ever need to sort an array randomly this is your guy okay so now if I console log cards
I'm just going to take this away and put it here go back to our browser and
refresh let's see you will see that indeed these are now randomly sorted
because we didn't start with ice cream did we so you will see that FES us first
and we have randomly sorted our array let's carry on okay the next thing
I'm going to do is actually put these randomly sorted Cards into our qud so
let's do it well as you know we would use Query selector for this so I would
use document query selector to essentially search for a
class of GD and let's store this as a
grid so there we
go now I'm going to use JavaScript to essentially create our board so I'm
going to use a function for this I'm going to write function create board and in it we are
wonderfully going to use everything that we learned so far about creating elements appending elements setting
attributes and so on and so on so just going to put that back to
where it was I'm also going to use a loop so I'm just going to use four let I equal
Z now as long as I is smaller than the card array
length I want to increment I by 1 okay so this is obviously quite far back now
I feel we learned about for Loops quite a while ago but that is your Syntax for a for Loop now I need to create an image
so for each time so we've got 12 items in our cards array okay now for each time so 12 times
I want to create a element so I'm going to grab our document and use create
element and I'm going to create an image make sure to put that as a string
and let's save this as const
card so a singular card that is a singular card now let's get our card and
use set attribute as we learned in our lessons to set it a
source and that source is going to be if we think about this each card is going
to essentially have a blank version of itself so I'm just going to create a blank version of everything so we're
going to go into the source folder into the images and grab the blank PNG so that
one there and then I also want to give each
card a data ID so once again I'm going to use set attribute and along with Source I'm
going to set it a data ID so again that's something that we leared in our HTML section and the data ID of each
card is going to be I so the first card is going to have an idea of zero the second is one 2 3 4 because we are
looping over so we're going to give each card its own individual data ID starting from zero and ending at
11 the next thing I want to do is actually grab our grid and
append the Cod so let's talk through this again our
function now is going to actually create a card give each card the attribute of
the source and the image path it's also going to give it a data ID and then we're going to put the card into our
grid so let's go ahead and invoke that so create board click
save Fresh our board and there we go we now have 12
blank cards because that is the image that that we use for blank and if I now
inspect so let's go in here our grid you will see exactly what we have done we
have created let's make this a bit smaller actually we have created an image tag
we've given it using set attribute as source and the path to the image itself
and we've given each one a data ID that is pretty cool in itself I think
everything that we have learned so far is really coming together so I'm really glad to see it uh looking like this
let's carry on the next thing I actually want to do is actually add an event listener to each one of these cards too to listen
out for if we click it so before we add the card to the grid
I'm just going to grab the card one more time and use add event listener so once
again we did not make this up the add event listener to pass through a click which we also did did not make up we're going to be listening out for a click on
that specific card and if that card is clicked we want to write a function or
let's call the function flip card so let's get to writing that
function function flip
card oops let's make sure to keepy that at the bottom and there we
go again just keep that there okay so what do we want to happen
when we flip a card well I want to get whatever card we flips data ID so let's
do this I'm going to use this because we are talking about whatever card that we
are currently working with that is how we use the this keyword I don't think we've done enough on this keywords but
just know that what whatever card we have flipped whatever card we
have here we're talking about that card so this get
attribute so we're going to get the attribute this time and the attribute we want to get is the data
ID so we want to get this thing right here of whatever
card we clicked and let's store this as something so let's store it as
let card ID cuz that's what it is it's an ID now once we have that ID what do we
do with it we need to store it somewhere so I'm going to make an array
here I'm going to call it let cards Chosen and just leave it as an empty
array for now because there's nothing in it we haven't chosen any cards to be checked against each other so there we
go let cards chosen I'm then going to get that cards
chosen array and push so again this is something that we learned we're going to push into that array the card's name so
we do this by getting the cards array and passing through the card
ID okay so perhaps it's best to console log
something for now so at the moment when we click a card we are getting that card's ID and storing as card ID we're
then going to use that card so say we click the card ID three we then pass
that three into our cards array okay so I'm going to console
log cards card ID so at the moment this is
all I really want to happen let's save
console let's click on a card so I've clicked the 0 one 2 three card with ID
or data ID three and I being returned the third
card in whatever our random array is at the moment so our third card is a
milkshake if I refresh this and I click again it'll be Fri okay so we're getting
an object back however we just want to store the name we've decided okay I just want to store the name in my card chosen
array so I would do that by grabbing the name okay so now in our card chosen
array I'm actually going to console log cards
chosen refresh so that's my array I'm going to click on a card click on a card
again click on a card again uh we need to actually put this console log in our function so after we flip the card let's
console log the cards chosen array refresh click on a card so we clicked on
the hot dog we put hot dog in the cards chosen array we clicked here so we clicked on a cheeseburger and we have
also put cheeseburger in our chosen cards array if I keep doing it I'm just going to keep adding to the chosen cards
all right however we don't want this we only want
to get two items in the cards chosen array and compare the two and if those
two don't match well we want to clear the cards chosen array and start again
so I can do so like this so we are indeed getting the cards
Chosen and pushing through the name let's get rid of this console log here
going to get rid of that for now too I'm actually also going to do the same for the card ID so cards chosen
IDs and push well I can actually just grab the card ID itself so there we go
and let's make an array let cards chosen IDs equal so we're stor
the names in one and we're storing the IDS in one separately
okay and of course if we click the card we want that card to flip over before we move on so once again I'm going to use
this set attribute and to whatever card we click I'm going to set the
attribute from so we're going to overwrite because at the moment it's attribute is set to this we're going to
overwrite it okay we're going to overwrite it by going into our array and
grabbing the image so once again I'm going to get my
cards I'm going to pass through the card
ID and get the image
great let's check it out refresh click and there we go click click click click
click click pretty cool so at the moment
I actually want them to uh refer back if two haven't been
selected so I can do this with an if statement
if cards chosen or you can do it by D but essentially if either of those
length D equals 2
I'm going to put a set timeout so we learned about set timeouts a set time out essentially invokes a function after
certain amount of time has passed so after a certain amount of time pass if there are two cards chosen in our array
I want to check if those two cards match and if they match take them off the
board and if they don't match flip them back over but I'm going to do that all in one
function so I'm going to write a function called check for match and after we do get to I'm
actually going to wait 500 seconds cuz I don't want to be instant I want it to be like after a while I want them to be
checked for a match and if they do match take them off the board and if they don't flip them back
over so I'm actually going to move this create board to the end my
file and run write a function
check for
match okay let's get a checking for some matches in this check for match function A lot's going to be going on okay we
need to make sure that people can't double click on the same image for one otherwise what will happen
is well if we con log here CS chosen
IDs CHS cards chosen IDs so if I click here I get the ID of
three but there's nothing stopping me from pressing that over and over again which obviously doesn't work because
then we could check we could essentially double click something and we would get a match so we need to prevent that from
happening we need to do that in our check for match
function so if
chosen or card chosen IDs and the first
item deeply equals or equals it doesn't really matter cards chosen
IDs and the second item well let's just get an alert
that says you have clicked the same
image and let's flip both of them back to be blank so
cards actually let's we have to grab all the cards again so I don't know why this
formatting is happening but I don't like it um const cards equals grab all the cards
from our display query selector all I'm want to grab all the images and
saw them as cards we've already declared cards once so to make things less confusing I'm actually going to call
this a cards card array so now let's find everywhere else
I use cards okay well this should be card array oops card array
card array can we card card
array card array
card okay great just to make things less confusing
because I need to regrab all those images now and if the the cards chosen ID and
the second card chosen ID so the two IDs that are currently in my array are the
same you have clicked the same image I going to flip the card back so I'm
actually going to store this something
to H option one ID
just so we don't have to keep writing it out I'm just going to make our code a bit neater option 2
ID cut that and now I can just check if option one
ID equals option 2 ID well then we go into
our cards we get option one ID and we set
attribute to be source and we're going to set it back to blank so I'm going to
go into our source folder get the images and get the
blank
PNG and once again let's do it for the second one so
option to ID as well okay let's check this
out fresh click click you have clicked
the same image okay and it flips back fantastic let's carry on so we've
accounted for that now let's get to actually checking if we have a match
so if that else
if now we need to check if the names match because each of our cards has an
ID from 1 to 12 however each of the cards has two names and not array each
so we finished dealing with the IDS we've checked if we've clicked the same image now let's use the names of the
cards to check for matches okay so we're using IDs to identify if the image is an individual card and now we're checking
for matches using new names so let's go into our cards chosen this time so I can
easy easily do the same as we did above cards chosen equal or deeply equal cards
chosen like that so once again if you would prefer it's totally up to you you
can store them just like we did up here or you can do that I'm going to do it like that because I don't think we're going to be using this anywhere else so
if the first card in our chosen cards array is the same as the second card in
our chosen card array I'm going to
alert you have found a
match okay it's pretty cool and what else do we need to happen well let's
just check if this works first so I can actually cheat and find out I know that the uh let's find out
where the cards are randomly so we don't need to console
like this I want the sorted array actually maybe that's right let's
check it out again yeah okay so that's the randomly sorted array we just need to put our
piece of code after the sort so I know that for example ice
cream 2 and three are going to be ice cream so 0 1 2 3 these two should be the same I'm going to click this one click
that one you have found a match great so you will see here the IDS are being
stored at two and three that's fine and if we were to console log out the card
chosen array you would see ice cream and ice cream okay so we have done that what
else do we need to do well if there is a match we also need to remove the cards
or essentially I'm just going to replace it with a white PNG square instead so
just like we did a so using
IDs I would set the image to be the white
PNG so let's go and check again refresh let's find out which ones
match the last two so once again one two you found a match okay and they
disappear however we can still click them which is not great we need to use a
JavaScript method that we leared and that is remove event listener so let's
do that now I'm going to grab the cards option
one again and use dot remove event listener to essentially listener for
clicks
and the function flip card and not let that happen Okay I don't want flip card
function happening if we click on either
card and finally I'm going to create another array called cards one I'm going
to use push to push these two cards in there so anything that's in the cards
chosen array is going to be pushed into the cards one Chosen and we actually need to remove them out of our card
chosen array and we also need to remove the cards out of the card CHS and IDs right because then we want to start over
so I can simply do this in a very very simple way by getting the cards
Chosen and just leaving it blank and getting the card chosen IDs
and leaving it blank too so let's check that out
see which ones match okay well seven and eight but
let's just go ahead and click so ID 7's been stored ID 6 has been stored there's no match ID 5 has been stored you can
see it's already started again there was no match so we've started a new array and now we're checking for a new match
cool once again one two not match one two not much great I love the fact that
the array is been cleared and we can start again to look for new two matching let's refresh and let's see
let's actually see what happens if we click two matching ones
so 7 and 11 so we know that one 0 1 2 3 4 5 6 7 matching you found a match um
boom cards one is not defined ah we did not push it into the cards one array because we did not declare
it so let's do that up here let cards one and again an empty
array cool so now if I I'm going to console
log it out here actually console log cards
One console log cards
Chen fresh check for my matching three and
four 0 1 2 3 4 You have found a
match cheeseburger cheeseburger and now a chosen array is
empty and we have passed cheeseburger and cheeseburger to the
cards one so it is in fact an array within an
array cuz cards one has an array array here so you can see one match and I've
stored it as an array okay so by the end of this we should have six arrays in our
array let's carry on so we've already done what happens if you click on the same card you've done what happens when
you find a match the one last thing to do now is what happens if you don't find
a match so for this is I would simply put both of
these back to looking blank and I'm just going to have an
alert saying
sorry try again and then once again we would clear the cards chosen we would
clear the cards chosen IDs and start a game
okay this is looking good now the one thing I need to do is actually
uh show if we win or
lose so for this I'm going to do that in my
results I'm going to grab the con result display
document and query selector so I'm going to look for can't remember what I called
it results it's an ID of results so I'm going to look for an ID
of result and I've saved it as result
display so here now I want to use text
content or in a HTML it's up to you to display however many arrays are in my
cards one array okay because I think you should get one point if you get one set matching so that makes sense cards
one
length and if cods
one length deeply equals the C OD
array length / two or I could have just wrote a
six that is up to you but I've chosen to do
this result display text
content congratulations
you have w on Amazing so let's check it
out not a match okay flip back not a match
okay it's a match great so we've removed those we have one in our array let's cheat
because we can it's a match and you will see we get two because we have two items or two one
card pairs in our array now we know this is a hot dog the
other hot dog is in six so 0 1 2 3 four five six it's a match we got a score
three and we now have three winning arrays in our
array it's a cheeseburger and seven is a cheeseburger a match we've gone to four
fries and we know that fries are in eight it's a match and
then it's a match and congratulations you have won and you can see here we
have all six pairs so six arrays in our cards one array great just fix that okay
so that is our first project done I hope you've enjoyed it I hope you've really
seen how we have used everything that we have learned so far to make this game you will now have this game saved on
your local computer and if you want to put it on GitHub so in other case store
it somewhere you know uh GitHub is a great example and place for developers storing things and it is very useful if
you want to showcase your projects to potential employers I'm going to show you how to do that at the very end so
congratulations make sure you save all your files you now have your project in your own desktop or in your own
uh working environment so that you can have it saved and work with it whenever you want now let's carry on with a
little bit more learning before we get to the GitHub
stage okay well done everyone I hope your learning is going well so far based on where we are in our coding journey I
thought I would introduce two games for you to choose from Tetris or Candy Crush
these two games have been chosen specifically for the level of learning we are at at the moment so the choices
totally up to you you can either choose to complete one project now complete
both projects or save them for later and carry on with this course the choice is
totally up to you so if you would like to have a go at building Tetris please
click on this YouTube card right here so we'll be doing a lot of array work in this video as well as learning how to
listen out for keystrokes and using a lot of 4 each and some JavaScript methods or you can try Candy Crush by
clicking this card right here in Candy Crush we will be learning how to drag
and drop elements as well as practice our array work and eventless N work as well as many many more things that we
have learned so far okay let's carry
on in this section I'm going to talk to you about HTTP or hyper text transfer protocol to
do this let's have a look at a normal standard website you see on the
internet most internet web pages are generated by web of HTML CSS and
JavaScript sent to you via the Internet the internet is made up of a bunch of
resources hosted on different servers the term resource corresponds to any
entity on the web including HTML files Styles sheets images and so on to access
the content on the internet your browser must ask these servers for the resources
that it needs and display these resources to you this protocol of
requests and responses enables you to view the page as it is let's have a
closer look at this protocol so to recap what we just said HTTP or hypertext
transfer protocol is used to structure requests and responses over the Internet
HTTP requires data to be transferred from one point to another over the
network this transfer of resources happens by using transmission control
protocol or in short TCP in viewing a web page TCP manages
the channels between your browser and the server so once again to recap TCP is
used to manage many types of internet connections in which one computer or device wants to send something to
another and HTTP is the command language that the
devices on both sides of the connection must follow in order to communicate when you type an address
such as www.google.com into your computer you are commanding it to open a TCP channel
to that site's uniform resource locator or in short URL a URL is unique to your
site and it's sort of like an address to it in this situation your computer so
your computer which is making the request is called the client the URL you
are requesting is the address that belongs to the server Okay so we've got
a client and a server you're on the computer and the URL which is where your
website is is on a server once the TCP connection is established the client
sends an HTTP get request to the server to
retrieve the web page issued display so here we have a get request or
a visualization of a get request the client is requesting the server gives him the
necessary resources for the website then after the server has sent the
response so here we see the server sending the response to us we say we've got it thank you after the server has
sent the response it closes the TCP connection if you open the website in
your browser again or if your browser automatically requests something from the server a new connection is opened
which follows the same process we just did get requests are one kind of HTTP
method a client can call we also have post requests put requests so here we
have a visualization of how the request with work with post request You're simply sending something to the server
and with put request the same we also have a delete request we
will be going into all four of these in more detail in the next
section now let's go back to our Google example suppose you want to check out something you want to search for
something on Google so so you type in the URL into your browser after you type
that URL into your browser what is happening behind the hood is your browser will extract the HTTP part and
recognize that it is the name of the network protocol to use then it takes
the domain name from the URL in this case it's google.com and asks the Internet domain
name server to return an Internet Protocol or IP address so at this point
the client knows the destination's IP address it then opens a connection to
the server at the address using the HTTP protocol as specified it will initiate a
get request to the server which contains the IP address of the host and optionally a data payload the get
request contains the following text that you see on the
screen this identifies a type of request Quest the path on
www.google.com and the protocol the protocol here is
http/1.1 the protocol is a revision of the first HTTP which is now called
http/1.0 in http/1.0 every resource request requires a separate connection to the server
http/1.1 like we have have on the screen uses one connection more than once so
that additional content like images or Styles sheets is retrieved even after the page has been retrieved as a result
requests using http/1.1 have less delay than those
using http/1.0 the second line of the request
contains the address of the server which is www.google.com there also may be
additional lines as well depending on what data your browser chooses to send if the server is able to locate the path
requested so if the server is able to get you to google.com the server might
respond with the header http/1.1 200 okay followed by the
content type so let's break this down the first line of the header is the
confirmation that the server understands a protocol that the client wants to communicate with we then get a HTTP
status code so the 200 signifying that the resource was found on the server on
the bottom line so the content type the bottom line shows the type of content
that it will be sending to the client if the server however is not able to locate
the path requested so it can't find the path to google.com it will respond with
the following header 404 not found in this case the
server identifies that it understands the HTTP protocol but the 404 not found
status code signifies that the specific piece of content requested was not found
there is many and many status codes that are available so I'm just going to show you some now here we have a website
called HTTP status dogs hyper transfer protocol response status codes and dogs
so here we'll see all the status codes you can get along with funny dog images just to sort of make sure that you
understand what each of them means so for example here we have the 200 it says okay let's find the
404 404 not found we have 403 Forbidden we have so many 500s under the popular
ones if you go to 500 internal server error there is so many and it's quite
cute website if you want to have a go familiarizing yourself with these stus
codes so there we go 404
422 400 all of these status codes are
essentially ones that you might see in your daily life as a
developer and that's it so that was a quick uh crash course on
HTTP and around HTTP status codes so one's like
404 next up I'm going to take you through some get requests post requests
put requests and a delete request so let's do it so next up I want us to have
a go using fetch which provides a JavaScript interface for accessing and manipulating parts of the htb pipeline
such as requests and responses let's have a look at what I mean
now so here we have fetch we use fetch to fetch a Json file across theor networ
and print it out to the console what I mean is this okay so here is an API this restful
API is essentially going to give us access to adjacent full of objects these
objects are going to be countries along with a lot more information with each of the objects so like the name the full
name the code and so on I'm going to choose an API endpoint I'm going to
select all because I want all the information all the information that is possible so I'm just going to select
this and I'm just going to put it literally in my browser so with the help
of Jason view so this is a Chrome extension that makes everything a lot
more readable if you haven't downloaded it please do download it now it essentially transforms everything to
look like this so in a lot more of a readable way as opposed to what it looks like like that okay so now it looks like
this and we can read everything so here we have our first object which is
Afghanistan the country Afghanistan we get the alpha codes for it we get the
capital we get the regions sub regions population literally so many time zones borders languages translations and a
flag so let's click the flag so essentially yes a lot a lot of
information gets given we also have different types of things as well well but essentially it's
just a breakdown of what we just saw if you need something specifically I just want everything so now we can actually
get all that data and use it in our project so let's go ahead and do that
now to do this I would need fetch so I'm just going to break this down I'm just
going to post that in here and talk to you about the syntax so already you will see that in my console let's make this
bigger and our console log I'm getting all 250 objects let's cck on the first one and it's Afghanistan so literally
the thing we are looking at even the flag is there we've got all that information and we can use it in our
project great so the simplest use of fetch takes one
argument so the API Endo the path to the resource you want to fetch and returns a
promise containing the response or the response
object this this is just an HTT response not the actual Json to extract the Json
body content from the response we use this so it's adjacent
method we then of course get all that data and we console log it so we can see
it in our browser so that's it it's pretty simple that's essentially what you need to use you can use this on any
API that you want or restful API as long as you get the path correct then that
should work perfectly this of course is the simplest form and
it is simply to get data so to get data
I'm simply getting it I am taking the file and the adjacent file and I'm getting all that information so I can
work with it you can even go as far as calling this a get request it's it's the
same it essentially does the same thing okay so that is an API that we
have chosen I'm going to actually show you another API too just to show you that you can literally put anything in
here as long as it's the right format I also like to use Punk API so Punk API is
essentially an API full of beers so if I take this and put this in here you will
get literally a list of all the beers by Brew dog there's Lads there's even
ingredients okay it has hops food pairing in which is quite a fun one you
make projects based on the food pairings which I have done in the past so it's also a great API let's go ahead and use
it in our project so I'm just going to get rid of
this and post beers instead so
now just try that again be
post just move some things around just refresh the page do
that I will get a bunch of beer objects which is pretty awesome one last
one to show you and that's my own API that I built so if I just go to here you will
see that I have made my own API which is all about Burgers so this is an open
source project if you want to go contribute to this I'll show you how to do this later once we've done a bit more
learning so I would simply copy that link and put it in
here in order to get my 28 Burgers so there's my first one
you'll see has an array of ingredients an array of addresses which is an object so that is
my first object and so on and so on so this is great we have made our first get
request to three different apis let's carry
on so next up I want to show you what to actually do with the data once we've got it so once again we have my burger API
I'm actually going to comment this out I'm still going to keep it there however and let's get rid of this I now
I'm going to write a function to get data
I'm then going to use the syntax here so I'm going to fetch the data but only if
we want it to So currently I'm not getting it I'm just getting the data I'm
fetching it and then storing it so response and then I'm getting the response
Json and then the data and I don't just want to console log the data I mean that is something that I want to do so I'm
going to put it there however I want to do a few more things as well once we get the data and only once we get the data
because we need to make sure that promise is resolved okay so we need to make sure the data is there and only
once it's there we want to get a name so I need to get the burger name
and to get the burger name I'm actually going to go into the data so actually let's get the data now I'm just going to
call it so we're getting our data so we're going into our data and it's going to
the first object
so the first object and get the name property so this hopefully is coming
together everything that we've learned so far so we should have the name and I'm just going to console log
out the name so we can see it and indeed we have the tribute burer
let's check if that's right so the first object name tribute Burger
amazing so that is how we would get data so we can work with it in projects in
one simple example I can also Loop over this to get all the names there's so much we can do I have so many great
projects on this so I'm going to leave you with a project now I hope you enjoy
it have fun
project in which we're going to learn how to build a random Burger generator what I mean by this is that we are going
to be using a burger API in order to randomly generate a burger name if we
click this button right here okay so as
a reminder this is the Burger API that we will using it is one I made myself I
provided you the link and you can go ahead and see all the different Baggers that different people from all over the
world have added to this open-source project we have an ID we have a name for
a bagger we have the restaurant where you can find it you have the website a
description an array of ingredients an array of addresses so
this one has one address it is an object and so on and so on for each one
so there's another one there's another one we have a Krabby Patty we have the Good Burger literally so so
many burgers so I'm going to show you how to do this to create a random Burger
generator we are going to have to get so we're going to have to have a get request to get all the burgers and we
can do this with fetch as we learned previously so let's go ahead and do that
now once again the Syntax for fetch is this
so I'm just going to copy paste it we are fetching so I'm just going to fetch
this URL not doing much with it I'm simply getting all the information that we saw
in our browser so each of the objects so we can work with it so if I make this a
little bit bigger we have once again the name the
restaurant of where we can find the bagger the website the description the
ingredients as an array and addresses which is an array of objects this one
only has one object Okay so we've got that information now
but how do we actually use this for our UI well so we get the response and then
we get the data only once we have the data then we can use what we have so I'm
just going to Simply get the name so I'm going to get the
name so I need to go into the data so this is our data I need to go into it and get the first object so zero just
going to get the first one for now so we can see what we are doing and get the name so if I console
log name well we will indeed see the tribute buger so to start things off let's just
work with that I'm just going to store it up here so I'm going to get
the element up here so let's do that here
const via display equals and then
document let's use Query selector to
find the name so the div with the class of name a class we need a DOT so once we
have that let's actually get our beer display and with inner HTML assign it the
name so there we go we have a tribute burger just going to style this up a
little bit maybe give it some padding let's say 30
pixels the high okay so that is looking good um let's
make the width
37 okay okay well I'm happy for that that's
that's fine for now actually maybe let's make it 30 and
then zero pixels on the side and change that back to 400 it's up
to you I'm just being a bit pedantic okay so we have a burger however it's not random it's not really
a random Burger well we know how to make things random but for this we need to actually
do something to our button so let's go ahead and grab the button store it as button and you document query
selector and I'm actually looking for a div with a class of button not the button itself as you can see here it's a
class of button
and then I'm actually a function that says get
data and put all of this in my function
okay so that at the moment nothing happens but only if I click the button then we get a
burger and the button so we need to grab the button and use an event listener so we're really using everything that we
have learned so far and in it I pass through a click and the function of get
data because as a reminder the ad event listener works on a Target we pass through an event and the function that
we want to invoke if the event is triggered so now if I click the button
well I get a bger however it's still not random so let's do that up
here well to get a random number so con random number we know that we need to
use math random and let's multiply it by the data
length so by however many bugs we have in our data because it is an array so we
can use the length property on it so now we're getting a random number c random
we need to make sure this is an integer so we can pass it back through to our array and I will do this
using math floor and passing through a random
number Okay so we've got a random integer great and what do we do with it well let's pass it through here so now
if I click here let's refresh that we are getting a
random Burger each time this is fantastic I'm really
pleased with how this has worked I hope you've enjoyed this lesson I'm really
pleased with how everything came together so we're using everything we've learned about this we've learned about
fetching we've learned about getting random numbers and we learned about getting in HTML and we've learned about
event listeners so this was a really good project I'm really happy that we can use it in order to build a random
Burger generator okay let's carry
on for those of you who want to make a note of this please feel free here's the stylesheet all I have is a body and name
and a button with some styling for the button and of course the index HTML file
which simply has a name and a button and
they're all in a div as well to make them styled out like this so that is
it cool also Al don't forget about your folder structure that will be important
if you want to pick out the JavaScript and stylesheet so if something is not working it might be due to that are we
ready to move on let's do it next up I'm going to show you how to
make a post request what I mean by post request is this so just like we were
able to get data we are able to post
data to n API so for example here let's have a
look at my burger API again I can essentially send data to here in order
to add another bger object okay so
because this is a very low security one I shouldn't have any errors so let's do
it in order to make a post request we need the following
syntax so here we go let's talk through this a little bit first this is just the
basic Syntax for making a post request to a URL so first off we start with the same
Fetch and we open up our parentheses and pass through a
URL so this time we are not just passing through a URL like we did last time we are passing through two things the URL
and this object right here okay so that is essentially the same
syntax we're just passing through a chunky object with our URL too so two
arguments and then once again we are catching the response and then the data
I've also made a little success message here to know that our data has been successful so we'll get the data along
with the success message or if there has been an error we can catch the error and we'll be able to see that in our console
log so I'll show you both of these I also have the method of post so
I am telling our fetch API that I want to post this data I don't want to get it I want to post it to the URL the URL
that we're going to specify here and I've just put in some headers as well so this is just the syntax we are
essentially just passing through the content type as a header and the content type is application Json okay so we're
just passing through this header along with the method of post then for the body so once again we are not not only
passing through the URL as an argument we're passing through this object which has a method of post a header and a body
and the body is whatever we tell it to be so this is just like a template I
just have a username example so if we post this to a URL we're essentially
posting this data this object that has user an example
okay I think the best way to do this is Show You by doing so
so I'm going to use my burger API again so here we have the burger
API here you will see the last object which is the Barbie Burger it's got
id28 I'm essentially going to copy this object as I want to copy the format used
for this API so I've copied the entire thing now instead of this template data
object I'm just going to pass that through and paste it now just going to format that a little
bit so it looks a bit nicer I'll leave that up here so you can
see how that looks the description is a bit long but don't worry about it that
is our data object the entire thing now let's create a new burger so I'm just
going to go data id29 let's call
it oby's Burger
restaurant AR's web address rbs.com
description a delicious burger from
Heaven ingredients let's have a bun let's have
have cheese let's have a beef
py let's have some lettuce
tomato tomato and Mayo is fine and address well
let's make this up id0 great 24 RB
Lane Obby
town there we go and then RB L okay so
that is our fake burger that is essentially our data object that we want to post to the URL here so because we
want to post to the Burger API now we need to make sure that we
actually get the correct address so copy that
and I'm simply going to put it here okay so hold on I'm just going to cut this
out so you've already see we've posted it I actually wanted to post okay fine
let's just put that in I wanted to do that on the Press of a button but as you can see here we've already posted it so
there we go you will see we get a success message so that is our success
message along with the data that we posted so here we go that is what we posted is essentially exactly what we
wrote in our example data object so if I get the ingredients out
it's the new ones and the address that we made up and there we go we have posted our bagger but this is not where
we finished I just want to make sure that everything work correctly so now let's go back to that
URL if I refresh the page and go to the bottom you will see the arbs Burger
immediately we have made a post request and it was
successful okay and that is it we have made a post request it has worked
perfectly everything is fine we have now covered how to get data but also how to
post data so we have really made some progress this is looking great I just
have two more to show you before we carry on
so next up I want to talk to you about a put request a put request essentially allows
you to edit a
object okay that is an explanation in a very basic way we can use it to update
any resource that we have it is considered to be one of the most common HTTP methods for retrieving and sending
data to a server so once again let's get the syntax up
so there we go we don't have any data yet I'm going to make the method as put
this time once again we have the fetch API and we need to pass through a URL
and an object that will contain the method the header and the body of what
we want to alter so let's go ahead and do this so once
again we need the data as an
object don't forget this is just the normal syntax I'm actually going to put it in a function this time so
function edit
data okay just so we can invoke it whenever we want so method put headers
body we are getting the data so data up here and we are passing it through to the body and then we get a success
message or an error message if it has failed okay so the data well the first
thing that I need to do is decide what object I want to edit so let's do that
now let's go back into my bagger API or my fake bager API and then let's say I
want to edit the Third third item so I would need the
third burger so I would simply put a for
slash3 and now I could view the Good Burger as a stand alone object so this
is the URL I need if I wanted to edit the good bger let's go back to our
project I'm going to put it in here make sure it's a string otherwise this will
not work and with the put method I essentially need to
take so I'm going to take the burger as it is exactly copy
it and then paste this format it and now I can edit it so
let's just change I don't know let's say that this number is incorrect and put 1 2
3 so now we've changed that data we want to override the data that we have and we
can do this by essentially making a put request to the specific root to that
bger so if we're ready I'm going to just call the function click save and success you will
see that now in the addresses I have changed the number from
0 0 0 to 1 2 3 let's just have a look here for good
measure refresh and indeed the number has changed to 1 2 3 amazing let's carry
on okay I'm going to delete this for now so we've done put requests we've
done get request we've done post request I have one more to show you and that is the delete request and you guessed it it
can delete a whole object so let's do that
now let's say I want to delete the very last bger from our fake
API so I would go in here let's have a look at it again scroll all the way down
well it's the Arby's burger it's the burger with id29
so to do this I would simply use Fetch and then the URL so the
URL that we had last time as a string and I would need to
pass through the ID so the ID 29 as that was the burger the RB's
burger and then I would simply just pass through the method of
delete now this is in its very simplified form let's see if that has
worked so now refresh go scroll
down and that has indeed worked we have deleted the 29th Burger now we don't
really see anything because I didn't it to console log anything if I wanted to
see uh what was returned I would once again have to have a response uh and so
on and so on but I didn't I didn't do this for now I just wanted to show you the delete method in its basic form if I
wanted to however I could have attached this as
before in which we would get a success message so let's try delete another bger 28
okay so that shows us a success we don't get a result back because there's
nothing to give back we've just deleted something so it's an empty object but if we have a
look here and refresh Burger 28 is now gone so that is
great we essentially don't need all of this we could just have conso log success or console log error we probably
do need the error message so so there we go okay so just going to get rid of that
now and keep it in its most basic form that is it we have covered the top four
most popular HTTP requests I hope you've enjoyed this
I really enjoyed uh showing you these they're really fun and once you get to GPS with them the world is your oyster
in terms of working with ap ice so I'm glad I can show you I do have a few
projects for you on my channel so I'm going to hook you up with a few if you choose to look at them now if not then
please do carry on I have a lot more to teach you for those of you who are interested
in how I made my restful API imitation in a super simple way I have just the video for you in this video I show you
how to make your own API in just a few simple steps it is a bit more on the advanced side but if you would like to
have a look or are just curious please do look at this YouTube card right here
so up there otherwise please save it for another time and let's carry
on okay in this section I'm going to show you how to put your project so the
game of memory game that we built on our local code editor onto GitHub so it can
be viewed by others online let's do it GitHub is a subsidiary of Microsoft
which provides hosting for software developers and Version Control using Git it offers the distribute ver Version
Control and source code management functionality of git plus its own features don't worry if that doesn't
mean anything for now I'm going to show you some functionality of GitHub as we go on so first off you need to know this
is a free service and is essentially is just a way for you to Showcase your
projects so go ahead and sign up once you have signed up you should see a
dashboard that looks like this so this is my own personal GitHub
page you will see all my repositories as well as all my contributions in the last
year a contribution is simply me making a g commit once again don't worry if
that doesn't mean anything to you it's just a word that you should get used to hearing and that you will learn along
the way so now let's say I want to add my memory game to my repositor right here
so I would simply click repositories
new and then right here I'm going to create a new repository so I'm going to
call this memory game I already have one memory game in
here so let's call it 2021 description simple game made in
JavaScript HTML and CSS now I'm going to choose to make this
repository public so that anyone can see it but if you'd rather keep it private
please click the private button right there and next I'm going to initialize
this repository with a read me file this is essentially where you can write a
description of your project so that others can see it I'm going to show you what I
mean okay okay so by creating this we are creating a main branch this is the
default name of the branch and going to click create
repository Okay so we've created our repository at the moment our repository only has one file and that is the read
me file that we clicked to initialize along with this template text that we
gave it so to edit this read me I can simply click here and typee
away if you want to know some formatting tricks I suggest looking at markup for
readms so for example this is a H1 tag if you will if I want to make a smaller
one I am a smaller title and so
on and I'm just going to commit this to the main branch so
commit so I've now committed that and you will see my five F has now changed I
have that I am a smaller title that I wrote okay so this is great but how do
we actually get to adding our memory game in here well I'm going to show you a super simple way of doing it that
doesn't involve the terminal and that would simply involve me clicking on the repo itself or
repository and adding files so I'm going to choose to upload files and now I'm just going to drag my
files in here so let's go to where we saved our memory game on our personal
computers for me it would be in my personal projects and I saved it right
here so I would click into the folder and copy all of
this so the index HTML file as well as the source file that has my index GS and
style CSS file I'm going to copy all of that and simply just drop it like
so you will now see all my files being added so the index HTML file the sty
sheet all the images that are in the images folder and the index JS file for
the JavaScript once again I'm going to commit these changes I can choose to
change the name of this commit or I could just leave it as it is once again
this will be committing directly to the main branch of our project
commit and there we go we have now saved our project onto the internet for others
to view our code this is great is now
publicly shared anyone can find it anyone can simply click in here to view our JavaScript and this is essentially
how you would submit code to potential employers or just share with your
friends once again this is a public repository if you'd like to keep it
private so if you just like to share your code with one person or two people you could easily do that too before
sharing your code I would suggest to really build out this read me I think read me are super important otherwise
someone's just going to get your folder and not really know how to open it for example you might want to say like download the file so code download it
and then open it by opening the index HTML file all this information is super
important no one can you know no one's a mind reader you need to really lay down The rules as to how you want your
project to be opened so for example if I show you some of
mine let's go to my repository I'm going to show
you a more complicated project that I did which involves a lot
of information as to how to start the app okay so there we go that is how I
would suggest writing a readme let's go back to our repository
now so once again memory game
2021 now if I just wanted to share this with one or two people I would have to
change these settings on this so I'd go to settings I would scroll all the way
down I would change visibility to make
private so I would just have to type this out
again and put in my password
and this repository has now been change to be private I will then share this
project with people so I can manage access and I can invite a collaborator
to do this I can use the GitHub username or email so that is another option too
if you just want to share your code with one other person or two other people for example if it is for an interview this
is the way that I would do it okay so that's really it for this
section uh that was just a basic understanding of GitHub so you can get your games online there is a lot more learning to
do and I'm going to leave you on some tips as to where you should go from
here okay so we are coming to the end of our course in this course we have built
an understanding of HTML CSS and JavaScript thanks to the lessons
exercises and projects along the way however you might be wondering what
what's next well I have a few suggestions for you so where's go from here the first
thing I would suggest is getting more familiar with GitHub even though I did
show you how to store your own project on GitHub GitHub has a lot of other functionalities that you should be aware
of so that would be your best bet as to where to go next some features of GitHub
include creating a profile building out your network and just storing more projects
I have a few tutorials on GitHub that is how to make branches how to make PLL
requests don't worry if all these words don't mean a lot at the moment this is what your research into GitHub will help
you with leading on to that I'm going to talk about terminal learning the terminal is the
next piece of advice that I would give you as a Next Step the terminal in
layman terms will allow you to control projects and and files and folders on
your computer from a command line interface as well as allow you to pull in packages talk to GitHub and a lot
more next up I would suggest looking into libraries and Frameworks one of
these is react react is something that I like to work with every day as a developer in my professional setting
learning react was a personal choice for me if you'd rather look into Mobile development please do have a look at
react native or you can check out completely other libraries and Frameworks such as view or angular there
are so many on the internet react just happens to be my personal
choice and next I would suggest looking at nodejs once again in a nutshell and in
layman terms node.js will essentially allow you to build out backends allow you to download packages and a lot of
other really cool things in order to really build out your projects I have a couple of no s videos on my channel so
please do check them out lastly going back to our contactform section I'm
going to have a video coming out especially on this so please do like and follow my channel if you want to learn
how to do this it will involve a library and scripting so a little bit more
advanced stuff than what we have learned today but I hope you're excited to learn and that is it we have now
finished our YouTube coding boot camp congratulations if you have finished I
hopefully you now feel you have a good grasp on the fundamental of JavaScript HTML and CSS you should also have a few
good projects to put in your portfolio as well as a clear direction of where you should go next keep practicing and
gaining more software developer skills as mentioned if there is an area that
you're not to make a lot of sense by all means please go back and do that section again that is exactly what the time St
are there in the description of my video once again thank you so much for coding
along with me please do like and subscribe to my channel it really would mean a lot I love creating more content
and I'd love to create more content for you guys so that would really help me out okay thanks so much again and I'll
see you hopefully on my channel
soon
e
e
No comments:
Post a Comment