Welcome to our beginner friendly course where
you'll learn HTML CSS and JavaScript to create awesome and responsive websites through
fun projects our course teaches you how to make websites from the ground up using the
latest tools like HTML 5 CSS 3 and vanilla JavaScript we'll guide you step by step
so you'll understand each part and won't just copy-paste code you don't need any prior
knowledge of HTML CSS or JavaScript to start we explain everything clearly making it suitable
for both people who are new to coding and those wanting to refresh their skills learning
should be enjoyable so we've designed cool and interactive projects for you to work on
you can pick projects based on what interests you the most we offer separate sections for
each topic so you can focus on what you want to learn most for example if you're interested
in JavaScript script you can jump straight to those lessons to help you practice we've added
a useful resource called 100jsprojects.com here you'll find the code and live demos of all the
projects we cover allowing you to compare your code with the finished one ready to start
your web development Journey so let's get started welcome back to another project
in this project we're going to create a hard tray animation as you can see from the
final version of the project when we move our Mouse inside the browser we are creating
some heart inside the browser with different colors and also different sizes in this project
we going to use the key frame queries to create an animation that has some Hue effect and
also some changing inside the opacity and sizes of the heart and also we're going to
use JavaScript to to detect the position of the mouse inside the uh the browser the
X and the Y position and we are going to use this position to set the heart in
exact position of the mouse so in the next section we're going to start with the
HTML part of this project so see in the next section all right welcome back let's start our
project first we open the visual studio code here we close the get started T and in the file
menu you click on the open folder I would like to create the project in my desktop but you can
create it anywhere you like in your computer so here we click on the desktop and we click on
the new folder button to create a new folder we name the folder heart Trail animation which
is the name of our project sorry Trail animation we press enter and we click here on the select
folder to select the folder we close the get started tab again and here on the left we right
click and we click on the new file we name the file index do HTML and we press enter now we have
our indexed HTML file here on the right side but it is completely empty we can use an exclamation
mark to create an HTML 5 F plate so we write an exclamation mark and here we click on the first
Auto suggestion we can use ALC to turn on the VRA so we can see all the codes clear we can open the
browser inside the visual studio code using the live preview extension we just need to right click
here and we click on the live preview Show preview now we can see the browser on the right side which
is completely empty but with the title document let's close the Explorer section by dragging the
this line to the left so we have more space on the right side and let's change the title to
the name of our project which is part Trail animation now we can see the heart tray
animation on the tab and then inside the body tag we just have a span that we're going
to add a background color sorry the background image to this span using CSS that was it
for the HTML part of our project in the next section we're going to to use CSS to
install and add the the heart image to the background of this span and we're going to
uh style it using CSS so see you in the next section all right in the last section we have
finished with the HTML part of our project in this section we're going to start styling our
project using CSS first we need to create a CSS file here we we can use control shift e to
open the Explorer section and in the Explorer section we right click and we click on the new
file we name the file style. CSS and we press enter now we have our install the CSS file here
which is empty but we can't use it yet because we must add a link to this CSS file within
the HTML code so we go back to the indexed HTML file and just after the title tag we add a
link tag we just write link and we click on the third Auto suggestion the one with the CSS now
we have a link tag with a relationship between the HTML file and the external sty sheet which
is style. CSS uh the HF attribute defines the destination of the link and as both files I mean
the index at HTML and install at CSS are located at the same directory we just need to have a
solid CSS for the URL now we can use CSS in our project so we just save the file using contr
S and we close this Explorer section to have more space on the right side and the only things
we need to do is to add some background image to this span tag and insty it so we go to Sol it
C CSS and first we start from the body section and remove the default margin of our project so
we just remove the margin so we can install the components inside the body section easily and
we set the height of the body to be 100% of the viewport height which means 100% of this screen
size then we change the background color to be black so we have now a completely black website
with nothing inside but we're going to add some background image to this spam tag inside the body
section to have an image so inside the spam we add a background we use the background property
to add an background image so for the image uh or the icon we want to use the heart icon for
using the for having icon in our browser we can use a website called icon finder so we go to the
desktop and we click on the Google Chrome and here in the search bar you search icon finder and in
the search result we can see a website with the URL iconfinder.com we click on this website and
we close this and here inside the tab section we search for heart and in the search result we have
too many hearts different shapes but some of them are free and some of them are paid we just we
can in inside this tab we can choose the free one so we can get all the three icons the icon I
would like to choose is this one we just need to click on it and here on the picture we right
click and we click on the copy image address and we go back to the visual studio code and
here we add a URL function and inside a double quote instead of double quote we paste the link
we can't see the image yet because the span tag doesn't have any width or height so we change the
width to 100 pixels and height to be 100 pixel as well then we position it to to the middle so
we can see the icon so we position it absolute first so we can see it here a little bit and
in order to uh put this image inside exactly that uh that uh place with the width and height
of 100 pixels we can use background color sorry background size cover to increase the size of the
image as large as possible to fill the container and uh we can see it now properly all right let's
bring this Hearts to the center just uh for our styling and so we just say left 50% and top 50%
this one actually brings the edge of the uh icon to the center from the top and the left in order
to bring exactly the middle to the center we need to use uh transform property and it's translate
function and we set the X and Y to minus 50% now we have the heart exactly in the middle of our
uh website that was it for the CSS part of our project in the next section we are going to
use JavaScript to firstly detect the movement of the mouse inside the browser and we get the
position of the mouse X and Y and also we're going to create this heart in different size and
different colors when we we are moving the mouse in the different area of the browser so see you
in the next section for the JavaScript part of our project all right in the last section we have
finished a styling our project using CSS in this section we're going to start adding functionality
to our project using JavaScript first we need to create a JavaScript file so here we click and
we use control shift e to open the Explorer section in the Explorer section on the left side
we right click and we click on the new file here we name the file index.js and we press enter and
before using JavaScript in our project as same as the CSS file we must add a link to the Javascript
file within the HTML code so we go back to index. HTML and just add the end of the body section we
had a script tag we just write SC and we click on the second Auto suggestion the one with the SRC
the SRC attribute is similar to HF attribute here and defines the destination of the link and as
both file are located at the same directory we just need to write index.js for the URL now we
can use a JavaScript in our project so we close this explore section and we go to index.js First
things we need to bring to JavaScript is the body element and as the body element just is a tag with
a class uh with no class or with no ID we can use quy selector method to return this element inside
the JavaScript so we just write const to create a constant and we name the constant body element and
we target the document and we use Query selector method to return the body and as it doesn't have
any class or ID we just need to have body here we can use alt C to turn on the wrap so we can
see the code completely on the uh in two lines so now we can add a ad event listener method to
this body section and attach an event handler to detect the mouse the mouse moving inside the
browser so here we just write body elements. add event listener and the add event listener method
has uh the first parameter in inside the add event listener method is the event that uh is going to
trigger a function so this event the event we want to use is mouse move which means when the mouse
move we're going to trigger a function so let's test it we just console log and for example
we just say moved or Mouse move whatever we open the console section here it's clicking on
open def tools pan as you can see we clear the console by using this icon and when we go to the
browser and move the mouse there we can see them we have seen move many times because each pixel
is going to be one trigger for the function so this is working we just need to get the X and
Y position of the mouse when we are moving it so we can get it using we just get the event here
and if we conso log event dot for example offset X and we open the console and if we move we can
see the position of the mouse in the X offset so when we go up to the left we see a smaller number
but in the right side we see a bigger number and also if we we can get the Y AIS as well the upper
is lower and in the bottom we we are getting the bigger number so we are getting the both numbers
X and Y offset so we just say save them inside a constant and we just say x position equal to event
do offset X we copy this and we change this to Y and next we want to create a a span like this so
we have a span here in the body but we going to create exactly the same span using Create element
method uh and we just write a constant and we just say span element this is a new one so we just say
each each time the mouse moves here just create a span and we just say dot create element and the
element we want to create is a span so if we we cannot see it yet because we have to append this
span inside the body section which is here so for the body elements we append a child and the
child we want to pend is this span element so when we go now inside this uh let's remove this
inside this browser we can see this spand inside the body section we have to open this inside a
browser and we open the dev tools using control shift c as you can see now we we having a lot
of span inside the body as we are moving we are creating a span inside the body all right but
we want to position this span as well so we go back to visual studio code and before appending
we position this span from the left and top by using this X and Y position so we just say span
do style it because we are styling them because we are doing the same things inside the sty CSS we
position them left and top so we actually styling them so we just say do style. left and we want it
to be left X position and because this Exposition is just a number we need to add pixels at the end
so now we can see this one in the left when we are moving it moving our Mouse there but let's add the
top position as well we copy this and change this left to top and instead of Y we add instead of
X we add y so now we see the heart creating when we are moving and the reason you see double um
heart is because we need to add something called uh pointer events we change the pointer events to
none and we're going to fix this so now we're only creating the part exactly on the mouse position
but this is actually creating infinite number uh or thousands of millions of heart each time
we are moving but we want to remove this heart after a few seconds and also we want to create an
animation and bring this heart to to op and also change its uh color as well so we go back to solid
CSS and we add an animation inside the spance so for creating animation we need to use the key
frame uh query and we just name this animation animate and the key frame queries has you can
create different position we just say 0% set the transform translate X as the same as the the
top minus 50% in the both side because 0% we want to have the same things and the opacity to be 100%
as well it means uh we don't have yeah opacity 100 means no opacity and then we going to copy this
and instead of zero we have 100% And instead of having five 50% top we just make this one a big
big number for example 5,000 to bring this heart outside the the browser at the top and also change
the opacity to zero so make it invisible over time so we add this animation here inside the span
using animation property and the animation we want to use is animate which we have created
here and the animation do duration we choose 6 second and linear as you can see now the heart
is going up and uh after while we see too many hearts inside and gets a little bit messy so we
can remove the heart after a few second we just use a set timeout method inside the JavaScript at
the end to remove the the span so we just say set time out the set time out method actually sets
a timer and trigger a function after the timer expires this we can set the timer here we just
say for example 3 seconds and we want to remove the span element when we after 3 seconds we want
to remove the SP span element so we create it here but after 3 seconds we remove it so it's not going
to be messy like that and also we want to create different size of the heart instead of just having
one heart so it's going to be a little bit more beautiful so for changing the size of the heart
we can create a random number here for example we create a constant and we just say size and uh we
use the math. random function to create a random number and we use this random number to change the
uh width and height of the SP span we will we set the height and width to be 100 100 pixels at the
beginning but we can randomly change them here so we just say span element dot style because we
want to style them and we' change the width to be this size this random number is between zero and
one so it's very small we want it to be between 0 and 100 so we can add a 100 here so it's going
to be between this size is going to be between zero and 100 and we just say something like above
size plus pixel so we change the width and we can change the height as well by just copying the
oper code and change the width to height now we are creating different size of a heart we can get
rid of the middle heart which we have created by removing this span so we just creating the Heart
by moving the the mouse and also another cool thing things we can do is to change the color of
the Heart by changing by using a function called H rotate inside the filter property so we just
need to go to install the CSS and inside the animation first we just set the filter you rotate
to zero it means nothing no change but until it it reach to its 100% we want to change the uh U
rotate to for example 7 12 120° so now we can see that first the heart starts from the uh like a red
color and it changes uh goes to green and finally blue and red we can test as you can see when we
go to the right and the top we can see a scroll bar we can remove the scroll bar by using just
uh uh overflow hidden inside the body section so we we're not get so we can hide the scroll bar
easily by just using overflow hidden so let's see this inside our browser as you can see the spans
are creating inside the body section and they are removing just uh by using the set timeout method
it's created after 3 seconds we don't have any SP this concept is can be used for creating
a very cool animations and also some like a congratulation or some uh things in your website
that you want some beautiful things comes from the top or bottom so I hope you enjoyed this project
and and learn many things and see you in the next project all right welcome to another project
in this project you're going to create an auto text effect animation as you can see from the
final version of our project we have a type in effect here which shows the careers of the
person we going to create this type effects using JavaScript and as you can see the careers
change after each other for example the first one is YouTuber then we have web developer
freelancer and finally we have an instructor an instructor has n instead of having a and
we're going to learn the tary operator to create such a conditional statements so see you
in the next section for the HTML part of our project all right let's start our project first
we open the visual studio code we close the get started Tab and here we click on file and open
folder I would like to create the project as usual in my desktop but you can create it
anywhere you like in your computer so we click here and we click on new folder
button to create a new folder we name the folder photo text effect animation and we
press enter and here we click on select folder and we close the get started tab again here now
we can create our HTML file so on the left side in the Explorer section we right click and we
click on new file we name the file index.html so we write index.html and we press enter now
we have our index. HTML file here on the right side which is completely empty but we can use
an exclamation mark to create an HTML 5 boilet plate so we write an exclamation mark and we
press and choose the first Auto suggestion here you can see the HTML 5 boiler plate we can use
alt C to turn on the WRA to see all the code we open the browser here inside the visual studio
code using the live preview extension that we have installed so we right click and we click
on live preview Show preview here on the right side we can see our browser which is completely
empty but with the title document let's change the title to be the name of our project which is
auto or auto text effect animation we close the Explorer section by dragging this line to have
more space and we can see all the codes in the body section we just have a container I mean the
a div with a class of container and inside the this Dev we just have a H1 that's saying I am a
YouTuber so later using JavaScript we're going to add some autotex effect that will change this
YouTuber to other carriers like web developers or freelancer so for now we just hardcoded the
H1 here so we can uh in the next section we can use CSS to style our page so see you in
the next section for The Styling our project all right in the last section we have finished
with the HTML part of our project in this section we're going to start adding some styling to our
project using CSS so first we need to create a CSS file so in the in the left side we open the
Explorer section using control shift e or we can open it here in the view menu Explorer and here in
the left side we right click and we click on new file or just we click here and we name the file
stall. CSS and we press enter before starting our project using CSS we must include a link to
the CSS file within the HTML code so we go back to the index. HTML and just under the title tag
here we add a link tag we just write link and we click on the third Auto suggestion the one
with the CSS as you can see now we have a link tag with the relationship between the HTML file
and the external instal sheet which is install. CSS file and as both files the index.html and
the stet CSS are located at the same directory we just need to write a stalled CSS for the URL
and H ref attribute defines the destination of the link or the URL all right now we can use CSS
in our project we save the file and we close the explor section and we go to sty the CSS to start
start The Styling our project we open the browser and increase the size a little bit more and we
start with the body section we remove the margin the default margin of the body which is the
space around the body section by using margin zero as you can see we don't have any margin
anymore and we change the display to flex so we can bring the uh this title to the center
horizontally using justify cont content Center so we write justify content and we choose Center
for this property now we can see our text in the center horizontally and for bringing it to the
center vertically we just need first to set the height of the body to be 100% of the viewport
height which means the 100% of the screen size and we set the Align items to be Center now we
can see our PEX in the center both horizontally and vertically let's change the background color
to be for example salmon color and let's change this the font of this text and if I would like
to bring some fonts from Google uh font so we go to the to the desktop we click on Google Chrome
or any browser you would like to use and here we search for Google font and in the search result we
click on fonts. google.com here you can see many text uh fonts you can write here for example
I am a YouTuber to compare the fonts with the text you want to have I I I'm actually decided I
have actually decided to have the font permanent marker for our project but you can choose any
font you like for your own project so we click here and and we click this select this style
and here on the right uh we click here in on the import and we copy the code in the middle
of the style EG so we copy it and we go to the vs code and just at the top before the body we
paste the code using control V we can use alt C to turn on the word dve to see all the code
and now we can uh we can go back to the browser and just under this code we have font family
permanent marker and a cursive marker backup so we copy this we go back to the visual studio
code and just under this we paste that now we can see the the font has been changed to the
permanent marker uh I think that's it for our CSS styling in the next section we're going to use
JavaScript to change the this YouTuber to other uh carriers and also add some uh Autotext effect
that shows typing as 12 so see you in the next section all right in the last section we
have finished installing our project using CSS in this section we're going to start adding
functionality to our project using JavaScript so first we need to create a Javascript file so we
open the Explorer using cont shift e and on the left side we right click and we click on new
file we name the file index .js sometimes the the code files goes to the right side which has
the browser you can bring them just by dragging the tab and bring it here so now we can see
the browser in real time uh before using the JavaScript for our project we must add a link
to the Javascript file within the HTML code so we switch to the index. HTML file and just under
this T and the at the end of the body tag we just at a script tag we just write SC and we click
on this on the second Auto suggestion the one with the SRC now we have a script tag and the SRC
attribute defines the destination of the link as both files I mean the index. HTML and the index.js
all located at the same directory we just need to write here index.js for the URL all right now we
can use JavaScript for our project so we go to the index.js we close this uh Explorer section by
dragging this line uh first we need to uh get the container of the project I mean the B with the
class of container because we want to manipulate it inside this div so by for returning a
div with a class we just need to use Query selector method so we just write here constant
and we name the constant container element and we write documents. selector and inside a set of
parentheses we write the selector for that class which is dot container we can use alt C to turn
on the word WRA and we can see the code clearly in that way all right the things we want to do
is just uh manipulate this container we just for example use container. element and we change
the enter HTML for example to an empty string or whatever you want to write and you can see it
here so before doing that because uh we can we want to add some HTML tag so we add a back tag
and we just open the back tag and we go back to the index. HTML and we cut this H1 tag and we
go to index.js and we paste it in the middle of the back text so we can see the same things we
had now as before but uh we want this YouTuber to be dynamic we want to have more careers so we
make an array here so we create a constant and we set the array name to Career or careers we just uh
create an array and the first element would be the same one we had YouTuber just make it capitalize
and uh the second perer would be for example web developer the third one would be freelancer
and the last one just say for example instructor all right so in order to see the
different carers here we can delete this and instead of this we have some uh variable and we
we target this carrier carriers and we just say for example the first element we get YouTube the
second element we get developer we just need to change the index inside the array three we get
the instructor all right we set it to zero so instead of having this hardcoded we can create
an uh variable we just say uh carrier index and we set it to zero as default and we just instead
of this we just write carrier index all right and uh so we just need to have a bring this inside
a function so we create a function and and we name the function update uh text and we cut this
one and paste it inside this function we can call this function once to have the text and also we
need another variable to have the index for the character of the each element because we want to
add the a typing effect so we just say character index and we set it to zero and instead of writing
carriers uh carriers and carriers index to get the full element we just add some a slice method here
A Slice method actually returns parts of a string and if you want to get only for example the first
character you just write zero and one so you get the first character or you want to get this the
first two characters we get just right zero and two so we need to make this number the second
number Dynamic 2 and we just use the character index so instead of that we use character index
so now the index is zero but we're going to in increment it using Plus+ and we're going to have
a set time out to sorry set time out to call this function uh more than one time after a delay so
for the delay we just say 400 milliseconds and we don't need a function because it's just one
one line of function we just write down update text is enough so now you can see that when we
refresh the page the YouTube starts typing to the end but we don't get the next element yet
so we need to add a condition here we just say if this character index reach to the to its end
which is the this element uh length so we just say uh carriers carriers array which is here and
we get the the current index the carrier index so inside this we just say carrier index uh so now
and we just say dot l so when the this character index incre incremented and reached to the end
we can uh activate this uh statement or and uh we just need to write here increase the carrier
index so just carrier index Plus+ so we increase it one time so when we YouTube finish goes to the
next one but we need to reset the character index as well so it comes to the first for the next
element so we get YouTube sorry we should set it to zero not increment yeah now we get YouTube
after that we get we have developer and we have freelancer and finally we have instructor but
after instructor stops and the reason we don't get the last letter is the we should put this
character index Plus+ at the top not after this so we cut this and bring it to the top so now
we get all the uh elements correctly so here the YouTuber should we have a we should add a ra
R here so we yeah so we have freelancer instructor and after instructor it stops working in order
to reset it again we need to reset the character in sorry the carrier index to zero as well so we
add a condition here we just say when the career index reached to its end which is the number
of this array so it's careers. lens so in this in this case just set the carriers index to zero
so now we have YouTuber we developer freelancer and finally we have instructor but we have a here
instead of uh having n for instructor we need to have a n instead of a because we uh we should
say I am an instructor so for in this case we need to change this hardcoded a here so we have
I im a instead of a we create a variable and uh we just say if this uh the element which is a
carrier carriers and the elements we can get by just saying carrier index if this one the first
character of this one when we can use a slice again and we get just the first character we just
say if this one is equal to I for instructor so we just say use n and otherwise just use a so now
we have I am an YouTuber I'm a web developer I a freelancer and finally we have I am an instructor
yeah that was a a quick project project but it has too many things that you could learn I hope
uh you enjoyed and learned many things uh if you have any question please uh let me know
in the Q&A section but see you in the next project welcome back to another project in this
project we're going to create a mini calendar as you can see from the final version of the
project we have a the page of calendar that's showing a the current date of our computer here
if you open the the calendar of my computer you can see that the it's December 2021 Thursday
and uh the DAT is second we're going to use JavaScript to dynamically get the information
of the computer and change this page according to that information so we always getting the
current date in our page in the next section we're going to start with the HTML part of
our project so see you in the next section all right let's start our project first we
open the visual studio code and here we close the get started T in the file menu we click
on the open folder and here we decide which place we want to create a folder I would like to
create it inside my desktop but you can create it anywhere you like in your computer so here
we click on the desktop and here we click on the new folder button to create a new folder we
name the folder mini calendar which is the name of our project we press enter and here we click
on the select folder button to select the folder we close the get started tab again and here on
the left side in the Explorer section we right click and we click on the new file to create
our HTML file we name the file index.html and we press enter now on the right side we have our
HTML file which is completely empty but easily we can create an HTML five Oiler plate using an
exclamation mark so we write an exclamation mark and we click on the first Auto suggestion we can
open the browser inside the visual studio code by using the live preview extension we just need
to right click and we click on the live preview Show preview we can close the Explorer section
Now by dragging this line to the left to have more space on the right side and here actually
we can use alt C to turn on the word RP so we can see all the codes on the right side now we
have our browser which is completely empty but with the title document let's change the title to
our Pages name our project's name which is mini Project Mini sorry mini calendar and in the body
section we add a container to to cover all the uh calendar and we call it calendar container we
press enter to accept the auto suggestion so now we have de with the class of calendar container
then we have four paragraphs the first one is for the MTH month's name then we have the day name
and day number and the year so the first one is the month month's name so we just add a paragraph
with a class of month's name and also with the ID of month's name and inside this paragraph We
just write April for example so we can uh we can use CSS to to style it before for getting
this months dynamically using uh JavaScript so this is just a hardcoded name April U the time
now I'm recording this video is December 2021 and it's the 1st of December so we just uh add
another paragraph with a class of day name for example the Wednesday or Friday or whatever with
the idea of day name and inside is for example Friday and then we have another paragraph saying
day number for example first second third so we just say day number for the class and for the
ID day name as well and inside we just say for example 20 and the last things is the year so
we just have a class of year and and the IDE of year and inside we just say 2020 it's actually
2021 one now but just uh having a template to be able to install it in the next section yeah
that was it for the HTML part of our project we just hardcoded some uh data fake datas so
in the next section we're going to use CSS to install this calendar and in the following
section we are going to use JavaScript to dynamically create this uh datas based on the
real calendar so see you in the next section all right in the last section we have finished
with the HTML part of our project in this section we're going to start St styling our project using
CSS first we need to create a CSS file and here we open the Explorer section using control shift e
and on the left side in the Explorer section we right click and we click on the new file we name
the file is style. CSS and we press enter before using CSS in our project we must add a link to
the CSS file within the HTML file we go back to the index.html and just under the title tag we add
a link tag we just write link and we click on the third Auto suggestion the one with the CSS now we
have a link tag with the relationship between the HTML file and the external install sheet and the
hre which means the URL of the file is installed CSS because both files the index of HTML and the
St CSS are located at the same same directory now we can use CSS in our project we save this file
using contrl S we close the Explorer section to have more space on the right side and we go to
started CSS and we start with the body section we write down body and we open inste of curly
braces we just write first we remove the margin the default margin around the body section the
space around the body section using margin zero then we have to bring them to the center first
we bring them to the center horizontally using display Flex then Justified content Center then
we can bring them to the center vertically using uh we should set the height to be 100% of the
viewport height which means the 100% of the screen size horizontally and then we set the Align items
Center to bring them to the center vertically let's change the font of the our project using
font family and we set it to be cursive all right next things uh we need to do is to change
the background color of our body we just change the background color to slate blue and yeah that's
that's it for the body section let's install the container the calendar container we copy this and
we paste it here by dot at the beginning because it's a class we change the background color to be
white we can see it now and we change the width to be 300 pixels we bring all the inline items
to the center using text align Center and we add a border radius to round the border so we just
write border radius we set it to be 10 pixels and we can add some box Shadow the first value in
the Box Shadow is the position of the horizontal Shadow we set it to be zero the next one is the
position of the vertical Shadow we set it to be four pixels you can see it here then we have the
blow radius we set it to be 8 pixels and finally we have the color and we can use rgba function
to set the color so for the red green and blue we set zero for black colors and we set Alpha
to be3 which means 30% transparency or opacity all right that's that was it for the calendar
container we can use alt C to turn on the wrap so we can see all the codes then after that we uh
we install this Mount name which is this April we copy this we paste it here with the DOT and first
we remove the margin then we add some background color to be for example orange red then as you can
see the Border radius is gone from the previous container because this one is overlapping the its
parents but we can use overflow hidden here to remove the extra overlapping of the children now
we can see the border to be rounded let's change the color to be white the text color then we add
some padding around the the text of the element we set it to be 10 pixels and we want to make it a
little bit bigger so we change the font size to be 30 pixels and we want it to be bold so we change
the font weight to be bold all right that looks fine let's uh let's move on to the this section
the Friday or they call it uh day name so we copy this we go back to the stallet CSS we paste it
here we change the font size and make the size of the font bigger but and we set it to be 20
pixels we change the font weights to 300 or uh even we don't need it because it's already 300 as
a default so I think it's fine we just change the color to be a little bit lighter so we change the
color to uh dark gray you it looks better after that we go to this number the day day number
we copy this and here we target it using dot day number is the we just change the font size
first will be 80 pixels and as you can see it has a lot of margin so we change the margin to be
zero and the color is already black we don't need to change it and also we set this one to be bold
as well we just say font way to be bold that was it for the day number and then we go to the next
one which is year so we target it here the year we add a margin to the top and button 20 pixels and
zero for left and right we change the font size to be 20 pixels and also we change the color to be
dark gray and also font weight to be 500 that's uh looks fine now we can check this in the browser
as well by using this hamburger icon and clicking on the open in browser and this is just like a
static website it always shows April Friday 20 2020 but in the next section we're going to use
JavaScript to dynamically get this information from the uh the real date of our computer
so and then every day it's going to change and shows a new value so see you in the next
section for the JavaScript part of our project all right in the last section we have finished
styling our project using CSS in this project we're going to start adding functionality to our
project using JavaScript first we need to create a Javascript file and here we open the Explorer
section first using control shift e and on the left side in the Explorer section we right click
and we click on the new file we name the file index.js and we press enter we bring the file here
on the left side so we can see the browser on the right side and before adding functionality to our
projects using JavaScript we must add a link to the Javascript file within the HTML file so we go
back to the index.html and just at the end of the body section we add a script tag we just write
SC and we click on the second Auto suggestion the one with the SRC as both files I mean the
index. HTML and the index.js are located at the same directory we just need to have index.js
for the URL now we can use JavaScript in our project first we save this file using control
s we close the Explorer section to have more space on the right side and inside JavaScript we
bring these items the the month's name the day name the day number and also the year so we have
these elements here they have the ID as well for example if you want to bring this part we just
need to bring this uh element and we can bring this element because it has the ID attribute we
can use the get element by ID method so here we create a constant and we set it just say month's
name and we equal it to document. get element by ID and the ID is month's name we can use alt C
to turn on the word draft so we can see all the code we close this one a little bit and the next
things we want to bring is this uh day name so we just say const day name document. getet element
by ID and we just say day name next is the day number and the ID is here day number we create
a constant we call it day number or day num we just say document. get element by ID and we set
it to be day number the next one is the year so we just say PS year you can add element at the
end so it's will be more visible and readable all right so we just say document. get element by
ID and the ID is Year all right we already brought all the elements we need to manipulate inside
the JavaScript and then we need to get the data from the system using a date uh function we just
need to create a constant we call it date and we can get the date data of the computer using new
date now if we conso lock this date and we open the div tools here open the tools paint from
this hamburger menu and we go to the console section we see that we got the uh information
of my computer I'm in Australia so the the time is Australian Eastern Standard Time and it's
Tuesday December 2nd 2021 but we want this we get this specific information from these datas
and we replace these items by these data so uh for example if you want to get the the date the
day number we can use data. getet dat and we need to open a parenthesis because it's a function
and we getting two because it's the second of December and for getting months we can replace
this date to months you're getting 11 because it's December shouldn't be 11 actually I think yeah
it's it's start from zero and 11 is like a the last month is 11 so January will be zero all
right and then we have we can get a year for example using get full year method now we getting
2021 all right let's save this information inside some constant separately and uh first we just say
cons uh or we can easily replace these things so for name this one we can just uh copy this and
we change the inner text of this and for example if you say whatever we write down here we see in
there but we want this to be dynamic so we we just need to get first the months we just say const
months is equal to date. get months which is 11 we already saw and then we here we just say date do
to local string string because we want to get the month like a string and then the language we want
is English or any language you want to have and after that we want this months to be long as soon
as we change this one we see that December which is the current months here when I'm recording this
video the next things we want to change is this uh like a weekday name day name uh so here we have
day name name element we change this inside it using inext and we just get the date do to local
string and the language would be English and after that we set the weekday to be long we can we are
getting Thursday now which is the correct uh day name next things is this number day number it the
correct one is two so we can we can this is the like a yeah day number element we change it here
dot enter text and uh this is very simple we just need to have date. get date we getting second the
last thing is the year that is simple too so we just say the year element from here dot inner text
equal to date. get full year and we open a set of parentheses get the function now we are getting
2021 which is the current year and this is the correct date that I'm recording this video and
if we come back tomorrow we get third and so on and this is always the dynamic and we can use kind
of this calendar for our website or we can create some uh beautiful uh different calendars projects
later by getting the the idea of this project that was it for our project I hope you enjoyed
and learned many things see you in the next project welcome back to another project in this
project we going to create a button ripple effect as you can see from the final version of the
project we have a button and if we hover over the button from any direction we see a ripple
that starts from that position for example if you go from this side we can see that the
Ripple starts from that side we're going to use uh JavaScript to get the position of the
mouse when we enter from any direction of the button and also we going to use CSS to create
such a beautiful uh reping effect in the next section we're going to start with the HTML
part of the project so see you in the next section all right let's start our project first
we open the visual studio code and here we close the get started tab in the file menu we click on
the open folder I would like to create the project in my desktop but you can create it anywhere
you like in your computer so here we click on the desktop and here we click on the new folder
button to create a new folder we name the folder uh button ripple effect which is the name of our
project we press enter and here we click on the select folder to select the folder we close the
get started tab again and here on the left in the Explorer section we create an HTML file we right
click and we click on on the new file we name the file index.html and we press enter now on the
right side we have our index.html file which is completely empty but we can use an exclamation
mark to create an HTML file forer plate so we write an exclamation mark and here we click on the
first Auto suggestion in order to see the browser inside the visual studio code we can right click
and we click on live preview Show preview which enables us to see our website in real time when
we are changing our code now on the right side we see our uh website which has the title document
let's change a title to our Page's name which is button ripple effect and let's close this Explorer
section to have more space on the right side and in the body section we just have a button to to
be in in the middle of the screen later and we can and add the ripple effect using JavaScript
and CSS to this button uh we use an anchor tag for this button and the class we want to add
is BTN and the H would be an Hash a hashtag which means that we're not going to anywhere by
clicking on the button and we have a span in the middle and we just write button the reason we
are adding span is because we want to later add effect on the button and in order to see the the
the text inside the button when we hovering over the button and we are adding the effect we want
to uh uh bring up this spam using zindex later we going to see it and you're going to understand it
clearly but for now we just uh write it like this and in the next section we're going to use CSS
to style this button and bring it to the center and add the hovering effect and also the ripple
effect so see next section for the CSS part of our project all right in the last section we have
finished with the HTML part of our project in this section we're going to style our project
using CSS first we need to create a CSS file we just open the Explorer section using control
shift e and on the left side in the Explorer section we right click and we click on the new
file we name the file style. CSS and we press enter before using CSS in our project we need to
add a link to the CSS file within the HTML code so we go back to the index set HTML and just after
the title tag we add a link tag we just write link and we click on the third Auto suggestion
the one with the CSS now we have a link tag with the relationship between the HTML file and the
external Excel sheet which is theel do CSS the HF attribute defines the destination of the link and
as both files I mean the index. HTML and solid CSS are located at the same directory we just need
to have a solid CSS for the URL and uh now we can use Javas uh we can use CSS in our project we
just close the Explorer section on the left side by dragging this bar to the left and we save this
file using control s and we go to stallet CSS and we start with the body section of our project we
just WR body we open a set of curly braces first we remove the margin the default margin around the
body of the body element using margin zero then we want to bring this button to the center first we
bring it to the center horizontally using display flex and justify content Center then for bring
it bring it to the center vertically we can use we can set the height to be 100% of the viewport
height which means all the screen size from top to bottom then we can use align item Center to
bring it to the center vertically Let's uh add a background color we just say background color
and we set it to Lis blue or l i blue which is a creamy color then we change the font of this
button using font family and we set it to be sent serf after body section let's start styling
the button the Button had the class of BTN so we just need to Target this class using dot BTN we
just change the background color first to see it properly we just set it to be pink we change the
padding we add some padding to the top and bottom 20 pixels and left and right 40 pixels so we have
a very big button so we can see the ripples later easily let's change the Border add make the border
around it using border radius and we set it to be five pixels and uh let's add some box Shadow to
the botton the first value in the Box Shadow is the position of the horizontal Shadow we set it
to be zero the next one is the position of the vertical Shadow we set it to be four pixels we
can see it at the bottom then we add the below radius using we set it to be eight pixels the
The Shadow the color of the Shadow is blue we want it to be black uh we can use rgba function
to set the color we use zero for red zero for green and zero for blue for the red color and
we just set the point three for the alpha value which means 30% transparency or opacity now we
have a beautiful button here let's remove this line under the button text using text decoration
nonone and let's change the color of the text to Black then uh that's fine for the button for now
and the next things is to add the hover effect and add something inside that has a rle effect so
in order to add this we can use the before pseudo element to add this content this we have to set
the content to empty first for the before and after studo elements and then we need to position
this absolute we want to position it absolute so in order to have this one absolute we need to use
its parents to be uh relative so we position this relative and we cannot see it yet let's add some
color to it which we set the color to orange red but still we cannot see it we add the width to
for example 20 pixels and height to 20 pixels as well so we can see this one here and uh we
want to bring it to the center so we set the left to 50% and top to 50% as well and in order
to bring it exactly to the center we can use uh I mean exactly but because we are we brought the
edge of the this uh element to the center not the middle of it so we can use transform translate and
we set the X and Y to minus 50% so it it came to the center exactly let's add some border radius it
set it to be 50% so it be it becomes like a like a circle and uh that's that's fine for it and we
want when we hover over the button this circle uh the size of this circle increases so in know
order to Target the hovering effect we can just say BTN hover so when someone hovered over the the
button and we want to Target this before pseudo element and we set the width to be for example
300 pixels and height to 300 pixel as well so when we hover over them we can see a big circle
but uh it's bigger than the button so we can use here uh overflow hidden for a button to remove the
extra hovering so we just say overflow headen so now we getting this one and in order to see that
uh ripple effect we can use a transition to make it a little bit more smooth and the transition
should be on both width and height so for the width we add .5 second and for the height so
we add a comma here for height we add5 second as well so now when we hover over the bottom and
we can see this hovering effect so let's remove this width and height so we set it to zero so we
don't see it but anywhere we enter the button we see this hovering effect from the center because
we set the left and top to be in the center uh later using JavaScript we're going to Target the
mouse uh position and we Center this circle from the position of the mouse let's bring this button
to the top as you remember we had a span for the button text so we can Target this here we just say
BN and we we target that span and we change the Z index to the one but before doing that we need to
change the position to relative and we change the Z index to one then the normal default Z index
is zero but when you set it to one it comes over all the elements so now we see the button over
everything else that was it for the CSS part of the project project in the next section we're
going to add the functionality to our projects using JavaScript and we are going to uh start this
Rippling effect exactly from the uh the place that the mous enter into the button so see you in
the next section for the javascrip part of our project all right in the last section we have
finished with the CSS part of our project in this section we're going to start adding functionality
to our project using JavaScript first we need to create a JavaScript file we just need to first
open the Explorer section using cont shift e and on the left side we right click and we click
on the new file we name the file index.js and we press enter now we have our index.js here but
before using the JavaScript in our project we must add a link to this index.js file within the
HTML code so we switch to index.html and just at the end of the body section we add a script tag
we just write SC and we click on the second Auto suggestion the one with the SRC the SRC attribute
defines the destination of the link and as both files are located at the same directory we just
need to write the index.js for the URL now we can use the JavaScript in our project let's close
this Explorer section first and then the only things we need here is this button element we need
to return it inside the uh JavaScript and the the button has the class of BTN so in order to return
a an element with a class we just need to use PR selector method so we just write here BTN element
equal to document. P selector and the element we want to return is button so we just write BTN
here and we need to add add event listener method to this button to track the uh mouse event when
we moving the mouse inside the button so we just say BTN element. add event listener and event
you want to listen is mouse over and when the mouse over happens we want to trigger a function
and here inside this parenthesis we can get the event which is the position of we can get the
position of X Y and anything inside uh related to this M M over event let's conso lock the event.
page X so when we open the console log when you go inside this button we can see a number inside
the console when we move it we can see different numbers in the left we have a smaller in the
right we have a bigger numbers but this x is from this point to here all right and we we
have also the Y we can get the Y as well so this is the position from the top to this place
but in order to get the position exactly in the inside the button for example here will be zero
and increases until here for the X and from the top to bottom we we need to subtract this amount
from the position of the button from the top so in order to get this one we can use BN element dot
for the Y for example we can use offset at top now when we go here we can get the position from the
top of the button as you can see it starts from zero it goes to the button here so here at the top
it's almost zero it shows minus one and from the botton is like a 57 for the X we need to subtract
this number from the offset left instead of offset left top so here should be one or near near one
they you see minus one and at this way would be 125 so in this case we can set this value here uh
left and top instead of Center we just get this point any point that the mouse is entering but uh
unfortunately you cannot have access to the before pseudo class pseudo element inside JavaScript
because the before and after pseudo elements are not part of the Dom but the the things we can
do is to is just add a variable here and we change the variable inside the JavaScript so here inside
this before element we just uh add a variable and we we call it for example X position and for the
top one we just say for example y position and we can change this variable inside this inside
JavaScript using set property method so here uh first let's uh save these numbers for example
we save this one we call it X and we we copy this we change this y to this one y and uh we
change the variable that we have created here in this way we just write down that style because
we want to change the style and we change this set property and the property we want to change
is expositions inside a double code we just write down X position and we set this to be
equal to this X Plus pixels because this is just a number we wanted this uh left and top
are base of pixel or percentage so we do the same things for the Y as well so we just add the
use the style and set property and this one is y position and the value is we getting from here
y plus pixels so now if we enter from any size of the button we can see the ripples starts from
that point so the the center of the uh the the circle starts from here and increases its size
from Top This Way That Way anywhere yeah let's check this inside the browser as well so we
open this inside the browser you can see it here all right that was it for our project I
hope you enjoyed and learned many things that was a kind of a cool button that you can use
for your own website so see you on the next project welcome to another project in this
project we're going to create a random image feed as you can see from the final version of the
project we have six images and when we refresh the page we see new random images each time also we
have a button at the bottom of the page so when we click on this button we can see new images
adding to the website we going to use a website called Lauren pixum to get the images so see
in the next section for the HTML part of our project all right let's start our project
first first we open the visual studio code here we close the get started Tab and in the file
menu we click on the folder we click on the open folder I would like to create the project in my
desktop but you can create it anywhere you like in your computer so we click on desktop and here
we click on the new folder button to create a new folder we name the file uh for example random
photos which which is the name of our project and here we select the folder we close the get
started tab again and here on the left side in the Explorer section we create an HTML file so we
right click and we click on new file we name the file index.html and we press enter now on the
right side we have our index.html file which is completely empty but we can use an exclamation
mark to have an HTML 5 Oiler plate so we write an exclamation mark and we click on the first Auto
suggestion we can use alt C to turn on the word wrap so we can see the code clearly in order to
see the title and the browser inside the visual studio code we can use the live preview extension
so we right click and we click on live preview and Show preview here on the right side we have our
browser which is completely empty but with the title document let's change the title let's first
actually close this Explorer section by dragging this line to the left and we change the title to
random photos so we can see the random photos in the title section in the bar Let's uh decrease
the size of the browser and in the body section let's add a container which covers all our image
in our page we just say container or just let's let's make it more specific by saying just image
container image Dash container and here we click on the auto suggestion to have a div with a class
of image container for the images I would like to use a website called Lauren pixum uh to get some
random images so we go to our desktop and we click on the Google Chrome here we search for lurm
Pixel and we press enter yeah I missed the S so in the first result we have a website called
pixum do photos and the the name of the website is Lauren pixel so we click on this website if
you read the tutorial it's it's very easy to use you can have this link to have a photo with
a size of 200 to 300 if you copy this and we go to a new tab and we paste this link and we press
enter we get a photo and if you paste it again and we get another photo if you want the photo to be
square and only be for example 200 to 200 we can use this link so we copy this and teste it we get
a square image each time we paste this one on the browser all right sometimes uh the browser
catch the photo and show you the repetitive image in order to avoid this we can add some uh
query at the end and just say random one random two and so on so we always get as the same as a
different image so we we need this kind of Texs in our HTML so we copy this two Texs and we go
back to our Visual Studio code so we paste the link and we can see two different images now here
but uh we don't want the image to be this size we just want it to be 300 to 300 so we delete the
200 section as you can see now we have two image let's add another one so we copy this using alt
shift Arrow done we change this two to three so we get three images and after this container we
added a button we add a button with a we had a button with a class of ptn and inside the button
we want to just write down load more so here we choose the auto suggestion so we get a button
with a class of BTN which saying load more at the end we going to use this button to load more
images from the website using JavaScript and also in the next section we're going to use uh CSS
to install our project so see you in the next section all right in the last section we have finished
with the HTML part of our project in this section we're going to insty our project using CSS first
we need to create a CSS file so we open the Explorer section using control shift e and on the
right on the left side we right click and click on new file we name the file sty do CSS and we
press enter before stying our project using using CSS we need to add a link to the CSS file within
the HTML code so we go back to the index. HTML file and just under the title tag we add a link
tag we just write link and we click on the third Auto suggestion the one with this CSS now we have
a link tag with the relationship between the HTML file and the external sty sheet the H attribute
defines the destination of the link and as we as both files I mean the index.html and a solid CSS
are located at the same directory we just need to write a solid CSS for the URL now we can use CSS
in our project so we save this file and we close this Explorer section by dragging this line to
the left so we open this one a little bit and we go to the st. CSS section first we start with
the body section so we write body we open a set of early braces first we remove this margin the
default margin using margin zero then we can use display Flex to bring the items to the center
horizontally we just write display flex and as you can see the button uh came to the right
side we can use flex Direction column to bring back the item to the end of the screen then we
can use align item Center to bring the items to the center horizontally as you can see the the
button came in the middle but still we have the images uh on the left side we can decrease the
size of the image to fix this problem or yeah just have this if the class of image container
so we just say image container and we can uh use text align Center to bring the all the images
and in the center as you can see when we open the when you increase the size of the browser
the we have two images and when we decrease we have one images so it's already responsive and
we just need to Target the image and just uh make it more beautiful let's change the background
color of the body using background color we just choose the color I would like to choose the color
called Brown no yeah brown color looks fine then we change the image just say image container IMG
we target this IMG tag inside the class with the IMG container so we can add a margin just say
20 pixels maybe it's too much just 10 pixels is fine yeah just uh change the Border radius we
add a border be round the border of the images you using border radius which we add a 10 pixels
border let's add some box Shadow and we add some shadow shadow effect around the elements so we
the first ele the first value of the Box Shadow element box Shadow property is the position of the
horizontal Shadow we set it to be zero and then we have the vertical position of the vertical Shadow
we set it to be four pixels you can see the dark here we set eight pixel for the blur and and the
last value is the color of the Box Shadow we use rgba we use rgba function and we set z0 and zero
for the red green and blue values which gives us the black color and then we have Alpha we set it
to be3 which is 30% transparency let's add some background color we just say light gray you cannot
see the background color because the the width and the height of of the image is not defined yet so
we just say width to be 300 pixels and height to be 300 pixels as well so this background color
helps when the image is not loaded it's kind of preloader for the image as well especially when
we have too many images we can see the background color all right let's uh install the button here
so we target the class of etn so we just say vtn we remove the which is the background color to
be for example slate blue we remove the border border none and then we add some padding we just
say 10 pixels for the top and button padding and 20 pixel for the left and right let's add some
margin so we just say 20 pixels margin we see the button here let's change the color of the
text to be white then let's add some border sorry border we round the border of the buttons using
border radius just five pixels and we can add some box Shadow as well so we just say box Shadow
0% zero for the horizontal Shadow position of the horizontal Shadow four pixels for the position
of the vertical Shadow eight pixels for the blur and we use the black color and 30% transparency
all right let's change the cursor to be pointer so when we hover over the button we can see a
pointing hand then also let's use the hover Studio class so we change the opacity of the opacity
of the button when we hover over it so we just say 90% opacity so you see a little bit change all
right that's it for the CSS part of our project in the next section we are going to make this uh
images to comes dynamically and when we click on the button we can see more images loading
inside our website we'll see you in the next section all right in the last section we have
finished styling our project using CSS in this section we're going to add functionality to our
project using JavaScript we're going to add some uh add event listener to this button when we
click on this button we can see new images coming from the Lauren pixon website and we keep
we can keep loading images on and on so first we need to create a Javascript file so we open the
Explorer section using control shift e and on the left side we right click and we click on new
file we name the file index.js and we press enter before using JavaScript in our project we need to
add a link to the Javascript file within the HTML code so we go back to the index. HTML and just
at the end of the body tag we add a script tag we just add SC and we click on the second Auto
suggestion SRC defines the destination of the link so as we have index. HTML and index.js in the
same directory we just need to write index.js for the URL now we can use JavaScript in our project
the first things we need to do is to bring this div with the class of image contain container and
return it inside the JavaScript inside a constant so we can add new images using a create element
method because the we have class here we need to return the element using the query selector method
so we go to the in index.js we create a constant and we call it image container element and we
just write document. query selector to return the element and the this C selector is do image
container as the same as here we can use alt C to turn on the wrab so we can see all the code
and also we can close this Explorer section to we so we can see the code clearly and we have more
space for our browser the other things we need to bring is this button so we can add some event
listener to the button the button has a class of PN so it's the same as above we just create
a constant and we just say BTN element and we change we add the document. query selector and
inside a set of parenthesis we add BTN for the CL CSS selector all right so we add we add the
event listener to this button first which is a BTN element. add event listener the event you
want to add is Click so when someone click on the button we want to trigger a function we just
add the function here in order to see that it's working we can use log console log and then we
just say clicked so we open the console using this hamburger uh icon and we click on the open
def tools pain so in the console section now if we click on the button we can see clicked each
time we click so we create a function here we just say add new images and the the things this
function does add more images to our container so uh for in order to create an image image element
we just need to use the create element method so we just say New Image new IMG element we just say
document. create element and the elements we want to create is IMG and the sources for the new the
IMG because the IMG has a source attribute so the source will be so we just a new image element.
SRC equal to it would be the same Source but we want to change this random number so we copy this
we copy the first link and we put it here but we put it inside a set of back Teck so we can do this
number randomly so instead of one we just create a variable using dollar sign and open a set of Da
braces and we just create a random number we using math. random and the number we want to create
the number between for example zero and 2,000 so we multiply it to 2,000 but this number is now
actually because this is a random number between zero and one so this number is not like a rounded
in order to create to round the number we need to wrap this inside the math. floor so in this case
the number would be between uh 0er and 2,000 so now we create the image and we set this SRC now
we can add it to inside the container we just say container image container element that we we got
here that a pen child so we're going to append the child which is this new image and we write
down New Image here to appendant as a child so the things we do here when we click on the button
we we call this function add new images so now we have three images when we click on the load more
we see one more image coming each time we click in order to see more images we can add instead of
adding only one image we can put this one inside a loop uh if for Loop so we just create a for
Loop let me do it again so you just write four and we click on for Loop or Auto suggestion and
now we have uh index which is from zero and it should be until the number of images we want so
we just say image number and we set this image number before calling the function we just say
let image number to be for example 10 so in this case we're going to create 10 images and inside
this instead of this Con then we put our function so we control X the function and we paste it here
so now each time we click on the load more we get 10 more images it's not working now let me check
the reason it's not working because we set this uh variable as a lead and this variable is not
access accessible outside this function we just need to delete this slit now when we click on the
load more we get 10 new images Imes each time so let's increase the number of images we have at the
beginning to for example six so we just copy this three more times using alt shift and down arrow
one more time they just change this to four five and six so let's open this in the browser using
this hamburger sign and click on open in browser so when the the image is loaded when the uh let
me close increase the size so when the uh page is loaded at the beginning we have six images and
when we click on the load more we can see each time more images are loading and we never get
a repetitive image because we are creating the random number between uh 0 and 2,000 actually it's
possible to get the repetitive image but it's less likely yeah that was it for our project I hope you
enjoyed and learn new things see you in the next project welcome back to another project in this
project we're going to create a dark mode toggle as you can see from the final version of the
project we have a toggle button here and as we switch it on we go to dark mode and if we
switch back we go back to the light mode also we see a very beautiful animation a sliding mode
we going to learn key frame CSS query to create such a beautiful animations also we're going to
use JavaScript to change the background color when we switching on and off also we are going
to save this modes inside the local storage of the browser so in the dark mode when we refresh
the page you can see still the browser is in dark mode and if we switch it back to light
mode and refresh the page we still have the light mode so the user can see always the same
mode when they come back to our website later in the next section we're going to start with the
HTML part of our project so see you in the next section all right let's start our project first we open
the visual studio code we close the get a started Tab and in the file menu we click on open folder
I would like to create the project in my desktop but you can create it anywhere you like in your
computer so here we click on desktop and here we click on the new folder button to create a new
folder we name the folder dark mode Huggle which is the name of our project we press press enter
and we click here to select the folder we close the get started tab again and on the left side in
the explor section we right click and we click on new file to create an HTML file we name the file
index.html and we press enter as you can see now on the right side we have our index.html file
we can use an exclamation mark to have an HTML 5 boil plate so we write an exclamation mark and
we choose the first Auto suggest we can use alt Z to turn on the WRA so we can see the codes
clearly in order to see the browser inside the visual studio code we can use the live preview
extension so we right click here and we click on live preview Show preview now we have the browser
on the right side with the title document we can close this Explorer section so we can have more
space for coding and seeing the browser let's change the title to be the same as the name of
our folder which is dark mode toggle you can see it here as well inside the title bar then in the
body section we we uh we set a input with a type of checkbox we don't need to any name for it
the ID will be dark mode and we have a class of input as well so we can uh style it inside the
CSS using this class after this we have a l label for this input and because the ID is dark mode so
it should be for dark mode then this label has a class of label as well and inside this label we
have a div with a class of circle actually this circle is an empty circle so we're going to design
it later using CSS so when we click on the button we see a circle is moving to the right and vice
versa that's it for the HTML part in this in the next section we're going to start styling our
toggle button using CSS so see you in the next section all right in the last section we have
finished the HTML part of our project we added a input with the class of checkbox as you can
see in the browser we added a label and inside the label we had a day with a class of circle in
this section we're going to start using CSS for styling our project first we need to create a CSS
file so here we open the Explorer section using control shift e or you can use View and click on
the Explorer I use just the shortcut contr shift e so on the left side in the Explorer section we
right click and we click on new file to create a CSS file we name the file a style. CSS and we
press enter before using CSS in our project we need to add a link to the CSS file within the HTML
code so we go back to the index. HTML and just under the title tag and at the end of the H tag we
add a link tag we just write link and we click on the third Auto suggestion the one with the CSS now
we can use CSS in our project as we have a link tag with a relationship between the HTML HTML code
and the external install sheet which is install. CSS and the H HF attribute defines the destination
of the link and as index. HTML and install at CSS are located at the same directory we just need to
have install. CSS without any path so we save the file and we go back to the installed CSS to start
installing our project first we install the this uh label with the class of label so we can see it
and starting doing something so we just say label because it it's a class we need to add a DOT here
and we open a set of curly braces we just give it a width of 80 pixels and height of 40 pixels we
cannot see it yet because the color is white so let's change it background color to light gray
and uh can't see it yet yeah everything looks fine let's check this label and this is label to
yeah let's position this one absolute so because we put it inside this uh inside body in order
to give it to width and height we need to have a absolute positioning so now we can see the
label here and let's change the Border let's add some border to it to make it round so we add
border radius just say half of this 40 pixels so we get a completely round on the corners so we
get 20 pixels you can see let's uh in makes this checkbox Invisible by just targeting the here
taret targeting this class class of inputs so here we target the class of input and we just say
visibility hidden here we choose the second Auto suggest and let's bring this one to the middle
by styling the body section so we just write body we change uh we remove the margin in the body
default margin we just say margin zero we connect them to the top and we just change the display
to flex and then by changing the display to flex we can bring it to the center horizontally using
justify content Center and we can set the height to be 100% of the viewport height and using a line
item Center to bring it to the middle horizontally sorry vertically so everything looks fine let's uh
let's do this there with a class of circle Let's uh install it we just say Circle we just give it
to width of 34 pixels let's change the background color to see it just say red and we give it a
height of 34 pixels as well we can see it here and let's make it rounded by using border radius
50% and we set it to top to be three pixels but we should set the position to be absolute now the
reason we choose the width and height to be 34 pixels is because we have 40 pixels for the height
of the label if we substract 40 minus 34 we have six pixels left and we have three pixels at the
top and three pixels at the bottom so we we keep the circles exactly in the middle we also need to
bring it from the left three pixels so we now have the circle exactly in the middle now we can change
the color to white so we have a beautiful toggle now all right now we want to change the color
when the click on it first we change the curs to the pointer so when we hover over the label we
see a pointing hand and we say if this lay if this input we have is checked so when it's checked we
want to change the color of the label firstly we just say if something happen then change the label
to be for example has a background color of salmon color or yeah so when we click on it we see the
changing in the color of the Alum the next thing is I want to this circle to move to the right
side when we click on the label so we need to add animation to the circle when this one happens
so in order to add animation we just need to add a key frame so we just say key frame and we name
the animation for example uh just toggle on or going from the left side to the right side just
say 0% and and we change the transform translate X to when when it's 0% we just say zero and we
copy this and we change this one when it's 100% to be at the end which is the as as you can see
here we have 80 pixels we have 80 pixels but the but this one has 34 pixels and we want this to be
three pixels in this side as well so we just set 40 pixels here here which is enough so we turn on
alt C to see all the code and we just set this one for the coming back as well for the off tar uh
toggle off so when we click back it comes back and this should be opposite this one should be
40 pixels and this one should be zero so let's add the animation but adding the condition
here we just say input checked and the label inside the label we have a circle so we just say
darkle do Circle and this circle should have the animation which is the toggle on when we toggle
on and the animation duration is4 second and it should be linear and toward uh forwards now
we click we see that the this one is moving toward the right side the reason we use forward
if you delete forward you see when we click it goes to the end and come backs to the original
place but when we use forwards when we click the circles goes and stays at the end but we want
this animation when we click uh on the in this position when we click we want this circle to go
back so we just add the animation in the circle this is a slide off sorry the toggle off yeah
toggle off4 second and linear and also forward so we have now the cool animation the next things
we're going to do is to add JavaScript so when we click on this mode we see a dark mode in the body
section and also we want to save this mode inside the local storage of the browser so when someone
comes to our browser one time and turn on the dark mode each time he comes back to the website
see our website in dark mode so see you in the next all right in the last section we have
finished with the styling of project using CSS we made a cool animation for our toggle bar and
in this section we're going to add functionality to our project using JavaScript we're going
to change the uh background color of the body to the dark mode when we when we toggle on and
we U change it back to the white or uh daytime mode when we toggle off also we're going to save
this mode inside the local local storage so when a user comes to our website several times always
see the same dark mode in our in our website so first we need to create a Javascript file so
on the left side in the Explorer section we right click and we click on new file to create
a Javascript file we name the file index.js we bring this in this uh window and as you may know
before using JavaScript we need to add a link to the Javascript file within the HTML code so we go
back to the index set HTML and just at the end of the body tag we add a script tag so we write
SC and we click on this second Auto suggestion the one with the SRC as both fils I mean index
that HTML and index.js are located at the same directory we just need to write index.js for the
URL now we can use JavaScript in our project first things we need to bring to our Javascript file
is this this uh input so we want to know this input is checked or not so it has a class of
input and for returning a element with a class we can use a query selector method so here inside
the Javascript file we create a constant and we just say input element and we inside document we
add a fory selector method and inside the set of parentheses we just write that input so we get the
input we can use alt C to turn on the word RAB so we can see the code put clearly if we console log
now the input element we just say input element and we open the console using this hamburger icon
and open the tools pan and inside console we get the input which is checkbox if we check if this
input is in the check mode or not we can just addt checked and as you can see as default it's false
if you refresh the page you see that always it's false all right when it's in the false mode we
want this uh uh we want this body to be in the white mode and when it's uh true we want it to
be dark so we add a function here we just say function and update for example body and we just
say if the input that checked is true though this this is true then we want to change the body's
body elements we we haven't imported the body in our JavaScript here because the body is only
a tag which we can use Query selector as well we just say con body element we add a document. query
selector and inside a set of parentheses we just write body all right so we set the body we change
the body the background color of the body by using a stall method and Dot just say background and
we set it to be if it's checked we want it to be black and if not we want this body element do
style do background to be white all right so now the check is false but if we change this input
we just say input. checked equal to true so and we call this function we just say update body you
see the background color of our body became black and we have if we change this true to false to
get the white color and also we can add an event listener The Click uh the change event listener to
this toggle mode so when we toggle on we we update the body based on the this uh checking status so
here we add we bring this toggle the toggle class is this one the label the yeah sorry the input
yeah we already import returned the input so we add a event listener to the input this the input
element. add event listener the event we want to check is just the input and we going to trigger
a function when the input change from false to true or true to false the only things we need to
do is just update the body we call this function here so when we turn on you see we go to the dark
mode and when we turn it off we go to the dark uh day mode or light mode all right so let's add some
transition to the body so we can see this one more beautiful so we just say transition 4 second so
when we turn on we see a transition in the Coler the next things I would like to do is to add this
turn on and turnoff mode to the local storage and save this uh true or false so when we turn on uh
when we when someone comes to our website for the second time and based on his previous setting he
gets he see our website so we just need to update our we make a function we call it update local
storage we just need to save we just use local storage. set item method and the item we want to
save we just call it mode and we need to save this input. check as a string because in this in local
storage you cannot save the booer things like true or false so we just use json. string F method I
don't know what happened a string yes sorry Json should be capitalized. stringify method and the
things we want to stringify is this input input element. checked so here we write input element.
check so if inside the web developer tools and app inside the application and we go to the local
storage and we choose our website so when we click on this one so uh we need to call this function
too so inside the ad event listener be after updating the body we need to update the local
storage too so when we click on this button we see that we have a key here with the name of mode and
the value is true when we turn it off it become it becomes false so when we put it in true and when
we refresh the page this one stay stays true but we have to call it at the top in instead of just
saying input element that check false we need we need to call the local storage so we just say
local storage. get item instead of set item and the item you want to get is mode all right through
but this one is in the uh is is a string we want to change it back to the ban so we need to use
json. parse to return the Json from the when first we we use the stringify to to turn it to string
now we need to use parts to bring it back so now as you can see the mode is false we can turn it
on to true and someone comes to our website again and refresh the page it still see our website in
the dark mode as you can see here let's start this button in a better way so instead of using salmon
color let's use the white color in the dark mode and let's change the circle the color of circle
the background color of circle to black in the dark mode so now we see a more beautiful button
in the dark mode and in the light mode that was it for our project I hope you enjoyed and many
uh learned many things see you in the next project welcome to another project in this
project we're going to create a testimonial slider as you can see from the final version of
the project we have a testimonial box and also we have an image which is being uh positioned at
the top center of the box and also is a start to be Circle also we have a code here and with uh
author name we're going to create and generate these codes using an AI uh code generator and
also we're going to get these profile images from unsplash websites furthermore we're going to
change these images and codes for example every 10 seconds using JavaScript so see you in the
next section for the HTML part of our project all right let's start our project first we
open the visual studio code here we close the get started Tab and in the file menu we
click on open folder I would like to create a project in my desktop but you can create
it anywhere you like in your computer so we click on desktop here we click on the new folder
button to create a new folder we name the folder testimonial slider and we press enter we here
we click on select folder to select the folder and we close the get started tab again and
on the left side in the Explorer section we create an HTML file we right click we
click on new file and we name the file index.html and we press enter now on the right
side we have our in index. HTML file which is completely empty but we can use an exclamation
mark to have an H HTML 5 for plate so we write an exclamation mark and we click on the first
Auto suggestion in order to see the browser inside the visual studio code we can use the uh
live preview extension which we have installed previously so we right click here and we click
on live preview show Show preview now on the right side we see our browser which is completely
empty but with the title document we can change the document here uh let's close this Explorer
section so we have more space inside the index. HTML and also the browser and let's change the
title to be testimonial slider which is the name of our project and we can see a testimonial
slider in the tab inside the browser then in the body section let's add a container which uh
has the testimoni monial inside it so we call it testimonial uh we can call it testimonial actually
container so now we created a div with a class of testimonial container and inside this div we first
uh we add a image tag so we can have a a profile image in order to have a profile image we can use
the called a website called unsplash so we go to the desktop and we click on Google Chrome and we
search here for unlash and in the search results we click on unsplash.com here in the search bar we
search for for example user and here we see some profile pictures for example this man we click on
that in order to get the URL of the image we just need to right click and we click on copy or copy
image address we go back to our browse uh to our Visual Studio code and in inside the SRC attribute
which defines the destination of the link We paste our image link you can see it on the browser and
in the alt section we just write user image all right after the image we have a paragraph which
which uh which covers the testimonial text and we just add a class of text here in order to have
some testimonial like fake testimonial from the internet we can search for a website inside the
browser called I think the testimonial testimonial generator in the search result the first result
in the Google search result is testimonial Das generator.com so we click on this and this is a AI
based uh generator so here we just write the name of our the service or product we want to create
the testimonial for example we just say apple and generate yeah we see the testimon this is very
short we can click again to get another one or click again I want to get this one B two line uh
yeah just try another time yeah that's fine we just copy this text and we go back to the visual
studio code and we paste it inside the paragraph tag is if you scroll down in the browser you can
see the testimonial here inside the browser after this we add a H4 tag with a class of username
to add the name of the person who wrote the testimon testimonial quote we just need to copy
this and we go back to the visual studio code and we paste it here yeah that was it for HTML
part in the next section we're going to use CSS to style our testimonial box and the slider and
after that we we're going to use JavaScript to to actually automatically change the testimonial
slider every 10 seconds so see you in the next section all right in the last section we have
finished with the HTML part of our project in this section we're going to add a CSS to our
project and style it so we can have a beautiful testimonial slider first we need to create a
CSS file so in the left section we open the Explorer section using control shift e and we
right click here in the Explorer section and we click on new file we name the file install. CSS
and we press enter before styling our project using CSS we need to add a link to the CSS file
within the HTML code so we go back to the index that HTML and just under the title tag we add a
link tag we just write link and we click on the third Auto suggestion the one with the CSS we can
close the Explorer section now to have more space for our uh browser and the code section let's
save this file using control s and we go to the install. SS to start styling our project first we
start we let's decrease the size of this image so we can easily style the rest of the p uh page so
we target the image from its tag now we have an image here so we just write we can uh Target the
tag we just write IMG we change the width to be 100% sorry 100 pixels and height to 200 pixels so
we have a square uh picture now we can can easily see our website all the testimonial and the name
section so we can easily now install our project so first we start with the body section first
uh the first things we need to do to remove the space around the body element using margin
zero as you can see now we don't have any margin then we we use display Flex to be able to bring
the items to the center horizontally and we just use justify content Center to bring the items
to the center horizontally but as the we have another div here uh with a class of testimonial
container and the size of this div is the same size of the body so we cannot see the any change
in our browser so let's install that container so testimonial container and we change the width
to be for example 500 pixels you can see now and we changed the height to be 300 pixels so now
and let's change the background color so we can easily see this section so we change the color
to a slate blue and we just uh now you can see that this this section is exactly in the middle
this the same amount of margin is this way and that way so the next things we want to do to bring
this section to the middle vertically by setting the height to be 100% of the viewport height and
we change the Align items to be Center yeah here let's change the font of the website using font
family property uh we set it to be cursive so we have more beautiful uh text that was it for the
body section now we can start and continue insty our testimonial container Let's uh add some box
Shadow and some add some uh border rounded border to The Container so we just change the order to
be rounded by order radius 10 pixels and we add some Shadow effect to The Container using box
Shadow the first value in box Shadow effect is the position of the horizontal Shadow we set it
to be zero and the second value is the position of the vertical Shadow and we set it to be four
pixels you can see it here this third value is the actually the radius of the Shadow so we call
we just uh set it to be eight pixels we can see a little bit of the shade around the box but this is
a little bit dark and doesn't look like a shadow much we need to decrease the transparency level
of the color we can use rgba function to set the color so we just write rgba the the value is
red green blue and Alpha we set zero for red green and blue to to achieve the black colors
and we use three for Alpha value which gives us 30% transparency we can use alt C to turn on the
WRA so we can see the all the codes clearly yeah let's uh set the uh mean width to be for example
300 pixels so we don't get a smaller size than this one or just maybe 400 it would be better
yeah and the next things I would like to do is to add some margin to the Box sorry padding so we
have some space uh around the text so we just say padding uh botton uh top and bottom padding we
set it to be for example 40 pixels and we set the left and right to be 20 pixels and let's add
some margin there five pixels when we decrease the size we still have some margin near for the
smaller screen devices and let's change the color to be white so we can see the text clearly
and the next things I would like to do to bring this image to the Center top of the container
so in the image first we make the image round rounded excuse me by using border radius 50%
then we set the position to be absolute so we can bring it top but now uh we need to position
this absolute Rel in relative to the testimonial container so we just change the position of the
this to be relative so we want it to be in the middle in the center we just set the left to be
50% but this one brings the ede of the image to the center as you can see here is the center
we can use the transform property we use the translate x minus 50% to bring the image to the
center uh horizontally and let's bring this one to the top so we set the top to be minus as you
can is we have the height of the image to be 100 pixels if we set the top to be minus 50 pixels
which is the uh half of the image we bring it exactly in the middle and in the top section yeah
now we have a too much height for our uh container let's decrease this one to 200 100 and let's
bring this one a little bit down by changing the heading this is a top this is a left and right
so uh let's increase this one to 70 and decrease the height to 100 pixels yeah this one looks fine
let's decrease the size of this name so we target this H4 tag which has the class of username
so at the bottom we just add username with a DOT and we change the font size to be 12 pixels
yeah yeah let's try 13 and let's change the font width to be a little bit thinner for example we
should choose 100 so that looks good for me yeah that was it for the CSS part of our project in the
next section we're going to use JavaScript to add functionality to our project we're going to change
the testimonials each uh for example 10 second automatically and we see the next testimonial
U by um as a slider so see you in the next section all right in the last section we have
finished styling our project using CSS in this section we're going to add functionality to
our project using JavaScript first we need to create a Javascript file so here we use contr
shift e to open the Explorer section and here on the left side in the index lower section we
right click and we click on new file we name the file index.js and we press enter before using
JavaScript in our project we need to add a link to the Javascript file within the HTML code first we
close this section the Explorer section we don't we don't need it yet we don't need it anymore so
we close it by dragging this line to the left we go back to the index.html and at the end of the
body tag we we add a script tag we just write SC and we click on the second Auto suggestion
the one with the SRC SRC attribute defines the destination of the link and as both files I mean
index.html and index.js are located at the same directory which just need to write index.js for
the URL now we can use JavaScript in our project so we go to index.js and first we need to create
an array including the all the testimonials so we call the array uh we just make a constant and we
call it testimon NE and we open a array here and inside array we create a an object the first one
would be the name of the person so first we need to copy the first one because we have already the
uh the information of the first testimonial so we copy this name we come here to the index.js and we
paste it here we had we should put it inside a set of double code or uh single code we add a comma
and we go next the we add the photo U URL here just say photo URL which is this one here the cop
this including the double code and we just put it here we can use alt C to turn on the wrap so we
can see all the code we close this a little bit and we use comma again we go to the next line we
this the next one is the text or the testimonial text so here we copy the text from here to here
and we put it inside a double code you just need to bring the the text to this and fix it all right
looks fine next you can go to the next testimonial we can copy this and we put it here again but
we can change the name and other things so we go back to the testimonial generator website and
we generate more testimonials we click on generate now we have another one we just copy this we go
back to the visual studio code in index.js in the second one we paste it inside the text and
for the picture we just search for more users we choose the orientation to be a square so we
get a square pictures so we can choose this one we right click and copy image address we go back
to the visual studio code and here we replace the photo URL of the previous one yeah and the name
also it was here we forgot to copy so we name we copy the name we go back to the visual studio code
and we paste the name for the second one so let's do another one so we copy this again we paste it
just under it we go to the testimonial generator website we generate another testimonial uh let's
get another a big one like this so we copy this we go back to the visual studio code and we paste
it here we go to the we copy the name as well and we paste it here and we also we get another
picture maybe this one so we right click and click on copy image address and we go back to the
visual studio code and we paste it here U I think three is enough to see the slider but you can
add uh any number of testimonials you like it's up to you so we already made the the array with
the three objects so now we create a function to update the testimonials so we say function update
testimonial so we can uh get the name uh first we we Define index we just say idx index is zero and
we get we uh destruct the name the name photo URL and text we get it inside a set of craes so we
just say name photo URL and also we get the text so we equal this to testimonials the testimonials
with the S oh we should add s here because it's more than one all right so we have testimonials
and we want the the one with the index idx which is zero now and we want to change the photo the
text and the name using JavaScript so we get the three of them the three elements I mean the
paragraph the image tag and also the H4 tag so here we can return an element using quy selector
method so first element is the uh image so it's a image element is equal to document doent do query
selector the element we want to get is image so we write here IMG the next one is the the text so
just say text element is equal to document. query selector the text is a a paragraph but it has a
class of text so we just need to write do text instead of just writing paragraph because it's
more specific and uh it's easier to read later next we have the name so we call it username
element just a document. quy selector so the username has the class of username so we just
write here dot username all right so in order to change the text or the image we can use the
properties like a for the changing the image we just change the SRC to be this photo URL for the
text element we just change the inner text to be text element then we have username element. inner
text which is uh which is this one text oh sorry this one is text the username element is name yeah
so when we now we call this function at the top so we don't see any change because here we have the
same information of the first uh first uh element of the array but we can increase the number of the
idx and we just say we use the set timeout method to call a function when the timer is expired the
set timeout method firstly sets a timer and calls a function so we just say this is the function
that will be triggered when the timer finished and the second parameter is the timer in milliseconds
so we just say every for example uh 200 200 2,000 milliseconds which is 2 seconds and the things we
want to call is this function so now you can see here every two seconds we get a new testimonials
but if you refresh it comes from the beginning but when it goes to the end it stops but we want this
to be reset so we can add a condition here we just say if idx is equal to testimonials. length which
is three if the ITX is uh equal to this one you just set the ITX to zero again so you can see an
infinite number of changing inside the testimonial slider mostly it's this is too fast mostly they
do it 10 seconds that makes more sense yeah that was it for our project I hope you enjoyed and
learned many things and see you in the next project welcome to another project in this project
we are going to create a realtime character counter as you can see from the final version of
the project we have a container here with the text area and we have the total characters which
is zero now and the remaining 50 as we start writing you can see that the total characters is
increasing and also the remaining is decreasing and when we reach to the 50 characters we can
see that we cannot add more uh text inside this text area it doesn't allow me to write any more
text and also the remaining is set to be zero in this project we're going to use JavaScript to uh
calculate the number of texts inside this text area in real time and also dynamically change the
to Total characters and remaining using JavaScript in the next section we're going to start with the
HTML parts of the project so see you in the next section all right let's start our project first
we open the visual studio code and here we close the get started tab in the file
menu we click on the open folder I would like to create the project in my desktop but
you can create it anywhere you like in your computer so here we click on the desktop and
we click on the new folder button to create a new folder and we name the file Real Time
character counter real time character counter is the name of our project we enter to save the
name and we click on the select folder button to select the folder we close the get started
tab again and on the left side in the Explorer section we right click and we click on the new
file to create an HTML file we name the file index.html now on the right side we have our
HTML file which is completely empty but we can use an exclamation point to create an HTML file
boiler plate we just write an exclamation point and we can press tab or we click on the first
Auto suggestion to have our HTML 5 boiler plate we can see the browser inside the visual studio
code in real time using live preview extension and we just need to right click and we click
on live preview Show preview but you have to install live preview extension previously so we
click on this section now we have our browser on the right side which is completely empty but
with the title document let's close the Explorer section to have more space on the right side and
let's change the title of the page to the name of the page which is Real Time character counter so
we just say Real Time character counter then in the body section we have a container that is
the main container and the box that we going to have our counter so we call it just container
it's a div with a class of container and inside this div we have a h we have an H2 tag just the
name of our project which is layer Time character counter after the h2 tag we have a text area so
we can write our text here so add a text area tag the text area we just remove the name name
we don't need it we just add an ID of text area and also we add a class of text area we don't
need columns and rows we're going to uh style it later using CSS and also we have a placeholder
saying please write your text here we can write our text here and then we want to limit the number
of characters that we're going to write here um to for example 50 characters we just need to use max
length for example 50 you you can change this one according to your uh website or project later
so if you write something as soon as we get to the 50 characters we cannot write anymore it's
going to limit us now I'm typing but we cannot see anything adding inside the text area after
this we have the counter area we have the total counter and also the remaining so we create a div
here with a class of counter container and inside this div we have a paragraph saying inside total
characters and inside we have a span because we want to change this section using JavaScript
later dynamically when we are typing so this is found as a class of total counter and uh
and also an IDE of total contest so we can easily get them inside the JavaScript just for
now we we just write a number inside the span we just say for example uh 30 or something and
then uh we're going going to change this number dynamically using JavaScript Let's uh copy this
using alt shift arrow down and we change this total characters to remaining and also here
the these two totals we just change it to remaining and just change this number
to for example 20 also later we going to use JavaScript to dynamically calculate the
remaining and also the total characters in the next section we're going to start a styling
our project using CSS so see you in the next section all right in the last section we have
finished with the HTML part of our project in this section we're going to start is styling
our project using CSS first we need to create a CSS file so here we open the Explorer section
using control shift e and on the left side in the Explorer section we right click and we click
on the new file we name the file style. CSS and we press enter now we have our style. CS file
which is completely empty but we can't use it yet because we must add a link to the CSS file
within the HTML code so we go back to index. HTML and just after the title tag and at the end
of the hit tag we add a link tag we just write link and we click on the third Auto suggestion
the one with the CSS now we have a link tag with the relationship between the HTML file and the
external ccell sheet the h attribute defines the destination of the link and as both files I mean
the index of HTML and a solid CSS are located at the same directory we just need to have a style.
CSS for the URL now we save the file using control s we close the Explorer section and we start
styling from the body tag so we go to solid CSS and we add body here we open a set of curly
braces first we remove the space around the body element using margin zero then we bring these
items to the center horizontally using display flex and justify content Center next we bring
them to the center hor uh vertically using a height 100% of the viewport height it means that
the height of the body is similar to the height of the screen then we can use a line item Center
to bring everything to the Center vertically let's change the background color of the body and we
set it to be for example salmon color and then we change the font of the project using font family
property and we set it to be cursive it's just my preference you can use any font family you like
for your own project the next things we you want to style is this container that covers everything
this there with the class of container as it is a class we we have to use dots at the beginning
of the name of the class as the Cs selector we change the background color to light pink we you
we can use alt C to turn on the wrab so we can see all the codes clearly then let's change the
width to be 400 pixels and we add some padding to push everything to the inside and we set the
padding to be for example 20 pixels let's bring uh let's use display Flex to be able actually we
don't need display Flex uh let's add some margin so when we decrease the size we want to I want to
add some space around the element so we just say margin five pixels and let's add some borders
around the container using border radius and we set it to be for example 10 pixels and let's
add some box Shadow so we can see this container more clear so we use box Shadow property the
first value Inside the Box Shadow property is the position of the horizontal Shadow and we set
it to be zero the next value is the position of the vertical Shadow and we use four pixels for it
you can see it here then we have the Border radius which is 8 pixels sorry not border radius the uh
blue radius yeah blow radius to be eight pixels and then the color is black is fine but I want
to add some transparency to this color so we use rgba function to set the color rgba stands for red
green blue and Alpha we set zero for red zero for green and zero for blue which gives us the black
color then we use3 for the alpha value which means 30% transparency or you can say opacity all right
now we have a beautiful box Shadow Let's uh size this uh text area style it so the text area has
the class of text area as well so we can Target it using dot text area selector we open a set
of curly braces first we prevent the resizing now we can use uh our our Mouse to resize the
text area but we can just set it to be none so now we cannot Bes size it but Bes size it ourself
we set it to be 100% the width then we have the height to be for example 100 pixels let's CH let's
increase the size of the text using font size for example 18 pixels we can change the font of this
text using font family and we set it to be S serf as an example let's push this text a little bit
inside using padding so we just say padding 10 pixels as you can see the paddings affected the
size of the fix area in order to prevent this one we can use uh box sizing border box uh which
removes the padding and borders when we are sizing a text area or input inside CSS all right let's
add some border so we add we set the border to be solid to two pixels width and change the color to
dark gray yeah everything looks fine now let's uh install this bar the counter section we set the
div that cover the this area Hunter container so we target that using dot Hunter container first
we change the display to flex to bring them next to each other but I want this part to be in the
left side and this one on the right side so we can use just thei content space between to achieve
this goal then uh we want to change the like um we we we push the button push these textes to the
right and this one to the left a little bit we can use it padding we want the padding top and
bottom to be zero but left and right just five pixels all right that looks fine now let's uh
sty this paragraph and and these numbers I want this number to be blue and this one to be red so
first we target the paragraph This paragraph So we we target counter counter container and it's
paragraph and we just change the font size to be 18 pixels and we change the color to be gray
let's target the color of uh 30 and 20 these uh this span has the class different classes the
first one is total counter the second one is remaining counter so we target them here using
dot total counter we set the color to be white but I want to use the Slate white slate blue
sorry blue but the state blue and for this one I want to use the orange red color so we target
this using remaining counter and we set the color to be orange red uh that looks okay for now and
in the next section we're going to use JavaScript to dynamically calculate this total character
and the remaining character as well so when we are writing here this number is going to go up
and this one goes down from this target which is here the max length which is 50 for now so see
in the next section for the JavaScript part of our project all right in the last section we have finished
with the CSS part of our project in this section we are going to start adding functionality to our
project using JavaScript first we need to create a Javascript file so we open the Explorer section
using control shift e and on the left side in the Explorer section we right click and we click
on the new file we name the file index.js and we press enter before using JavaScript in our
project we must add a link to the Javascript file within the HTML code so we go back to index.
HTML and at the end of the body section we add a script tag we just write SC and we click on the
second Auto suggestion the one with the SRC as both files I mean index that HTML and index.js
are located at the same directory for the SRC we just need to have index.js now we can use
JavaScript in our project first we close the Explorer section on the left side to have more
space on the right side we save this file using contr S and we also save the install. CSS using
control s and we go to index JS to start adding functionality to our project the things we want to
do is to track the the text which is being written inside this text area and we count the characters
of this text and put it here and also we get the information from the max length of the Tex area
from here and inside the X area tag we get this max length and minus that one from the total
characters so first we need to get this text area so the text area has the IDE of text area as
well so we can get this element using get element by ID method inside the Javascript file we just
make a constant here and we call it text area or text area element equal to document. get element
by ID and the ID is text area from here this and then the the things you want to do is to uh add
a event listener to this text area element and retract the writing inside this section first we
use alt C to turn on the WRA so we can see all the codes on the left side we close this a little
bit and we add the add event listener method to this element the add event listener method has
two parameters the first parameter is the event handler so the event handler we want to use is
key up which which means whatever we press here and we remove the key uh we trigger this function
that we going to create here so this function is going to be triggered once this uh event handler
happens so let's uh let's console log something we just say p is pressed we open the console
section here using open Dev tools pain inside the console now if you write something inside this
text area we see that the console lck is showing something I wrote four characters and we got four
key is pressed all right the things we want to do instead of console logging we want to change the
total character here and calculate the amount of character from here so we just create a function
we just say uh update counter and we create a function under this we just say update hter and
we need to get the length of this the things we write here and we can do it by just this same text
area element. value so we get the value and we calculate the length of it so we want to uh put
this one in inside this instead of the 30 so we need to get this element as well so the element
is here the total characters and the element is this span and the span has the ID of total counter
so we bring this element using get element by ID method so we just create a constant and we call
it total character or total counter element and we equal it to document. getet element by ID
and we just write total pter and here we just equal this to Total pter element. inner text and
equal it to this so when we write something here for example I'm writing hello we have to get the
total characters here for example five but we are getting a wrong one because here instead of value
we write area value Max which is the problem of the auto correction all right and also we try
again so we are not getting yet should be some problem we check uh total counter and here is to
this one is typo um total counter let's try again we just write hello now we can see the change
inside the total characters which is five and if you keep continue writing we getting the Real
Time character counter until we get to the point which is 50 which is the Max uh length of the
the text area next things we want to do is to show the remaining characters when we are writing
the inside the text area the remaining area has the idea of remaining counter so we copy this and
we go to the JavaScript and we write H we create a constant we call it remaining hter element and we
call it to document. getet element by ID and here we paste the ID and we also wanted to get this
max length so in order to get that one we need to uh we just say text area element. get attribute
and the attribute we want to get is this one Max lens so inside in in inside a double code we just
say max length and uh we want to equal this to this remaining elements so we copy this we put it
here and we just say dot inner text equal to this one equal to this one now if you start writing
the remaining is 50 but we want to minus this from the total characters which is this one we
are getting here so minus this so when we start writing we see that this one is three this one is
47 and if we keep continue this one goes bigger and this one gets smaller until we get to the 50
and the remaining is zero and the other things I would like to do is when we someone comes to the
website I want to set the total character to zero and the remaining to 50 so the best things is
just call this function once here we just say update counter then we do that one uh when someone
comes first the function is triggered and we get the total characters calculated which is zero and
the remaining is 50 so now we can even remove this 30 and 20 from this s and also if you want to
change the max lens you can change it here for example you put it 150 so now the remaining
is50 and you can write 150 characters yeah that was it for our project I hope you enjoyed
and learn many things uh see you in the next project welcome back to another project
in this project we are going to create a digital clock as you can see from the final
version of the project we have a background image in the website we have a title and
also we can see the current time uh in a digital form if you check the computer time
as you can see the time is exactly the same and it's showing here in this project you're
going to use JavaScript to dynamically get the current time from the computer and set it
inside this beautifully designed website in the next section we're going to start with the
HTML part of our project so see you in the next section all right let's start our project first
we open the visual studio code here we close the get started tab in the file menu we click on the
open folder I would like to create the project in my desktop so I click on the desktop and here
we click on the new folder button to create a new folder we name the folder dig clock which
is the name of our project here we click on the select folder button to select a folder we
close the get started tab again and on the left side in the Explorer section we right click and we
click on the new file we name theault index.html and we press enter as you can see now we have
our index.html file on the right side but it's completely empty but we can easily make an H HTML
5 b play using an exclamation mark so we write an exclamation mark and we click on the first Auto
suggestion in order to see the browser inside the visual studio code we can use the live
preview extension we just need to right click inside the index. HTML file and click on the live
preview Show preview as you can see now we have the browser on the right side which is completely
empty because we haven't add anything inside the body section yet but with the title document we
can change the title here to our Pages uh to our project's name which is digital clock you can see
the digital clock on the tab of the browser let's close this Explorer section to have more space
on the right side we just need to drag this line to the to the left let's decrease the size of
the browser and let's start coding inside the body section first we just add a edge to tag to
have some heading and we just write digital block and after the h2 tag we add a div with a class of
clock we just write dot clock and inside the div we have our hours minutes seconds and also the AM
and PM section so first we add a div here just an empty div and inside this div we add a Spam and
the ID the first spam the ID will be hour and we just write z for just hardcoded because we
can install this later using CSS before using JavaScript for dynamically get these numbers from
the computer we have another spam with a class of text and here we just say ours we just need to
copy this sa three more times using alt shift arod done and this one would be minutes and here
minutes then we have the next one seconds here as well second and finally here this one is uh we
don't need anything inside it and also we delete this spam because this is just for the AM and
PM we can just write down am hardcoded for now for styling the project in the next section that
was it for the HTML part of the pro project in the next section we're going to start styling
our project using CSS so see you in the next section all right in the last section we have
finished with the HTML part of our project in this section we're going to start St styling our
project using CSS first we need to create a CSS file so we open the Explorer section using
control shift e and on the left side in the Explorer section we right click and we click on
the new file we name the file style the CSS and we press enter before styling our project using
CSS we must add a link to the CSS file within the HTML code so we go back to index. HTML and
just under the title tag here we add a link tag we just write link and we click on the third Autos
suggestion the one with the CSS now we have a link tag with the relationship between the HTML file
and the exter stylesheet and the H attribute here defines the destination of the link as both files
are located at the same directory we just need to have installed CSS for the URL now we can close
the Explorer section again and we go to install the CSS to start installing our project first
we start with the body section we just need to remove the default margin and bring everything
to the center using display Flex so we just WR body and we open a set of curly braces we remove
the default margin using margin zero then for bringing everything to the center horizontally
we can just write display flex and as everything went next to each other we can use flex Direction
column to bring them back uh as a column and also we can use align item Center to bring everything
to the center horizontally in order to bring them to the center vertically as well first we need to
set the height of the body to the height of the screens by using height 100 100% of the viewport
height then we use justify content Center to bring everything to the center uh vertically the next
things we need to do is just uh I would like to add a background image to our project so we just
write background and we can use the URL function to add an external background URL so we go to
the desktop and we click on the Google Chrome or any browser you would like to use and in the
search of the Google we search for unsplash the the website we were going to use is unsplash.com
we click here and here in the search result in the search bar we search for for example nature
we change the orientation to landscape and we just uh choose one of these images yeah anything
is fine uh this one would be okay or this one so here on the picture we right click and we click
on the copy image address and we go back to the visual studio code and we add a double code set
and inside this set of double code we paste the link now we can see the image in the background
let's use alt C to turn on the word draft so we can see all the codes and we go to the next
section for styling firstly this uh headline the digital clock the digital clock had the tag
of H2 so we target that we just uh use first we make all the letters capitalize using TT transform
capitalize or sorry uppercase to make everything capitalized and then which we increase the letter
spacing and the space between the characters of this text using letter spacing and we just set it
to be four pixels let's change the font uh size to be 14 pixels a little bit smaller and and and we
use text align Center to bring it to the center it's already in the center but but when we change
the other section we want it exactly to be in the center so we they use text allance Center the next
things we will we going to install is this section first we install this class the dev that contains
everything so we target that with we just the dot clock because it's a class we just use dot we
change the display to flex so everything is now next to each other and the next thing is this div
so all these diffs we're going to Target this div so we just write clock and we target the div we
add some margin for example five pixels to makes everything a little bit separated from each other
then we go to the next section and we target the span all the spans so we just write here do clock
span we change the width to be 100 pixels and uh we change the height to be 80 pixel then we change
the background color to be a slate blue we can see the change and we change the opacity to be 80%
because we want this a little bit lighter and then we change the color of the text to be white
then for bringing everything to the center we can use display Flex as soon as we did this this place
Flex we saw the effects of the width and height so so and then we use justify content Center to
bring everything to the center horizontally and align item Center to bring everything to the
center vertically we change the font size to be 50 pixels to make them a little bit bigger and we add
some text Shadow to have some text Shadow so we just say text Shadow the first parameter inside
the text Shadow is the position of horizontal Shadow so we set it to be two pixels then we have
the position of the vertical Shadow we said it to be 2 pixel as well then we have the blue radius
four pixels and now the color is white we want the color to be black so we use rgba function we set
zero Z and zero for red green and blue which gives us the black color and also3 for the alpha value
which means 30% transparency or opacity so let's uh change the we forgot to change the font family
we set the font family to send s so the text looks better now and uh we're going to decrease the size
of them later but we're just designing this upper zeros and am all right so next we're going to
Target this spam which is here and the class is text so we we target them here we just say dot
block. text we set the height to be 30 pixels we set the font size we make them a little bit
smaller not a little bit 10 pixels and we change the we make them uppercase using text transform
upper case and we increase the space between the letters using letter spacing and we said it to
be just the two pixels and also let's change the color of the background of them differently so we
just say background and we set it to be dark blue instead of a slate blue okay and also we add some
opacity 80% yeah this picture if the background image we add background size cover we're going
to see all the image betterly yeah now we can see the effects of the opacity on the our website
and let's change the color of this to white as well so H2 they change the color to white to be
more visible now after is we're going to Target this am and make it a little bit smaller and we
bring it to the down section in order to change the position of the this am we can position this
one absolute but in order to be relative to other things though we need to change the position of
this div to be relative and here we target that am we just say clock and the am has the idea
ofm so we need to have hashtag here amm we open a set of curly braces and we set it first we
bring it down we just say bottom zero and uh no we changed the position to Absolute so so we
bring this in the bottom we change the width to be 60 pixels and height to be 30 pixels like
the one we did for this section and also the font size it's it's a little bit big so we make
it to be 20 pixels and also we we want to have a different color for this section so we change
the background to be green for example yeah the color is okay too white and uh yeah everything
looks fine for The Styling in the next section we're going to use Java JavaScript to dynamically
change these numbers and we get the current real time from our computer so see you in the next
section for the JavaScript part of our project all right in the last section we have finished
with the CSS part of our project in this section we're going to start using JavaScript in our
project first we need to create a Javascript file so here we open the Explorer section
using control shift e and on the left side in the Explorer section we right click and we
click on the new file we name the file index.js and we press enter before using JavaScript in our
project we must add a link to the JavaScript file within the HTML code so we go back to index.html
and just at the end of the body section here we add a script tag we just write SC and we click
on the second Auto suggestion the one with the SRC as both files I mean index HTML and index.js
are located at the same directory we just need to write index.js for the URL we save the using
control s and we close this Explorer section by dragging this line to the left to have more
space on the right side and let's use overflow hidden in the body section of the CSS to remove
these ex scroll bars to have a more beautiful website so we just write overflow hidden but
now by decreasing the size we don't see any overflow we save this file as well using control
s and we we go to index ajs four things we need to have inside our JavaScript the four elements
we need to manipulate as this section the hour minutes seconds and also this am because we want
to change it dynamically using JavaScript so the four things we have in inside the index sjs has
four IDs minutes sorry hour minutes seconds and AM PM we can return an element with an ID using
get element by ID method so we go to index.js and we create a constant and we call it our element
and we equal it to document. getet element by ID and the ID is our we can use alt Z to turn on the
wraft so we can see the code completely and next we have the minutes we just write minutes or
minute element and we equ call it to document. getet element by ID and the ID is here minutes
next we have seconds we just copy this and we change this minutes to seconds and this one second
element and finally we get this am and we create a constant we call it Am Pm element and equal it
to document. getet element by ID and the ID is am P all right now we have the all the elements
we can change them dynamically first we create a function to get the data from our computer so
we call the function clock or update clock and first we get the hour from from the computer
using date Constructor so we we just need to create a variable because we want to change
it later as well so we equal it to new space date and we want to get the hours sorry the L is
hour so we put H so we have our new date and we want to get the hours so we use get hours method
for the minutes we just write m equal to new date and we get get minutes use get minutes method next
we have the second and we just say new date do get seconds and finally we just set the amm variable
this one we we cannot get it from the computer but we can make a logic to create it first we set it
to be am as a default and we're going to check it later for example here we just say if the hour
is greater than 12 first we set the hour to be hour minus 12 because after 12 we have 13 for
example and the the new hour will be 13 minus 12 which is 1 and then we change the am P.M to p.m
so after 12 for example 1 in the afternoon the H would be one and the a PM would be PM as well all
right and also the other things is we uh let's uh first let's see the the result so we use inner
text method to change the text inside this hour element which is here so we just say our element
do inner text we set it to be equal to H and we we call this uh we need to call this function every
second first we call it here we just say update clock one time and we can see the hour here but
for the seconds we need to call it every second so let's first finish this part so we the minutes
element inner text would be M now my computer is 8:30 a.m. I'm recording now the video in the 8
8:30 so the next one is second element. ner text is equal to S and then we have the amm element
equal uh sorry do enter text to AM PM which we defined here all right so everything is okay now
because the time is 831 35 second if you refresh it each time we get the new second as well but
we can call this function every second using set timeout method we just write set timeout method
actually set a timer that execute a function after the timer expires so the first parameter inside
the set timeout method is a function and the second parameter is the timer and we said it to
be 1 second which is 1,000 milliseconds and every one second we want to call this function not every
just after one second we call it again so first we the code runs until here call the function first
and then as soon as reach to the set time out after 1 second call the function again and then
the codes goes from here again to here and after one second call the function again it's going
to be infinite Loop so we call the update clock function here so now you can see every second
there uh this function is being called and we are getting a real time seconds here the next thing we
need to do is just uh as I mentioned before here now we have we don't have zero here usually
the digital clocks have 08 or uh it doesn't have a single digits so in order to achieve this
one here we create a a statement a conditional statement we just say h is equal to and if the H
is less than 10 you see no it's true because it's eight just if this one happens you just write
0 plus h otherwise just use the H now because the eight is less than 10 we are getting 08 but
after that we don't get any zero at the beginning we just get the eight after 10 for the seconds
we we write this one for the m and S as well so we copy this two more times using alt shift Arrow
done and we change this H to to to uh M I can use all of I can highlight all of them using control
D so we needs we just need to highlight the first one and use contrl D to go to the next one and now
we just use S as well so now we did all the parts let's check the project inside the browser as well
so we open it inside the browser as you can see now we have correctly showing the time let's uh
decrease the size and you can see it's responsive too yeah that was it for our project I hope you
enjoyed and learn many things see you for the next project welcome back to another project in
this project we going to create a double landing page as you can see from the final
version of the project we have two products in One landing page Apple and Samsung and
when we hover over one product we see that the size of this Landing size is bigger than
the other side and if you go to the other side we see the opposite we have a bigger width
for this side and the smaller withd to the other side and also we have a button that has
a beautiful transition and animation and also we we're going to stall this project add some
background image to make it more beautiful in this project we're going to use JavaScript
to add and remove some classes that changes the styling of each site so we can see this
hovering effect in our project in the next section we're going to start with the HTML
part of our project so see you in the next section all right let's start our project first we
open the visual studio code here we close the get started Tab and in the file menu we click on the
open folder I would like to create a project as usual in my desktop but you can create it anywhere
you like in your computer so here we click on on the desktop and we click here on the new folder
button to create a new folder we name the file double landing page which is the name of our
project we press enter and here we click on the select folder button to start the project inside
the folder here we close the get started tab again and on the left side in the Explorer section we
create an HTML file so we right click here and we click on the new file and we name the file [Music]
index.html here on the right side now we can see our index. HTML file we can use an exclamation
mark to create an HTML 5 boiler plate so we write an exclamation mark and we click on the first Auto
suggestion we can use alt C to turn on the WRA so we can see the code we can see the browser inside
the visual studio code using the live preview extension that we have installed we just need
to right click and we click on not live preview Show preview here on the right side now we can see
the browser which is completely empty but the with with the title document let's change the title to
be the name of our project which is double landing page all right let's start with the HTML uh
tags inside the body section first we need a container to cover everything we just need to add
a div with the class massive container and inside this div let's close this Explorer so we have
more space on the right side then inside this container we have because we have a double
landing page we have the left side which is related to the Apple product and the right side
which is related to the Samsung product so we we have we should have two divs one left one right
so we add a diff here with a class of split and also with a class of left and in inside this St
we're going to have a H1 tag just saying apple as you can see here then we have a button with
a class of BTN and inside the button we just write down by now now if we accept the auto
suggestion we get the button with the class of BTN which has a buy now inside the button
let's create another Dev similar to this one for the Samsung so we just have a div with
a class of split and right instead of left and inside this we have H1 tag saying Samsung
then we have button with the class of BTN and inside would be bu now so now we have the Apple
and Samsung in the next section we're going to use CSS to uh install our project and bring this
apple to the left and the Samsung to the right side and we're going to add some background
image for each of them so see you in the next section all right in the last section we have
finished with the HTML part of our project in this section we are going to start styling our project
using CSS first we need to create a CSS file so here we use control shift e to open the Explorer
section on the left side and we right click here and we click on the new file we name the file
style. CSS and we press enter we just bring the file in this tab so we can have the browser on the
right side we we close the Explorer section before using CSS in our project we need to add a link
to this file within the HTML code so we go back to the index.html and just under the title tag we
add a link tag we just write link and we choose the third Auto suggestion the one with the CSS now
we have a link tag with the relationship between the HTML file and external uh style sheet the H
attribute defines the destination of the link and as both files are located at the same directory we
just need to write stall. CSS here now we can use CSS in our project so we save this file using
contr S and we go to install the CSS the first place we want to InStyle is a body section so we
just write body here we open a set of purly braces and inside this set of of K braces we first we
remove the default margin and remove the space around the body element so we just write margin
zero now we can see that we don't have any margin then we can use display Flex to bring the items to
the center horizontally we just write display flex and now we can use justify content Center to bring
the items to the center horizontally for bring the bringing the items to the center ically we need
to first set the height of the body to be 100% of the viewport height then we use just align
items Center to bring the items to the center vertically so we just write height 100% of the
viewport height and then we use align item Center to bring them to the center vertically let's use
a text align Center as well to bring everything and even inline content to the center let's change
the font of this app and Samsung to impact using font family property so we just write font family
and we choose impact this one now we can see a different F we use alt C to turn on the wraft so
we can see all the code clearly that was it for the body section Let's uh start styling the other
parts uh let's style these two split sections and uh we just uh set the width of this two div to
50% and the height to be 100% so we just write do split and we change the width to be 50% height
to be 100% yeah that's it for theit Section let's bring this apple to the left side and the Samsung
to the right side we just need to Target this left and right so here we just say split do left so
we set the uh first we change the position to the absolute uh and then we just say left zero for
the apple and uh for the right side to do split do right we just set the position to be absolute and
we just set the right to be zero now we have this two here let's set the background color so we
can see the better so we can easier Sol them so we just set this background color to Pink as you
can see we have some space at the top so here in this split section we just need to write do top
zero to bring them all to the top let's change the background color of this uh Samsung sanction
as well just say just say light blue all right let's style uh this Apple and Samsung the head one
section here at the top we just right H1 and we change the font size to be 100 pixels so we have
a bigger one it looks bigger here in this browser but if you open the browser inside the Google
Chrome we don't feel too much uh big and also let's install this buttons and make them bigger as
well we target the buttons using this class BTN so just under this H1 we just Target the Medan and
just uh first we remove uh change the background color to be black change the text color to be
white now we see let's add some padding we just say 20 pixels top and bottom and 40 pixels left
and right let's increase the size of this button uh the the text in the botton we just say font
size and we set it to be 25 pi let's add some border color so we just say border we increase the
size of the border to four pixels and we make it solid so we have a nice wide border let's change
the cursor the pointer so when we hover over the buttons we see a pointing hand so let's uh add
some hovering effect as well we can use how CSS pseudo class to change the color of the buttons
when we hover over them so we just write BN hover and we change the background color now to White
and the color to be black just the opposite and also let's add some transition so we we don't see
the colors to be changed suddenly so we just say transition add a just one second transition but
not to everything just to the black background color so so we just write here background color
now we see a transition in the buttons let's install this H1 a little a little bit more we
just change the color to be for example this Lis blue and also let's add some shadow in the
back using uh backdrop filter and we just add some change the brightness to be 50% like this we
can see it inside the browser that looks very good let's increase the size as let's increase the
this distance between the letters using letter spacing we just add four pixels that looks
better and let's add some background image to each product so in the browser here in the new tab
we search for example we just say iPhone the new newest one now I'm recording it's November 2021
we just say iPhone 13 that's the latest product we just uh change search for the image we change
the tool and the size to be large and we just uh choose the apple.com this one we go to the website
and here just we write we right click and we click on copy image address and we go back to the visual
studio code and inside the left one which is Apple we just add a background image and we add a URL
function inside this we add a double code and inside this double code we paste the link using
control V now we can see it in the background but if you check now we cannot see the pictures
completely we have to CH change the background size so we just change the background size to be
cover this this one actually increase the size of the image or scale the size of the image as
large as possible to fill the all the container so if you go now we can see that we can uh see
the image completely let's add another image for the Samsung one I think the latest Samsung is
Samsung uh S21 probably or whatever it is just we add Samsung S21 we search for images we change
change the tool and size to be large and we just choose one of them like this one or we just go
to the Samsung website I think uh uh cannot see any samsung.com so we just choose this one we just
click on it and here we just right click and copy the image address we go back to the visual studio
code and we do the same things here we just add a background image we add a URL and inside set of
double code we paste the link and then we just change the background size to the cover all right
let's check it inside this our here that's looks fine when you change the background size to cover
if you change the zoom level of the browser you see the image is always in the same size the next
things uh we want to do is to uh use JavaScript to increase the size of the uh each site for example
Apple or Samsung when we hover over them we want to increase the size of them to 75% and the
other one to 25% so in the next section we're going to start adding this functionality
using JavaScript so see you in the next section all right in the last section we have
finished styling the web it using CSS in this section we're going to use JavaScript to add
functionality to our project and increase and uh increase the size of the width of the section
that we are hovering over it before uh starting with the JavaScript the things I want to show you
is in the HTML file we want to add some classes for example we want to add or remove some classes
to increase and decrease the size of each site for example in the container we add a class of active
left and inside the install the CSS at the end we just say if the active left existed then just
for the left side change the width to be 75% as you can see here and if this active left exists
just change the right side the width to be 25% so if you go now to the browser we can see that the
Apple side has the width of 75 and the other side is uh 25 we can see an extra place here that's the
because the Samsung is too long we see here we can remove this one you're just adding overflow hidden
here so now if you check we never see anything extra in the right side exactly we have 25% here
and 75% in this side we can do the same things by just adding for example active right and adding
The Styling here you just say if the active right exist just change the left to be the width to
be 25% and the right side the width to be 75% so now we can see that the right side is bigger
than the left side all right so let's do this using JavaScript because we cannot add or remove
classes by hand we just need to do it dynamically using JavaScript so we remove this class so we
have 50% into the left and 50% to the right and also uh before doing that one I want this point
now always to be at the same line so let's remove this line wrapping using white space no wrap in
the BTN so we just here we just say white space no wrap so now we see the buttons always the text to
be in the same line all right so let's create the JavaScript file so we open the Explorer section
using control shift e and we right click here and we click on the new file we name the file index.js
and before using JavaScript uh we must add a link to the Javascript file within the HTML code so
we go to index.html and just at the end of the body tag here we add a script tag and we click on
the second Auto suggest question as both files I mean the index.html and index.js are located at
the same directory we just need to write index. JSU all right we save this file we close this
Explorer section and we go to the in JavaScript the elements we want to use in JavaScript is this
element left right and also the container we want to add event listener add event listener to left
and right and we want to add the class active L active or active right to this there with a class
of container so we bring this container first we just say cons container element we can use the
uh quy selector method to return that element with the class of container so we just write
here document do quy selector and inside a set of parentheses we write dot container we use alt
Z alt Z to turn on the WRA so we can see all the code the next things we want to bring is the the
left element we just say document. p selector as above and inside a set of parentheses and a double
code we just write. lift we copy this to make the right one as well so we just write here right and
change this left to right as well so we add the add event listener method to the left side the add
event listener method has two parameters the first parameter is the event Handler the event handler
we want to use is mouse over it means when we over when the mouse or Mouse over or Mouse enter both
would be the same we just say mouse enter and we add a call back function so when someone when a
mouse over that element which is the left side we want to do something the things we want to do
is to add the active left class to The Container so we just say container element do class list
for adding the class and we use the add method and the class we want to add is active left now
we when we hover over this section the the width is 75% and the other side is 25% but when we uh
go the other places like the other side we still this width is the same so we have to remove this
class when we uh leave the place so we just add the another event listener which is mouse leave
and we trigger another function and we just remove this actively we just say class list do add and
sorry remove because we want to remove the class so we just say active left so if now if we go to
this section we see that the size is 75 when we go the other side it goes back to the 50% per. let's
do the same things to the for the right side so we just say write element. add event listener we
want to add the mouse sorry Mouse enter we create the call back function and we just say container
elements. class list and we add the class active right so we see it's working but it's not removing
the class so we we need to add another add event listener for removing the class when we leave
the place so we just say mouse leave we make the function and we just say counter element. class
list. remove the the class we want to remove is active active right so when we now we go to the
right side we see the width is 75% on the right side and when we go to the left we see the same
thing the 75% with for the left side let's add some transitions so we can see this a little bit
more smooth so we go back to the solid CSS and just at the end we add the transition to the left
and also to the right we just say transition on the width and the we want it to take two seconds
and to be EAS and out we can see it now here we can see it later in the browser actually got it's
bigger so when we go to the Samsung section we see the width to be uh 75% and the transition is very
smooth it looks very good yeah that was it for our project I hope you enjoyed and learned
many things so see you in the next project welcome back to another project in this
project we going to create a random color generator as you can see from the final
version of the project we have different colors in the website with different uh color
code and if you refresh the page each time we we get different colors with different color
codes we are going to create these uh color codes using JavaScript and we we're going to
create them randomly each time for 30 uh color container the website also is responsive if it
inrease the size of the website we can see in the bigger screen we have four columns and
then we have three two and one columns when we are decreasing the size of this screen so see
you in the next section for the HTML part of our project all right let's start our project
first we open the visual studio code and here we close the get started tab in the
file menu we click on the open folder I would like to create the project as usual in
my desktop but you can create it anywhere you like in your computer so here we click
on the desktop and here on the we click on the new folder button to create a new
folder we name the folder random color generator which is the name of our project we
press enter and we choose the folder that we have created and we click on the select folder
here we close the get started tab again and here on the left side in the Explorer section we need
to create an HTML file we just need to right click and we click on the new file we name the file
index.html and we press enter now on the right side we have our index that HTML file which is
completely empty but we can use an exclamation mark to create cre an HTML 5 boiler plate so
we just need to write an exclamation mark and we click on the first Auto suggestion we can
see the browser here inside the visual studio code using the live preview extension we just
need to right click here and we click on live preview Show preview now we can see the browser
on the right side which is completely empty but with the title document let's close the Explorer
section to have more space on the right side and let's change the title of our we website to
the name of our website which is random color generator we can see the random color generator
inside the tab of the browser then we start our HTML uh coding inside the body tag first
we add a header by using a H1 tag and this would be the name of our project we just write
random color generator we can see here then we have a div with a class of container to include
all the colors that we're going to create later using JavaScript and inside this container we
have the color container that is just a box that has a color and the title in the middle so
we have a de with the class of color container and inside this STP we have just a color code
we just add a random color code it should be six characters 1 2 3 4 5 six yeah so we just uh
copy this few times for example six times because we we're going to use this data to Next in the
next video we're going to install the project using this uh information and divs with and the
numbers and later using JavaScript you're going to create these Dives randomly with different
color codes and different background colors and also the title but we just hardcoded a few
numbers and a few divs to be able to install our project in the next section that was it
for the HTML part of our project in the next section we're going to start styling our
project using CSS so see you in the next section all right in the last section we have
finished with the HTM part of our project in this section we are going to start styling our
project using CSS first we need to create a CSS file so we open the Explorer section using
control shift e and on the on the left side in the Explorer section we right click and we click
on the new file we name the file style. CSS before using CSS in our project we need to add a link to
the CSS file within the HTML code so we go back to the index.html and just after the title tag we
add a link tag we just write link and we click on the third Auto suggestion the one with the CSS now
we have a link tag with the relationship between the HTML code and the external install sheet
which is install. CSS the H attribute defines the destination of the link and as both files
I mean the indexed HTML and stall at CSS are located at the same directory we just need to
have solid CSS for the URL now we can use CSS in our project we we save this HTML file using
control s and we close this Explorer section by dragging this line to the left to have more space
on the right side and we go to solid CSS and we start with the body section we just like body we
open a set of curly braces first we remove the default margin of the body section we just write
margin zero and we change the font family to be for example cursive and uh yeah that's it for the
body section and we Let's uh install the H1 bring it in this to the center we just say H1 and we use
text align Center to bring it to the center then we have uh we need to style this uh container the
main container that covers the all the divs with the class of container color container so here
we target the container class using do container and we change the display to flex to bring bring
them next to each other but we want them to go to the next line when we decrease the size so
we change the flex wrap to wrap instead of no wrap so each time the new container goes to the
next line when we have a smaller screen then we use justify content Center to bring the items
to the center horizontally after the container we start styling the color container itself uh
let's change the background color to Orange to see it better later we're going to create this
background color randomly using JavaScript but just for now we we keep it to be for uh orange
so we can style it better we set the width to be 300 pixels and we set the height to be 150 pixels
we change the color of this text to White and and uh let's change the display to flex to bring this
one to the center and before that let's add some margin so we can see the boxes separately we just
say margin five pixels so now we see the boxes in a different place because we use justify uh we use
flex wrap wrap when we increase the size we have two and depends on the size we have different
number of uh boxes in one row and different columns number so let's change the display to flex
to bring this text to the center horizontally and vertically using justify content Center and align
item Center justify content sentence brings them to the center horizontally and align item Center
bring them to the center vertically and let's change the font size and increase the size of
the text to be 25 pixels and as may we have a very light colors in the background using uh the
generator Maybe we cannot see this text later so let's add some text Shadow to this text to have
some shadow effects so we can see them clearly in the lighter colors as well so we change use
the text Shadow property and the first value in the text Shadow property is the position of the
horizontal Shadow is set it to be two pixels then we have the position of the vertical Shadow we
set it to be two pixel as well and four pixels for the blur radius and we want the Shadow to
be black with some transparency so we use rgba function to set the color and we set zero for red
green and blue which gives us the black color and we use five for 50% trans transparency let's
use alt C to turn on the V trap so we can see all the codes clearly and let's add some border
to each box we just say border we want it to be solid with black color and also with two pixels
with and let's change the Border radius to be uh for example 10 pixels I think uh this is fine
yeah in the next section we're going to use JavaScript to create these color codes randomly
and also depending on these color codes we change the background color of these boxes so see in
the next section for the JavaScript part of our project all right in the last section we have
finished with the CSS part of our project we have in we have installed our project and uh
in this section we are going to start adding functionality to our project using JavaScript
we're going to create and generate these uh color um color codes randomly using JavaScript first
we need to create a JavaScript files okay here we open the Explorer section using contr shift e and
on the left side in the Explorer section we right click and we click on the new file we name the
file index.js and we press enter this uh as the same as the Sol CSS before using JavaScript in our
project we must add a link to the Javascript file within the HTML code so we go back to the index.
HTML and here at the end of the body tag we add a script tag we just write SC and we click on the
second Auto suggestion the one with the SRC and as both files I mean the index HTML and index.js
are located at the same directory we just need to write index.js for the URL and inside the
SRC attribute which defines the destination of the let's close this Explorer section Again by
dragging this line to the left so we have more space on the right side and we go to index.js
to start pting first off we'd like to generate these boxes using a for Loop and we add the this
we create this div with a class of container a color container and add it to this container so
first we bring this container and return it using query selector so we create a con and we call
it container element and we equal it to document because we want to create it inside the Dom and
we use Query selector method and because the div has the class of container we just need to add do
container as the select VOR inside the parenthesis and the double code we can use alt C to turn on
the WRA so we can see the code clearly and then we add a for Loop we just write four and here we
click on the second Auto suggestion with the one with the for Loop so it gives us a template and
we have a index which starts from zero to the array length we we want to create 30 for example
boxes and containers but we just write 30 and we want to increase the number of index each time
one and here we want to create a div in order to create an element we can use the create element
method so we just write here we we want to create a color container element and uh we can use the
document. create element method and the element we want to create is if and after creating it we
want to add the class of color container in order to add a class to the to the element we can use
the class list property and add method so here we have a color container element we can use the
class list property and we use add method to add the class and the class we want to add is color
container and after that we need to append this new element inside this container so we just write
container element. append child and the child we want to append is this uh color container element
color container element as soon as we add it you can see that we have more elements here let's
remove this hardcoded one that we have created before so from here to here we delete them all
so the all the the boxes you see is created here which should be 30 boxes let's open this project
inside the Google Chrome by using the open in browser and you can see now we have 30 boxes and
they are responsive in a big bigger screen we have four box in four columns then we have three two
and one so now we go back to the visual studio code now we want to add the uh we want to create
this uh uh color codes using creating a function first we create the function we create a function
we call it uh random color the chart Set uh that we have for the creating the color palette uh it
has it has the all the numbers from 0er to 9 so we write it here and also it has alphabets from a to
F so we just have to write a b c d e f so we want to create the random uh color codes depending on
these chart characters all right and the color lens the the color code lens is so we just write
color code lens is equal to six then we start the variable color or we can use let or variable we
just say color first we start from empty and we use a for loop again but this time the for Lo will
be the the lens will be the color code lens so we just right color code lens so we're going to Loop
through the color code code lens so we're going to we're going to create each character one by one
randomly and uh add it to this color variable so first we create the random number so we we want
to this is like 10 like 11 12 13 14 15 and 16 we have 16 characters so we want to create a number
between 0 to 15 so so in order to create it we just create the random number we just create
a constant we call it random number and we use the math. random method because we want it to be
between 0 and 15 so we just can say multiply this one to this charts but the length of this charts
so we just say charts do length so now we are creating the random number but this is the number
uh let's log it first so we see what we are doing and let's call this function as well so we just
say random color we open the console as you can see we are creating uh six random numbers but as
you can see it has it's it's not a rounded one so we can use the floor method just say math. floor
to create these numbers like this now we have 0 8 0 14 4 13 so this one means zero means the first
number is zero8 is one eight is 0 1 2 3 4 5 six 7 uh seven would be the number for the eight and
then we have zero which is 0 14 so we want to add these random characters together to create
this color code so let's change this to color code and uh here let's close this console log
so we want to add this new number to this color so first the color is empty and then we want to
add the new random characters which just a chars do substring so we want to get the string inside
it but which one we want to get the one that has the the the index of the random number and also
the random number plus one what does this mean if this the a random number is for example uh two
so we have it here and then until the three so it means from two to three we get the N number
two Let's uh log this character color sorry the color code we getting the color code so let's
uh conso lock the color code and see it inside the console as you can see the colors code first
starts from empty and then it it became B B3 b32 and each time one new character added to this one
and if we we check that which what is the random number so let's clean the console log and refresh
the page you can see first we get the character 11 which is the letter B then we get the 14 which
is the letter e then we get zero which is zero and then they have 11 which is the character b six
is six and 14 is e so we each time we refresh the page we get the new uh new random color and also
we want to create 30 of these random numbers and put it inside these uh boxes that we have created
so instead of random uh calling it here we create another function which we really generate the
colors and this function is going to Loop through all these 30 boxes that we have created so we
just here we just say color container element uh actually we don't have is 30 still now so we
can get all of them we just create a constant and we say all the color containers we add s here so
we are getting all of them we use document. quy selector all to get uh all the containers with
this class so we just copy this and put it here and uh let's delete this one first and we conso
lock this we can see that we have we get a note with 30 Elements which all the Dives with the
class of color container now we can Loop through all of them using for each method which actually
execute a function once for each element of this array so we just say color ele container we add
the S to get all of them and then we just say for each and uh we get each of them first we create
a function we trigger this function and we can get each element of this array here inside this
parenthesis we just call this uh um we just say color container element without s and put it here
so we are getting each element with this name and then we we uh we create a random color first
by using this function so we should create a constant we call it random or we just call it new
color code and we get it from this function random color so when we uh actually we are not returning
anything so we have to instead of console logging we return the color code so we just say return
color code so here if we conso log the new color code we get we should get 30 uh first we should
call this generate color colors function when we do it again color codes is not defined in the
line 27 yeah color code instead of color yeah as you can see oh we are returning each of them
this return should be outside this Loop so we are returning the last color code so if we now refresh
the page we should get 30 color codes like this and each time should be different we uh we clear
the console we refresh the page and we each time we get a new color code all right now we are get
we are creating the color code here and we want to first we change the background color of these
elements these boxes using the a style method we just say color container element. the style.
background color as you can see the JavaScript syntax this one should be style don't know the jav
Syntax for uh CSS is a little bit different from the CSS itself the background color here has a
dash but inside the JavaScript it's in camel case mode so we don't have any Dash they're connected
and the second letter second word is capitalized so the background color should be this color new
color code but the new color actually starts from the with the hashtag so we just add a hashtag at
the beginning and we add this new color code all right so now we can see different colors in each
box each time we refresh the page we see different background color or any of the boxes and also we
want to get the text inside so here we just say color container element. inner text we with this
fun uh with this me uh method we can change the text inside an element so we add a hashtag again
plus new color code now we are getting the codes inside as well and each time we get a different
one let's check it inside the browser as well is as you can see each time we refresh we get the
new colors and new color codes all right that was it for our project I hope you enjoyed
and learned many things see you in the next project welcome back to another project in this
project you're going to create a rotating image gallery as you can see from the final version
of the project we have a rotating gallery that is changing every for example 3 seconds and also
we have two buttons here so when we click on the next button we go to the next image and when
we click on the previous button we go to the previous image we going to use JavaScript
to dynamically to change the images by using timers and also add event listeners
for these buttons and also we're going to use the transform method of CSS to rotate
these images like this in the next section we're going to start with the HTML part of
our project so see you in the next section all right let's start our project first
we open the visual studio code and here we close the get started tab in the file
menu we click on the open folder I would like to create the project in my desktop
but you can create it anywhere you like in your computer so here we click on the
desktop and here we click on the new folder button to create a new folder we name the
folder for example rotating image gallery and we press enter to accept the name and here we
CL we click on the select folder button to select the folder we close the get started tab again and
here on the left in the Explorer section we right click and we click on the new file we name the
file index.html and we press enter now we have our index. HTML file on the right side which is
completely empty but we can use an X exclamation mark to create an HTML file border plate so we
write an exclamation mark and we click on the first Auto suggestion in order to see the browser
inside the visual studio code we can use the live preview extension and we just need to right click
in the index.html file and we click on the live preview Show preview now we can see the browser
on the right side which is completely empty but with the title document let's close this Explorer
section by dragging this line to the left so we have more space on the right side and let's change
the title of the browser to our P our project's name the Project's name was rotating image gallery
now after that we start coding inside the body section first we create a container for the images
so we create a div with a class of image container we press enter to accept the auto suggestion and
inside the save we add eight images but we put the images inside the span tag because we want
to rotate them using uh transform property later inside CSS for first spam the style would be D- I
equal to one this one is actually we are defining the variable for each spam and the variable is I
and we set the first one to be one in this case we can rotate each image image 45° later using CSS
and each image would be different because it they they have different variable uh number and amount
inside this spam we add a image tag and the SRC would be an external image in this project I would
like to use a website called lurum pixm to get the images so we go back to desktop and we click on
the Google Chrome and here in the search bar we search luren pixum in the search results we see
a website called Lauren piix some. photos so we click on this website this is a actually a website
that gets all its images from unsplash.com website but in order to get the images we don't need to
have any uh codes or any uh API key or sign up as you can see from here we can get a specific
image image by adding id/ image so here we have https bm. photos ID and the ID is 237 for this
Doc Page doc uh picture then the 200 and 300 is the height and the width of the image so we copy
this and we go back to visual studio code and we paste it inside the SRC of the image now we can
see the dog in our browser but I want it to be uh with 300 and 200 opposite so we have this form
of image in our browser we don't need the alt for this project and uh we just need to copy this spam
and the image inside it seven more times using alt shift Arrow done just say 1 2 3 4 five 6 7 and
we change the IDE of the style of the second one to two and also we can change the ID of the image
to get another random image but this image would be always the similar when we refresh the page
so it's a static image so we change the number for example to 23 as you can see the next one the
third one would be three for the style and we set another random number for example 48 we can see
here this one will be four this one we just say for example [Music] 97 there's no image with this
number we just change it to to 23 for example oh we already used 23 so 12 and then the next one
is five the number would be for example 59 then we have six sorry six is here and then we have the
number for example 160 we got this font image then we have seven this one 370 and this the last one
eight and the picture we just say 478 all right this is just a random image we got from this
website you can use any website you like and any image you like in your own project so let's
continue for our own project and after this div with a class of image container we have another
div with a class of button container because we want to have two buttons at the botton to uh go
to the next and the previous images using these buttons so we just have a div with a class of BTN
container and inside this St we have two buttons the first one has the class of etn and also an
ID of preve or previews and inside this button we just write preve we press enter to accept the
auto suggestion and here we have the button with the class of but BTN and ID of brief we copy
this button and we just change this to next and the this one to next as well yeah that
was it for the HT s part of our project in the next section we're going to start styling
our project using CSS so see you in the next section all right in the last section we have
finished with the HTML part of our project in this section we're going to start styling our
project using CSS first we need to create a CSS file so here in the index.html we click here and
we open the Explorer section using contra shift e and on the left side in the Explorer section we
right click and we click on the new file we name the file is style. CSS and we press enter before
using CSS in our project we must add a link to the CSS file within the HTML code so we switch to
index. HTML file and just after the title tag we add a link tag we just write link and we click on
the third Auto suggestion the one with the CSS now now we have a link tag with the relationship
between the H HTML file and the external sty sheet the HF attribute here defs the destination
of the link and as both files are located at the same directory we just need to write stalled CSS
for the URL now we can install our project using CSS first we save the file using counter s we
close this Explorer section to have more space on the left side and we go to sty CSS and we start
styling from the body section we just write body we open a setad of curly braces and first we
remove this uh default margin and we just write margin zero then let's bring the items to the
center horizontally by changing the display to flex and use just to find uh as you can see when
we change the display to flex the the buttons came next to the pictures but we want the bottoms to
be after the pictures so we Chang the this Flex Direction to column to bring the bottoms to the
botton of bottom of the page now we can use just the sorry align item Center to bring the bottoms
to the center and also text align Center to bring the pictures to the center and also we want to
bring the everything to the center vertically as well so we need to set the height to be 100%
of the viewports height and then we change the justify content Center to bring everything to
the center ver quickly and also let's change the background color to be black and let's remove
these scroll bars using overflow headden all right now you can not see the buttons but when we uh
install the image container and its images we're going to bring the images next to each other so
we can see the buttons later on so we go to the next section for styling and we sty image that
container div which covers all the images of our project so here we target that div by using Dot
and we just write image stash container and we open a set of cly braces let's set the width to be
200 pixels and we set the height to be 200 pixels as well and let's change the transform style to
preserve 3D because we want to have a 3D effects on the images and we change the transform we use
the transform property and we use the perspective function and we set the perspective to 100 pixels
sorry thousand pixels later I'm going to explain why I choose thousand but you cannot see it now
but later we're going to change it and see the effects on the uh browser first we need to install
the images and everything first to see the effects of this perspective so next we change the rotate
Y and we set the angle to be 0° we're going to see the effects as soon as we uh solell this the
span and the image let's Sol the span first so we target the image container and we set the
span we first we position it absolute and in order to be absolute depending on its parent
here we set we should set the image container we set its position to Rel relative so the spam
would be position absolute in relative to image container then we set the top and left to zero and
also we set the transform here we set the rotate y if you remember we did for the style of a span
we put a variable and we set different variables different number for example I is 1 2 3 2 8
so we're going to change the rot y depending on this variable amount so here we calculate
the degree by just using the variable we had here I and we multiply this to 45° as you can
see we can see the changes in the pictures so each pictures is rotating 45° and it's different
from the other picture for example the first one is 45° the second one is 90° and so on and also
if we wanted them to be in a circle in a sphere form we need to add translate Z and we set it to
be for example 400 pixels now we if we open this in a browser you can see it better you can see
that all the images are around each other and if you start the image itself this image here the
image tag so we target that image tag by just say do image container the span and then the image
first we position it absolute and we bring it exactly to the center by setting the left and
top to zero and also we set the width to three sorry to 100% And if you go here yeah we forgot
to do this spam here for the width 100% so we set this one to 100% as well so now we can see
the all images around each other and in a nice way so in the in the next section we're going to
use JavaScript to rotate them automatically but for now we just first install these buttons so we
target the button container first so we just say ptn Das container and we set the position to
be relative because we want to position each button to the left and right later using position
absolute and we set the width to be 80% and we set the justifi content is space between so we want
them to be one in the left and one in the light right side then we have each button we position
them Absolute as you can see now they are on the top of each other but it's fine later we're going
to position them one by one actually we didn't need this justify content because we are using
positioning absolute to uh set the position of the buttons so we bring this one a little bit
down by using button minus 80 pixels then we can use the background color to change the color
of the button we set it to be slate BL blue we change the color to be white we remove the Border
using border R border none we add some padding we set the padding to be 10 pixels up and bottom and
20 pixels left and right we add some border radius for example 5 pixels and we change the cursor to
be pointer so when we hover over the buttons we see a pointing hand all right let's uh change
the color of the button when we hover over it so we just say BTN hover and we add a filter and
the filter is brightness and we want to Bright it 50% more all right after this let's position each
button the first the the left button has an idea of brieve and we set it to be in the left side
20% you can see it here and for the the next one we have next and we set the right to be 20% as
well now if you change the size of the uh screen we still see the the buttons at the right and
left all right in the next section we are using JavaScript to change this Gallery automatically
for example every 3 seconds and also we're going to use add event listener method to uh add event
handler to each button so when we click on them we go to the next or the previous uh image so see you
in the next section for the JavaScript part of our project all right in the last section we have
finished styling our project using CSS in this section we're going to start adding functionality
to our project using JavaScript first we need to create a Javascript file so here we open the
Explorer section using control shift e and on the left side in the Explorer section we right
click and we click on the new file we name the file index.js and we press enter before using
JavaScript in our project we must add a link to the Javascript file within the HTML code so s we
switch back to index.html and just at the end of the body section we add a script tag we just write
SC and we click on the second Auto suggestion the one with the SRC as both files I mean index
that HML and the index.js are located at the same directory we just need to have index.js for
the URL now we can use JavaScript in our project first we save this file using contr S we close
this Explorer section and the elements we need to bring to the JavaScript are three things
these two buttons and also this container the image container the reason we need this image
container is we want want to change this style inside the image cont container I mean this one
the transform perspective th000 pixels and rotate y 0 degree because by changing this number we
going to change the image for example now it's zero if you change it to 45 we go to the next
image and also if you change to 90 we go to the second one so by changing this rotate y function
and its amounts from zero to and a step by step 45° we can change the images in the gallery so we
set it first to be zero and we need to bring this one to the JavaScript we can use Query selector
method to return this element and also we can use get element by ID method to return these two
buttons because they have uh an ID of preve and next so inside JavaScript we create a constant
and we said it to be image container element this is the name of the constant and then we set
it equal to document. query selector and this the CSS selector is image container we can use altc to
turn on the VRA to see the codes clearly then the next element is the left button or the preve we
just call it preve element and equal to document. getet element by ID and the ID is pre we copy this
using alt shift Arrow done we change this prieve to next and this one too to next now we we going
to add add event listener method to each buttons to track the click on them and when we click
on the next we want to see the next image and when we click on the previous button we want to go
back to the previous image so first we add the add event listener to the previous one we just say do
add event listener and the first parameter inside the add event listener is an event handler and
the event handler you want to use is click and we the second parameter is a call back function
which will be triggered when the event happens I mean when someone click on the button so when
this one happens first uh we want to change uh that let's make a variable for this zero and 4 to5
so we call it X we just say let equal x sorry let X first call it to zero and when someone click
in the back we want to change this to x equal x plus 45 so we want to add 45 degree to the to the
X and after that we want to update the gallery so we create a function called update gallery and
here we create a function we just write function update Gallery we open a set of parenthesis and
a set of curly braces and the gallery the update Gallery function the things it does is change
the style of this transform property here this transform properties so we first we target that we
just say image container element. style. transform and we equal this to this one is a style is equal
to we want to add this uh variable so we add a back tech to to be able to add variables and we
just write perspective this one is a constant we just set it to be thousand pixels and we change
the rotate why instead of just zero degree we just add a function here sorry we add a variable
here by using dollar sign and a set of calies and after that is degree so this one is X so when
we click on the previe previews we can change this one so first we check rotate y rotate y
perspective this is wrong perspective and also we write down here update wrongly so we delete
this extra a here now we click on the previous we can see the previous uh image let's add some
transitions so we can see it more smooth so we go back to install the CSS and here we add a
transition on transform and we set it to be 7 Seconds now we see a transition between moving
the images let's do the same things for the next button as well so we copy this and we just change
this preve to next and this one instead of plus should be minus so now we click on next we see the
next image and here we see the previous one let's add some timer so we have some uh a slideshow
as well so here inside the gallery we add a set timeout method set timeout method actually set a
timer which execute the function after the timer expires so we write we just write set timeout
set timeout has uh two things the first is the function that will be executed when the timer
finished and the second parameter is a time is the timer and it's in milliseconds so if we just
write 3,000 it means 3 second so we want this set timeout call this function after 3 seconds and we
just want to go to the next one so we change the X to x - 452 and we call this update Gallery
but before doing this one first time we need to call this function to this uh loop starts so
we just uh call a function here so now after 3 seconds we see that the Galler is moving but the
problem is when we click on the next or previous button we're going to call this function more
and uh we are setting too many set time out at the same time so which they are making problem
in our project so before calling the set this function we need to reset the set time out so
we can just create a variable here we call it set time out or we just say time timer and we
timer will be equal to this set time out and we're going to clear time out and the time the
timeout we want to clear is this timer so we we we copy and paste it here as well and it should
be before calling the up the function now when we click on the next or the preview first
we reset the set time out so it's not going to interfere its normal working let's check it
inside the browser you can see here refresh the page yeah that was it for our project I hope you
enjoyed and learn many things see you in the next project welcome to another project in this
project we going to create an animated search bar as you can see from the final version
of the project we have a uh magnifier with a new morphism design and when we click on the
magnifier we see a search bar and a microphone and also if we click on the magnifier again
the search bar goes back to its original size in this project we using the new morphism
design and we're going to use JavaScript to add and remove classes who have different
sizes for our search bar and also you see an animation in the microphone and the search
bar when we close and open the search bar in the next section we're going to start with the
HTML parts of the project so see you in the next section all right let's start our project
first we open the visual studio code here we close the get started tab in the file
menu we click on the open folder as usual I would like to create the project
in my desktop but you can create it anywhere you like in your computer so here
we click on the desktop and here we click on the new folder button to create a new
folder we name the folder animated search bar and we press enter here we click on the
select folder button to select the folder we close the get started tab again and on the left
side in the Explorer section we right click and click on the new file we name the file [Music]
index.html now we have our HTML file on the right side which is completely empty but we can use
an exclamation point and tab to create an HTML 5 boiler plate in order to see the browser inside
the visual studio code we can use the livesaver uh extension so here we just need to right
click and if you have installed life saer in your Visual Studio code you can see this uh part
in the in the menu so live preview Show preview we click here and now we can see the browser
on the right side which is completely empty but with the title document let's change the
title to be the name of our project which is animated search bar we can see the change inside
the title of the page let's close this part we don't need it now so we drag this line to the
left so we have more space on the right side in the index. HTML and the browser our search bar is
going to have a magnifier and also a microphone so in order to have these icons in our browser and in
our website I would like to use a website called icon Fun Finder so we go back uh we go to the
desktop and we click on the Google Chrome and here in the search bar you're going to search for the
icon finder actually we the search the icon we are using is similar to this page the microphone and
also the search uh the magnifier so here we search icon finder and in the search result the first
website iconfinder.com we click on this website and here we search for First magnifier and here on
the left side we we set the free icons so we can see only the free ones I would like to choose this
one which is very similar to the one in in the Google here so we click on it and we right click
on the image and we click on copy image address we go back to the visual studio code and in the body
section first we create a div with the class of uh search search bar container and inside this
we have a image tag and in SRC we paste the link that we have already copyed so we just
use control V to paste it so we can see the magnifier on the right side and the alternative
one we just write down uh magnet magnifier just delete this magnifier then after the image
we have a input we have an input with the class of input the type is text and we have a
placeholder we can see the input here we have a placeholder let save file we just say search
and some dots like this and uh after the input we have another image for the microphone so
we add the image tag and we go back to the icon finder.com website and here we search for
mik but for the Google one so we just say mik Google and the first one which is free two
we click on it and we uh right click and we click on copy image address we go back to the
visual studio code and we paste the link inside SRC attribute using control V we can see it
here and in the alt section we just say mic icon let's add some class to the images as
well so we can uh like a Target them later or like a we can do the a styling so we just say
class the first image is the we just called magc fire and for the last one we add
a class of mic icon all right that was it for the HTML part of the project
in this in the next section we're going to start a styling our project
using CSS so see you in the next section all right in the last section we have
finished with the HTML part of our project we have brought two icons from iconfinder.com
and we added a an input with the placeholder of search in this section we're going to add
the styling of our project using uh CSS first we need to create a CSS file so here we open the
Explorer section using control shift e and in the Explorer section we right click and we click on
the new file we name the file style. CSS and we press enter before using CS CSS in our project we
must add a link to the CSS file within the HTML code so we go back to the uh indexed HTML file
and just under the title tag we add a link tag we just write link and we click on the third Auto
suggestion the one with the CSS now we have a link tag with a relationship between the HTML file and
external sty sheet the href attribute defines the destination of the link and as both files index
at HTML and installed CSS are are located at the same directory we just need to have installed
CSS for the URL now we can start installing our project using CSS we save this file using control
s and we we close the Explorer section by dragging this line to the left to have more space on the
right side and then we go to inst solid CSS first I would like to decrease the size of these icons
so we have a better view of the our projects so we can uh install them easier after that so
we have two classes we have two images with two classes the class of magnifier and also the
class of mic icon so we target these two classes using dot magnifier we just set the width to be
uh 25 PX 25 pixel you can see it here and then we uh we use the mic icon for the for this icon
to style it and we just set the width to be 30 pixels all right now we can easier uh style the
our project so before doing anything we just uh stall the body section to bring the items to the
center change the uh the position and also the background color first we remove this the space
around the body elements the default margin using margin zero and uh we can use display Flex to
bring the items to the center horizontally using justify content Center and we can use height
100% of the viewport height to set the height of the body to the uh screen size horizontally
and then we can use align item Center to bring the items to the center vertically then we uh
change the background color to aice blue so we have a little bit of the bluish color similar to
white but a little bit having like a blue color so in this case we can have the new morphism design
in a better way in order to have the new morphism design in our project we need to have a color not
uh we need to have a different color than white because if you have a white color you cannot have
the the the shadow at the top which is white and and you cannot have this design all right let's
uh add the container change the container and add the Box Shadow and make the new morphism design so
we going to Target the this there with the class of search bar container so we copy this class we
go to solid CSS and we start styling it we just uh we just need to change the display to flex to
bring the items in the same row using align item Center we just change to display to flag first
and then they use line item Center to make them completely in the same uh same row then we change
the background color to be the same as the body which is Alli blue or Alis blue allice blue then
we have the padding of five pixels and let's add the Box Shadow first we can see so we have two
Shadow for having a new new morphism design First Shadow is the under the container which is the
Dark Shadow and we have another shadow on the top of the container which is the white shadow so the
first one the position of the horizontal Shadow is six pixels the position of the vertical Shadow
is six pixel as well so we can see this is the vertical Shadow this one is horizontal Shadow six
pixels and then we have eight p sorry 10 pixels of blue radius you can see the shadow now and also
we want the shadow to be transparent so we use the color black 0000 0 and uh 20% transparency all
right we can use ALC to turn on the WRA app so we can see the shadow nicer and let's add some
border radius as well first we set the width to be 300 pixels then we uh change the height to be
50 pixels we add a border radius to have a rounded Corner the I want it to completely be round in
the corner so we choose the same height the same border radius as the height so it's 50 pixels
and let's add the another box Shadow which is white and locates on the top left this one was a
bottom right because we had a positive amount of six pixel and six pixel go to the right and
the bottom and for the next Shadow which is white we have a negative amount of six pixel uh
another six pixel negative for the top so we can see the top and left six pixel 10 pixels blur and
we don't want it to be uh black we want it to be white so we use rgba function to create a white
color uh the white color is 255 255 and 255 but but this one we wanted to have 70% transparency
now we have the num num merism uh design for our bar that was that's very easy you just need two
two Shadows first for the bottom right black and for the top left white shadow all right so let's
add some margin which is a margin 10 pixels so when we have a smaller screen so the we can have
some space to the next uh here outside the bar all right and then uh let's uh continue installing
the magnifier so we just change the cursor to the pointer so when when we hover over it we have
we're going to have a pointing hand and let's position this absolute to bring it a little bit to
the right side so we position it absolute and we just say left 20 pixels but this one actually has
a 20 pixels to the screen size we wanted to have a 20 pixels inside the bar so we need to change
the position of the parent which is a search bar container to relative so the magnifier is here the
parent is search bar container which is the this uh this bar Let's uh position this microphone
to the right side too so we just say position absolute and we want it to be positioned in the
right side 20 pixels or just 10 pixels is enough I believe yeah and let's install this input as
well so we target the input with the with its class which is input so we targeted here we just
say input we change the background color to be trans transparent so we don't have any background
color then we have uh we remove the Border using border none and uh we just change the margin
to be 10 pixels top and bottom and 50 pixels left and right so we position it very nice in the
middle and uh let's remove this uh orange outline we want to create a design similar to Google so
we're removing this outline but actually uh it's been uh recommended to have the outline for the
website if you have the real website you you're designing and you want your user use your website
never remove the outline because it's recommended for people with the disability and they can use uh
the our website as well but for this for this only this project we we remove the outline to have a
beautiful looking website all right and also uh the color is fine but I would like to decrease
the color of the text which just set the color uh RG use RGB RGB function 100 100 which is a
like a dark gray color yeah all right so now we want to add a functionality to when we click on
this magnifier it expands and in normal time we want to have a smaller icon so in order to do that
we need to add some CL we need to add a class to our uh website here for example we add a class of
active and when the this active is added we want to uh you want to have a smaller uh a smaller uh
bar so we say when the active is is there we want the size of this you want the size of this search
bar instead of being 300 to be only 50 50 pixels so we just say if the active exist the search bar
container the it has the width of 50 pixels we just need to remove this space here all right but
when we are actually making a 50 pixels we still have this search input and also the microphone so
we want to remove the microphone and the search as well so we just uh we just say if the active
exess we want this input to be invisible we just say visibility none or we just change the width
to be zero and also we for the microphone as well we just say do mic icon we want to change the
width to be zero so later we're going to add a like a transition to be uh the width of the
microphone and search is going to increase and decrease with the animation as well so yeah that
was it for the CSS part of our project in the next section we're going to add functionality to our
project using JavaScript so see you in the next section all right in the last section we have
finished with the CSS part of our project we have added a class named active to our search bar
container which when we add when we add it we have a circle and when we remove it we have a big bar
with the uh search and the microphone but when we when we have this class active we don't have
the microphone or the search bar and the width of the search bar is only 50 pixels let's remove this
active class and uh we're going to use JavaScript to add and remove this class using toggle method
and uh we're going to to add some animation so we we're going to have like a a smaller and a bigger
bar and the transition between these two uh sizes so first we create a JavaScript file we open the
Explorer section using control shift e and in the Explorer section we right click and we click on
the new file we name the file index.js and we press enter we drag it to this part and before
using the JavaScript in our project we need to add a link to the Javascript file within the
HTML code so we go back to the index set HTML and we scroll down and here at the end of the body
tag we add a script tag we just write SC and we click on the second Auto suggestion the one with
the SRC as both files I mean the index. HTML and index.js are located at the same directory for
the SRC attribute we need to just have index.js now we can use the JavaScript for our project so
we close this Explorer section to have more space for the coding part we close this uh browser a
little bit more and we go to index.js to start add add functionality to our project first we
need to bring this magnifier elements so we need to handle the clicking events of this icon so in
order to bring this element we we need to use the uh for selector method because this image has the
class of magnifier so in order to return the uh an element with a class we can use the quy selector
method so here we create a constant and we call it search bar container element and we equal it to
document. query selector and the the C selector was search I'm always making this mistake so
search bar container all right let's use alt C to turn on the word RP and we add a add event
listener method to this element and the event we want to add is uh click so we want to handle the
click and if someone click on this icon we want to trigger a function which we need to add here
so the things we want to do is to add and remove the active class uh actually we we don't need to
add add event listener method to this element we need to add it to the magnifier and the magnifier
has the class of magnifier I don't know why I uh first brought brought this one so we need to
Bro bring to magnifier so we just say counts magnifier and just say magnifier element we
just say document. h selector and the class is magnify so we need to add event listener to this
element so we just say magnifier element. add event listener because we want to handle the
click of this icon and we want to add the or remove the active class to this element M which
is the parent search bar container and we just say search bar container. classlist and we want
to toggle the class of active so let's try this by clicking on the uh this magnifier icon as
you can see the we we successfully added the active class and let's add the transition so we
have we're going to have animations instead of Sudden Change of the width and removal of the
microphone and the search bar so in the solid CSS we first we add a transition to the search
bar container so for the width uh because the width is changing from the 300 pixels to 50
pixels so we had a transition on width and we want to have uh one and a half second for
the transition let's try it and we can see the movement and but the microphone is changing
appearing suddenly so we want to have have a transition to the microphone and the search bar
as well so we go to the microphone and we add a transition on the width as well because we
are changing the width from 30 pixels to 0er pixels so we say width and we want to have a a
little bit less than one and a half so we just say um 4 seconds and uh we can see that uh is
appearing with the transition but I want it to have a delay so when the transition of this bar
is finishing at the end I want this one to appear and disappear at the end as well so we just say
transition delay we added 1 second delay so now we see that the microphone disappears after 1
second delay and appears with the delay as well and let's add the same things to the search as
well so we can copy this and add it to the input section as well so we try it uh still uh the width
input to the active than zero or we haven't add a width to the input first so just uh add the
width of 100% so now we try and we can see but this is a little bit fast we just say one second
all right and uh for the delay yeah just add some less DeLay So makebe half a second this one looks
better we can you can play with these numbers and get the best for your project uh that was it for
the project I hope you enjoyed and learned many things we have practice neomorphism design
and also uh transition and also removing and adding the classes with the JavaScript and also
we have learned how to bring the icons from the icon finder.com also uh before I forget we should
add the class of active here as a default so when someone comes to our website they can see only
a circle and when they click on the magnifier they see the real size search bar I hope you
enjoyed the project and see you in the next project welcome back to another project in this
project we're going to create a loan calculator as you can see from the final version of the
project we have three inputs here the first one is the loan amount the second one is the
interest rate and the last one is the amount of months that we would like to pay the loan
for example if you have uh $100,000 loan with the 10% interest rate and if you want to pay
this loan for 12 months we have to pay 9,166 67 per night so any changes you do for example
if you change the interest rate to 4% and we press enter you see the difference here inside
the monthly payment so we're going to firstly by using HTML add these inputs then we're
going to style this project using CSS and finally with using JavaScript we're going to
get all these inputs data and by just adding a for formulation we can calculate the monthly
payment and show it inside here in real time so in the next section we're going to start with
the HTM part of the project so see you in the next section all right let's start our project
I opened the final version of the project as our reference so we can just compare our code
with the final version and uh let's start firstly create the HTML part of the project so let me go
to my desktop and I open the visual studio code you can use any text editor that you prefer once
you open the visual the studio code we close the get started Tab and inside the file we click on
the new uh new folder here we choose the folder we want to create the project inside it I want to
create the project inside the desktop as usual so I click on desktop and here I create a new folder
and I call it the same as the name of the project which is the loan calculator all right now we
just press enter and we choose the folder that we have created by clicking on the select folder
here we close the get started tab again and here on the left side which we call it uh Explorer
we create the index. HTML file with the file we need to create the HTML file so here we can
click here on the this button or we can right click and click on the new file and we call the
file as I mentioned index.html and we press enter on the right side now we have our index. HTML
file which is completely empty but we can have an exclamation mark to create an HTML boiler plate
so we can just add ex exclamation mark as you can see we have a auto suggestion from EMT then if
you click on this one the first Auto suggestion we get the HTML boilerplate so let me open the
browser I'm using the live server extension and if you click here on go live at the bottom uh
the browser is going to be open by our uh HTML file as you can see index. HTML is open here
and the title is document as we mentioned here so let me bring theb the brow uh the vs code on
the left side and the browser on the right side so you can see the changes in real time and the
title is not document let's change the title to the name of the project which is loan calculator
so we just say loan calculator all right so now you can see the title is different Lo calculator
after that as you can see from the final vers we have a title and we have three inputs and finally
we have monthly payments okay and all of them are inside a container so we want to have a div first
that contains all these things inside it so inside a body tag we add a div as a container we use
that div then we have a H1 tag which uh the just we want to say loan calculator here so we
just say loan calculator all right so you can see the H1 tag here we're going to style it later
later using CSS but for now we're just having the HTML the next one we have uh three inputs and
also we have a paragraph here okay so after this H1 tag we have a paragraph it just says loan
amount and after that we just have a dollar sign okay and inside this paragraph We have an input
so we just add input and the type of the input is number so I just choose input clone number we
get the auto suggestion if you click on the auto suggest is going to populate the input with the
type of number the reason we choose number because we want to only allow the user have number in the
inside this input nothing else so if you put the if you don't mention type number they can even put
the string or alphabet okay so it doesn't have a name this input but the ID is unique here because
we want to later detect which input is using so we have to put the ID for each of the uh inputs
so the first input the ID would be for example loan Dash uh amount so I just let me write loan
Dash amount okay and uh we also have a minimum a maximum amount so the minimum for this one would
be one and we also have a maximum we just say for example $500,000 for example you can choose
anything you like and also we have a value so we want to have a default value for example in the
final version the default value is 10,000 for the loan amount for the interest rate is 10 and for
the amounts to pay is 12 so here we just choose a value here okay and the value for this one is
for example we just say $10,000 because we want the this initial value between 10,000 the other
thing the other inputs are very similar to the first one so we can just copy this paragraph using
alt shift arod done two times and we're going to fill the other inputs and change them here so the
the title for the next input would be for example interest rate so just say interest rate and we
just add the percentage here the mean value for this is different we just set it to be zero and
also we want the maximum to be 100% so just uh it's no interest rate is 100% but we just in case
we just put like this and the value for this one we just say 10% interest rate all right and also
for changing the value as you can see when we change this one one by one goes up we don't want
this uh interest rate to to be changed one by one the step will be one we can change the step here
and the step for this one we just want to set it to be 0.1 so it's going to be change like this
okay and finally the last input is just months to pay so let me write down here months to pay
and uh so the type is number or also we didn't change the ID for the this one I forgot to change
it so be sure to change this want to interest rate so interest Dash rate and for this one the ID is
months so this one should be months to pay and the ID is months das2 Das a okay this are the
unique IDs that we can Frack later the inputs they Chang in the inputs and also the minimum
and maximum for the months to pay for example the minimum we just say 6 months and the maximum
for example 48 months and the value for this input for example we set it to be 12 Okay so we've done
with the input parts and the last part is just a a paragraph here saying monthly payment so here
we just add a paragraph and we just say monthly payment okay and we add a clone here so that was
it for the HTML part of the projects so in the next section we're going to use CSS to InStyle
the projects so see you in the next section all right in the last section we have completed
the HTML part of the project in this section we're going to install the projects using CSS as
you can see from the final version the container is in the middle of the screen and also the
input is uh occupying the whole Space of the container so we just need to bring them in the
center and also EST sty them with CSS so first thing first we need to create the CSS file so
we can open the Explorer section using control shift e and here we just uh um create a file and
we just name the file ay. CSS and we press enter in order to use the CSS file we need to go to
the index. HTML and we add a link to this CSS file so we go to index HTML just after the title
we add a link tag we just write link and in the auto suggestions we click on the one with the CSS
so this is going to make a link between the HTML and the CSS file as you can see the relationship
is the sty sheet and the destination of the file is a solid CSS because they are both on the same
directory so we don't need to add anything else we just need to add the name of the stall CSS now
we can use the stall CSS inside the our project so we close the explore section so we have more
space and also we want to add more things here for example classes and other things because we
want to Target these elements for example this paragraph or input we need to know we need to add
a class to them to Target them inside the instal CSS so for each of the inputs I'm going to add
a class with with the name of input so I'm going to add them together using the Dual cursor so I
just keep the alt and choose the other input as well and we just can write class for all of them
and we press enter and inside the class we just put the uh we just say inut puts so we can now
Target this input all of them using this class and also for the this diff I want to have a class
and we just call it container okay and also for the this monthly payment paragraph I want to just
add a class and I call it payment all right so now we can just Target them easily inside the install.
CSS so inside the installed CSS first thing first we're going to install the body section so we just
write here body and we open this set of Ky braces the first thing I want to do I want to remove the
space between the text this container and the the wall of the browser so we can simply do that using
just adding the padding zero and also margin zero so this is going to remove the space around us
so we can simply install them now and then we want to add the height and display Flex so we want
to change the display to flex because we want to bring the contain container to the same Center so
we need to change the display to from block to flx and also we have to set the height for it because
we want to bring them to the center vertically so we need to have a height of 100% so the CSS knows
that bringing to the center is just bringing in the middle of the 100% of the height so we set
the height of to be 100% of the viewport heart so whatever view we have we set the uh 100% of it
and now we can bring this container to the center first thing we want to bring it horizontally using
justify content Center as you can see came to the center horizontally for bring it uh to the center
vertically we can use align items Center so this is possible because we have used the height 100%
ort height otherwise we couldn't reach that and also we want I wanted to change the font family
to Courier new Courier mono space so this is kind of a cool uh F so that's it for the body section
now we want to Target this div that is containing all of them so this is a div with a class of
container so we can simply Target that using dot container all right and we we add a set of K
Braes so the the things we want to do we want to change the background color to be similar to the
final version which is kind of green color and uh we just need to say background or background color
we just change it to dark cm this color and I want the text to be white these textes I want them
to be white to be easier to be read so we just change the color to be Lis blue which is kind of
white but it's not completely white and we add a padding we want to add a space around the text
so add a padding 20 pixels and also I want this borders to be grounded so we can simply achieve
that using border radius 10 pixels okay so now we have completed the container let's install this
inputs so we know we now we know that that inputs they have the class of input so we can Target them
using dot input okay and uh they want I want to do I want to change the width to be 100% firstly
so they're going to cover all the space and also we uh we can change the font size to make the
size of the font bigger and I'll set it to be 20 pixels and also we want to change the height
so we want to have a bigger height and it said to be 30 pixels okay that looks fine let's just
install this paragraph here we have added a class with the name of payments here so we can Target
that using dot payment and the things we want to I want to do just a change the font weight to be
600 to make it a little bit thicker like this and also make a little bit larger using font size to
be 20 pixels okay I think it looks fine so that was it for the CSS part of the project in the
next section we're going to add functionality and calculate the loan using JavaScript so see you
in the next section for the JavaScript part of the project all right in the last section we have
completed the CSS part of the project in this section we going to add more functionality to the
website using JavaScript so we want to calculate firstly the interest of the loan and also after
that we want to uh calculate the monthly payment and we want to replace this one with the one uh
is calculated and we just say monthly payment for example $1,000 per month or similar to this
one the first things we need to do is just get these numbers from these forms and we track the
changes here so uh the first step is to create the JS file the JavaScript file so we need to
open the Explorer section using contr shift e and here on the left side we can create a new file
and we call it index.js similar to the one we have done for the CSS we need to add a link to the HTML
file for the Javascript file as well so here but the Javascript file the link should be at the end
the CSS is at the beginning but the JavaScript is at the end the reason is we want the the page
is compl completely loaded and then we get the data and bring it to the JavaScript and calculate
it inside the JavaScript otherwise we don't have access to the website anymore so you should always
put the link of the JavaScript at the end of the body section in order to do that we need to just
add a script tag we just write SC and we can get the this Auto suggestion saying script double
con SRC so the SRC which is the destination of the link as the both files are located at the
same directory is just index.js now we can use the Javascript file inside the project so we can
close this section and uh the things you want to do is track the changes inside the input okay we
can bring the all of them inside the JavaScript the other way that is easier is to add a unchange
event listener inside the input section that is going to call a function inside this file so we
have three inputs so let me choose all of them by using alt keeping the alt and clicking so we need
to add an unchange event listener the unchanged event listener so let me we were I was typing
here as well so let me choose it again so here here and here okay so I write down unchange and
I get this suggestion unchange I click I uh press enter this unchange is going to trigger a function
so we need to put the function so we just call the function calculate loan for example anything
can put just we open and close a parenthesis the reason we put the parenthesis we want to call
the function if you don't put the parenthesis it's not going to call the function okay so we need to
now create this function inside the index.js file all right so we go to index.js and we create the
function here so we just create a function we can click here on the function statement in the auto
suggestion the name of the function is calculate loan and it doesn't have any parameters so each
time we just change this uh form we're going to call this function let's try it for example we
console log uh we just say change and let's open the ex uh let's use control shift C to open
the uh console here so we click here under the console and each time we change the input
we choose we just have to call the function which is console loging change you see each of
them is calling the function because all these inputs they have the unchange on that all right so
instead of console logging here we're going to so let me delete this console log so we're going to
get the value of these inputs we want to get the values and we want to calculate the interest and
monthly payment from these values so for example we want to get the first value for example we want
to get this loan amount value the things we need to do is just say loan loan amount value this is
just a name and this name is equal to document we want to Target the document document is all the
website so we just use get element by ID which is a method from JavaScript that is going to get the
ID for example the ID of the first input is loan amount so we can copy this one and just inside
a parenthesis and a double code we can put the loan amount and we can Target inside this using
uh the target the value so because we want to get the value of that all right so now if we let me
fix this if you console log now the loan amount value and here if you open the console uh if you
open the console using F12 for example let me bring it down so now the console is open here we
open the console here now if you change this loan amount for example it's now 10,000 if you make it
10,000 and one you can see the 10,000 one here so we are getting this amount and conso logging it by
just calling it here okay any amount we write down here for example 300 we see here okay similar to
the one we have done for the loan amount value we can do for the interest rate months to pay and
other things as well so let's do it here let's close let's delete the console log and we just get
the interest rate value this is uh this is similar we just Target the document and we use the get
element by ID method and this is Insight it should be the ID of that input the idea of the input of
this second input is interest- rate so we can copy it copy it and paste it here and we can Target
the value here we're just saying do value let's do it for the months to pay as well so we just say
months to pay value and this is going to be equal to document. get element by ID and inside the
parenthesis we just put the ID of the next input which is months Dash to- pay and we put it inside
a double quote and we target the value like this now we have the value of the all the inputs now we
can calculate the interest in order to calculate the interest we just let me just make another
constant and we call it interest so interest is equal to uh this is the way we calculate interest
we just have to have loan amount value and this is going to be multiplied by the interest value the
interest rate value multiply by 0.01 which is the converting the interest rate to percent because
this is just in 10 but by multiplying to 01 we're going to convert it to percent then uh all of them
is going to be over or uh divided by months to pay value okay now we have the amount of Interest
now we can calculate the monthly payment so the monthly payment we just write down monthly payment
is going to be equal to the other parenthesis we just say loan amount value over months to pay
Value Plus the interest that we have calculate here so we just say interest okay this is the way
we calculate the monthly payment so this is not related to JavaScript this is just a formulation
accountant used to calculate the monthly payment but the way we calculate and write down the
formulation is like this inside the JavaScript now we want to put the this amount inside here
okay so first thing first we need to get this we have it here a paragraph saying monthly payment
but it doesn't have an ID we can Target it by the class but the simpler way is to add an ID here and
we just call it payment and inside the index sjs we can change the uh HTML inside this paragraph
by just saying we just Target the document we get that element by using the get element by ID and ID
was the payment and we want to change inside this element we want to change the the inner HTML of
this place okay so HT inner HTML should be equal and uh because it's Dynamic we want to put the
monthly payment inside and monster payment is a variable we need to add a back te here back te
is located over Pap tap key it's different from the normal quote so some students they make this
mistake so this is a different things so you add a backt and inside the backt we just write down
monthly payment and this is going to be equal to this monthly payment but because this is dynamic
we need to put it as a variable so it should be inside a dollar and a curly braces and now we can
copy this monthly payment and put it here okay now whatever we have change here for example we make
this is 10,000 we make a 10,000 one this is going to calculate the monthly payment all right this
one to but as you can see sometimes these digit digits are too long we don't need actually this
kind of digits we can just uh round this one or just keep these two two digits the simplest way
is just add to this monthly payment we just add a two fix method from JavaScript we just say
dot two fixed and we want to fix it to two digits so we just say two here okay now if you
change this one you see that we have only two digits here okay now anything you type you can
just see the monthly payment dynamically so we can easily calculate any loan amount using this
website that was it for our project and that was for the JavaScript part I hope you enjoyed
and learned many things see you in the next project welcome back to another project in
this project we are going to create a new year countdown as you can see from the final
version of the project we are having a timer that is decreasing and getting closer to
2022 the time that I'm recording this uh project it's 2021 December 6 so 25 days
2 hours and 50 minutes is left to 2022 we're going to use JavaScript to dynamically
create these numbers and get the current time and date from the computer and update
it inside this container in the next section we're going to start with the HTML
part of our project so see you in the next section all right let's start our project first
we open the visual studio code and here we close the get started tab in the file menu we click
on the open folder I would like to create the project in my desktop but you can create it
anywhere you like in your computer so here we click on the desktop here we click on the new
folder button Buton to create a new folder we name the folder New Year countdown which is the
name of our project and we press enter and here we click on the select folder to select the folder
we can close the get started tab again and here on the left side in the Explorer section we create
an HTML file we right click and we click on the new file we name the file index.html and we press
enter now we have our index.html file on the right side which is completely empty but we can use
an exclamation point to have an HTML 5 boiler plate so we write an exclamation point and we
click on the first Auto suggestion in order to see the browser inside the visual studio code
we can use the live preview extension we just need to right click in the index. HTML file and
we click on live preview Show preview now we have the browser on the right side with which is
completely empty but with the title document let's close the Explorer section to have more space on
the right side and let's change the title of the page to the name of our project which is New Year
countdown so now we can see the change inside the tab of the browser the new year countdown title
and let's continue for our index at HTML inside the body section and we just added h2 tag
for heading and we just write countdown to New Year after that we added div with the class
of um just year because we want to add the year 2022 the time that I'm recording the video
is December 2021 and the 2022 is the next year so I just try 2022 but it depends on
how when you're watching this video and uh you can use 2023 and then we have another day
with a class of countdown which we are writing day hour minutes and seconds so we have another
div inside this div with the IDE of day we just right now just be hard code at zero and later
we're going to change this one using JavaScript dynamically so we copy this three more times
using alt shift using alt shift arod done we change this day to hour so my yeah sorry about
the the language is changed so this one is hour then we have minutes the last one is second
we just said it to be zero for now but we're going to change it dynamically using JavaScript
that was it for the HTML part of our project in the next section we're going to start styling
our project using CSS so see you in the next section all right in the last section we have
finished with the HTML part of our project in this section we're going to start styling our
project using CSS first we need to create a CSS file so here we click and we open the Explorer
section using control shift e on the left side in the Explorer section we right click and we
click on the new file and we name the file is the style. CSS and we press enter before using
CSS in our project we must add a link to the CSS file within the HTML code so we go back to index.
HTML and just after the title tag we add a link tag we just write link and we click on the third
Auto suggestion the one with the CSS now we have a link tag with the relationship between the HTML
file and external sty sheet and as both files are located at the same directory we just need to
have stolid CSS for the HF or URL of our style sheet now we can use CSS in our project so we just
save this file using contr S we close the Explorer section to have more space on the right side and
we go to solid CSS to start styling our project first we start with the body section so we just
write body we open a set of K places and first we remove the default margin of the page so we just
write margin zero then let's change the display to flex to be able to bring the accountant with
the center horizontally so we just write display Flex then uh as the flex Direction now is row
we see these things next to each other we just change the flex direction to column and now we
can use align items Center to bring the items to the center horizontally and then for bring them to
the center uh vertically we need to first set the height of the H or body section to 100% of the
viewport height which means 100% of the pages uh Pages height then we use justify content Center
to bring everything to the center vertically let's change the font family and change the font of the
page using font family property and we set it to be for example cive then we change the background
color to be for example slate blue [Music] and I think uh that's enough for the body section we
keep continue styling our project with this H2 and the year so we target the H2 here we just write
H2 first we change the color to be white then we make the text we change it to uh uppercase and
make everything capitalized using text transform property and we use uppercase here let's increase
the space between each letter using letter spacing and we set it to be four pixels that's it for
the this part H2 let's start the the year 2022 we just Target this class so we just write here
dot here we open a set of cly braces and we just increase the font size to 5m we change the color
we be white and we make it a little bit bold we use Font weight bold all right and let's continue
with these zeros which is a day hour minutes and seconds so first we target this container box or
container diff that we have here so we target this using dot countdown do countdown we just missed
the T here we add some margin 30 pixels to push it a little bit down and we change the background
color to be black but with uh 30% transparency so we can use rgba function and we set zero for red
zero for green and zero for blue which gives us the black color and we use point one for 10%
transparency we can see the background color there but we have to set the width to 100% to
see it all the way then we change the color of the PEX to be white and uh we change the height to
be under 20 pixels and uh the next thing is just change display to flex to bring these uh zeros
to next to each other and uh we can use justify content Center to bring everything to the center
horizontally and align items Center to bring them to the center vertically but after this we can
Target each of them each of these numbers using this div uh we just say countdown and Target
each of them so we just say countdown div and uh we just set some margin here we just say zero
top and bottom and 15 pixels left and right so we bring them a little bit we change the font size
to be 2.5 DM and uh we change the font weight to 500 so yeah just this one looks fine and uh we
just this we want this zeros a little bit upper because we want to add some ticks at the bottom
here we say day like U hours minutes and seconds so we just change the margin at top to minus 25
pixels we could change it here as well but that's fine too and uh yeah that's it next we go to add
the this uh like a day hours or other things so we we can Target them by using these IDs but
first we just need to add some before pseudo element so we just say do content and in the D
we use this before sud element and uh first we add the content to be empty so we cannot see
it see them so we we have to Target them SE separately to see them first and then we can uh
position them using this one so uh here we just write do countdown and we target the day first
and uh the before should should be should have a Content the content would be days you can see it
here now so we copy this three more times using alt shift aodan and this one would be hour so
here is hours then we have let's capitalize this then we have this day just say minutes a minute
and this one is minutes this one six second and finally we have seconds here now we can uh install
them here all of them together we just set the position to be absolute so this one absolute
in relative to its parent which is here so we position this one relative then we uh we just say
bottom bottom to be minus 30 pixels so they come down a little bit then we have left zero and we
change the font size to be 35 em so we make them a little bit smaller and we change the light
line height to be 35 pixels we also uppercase them using transform uh sorry text transform
text transform uppercase and we increase the space between each letter using letter spacing one
pixels and uh we change the font weight to be 500 and we change the width to be 100% and height to
be 35 pixels we cannot change the see this changes but when we are changing the the zoom level of
the page we we feel the change then we have uh in order to bring them in the center we can add at
the top X align Center [Music] here and we change the the width here and at the parent to be 100
pixels so they now from uh they have a good space from each other because of this 100 pixels so we
can see the days hours and minutes in a better way yeah that was it for the CSS part of our project
in the next section we're going to use JavaScript to dynamically create the n numbers here and
which are the real numbers up to the upcoming year which is 2022 in my case so see you in the
next section for the JavaScript parts of our project all right in the last section we have
finished with the CSS part of our project in this section we are going to add functionality
to our project using JavaScript first we need to create a Javascript file so we click here and we
open the the Explorer section using control shift e and on the left side in the Explorer section
we right click and we click on the new file we name the file index.js and we press enter before
using JavaScript in our project we must add a link to the Javascript file within the HTML code so
we go back to index.html and just at the end of the body section we add a script tag we just write
SC and we click on the second Auto suggestion the one with the SRC as both files I mean index.html
and index.js are located at the same directory we just need to write index.js or the URL or the
destination of the link we can close the Explorer section now because we don't need it anymore and
we can have more space on the right side now and we save this file using control s and we start
using JavaScript in our project by just bringing some items and elements to the JavaScript the item
the elements we need is this zero for days hours minutes and seconds because we're going to change
them dynamically using JavaScript so this div here has the has an IDE of day and the other one is
hour minute and the last one is second in order to return an element with the with the attributes
with the ID attribute we can use get element by ID method inside JavaScript so inside index.js
we create a constant we call it day element and we just say document. get element by ID method to
return that element and the ID was the ID of the element was day we can use alt C to turn on the
word trap so we can see all the codes and we close this one a little bit let's bring this count down
to new to the center as well uh that was H2 so we just say text align Center and also we can remove
this scroll bars using overflow hidden inside body section all right so everything's fine we just go
to index.js to continue bringing the elements the next element we want to bring is our so we just
say our element equal to document. get element by ID and the ID is our so we keep continue for
the minute element we create the const which just say document. get element by ID and the
ID here is minute next is second we just say the create a constant we call it second element
and we equal it to document. getet element by ID and the ID is going to be second all right now we
have everything the only things we need is to get the the data from our computer and get the current
date and also the the the the date of the first day of the 2022 all right so we can get that one
using uh new date Constructor the date Constructor so we just say New Year date and equal to new date
Constructor and the date is January 1st 2022 in my case and the the time time is z z and zero because
it's at the midnight all right and we have to use the get time method to get the time for that exact
date so the get time is we use the time and we create a function here to create the New Year the
countdown so we call the function update countown we just need to call this function at the top so
when the page is loaded we're going to use it so we add an extra a here we delete it so now we want
to get the the time now the time is now 5:56 p.m. and also the date is 6th of December 2021 the
time that I'm recording this video so we just get this one we just say F now and we equ call it
to new date and the date is just current so we put it empty if you put it empty we just get the Curr
time and we use the get time method again so now we just checked now now uh by using console log
you open the console this one is just a second is based on second so if you refresh the page we see
that new number each time we get a new number and based on seconds so each time a few seconds pass
and then we get a different number and also if we consel log the New Year date so New Year date
so we getting two times so the new year is this one is always the same if you refresh the page
you always get the same number for the new year but the current time is always changing yeah yeah
let's list this one and instead of saying New Year Day we just say New Year time to make more sense
and then uh we have a gap between now and the New Year time so we create another constant and we
call it uh Gap and GAP is this New Year time minus now and the Gap is always getting a smaller
because the new year is constant and now is getting bigger because uh every second is going up
we can check it by console logging the Gap and we open the console here now the Gap is this much and
then we refresh it it gets a smaller because it's 63 here it becomes 55 and each time you refresh
the page we get it a smaller Gap because now is getting bigger and this one is constant all right
now we can create the second minutes hour and days U the things I mentioned this number the New Year
time and also now is based on milliseconds so in order to create this second the second would be
th th milliseconds would be 1 second so we create a constant called a second which is thousand
and then we another constant is minute is equal to Second multiply to 60 it's actually 60,000
millisecond the next one will be hour and hour is equal to minutes multiply to 60 as well and
finally we have day which is hour multiply to 24 so we have 24 hours each day so now we have second
minutes hour and day and finally we can calculate the remaining days to the new year so we created
here we just name the day uh we just say remaining day we just call it D and equal it to math.
floor because it's a fraction because we want to uh divide Gap over day so this one sometimes
becomes a not rounded so we use math. floor we can conso log and check the T you see the D is
25 if we didn't use math. floor it would be 25.12 because each second is changing as you can see
here but we don't want this remaining because the remaining would be the minute hours and days so we
just get the floor and then we use the remaining for the rest so the next one would be hour the
hour would be the math. floor let's change this math. floor to so math. floor of uh the remaining
of the Gap so the remaining of the gap over day so we get the remaining here by using Gap percentage
day this means the this is the residual of this Division and uh we divide this over hour so now
if you conso log hour we see that we get two so we have 25 days and 2 hours left to the new year
but we because we Flor this number this one has the remaining two the remaining would be hour and
day so we create another constant and we call it minute and this would be MAF do floor and this one
is the remaining of the Gap over hour so this this is the residual of the Gap over hour and this
one is over minute and finally we have second with the which is if we follow the pattern this
going be the residual of the previous one so we have Gap the residual of the Gap over minute and
this one over second now we have day hour minute and second we just need to put them inside these
elements that we brought here so the first one is day so we just say day element. inner Tex and we
equal it to D we can see it here 25 days the next one is our element do n in text and we equal it
to H we can see two then we have minute element. inner text equal to M which is 54 minutes and then
we have finally second inner text which is equal to S as you can see now we have 25 days 2 hours
53 minutes and 57 seconds left and each time we refresh we get lower amount we get because we are
getting closer to 2022 but uh we cannot refresh it each time for a user to see the new number we
can use the set timeout method to uh set a timer to execute a function after the timer expires
so here we create a set timeout method and the set timeout method is going to call this function
update countdown every 1 second so 1 second would be 1,000 milliseconds so now we can see every
second if this number is refreshing and this function is being called inside the JavaScript
so we always get the uh new number in the seconds that was it for our project I hope you enjoyed
and learned many things see you in the next project welcome back to another project in this
project we're going to create a Pomodoro Timer as you can see from the final version of the project
we have a timer at the middle and three buttons a start a stop and reset if you click on the start
this is going to start the timer backward from 25 minutes and when we click on the stop this is
going to stop the timer we can start it again by clicking on start and also we can reset it by
clicking on the reset button and also we're going to have an alert when the timer is up so the
Pomodoro Timer is useful for people who wants to study after 25 minutes they can have some rest
so this power concept is for creating a timer for people who wants to work and focus on a job for 25
minutes so in this project we're going to firstly learn how to style it using CSS and also we're
going to learn how to add event listener to the buttons using JavaScript and how to create a timer
using set interval method of JavaScript in the next section we're going to start with the HTML
part of the project so see you in the next section all right let's start our project in this
section we're going to create the HTML parts of the project and also I have put the final
version here for our comparison as you can see we have the title we have a timer at the middle
and also three buttons so we're going to create these uh elements using htl first and then we're
going to style them using CSS and finally we're going to add some functionalities to them using
JavaScript the first things we need to do is to create a folder and also we're going to open
that folder inside the visual studio code so let me go to my desktop I create a folder here in
my desktop I'm going to call this folder the name of our project which is H Doro timer so once
you create the folder you can just right click and click on open with a code which is going to
open it with Visual Studio code and the default f folder for you is going to be P timer and
you can just create your files here to use it for your website so you're going to create the
first file which is index.html let's close the welcome Tab and here we can just now close this
section to have more space then we can use an exclamation mark to create an HTML 5 boiler plate
so we just can click on the first Auto suggestion the one that is showing the exclamation mark so
you can just check that one by clicking on the live server extension here as you can see the go
live if you have installed let's check the if you open the uh extensions using counter shift X you
have to install This Server this one live server you can just search your live server and here you
can just find this live server and you can just install it after installation you can just uh do
just click on this button here to open the server and open this website inside the browser so let's
just click on the go live this is going to open this one inside the our default browser which in
my case is Chrome so the title is document let's change the title to the name of the project which
is Pomodoro Timer and then we can just let's bring this one to the left side and the uh browser on
the right side so you can see the changes in real time let's decrease the size of the the browser
so inside the body we're going to start and add our containers head tags headers heading tags and
buttons for example here I'm going to add a div with a class of container which is going to cover
all the website and uh for just creating a div with a class of container you just have to write
down do container and then here you can just add the H1 tag with the class of title and here we
just write down on the name of the project pom moduro timer we see it here let's increase the
size so as you can see we have the this title inside the website now after the title we're going
to have a paragraph with a class of uh timer and also with the ID of timer so for the ID we add
hashtag for the class we add dots so this is going to gives us a class and ID class we usually use
for styling and ID for targetting targeting them using JavaScript later on so here I'm just want to
hard code now 25 minutes after the paragraph we're going to have our buttons so I'm going to put all
the buttons inside a a button wrapper so I'm going to create a de with the class of button wrapper
inside this St we're going to have three buttons the first one has the IDE of a start and it's
just going to say a start we can see it here let me Zoom this a little bit you can see it better
and then after that we're going to have another button with the idea of a stop and which is going
to say just a stop and finally we're going to have another button with the idea of resets so now
we have all the elements we need to create our website in the next section we're going to start
styling this website using CSS and make it like the final version we bring everything to the
center we create these buttons with different colors and also we make some that the text bigger
so see in the next section for the CSS part of the project all right in the last section we have
completed the HTML part of the project in this section we're going to Sol the project using CSS
so if you look at the final version here you can see that we have uh our container in the center
we have different colors with the buttons and also we have a bigger text in the center so the first
things we need to do is to create an a CSS file inside our project so let me open the Explorer
section using cont shift e and here we can create a new file we just call it a style. CSS and uh
before a styling and using the CSS file we need to add a link to this file within the HTML code so
inside the index HTML we need to add a link at the inside the head tag after the title tag we just
add a link we just write down link and then we can click on the third Auto suggestion the one with
the CSS so this is going to create a relationship between the sty sheet and this uh HTML file and
the destination address is style. CSS because both files are located at the same directory now we
can start assing our project using CSS the first things I want to do is to Target this div with the
class of container so the the div with the class of container we can Target that one we just use
dot container because it's a class we just Target it using Dot and then uh I want to change remove
the margin which is a marging zero for the top and bottom and Auto for the left and right so the auto
is going to bring it to the center but because it doesn't have a a width still we cannot see see
the uh margin Auto so we're going to set the maximum width to 400 pixels this is going to set
the WID WID and then in this case it's going to set the maximum width to 400 and bring it to the
center and then uh what I want to do is to we can bring the text inside this container to the center
using text align Center so this is going to bring everything to the center inside the container then
uh let's add some padding of 20 pixels which is going to add some space inside the element inside
the container around the elements and also Al we want to change the font family to robot Roboto and
if this font is not available I want to use send Ser instead okay so the font is looking good after
the container we're going to Target this title the title was an H1 tag with the class of title
so here I'm going to add that class so let's change the font size to be 36 pixels so which
makes it bigger and then add some margin at the bottom of 10 pixels which is going to have some
space between the title and the next things and then let's set the color of the title to be this
color 2 C3 e50 which is kind of a dark gray very dark gray so after that we're going to Target this
timer so the timer is a paragraph with a class of timer so we can Target that one here using dot
timer so let's change the font size to be 72 pixels so we have the zoom here let's remove the
zoom so you can see the real sizes and then let's change the color of this the same as the color of
the title now we have the buttons as you can see they're in the center and everything looks okay
but we want to Target the Buton button because the button here we can Target this tag using button so
button here so we have the button I want to change this button size to make it bigger so we change
the font size to be 18 pixels we add some padding in the top and bottom of 10 pixels and 20 pixels
for the left and right let's add some margin of 10 pixels so they have some space between them let's
change the color of the text to be white so you cannot see it now but I want to change the color
of these buttons to green red and gray so we're going to see it later clearly so let's for now we
just add some background color so you can see it better I just choose the same background color
black but I'm going to remove this background color later so let's remove the border so we
just say border none and then we we set the Border radius to be four pixels this is going to
make the buttons rounded so this is going to have some rounded corner and then let's add some let's
make the cursor to be pointed so when we hover over the buttons we see a pointing hand okay
the mouse cursor is going to change to pointer and then uh let's so I think that's it for the
button let's target each uh let's add some power effect or let's say just Target each button so the
button each of them has an idea of a start a stop and reset we can Target that one using P sign for
example start so to Target the start button let's change the background color to be 27 ae60 okay and
then let's also make this text to be uppercase so we just use text transform Al case so the text
uppercase and when when we hover over them over the buttons we just say button hover through the
class we use so when we hover over them I want to change the opacity to be 70% so it becomes
like this so you know that something happened and also we want to add some transition as you
can see this is very fast I want to add some transition to opacity and then just 3 seconds with
EAS and in and is in and out effect now as you can see it's kind of more nice and then let's target
the other buttons so we just say stop button for example the let's change the background color to
be C 039 B which is kind of C 039 2B which is a red color and then finally we're going to Target
this reset button we change the background color to be kind of gray color so it's going to be 7
F 8 C 8 D okay and then now we can just remove this background color here so let's remove the
zoom level so we have a styl it like this okay so that was it for the CSS part of the project in the
next section we're going to work on the JavaScript part and we're going to add some functionality as
you can see from the final version when we press on the start as you can see the timer is going to
a countdown from 25 minutes and then we and then when we reach to the zero we're going to have some
alert saying the time's up and then we can stop the timer and also we can reset the timer so see
in the next section for the JavaScript part of the project all right in the last section we have
completed a CSS part of the project in this section we're going to add functionality to the
projects using JavaScript so the first things we need to do is to create a JavaScript file inside
our uh folder that we have created let me open the Explorer section using control shift e and here
we can just create a new file and we call it for example index.js and before using it we need to
add a link to this file within the HTML file and the link file the if you remember for sty CSS we
have added in the head section but for JavaScript we have we should add it at the end of the body
section because we need all these elements to be loaded first in the browser and then we can add
the functionality using JavaScript so here we can just add a script tag we just write down SC and
we can click on the second Auto suggestion the one with the SRC and the SRC which is the source
address is index.js because both files are located at the same directory now we can use JavaScript in
our projects what we want to do first is to bring these elements these three buttons and also this
timer because we want to change the value of the time and also we want to add some event listener
to these buttons so uh let's bring these elements inside the JavaScript we just create a constant
and we call it uh a start element and we set it to be equal to because we want to Target the
browser we just say document. get element by ID because this is the it has the ID of a start so
we just inside the parenthesis we just say start okay so we can do the same things for the Stop
and reset button and also the timer so I've just copied this one using alt shift Arrow done three
more times the second one I want to change this to start to stop I can just use contr D to choose
both of them and then I just say stop and then here use control D make it reset and this one
is going to be timer so we have access to this timer start stop and reset let's add the event
listener to the three buttons so we we just add the start element we add an event listener the
event listener we want to add is Click because when we click on the button we want to trigger
a function I'm going to call the function uh a start timer let's remove this so start timer I'm
going to call the function a start timer and then let's create the function at the top so we create
a function and we call it a start timer and for now we just console log as start okay so now if
you open the console using F12 let's clear the console and then let me decrease the size so if I
click on start so before that we have to refresh the page if we click on a start we see a start in
the console okay so let's do the same things for the other buttons stop and reset I'm going to copy
this one using alt shift Arrow done and also let's copy this function two more times so this start is
going to be stopped these two is going to be stop this one should be stop too and this one should
be reset reset preset this one too okay so now if you check the console if you click on start to
see start stop and reset as you can see we con logging these three terms based on the based on
the button that we have we clicking now just we have created this we want to stop start working on
the a start timer function so instead of console logging we want to create an interval so every one
M every 1 second we want to update a timer okay so we want to create an interval I'm going to call it
interval and then we have to just Define it at the top by a variable called interval and then we set
this interval to a function called sit interval which is a built-in JavaScript function which is
going to trigger a function every they're going to trigger this function every for example this is 1
millisecond but we want to call this one every one second which is th000 milliseconds so every th000
milliseconds we going to trigger this function so for example here we're going to trigger the
function we just conso lock for example uh we just con lock something like a timer and then let's
clean the now we just call this function we as you can see every second we calling this timer you see
the timer 6 7 8 n so this conso log is getting uh triggered every 1 second but instead of doing that
we're going to update this timer so let's create a variable at the top first and we call this
variable time left so we just create a variable called time left and for now I just want to set it
to be 1,500 means uh 25 minutes okay this is based on seconds so 1,500 seconds is equal to 25 minutes
now that we have create this one so this is second but you want to convert this one to minutes and
seconds so I'm going to create a function here I'm going to call it update function update timer
for example and this one is going to create the minutes seconds from the time leftt so we just say
let minutes minutes and this minutes is going to be equal to math. floor because we want to set
it uh set that one to be rounded to the lower so returns a greatest integer less or equal to
its numeric argument for example if you have 2.1 is going to be two okay or 2 point so floor is
going to do that on so we want to just whatever time left is for example this whatever time time
left this we want to divide this one to 60 and this is going to be minutes and then the seconds
is different the seconds is equal to time left whatever you divide to 60 the remainder is going
to be seconds so the first one is minute whatever the remainder is is seconds this is the remainder
sign it means time left divided by 60 whatever the remainder would be this one okay now we have the
minutes and seconds we want to create it exactly like this time but first me first uh let me show
it inside the timer so we have the timer element we want to change its inner HTML to equal to uh
formatted time which we are going to create here the formatted time let's create the formatted
time so the formatted time is equal to minutes plus this one this sign and then second okay so
let's seconds we getting all we have to add a plus here too okay so now we have this formatted time
now we need to call this function to update timer here in that inside this function every 1 second
so here I'm going to call this update timer so if you now press on the start this is going to update
the timer to this one but uh we want to decrease the time every 1 second so we want to decrease the
time left we just add double minus to each time decrease it 1 second so if I now press the start
this is going to decrease uh from Top to bottom every 1 second but uh I just want to show you
some problem we have here for example if we time instead of just this 1,500 we make it for example
120 second if we start now you can see it's 1 58 57 but I want to show 0 one instead of one so it's
going to be formatted so there is a method to we can use in JavaScript it's called uh pad stock
but first we need to convert this one to a string so we need to make a template here like this and
the backt here is it's located over the Tab Key this is this this one allows us to have a variable
inside here so I'm going to add a variable using dollar sign and curly braces so what we do first
we convert this one to a string because this is a number and then after converting it to string
we want to add some zero using pad star which is going to add I want to say just make it two digits
and then if this first digit is not existed make it zero or even if if it's not existed we just
make it zero for example if I start now this one is 0 one instead of one okay so now let's do
the same things for the seconds so we're going to have the so let's remove this plus because we are
making a variable we don't need to have that one and then we we want to add another variable for
seconds first we convert the seconds to a string by using two a string and then we want to use uh
pad start for two digits we want to add zero okay so let's start now uh we have some extra things
we don't need this one as well let's start now as you can see 01 57 and then if this one decrease
too for example if we have for example 6 70 second let's start this one you can see 0 0 8 0 7 06 and
then if this one finish the minute is going to be double zero because we need two digits with zero
so this is the way you format your numbers using JavaScript okay so now it's working uh let let's
just bring this one let's leave it there let's I want to make a 10 seconds because I want to show
you an alert so each time this time finish I want to uh create an alert so here after the update
timer I just say if the time left is equal to zero Let's uh make alert saying time times up or
times up okay now let's try it so it starts from 10 seconds and when the 10 seconds finish we want
to see an alert saying times up you can see the alert times up and if you press okay you see the
time is still going and uh as you can see it's going back for so we need to clear the interval
as well so we need to clear interval and which interval we want to clear is this interval that
we have okay now let's try it again so after 10 seconds is going this is going to create an alert
and then set the time to zero so we can uh so we clear this one and then if you start again okay
it's going to back for again so uh we need to set the time again after the alert is we set the alert
to okay okay so we can here we just set the time left we set it to be again to for example 1,500 so
let's try again now we have 10 seconds when it's finished this is going to clear after the okay
clear the interval and if you start again it's going to start from 25 but let's work on the Stop
and the reset button so when we click on a stop timer we want to clear the interval too so we just
say clear interval and then we going to clear the interval so when we start then we press a stop is
going it is going to stop the timer at seven and if you start again this is going to continue so
this is for the stop timer for the reset timer we want to clear it and also we want to set the time
left to the, 500 which is 25 minutes and also we want to update timer and also we can call the day
timer here after the time left as well so now if we press on start it starts from 10 second we can
stop it we can reset as you can see goes to the 25 here we can start it again now let's set the
time leftt 2,500 so this is 2 25 let's increase the size so now if you press start it's going to
start from 25 to zero and when we reach to zero we get an alert we can stop it start again and also
we can reset the timer all right so that was it for creating this pomodora timer using HTML CSS
and JavaScript we also have learned how to bring the data the elements inside the JavaScript how to
create an interval and update the timer based on the minutes and seconds and how to format them uh
using pad start at the zero if the timer is less than nine or even it's zero and finally we we have
learned how to clear the interval using stop and the reset timer so that was it for the projects
I hope you learn many things see you in the next project welcome back to another project in this
project we're going to create an h calculator as you can see from the final version of the
project we have a container here with the title h calculator with an input of a dates for
example if you click on here we can choose the date of birthday for example I choose something in
in 2022 and if you click now on calculate age you can see the age is calculated based on this state
and saying your age is 21 years old what we want to do next firstly we want to create the HTML part
of the project and then we're going to work on the CSS and make this modern design and finally using
JavaScript we're going to dynamically create this H based on the input that the user provides so see
you in the next section for the HTML part of the project all right let's start our project in
this section we're going to work on the HTML part of the project I also put the final version
here for our comparison so you can we know what to do in each step so the first things we need to
do is to create a folder inside your computer for in my case I want to create it inside my desktop
so I'm going to create a folder I'm going to call the folder the name of our project which is age
calculator once you created this folder you can just right click and click on open with code
to open it with your Visual Studio code and here you can close the welcome Tab and as you
can see the h calculator folder is the default folder now for our Visual Studio code now we can
just click here on this icon to create a new file or we can right click and click on new file and
we call the file index. HTML so we have an empty file here we can just use an exclamation mark to
have an HTML 5 foiler plate so now in order to see this inside the browser we can use the extension
live server if you haven't installed it you just open the extension using control shift X and just
search for live server uh this is the extension you need to install you just click on it and click
on install I have already installed it so I have it in my browser then we just click here here
and go live to open it inside the browser this is going to open it inside your default browser
which is in my case is called Google Chrome now let's bring the website on the left right side
and the visual studio code on the left side so you can see the changes in real time you can
see the title is documents we can change the title now to age calculator and you can see that
it's changing because I have enabled my auto save so anytime I type something this is going to uh
save it and here show it simultaneously inside the browser after that we're going to go inside the
body section and we add a container for example in the final version we have a container here
which has a white background but the body is gray so we're going to have this container by
adding a div with a class of container so if you just write down do container this is going
to suggest you a div with a class of container if you press tap or enter you're going to accept
that suggestion after that we have an H1 TX saying h calculator and uh after that I don't we're
going to have a div with a class of form and inside this div we're going to have a label like
this enter your date of birth and then we have an input and finally we have a button so we're
going to have a label and this is going to be for the birthday and the labor is going to say
enter your date of birth after the label we're going to have the input but the type of the input
is going to be uh date so this is going to change the date so you can just click here and change
the date as you can see this is a HTML input with a type of date and for the input you're
going to have an ID of birthday and also we're going to have a name of birthday okay okay so we
have the input and finally we're going to have a paragraph with the idea of results which is
going to show the results for us for example we just for now we just hard code your age is for
example 21 years old okay so now we have just hardcoded these things but later we're going to
use JavaScript to calculate the Age based on the birth birthday and then we're going to NE in the
next section we're going to style it and make it like the fin version with the container in the
center with the hovering effect for the button and also we're going to bring them on top of each
other like this so that was it for the HTML part of the project in the next section we're going
to work on the CSS part so see you in the next section all right in the last section we have
completed the HTML part of the project in this section we're going to InStyle the project using
CSS so we're going to design it like the final version we're going to create the container and
bring it to the center so the first things we need to do is to create a CSS file so I'm going to
open the my Explorer section using control shift e and here we create a new file and we call it a
style. CSS before using the CSS file we need to add a link to the CSS file within the HTML code
so we need to go to the Head tag and just put it somewhere in the head tag for example I put it
at the end of the head tag after the title tag I just write down link and I click on the third
Auto suggestion the one with the CSS which is going to give me a link tag with the relationship
between the H HTML file and the CSS style sheet with the ENT instyle. CSS for the href so now we
can just start styling our project using CSS first we start with the body section first I remove
the default margin I set it to be zero so this is going to remove the default margin then the add
some padding of 20 pixels which is going to have some space let's change the font family to Mont
seret we need to put this one a double code and if this uh fult is not available we're going to use
send serf instead so now we're going to change the background color going to change the background
color to a light gray which is F7 f F7 F7 so we have done with the body section now we just let's
start as styling this container this de with the class of containers so I'm going to just write
down DOT container to Target that here inside the CSS and I just want to change the background
color to white you can just write down white or FFF let's say let's add some box Shadow 0 Z for
the X and Y and 20 pixels for the the I think 10 pixel would be nicer 10 pixels bless and then we
can use rgba which stands for read sorry red green blue and Alpha and we can just choose zero for
red blue for zero for green and blue for black color and for the alpha I just choose 2 which is
20% transparency now we can see the Box Shadow here then let's add some padding of 20 pixels
to add some space inside it uh let's remove the zoom level so you can see the real sizing and then
we're going to have if you open it now you can see this is all size I'm going to set the maximum
width to be 600 pixels which is this side and then from bringing it to the center I want to add
um margin of zero for top and bottom and Auto for left and right which is going to bring it to the
center like this and in the small size still we have the space because we have 20 pixels padding
in the body section so that's it for the container now before we forget in the container I want
to add some border radius as well so I'm going to add a border radius of five pixels which is
going to add a grounded corner for the container after that we're going to style the H1 tag here
the heading which is saying h calculator so we just say H1 so I'm going to change the font size
to be 36 pixels so I don't know what happened to here we can use text align Center to bring it
to the center and then we can just remove the margin top to zero and we add some margin bottom
of 20 pixels okay that was it for the H1 tag the next things we want to style is this form this de
with the class of form so we can Target that one just saying do form we can change the display
to flex to bring everything first next to each other and then we can change the flex direction
to column to bring them on top of each other like this and then we can use align item Center
to align them and bring them to the center like that after the form we're going to Target this
label we have this label here so we can Target that one here are just say label and then we
just change the font weight to be bold and we just add some margin at a bottom of 20 pixels
for example or 10 pixels okay that's it for the label and now we're going to style this input
here so we can Target the input by just saying input and let's add some padding of 8 pixels so
you add a space around that so for the Border I just want the one pixel border to be solid it
means that it's just a line and then you can use the color CCC which is kind of gray color
after that we're going to we can just add a border radius of for example five pixels to add a
rounded corner and then we can just set the width to be 100% which is going to be in the all here
but I can just uh set the maximum width to be 300 pixel it doesn't go more than 300 pixels
so if it's less than 300 pixel it's going to be 100% if it's more than that it's going to be
300 pixels and then uh I think that's enough for this okay so after this uh input we're going to
style the button here I don't know I have added a button or not so we missed the button actually
we have to add a button here after this input we're going to have a button and the button is
going to say calculate H like this so now we can just assile the button by just targeting
the button and uh let's add some background color the background color I want to add is 007
B FS let's change the color to be white the the text color to be white so we can see it better
and then let's remove the border with just set the border to be none and then we can just add
some padding in the top and bottom of 10 pixels and left and right to be 20 pixels and then we
can just set some border radius to be 5 pixels so we make it grounded in a corner we add some
margin at the top of 10 pixels and we set the cursor to be pointer so when we hover over it we
see a pointing hand and then also when we hover over the button so we can use the pseudo class
hover so we want to have different background color for example 66 uh sorry 0062 CC which is
kind of darker color and also we can add some transition on the background color for example
I want to have a transition of 3 seconds with e effect so you can see it a smoother uh like
a transition on it and finally we're going to install this result here which it's a because
it's a paragraph with the ID of result we can Target that one just targeting the ID of
result and then we just say margin top of 20 pixels we set the font size to be 24 pixels and
then we set the font weight to be bold and also we want to that's it I think that's enough
for this one so now we have done with the we can bring this one a little bit down by adding the
container as some uh margin top here to margin top for example 50 pixels so this this is the website
we have built as you can see we have the title we have the now we have a style the input the button
and finally the result in the next section we're going to dynamically get the data from the input
that we put calculate the age and then show it inside the results section using JavaScript so see
the next section for the JavaScript part of the project all right in the last section we have
completed the CSS part of the project in this section we're going to create and work on the
JavaScript part of the project and we're going to calculate the Age based on the birthday of the
person who put the information inside this input so the first things we need to do is to create
a Javascript file so I'm going to come back to visual studio code I want to open the Explorer
section using control shift e and here we create a new file and we call it index.js and we just need
to add a link to it let me close the installed CSS so inside the index HTML we need to add a script
tag which it's going to call this Javascript file and we need to add it at the end of the body
section we just write down SC we accept the a script tag with the SRC of index.js because the
both fils are located at the same directory the address would be the just the name of the file
the reason we put it at the end is because we want all these things to be loaded first on the
browser and then we call the JavaScript because otherwise we don't have access to these elements
using JavaScript so now first things first we want to add an events listener to this button they
calculate H so this button so we need to bring this button here so in order to bring the button
to the here we just uh Target the button I can add a button we can add an ID here we just say BTN for
the ID and here we just create a constant we call it BTN element and this is going to be equal to
document because we want to Target all the browser and then we just use get element by ID method and
we pass the name of the ID that we have passed to the button which is BTN now we have access to the
element we can just add the event listener to it we just add an event listener add what is this we
add an event listener to it and the event we want to listen is click and then we go we can just
call a function after this uh we can just call the function calculate Ag and then we can just
create a function here we just create a function we call it calculate H just for now I'm going
to conso log we just conso log clicked so now if we just bring this website to the right side
and open the console using F12 and here let me clear the console I click on calculate H you see
that your console logging clicked so instead of console logging I want to calculate the Age based
on the input so first things first we want to get the input information so the input here has an
ID of birthday so we can bring it here similar to here we're just going to copy this using alt
shift Arrow done I want to change this BTN to using contr D I want to choose both of them
and then just say birthday this is going to choose this birthday the ID and then just put the
constant birthday element to it now we have access to this so here first I want to just uh calculate
the inside what we get we just say birthday value we get the value which is going to be equal to
birthday element do value let's uh console log this birthday value so now if I change this one
for example to four of f real 4th of April 2023 and then we C click on calculate H we just get
this 2023 44 and if you change choose something else you can just choose the any for example
January 13 2006 you can print it here because we constant loing so we have to we have calculate the
value and then if the if no nothing is added as a value for example if the B birthday value is equal
to an empty string we want to just alert please enter a valid or please enter your birthday so now
there is nothing here if I click calculate H there is an alert saying please enter your birthday
so we are going going to prevent calculating if there's nothing here otherwise if there is
something there we're going to uh calculate the H we just a con H is going to be equal to we
call a function called get H and then we're just going to pass this value okay so we're going to
create this function let's create this function get H which is going to get the birthday value
so we're going to create this function it is very simple too so we're going to first thing first we
want to get the current dates to dat because we want to calculate we need to subtract the birth
date from the current date so the current date is going to be equal to new date this is the date
is the Constructor method from JavaScript this is going to get the date from the browser so if I now
console log here current date let's remove this if I put something here calculate age as you can see
we are getting this current date which is uh even it gives us the time too 6th of April 2023 11:00
and then now based on this one if you for example you want to just get the year we just say get full
year if we now conso law let's choose some date so we don't get an error and then let's clear the
console and then we just click on calculate H we get 2023 so the same method we can use to get
the year from this birthday value so if I consel a birthday value. get full year and then and we
choose something here we don't get an error so we click on calculate H uh we should uh oh we we need
to get the this is the current date we can just get the birthday sorry birthday date to we need
to get it because this is we need to create a new date but we need to pass instead of the date we
just need to pass the uh birthday value now if we just uh get the full year by just passing birthday
date. get full year let's test test this one we get 2023 birthday but if you choose for example
imagine 1985 if you just click on calculate age we get 1985 okay so now we have the year of this year
current date which is here dot get full year and then also we have the birthday year so now we can
just subtract that one and calculate the AG so we just say count H is equal to current date dogful
year minus birthday dat dogful year okay now if we console log H for example I choose somewhere 1975
we get 48 years old okay but this one is actually not always correct because based on the months
for example if you look at the time for example now it's April 202 three when I'm recording this
video if the uh birthday is before the April you are actually one year older than the person who
are who is born after the April so we need to calculate the months as well and then we know
that if the person is born after the today or before today so if it's after today we have to
subtract one from the person sorry before this date we need to subtract the time so I'm going to
calculate the months too so I'm going to say cons months and this is going to be equal so we we just
we just can copy this one and instead of get full year I want to use another method which is get
months okay now we have the months now we create a condition here we just say if if the months is
less than zero for example if something happen and the months is less than zero because uh this is uh
this if the current date is less than the birthday date so the month is going to be less than zero
or if the month is equal to zero it means uh for example the current date and the birthday is both
April but now we have to calculate the day so so uh after this condition we just say if this one
happen and if the current date dotg date which is going to give us the date is less than the
birthday date do get date so if the month is equal to zero but the day is less than that so in both
condition math less than Zer or month equals zero or the day is less than we're going to decrease
the age by one so we can do it by just saying age minus minus so we have the H for example 24 H
minus minus is going to make it 23 so now this is going to solve the problem and then after that
we're going to return return the H we just say return H so this is going to be output of this
function get H and we get the H here inside the calculate H so now here we can console log H so
let's calculate that for example let's choose for example 2020 12 January 6 it's 11 years old but if
the this is April after April for example May uh let's see the error oh because we want to change
the age we cannot use constant we need to use uh let here this should be a variable okay so now
uh let's do it again let's test 2012 it was 2012 January 6 was giving us 11 now if we choose after
April for example October gives us 10 10 years old so that guy is one year younger than the person
who is born before the current date so we we are getting a correct age but we want to show it here
inside this instead of just console logging it so instead of console logging we're going to get
this element from the HTML so we're going to get the element here because it's a paragraph with the
idea of result we can just Target that one we just create a constant we call it for example result
element which is going to be equal to document. get element by ID and the ID is result so now
we can just change its text we just say result element do uh inner text is going to be equal to
for example we just make a dynamic we just say your age I added the backt backt is located on top
of the tab key so we just say your age is and then we just add a dollar sign to make the variable
we add the age here this variable here and then another dollar sign because it can be year or
years because if a person is only one year old you should say you your age is one year old but
if it's more than one we should be say your age is for example 2 years old so I'm going to make a
condition here we just add here we just say if the H is greater than one just to say years otherwise
say year and then we add the old at the end okay so if the person is born for example last
year February your age is one year old if it's uh like a longer than that for example January
1990 your age is 33 years old okay so we have accomplished this one using JavaScript so let's
review what we have done so we have got the all the elements using the method called get element
by ID we have created an event listener here for the button if we click on it we're going
to call a function called calculate H and here we just get the birthday value by just
setting birthday element. value if the value is empty we're going to say enter your birthday
otherwise we're going to call another function called get age and pass this value and uh
we're going to calculate the Age based on the current date and the birthday we're going
to calculate the age and we got the condition if the months is less than zero or or the
day is less if the month is equal to zero we're going to decrease the age by one and
we're going to return the age get the age here we're going to put the put this text
inside the result element using enter text and we just make a condition to always write
down a correct sentences all right that was it for creating this project I hope you enjoyed
and learned many things see you in the next project welcome back to another project in this
project we are going to create an incrementing profile statistics as you can see from the
final version of the project we have three like a working experience website made and app
apps made we have uh three icons the briefcase cloud and the Apple icon which we are getting from
the font awesome and then we have three numbers at the middle representing our work experience
website made and apps made if you refresh the page we can see the numbers starts from zero and
increment until they get to the last number if if you may notice we can see that they get to the
last number at the same time we're going to use JavaScript set time off method to create and
trigger a function that uh increments number from zero to the end but uh proportionally so
they're going to finish at the same time so in the next section we're going to start with the
HTML part of the project so see you in the next section all right let's start our project first we
open the visual studio code and uh here we close the get started tab in the file menu we click on
the open folder I would like to create the project in my desktop but you can create it anywhere you
like in your computer so we click on desktop we click on the new folder to create a new folder and
we name the folder for example profile statistics which is the name of our project we just write
profile [Music] statistics and here we click on the select folder we close the get started
tab again and now we can create our HTML file so on the left side which is the Explorer section
we right click and we click on new file we name the file index.html and we press enter as you can
see now we have the index.html file on the right side which is completely empty obviously but we
can use an exclamation mark to create an HTML 5 boiler plate so we write an exclamation mark and
we click on the first Auto suggestion uh we can see the browser inside the visual studio code
using the live preview extension we just need to right click and click on live preview Show
preview now we can see the browser on the right side which is completely empty but with the title
document let's change the let's change the title to be profile statistics statistics now we can see
the profile statistic as it is as the title of the page then in the body section we add a container
and we just call the container a stats container we press enter to accept the auto suggestion so
we have now a div the class of stats container we close this uh Explorer section to have more
space on the right side so we direct this line to the left and we open the brow uh here all right
open the we open the this Dev and inside this Dev we add a you want to add some icons uh and then
a counter number and also a H4 tag for adding the icons in our website we can use the font awesome
website so we go back to our desktop and and we click on the Google Chrome and here we search for
font awesome in the first result font awesome.com we click on icons we just wait a little bit now we
we can search for the icons we would like to have I would like to have briefcase for the first one
this one the briefcase we click on this icon and then here we can copy the link tag which is an IT
tag with a class FAS and Fa briefcase we click to copy the HTML tag we go back to the visual studio
code and we paste it here we cannot see the icon yet because we must add a link to the font awesome
CDN uh within the HTML code so we go back to the browser and we open a new tab and here we search
for cdnjs cdnjs is a website so you can find any c CDN you like including bont awesome we click
here cdnjs and here in the search bar we search for font awesome we just write font and in the
result section we click on font Awesome version 5.15 if you scroll down a little bit here in the
first section we just cop uh click here to copy the link tag and we go back to the visual studio
code and just under the title tag we paste the link using control V now we can see the briefcase
inside the browser I want this briefcase to be bigger so we just add here fa- 3x to make it three
times bigger after this briefcase I want to add a counter div we just add a div with a class of
counter and we just want to add some number for example we want to add I want to add 15 as a work
experience so and then we need the attribute here for setting the data we call it the data seal
we want this the maximum number will be 15 and we set the data SE to be 15 as well so uh in the
JavaScript when we are incrementing the numbers from zero we by using this attribute we know the
maximum number we want in each counter all right after this div we can have a H4 tag just saying
for example uh year experience so just experience all right we just need to copy this let's add
some uh class to the font awesome too so later we can uh insty them in the CSS we just write here
icon and we copy this if two times using alt shift Arrow done so we just copy one time two time so
in the next in the second one instead of having briefcase we want to have our how many websites
we made so we just add a cloud here we just say cloud you can see a cloud and here instead of
having ear experience we just say website made the last one will be the App application so here
instead of having brief briefcase we just want to add Apple sign but FAS is a solid I want Fab
to be to have the apple and if you search in the font awesome Apple we can see here if you
click on Apple which is the logo of the Apple company the class is Fab fa Apple all right we go
back to the visual studio code and here we just say apps made all right now we have our icons
briefcase cloud and apple the work experience the first one the year experience is the 15 for
the website for example we say 260 and for the apps just for example say 27 just as an example
all right that was it for the HTML part of our project in the next section we are going to use
CSS to style the project so see you in the next section all right in the last section we have
finished with the HTML part of our project in this section we're going to start using CSS for
styling our project first we create a CSS file here here we open the Explorer section using
control shift e and on the left side in the Explorer section we right click and we click on
the new file we name the file style. CSS before using CSS in our project we must add a link to the
CSS file with within the HTML code so we go back to the index at HTML and we scroll up a little
bit and just at the end of the head tag we add a link tag we just write link and we click on the
third Auto suggestion the one with the CSS now we can use CSS in our project we just save the file
using control s and we go to install. CSS and we start installing our project first we start from
body section we just write body we we open a set of cly Braes and first we remove this space
around the body element you using margin zero we just need to remove the default margin of the
body which is just right margin zero as you can see in the browser we don't have any margin around
the body section then we can use uh first increase uh first we remove the Explorer section so we can
have more space then we can use display Flex to be able to bring the items to the center horizontally
so we right here display Flex as you can see the items came next to each other that is very good
then we can use justify content Center to bring them to the center horizontally in order to bring
the items to the center vertically we just first need to set the height of the body to be 100% of
the viewport heart so we just write height 100 VH which means uh 100% of the viewport height then
we can use align items Center to bring the uh to bring the items to the center very cck also we
can use text align Center to bring the items in line it to the center let's change the background
color to be for example yellow then we change the font family to be for example carfe all right
that was it for the body section let's change the let's add some margin around each uh container
and also set the width and height for them in the index set HTML the div that covers each counter
is stats container as you can see we have three stats stats container which is related to each
of these items so we go back to installed CSS and here we just Target the stats container we open a
set of C Braes we add a margin here first we just say margin 20 pixels and let's add some border
we just make the Border dotted now we can see them uh let's change the color of the border to
be green and uh let's change the width the mean width to be 200 pixels we can see them like this
and then we have the height to be 100 pixels so yeah let's let's bring this uh icons to the top
center of the box and also we want this to be responsive when they we have a smaller size they
come at the top of each other so we want the body the flex direction to be column when we have a a
smaller screen so we can add it here we just add a media query and here instead of screen we just
say a Max width to be for example a 500 pixels and then we just say Body Flex direction to be column
let's try it yeah now we can see them on the top of each other when we have a smaller screen let's
change this to 600 that's better and we can bring this briefcase or Cloud to the top as well so
we just Target this icons we have icon class for all of the the icons one two three so we target
them here we just say do icon and uh we position them Absolute but we want this to be absolute in
relative to the its container so we just change the position of this to be relative and then we
just say top minus 20 pixels or maybe 30 pixels and then we bring them 50% from the left but the
50% from the left actually bring the this icons the edge of the icon to the center but we can use
transform translate x minus 50 pixel to bring the to the center like a perfect the middle to be
in the center now let's target this uh number so we can see them so the number is the has
a class of counter so we just say do counter let's increase the size first just set it to be
50 pixels and uh let's increase the size of this uh container to looks a little bit better so we
just change this 200 to 300 and this one to 200 let's see this one in the browser so we open it
in the browser yeah that's it looks a little bit too big actually so we just change this to 100
and this one to 200 sorry about that so I just want to test that it looks okay or not yeah let's
bring this uh counter to the center and decrease its size now the counter where is the counter yeah
just let it to be 40 and we bring it to the Center we just position this to be absolute first and
then we bring it to the center by just saying left 50% and uh this one brings the hge to the
middle so we just change the transform translate X to minus 50% and then we just need to add some
padding to the stats container just say 20 pixels so the counter is almost in the middle we just
need to bring this uh text to the botton so we just Target them because they have they are H they
have the tag H4 so we just can say here at the top we just say or we target them under this we just
say stats container H4 and we position them first absolute and bring we bring them to the botton
just say say one pixels and we bring them to the center using left 50% and transform translate x
- 50% like the one we did at the top and also we don't want this text to be in two lines we can
prevent uh line wrapping using white space no wrap you can see the suggestion now we have the
text in one line only and let's change the color of this text to be green too so we can match the
Border so we here we just say color [Music] green yeah that was it for the CSS part of our project
uh let's uh increase the size of the counter a little bit more to be 50 pixels it looks better
we we check it in the browser too so we already have here yeah it looks okay because the my
computer screen is very small we always Zoom it uh like a 80% to be like a normal computer so
you're going to see it in your computer like this uh in this form yeah that was it for the HTML uh
sorry for the CSS part of our project in the next section we're going to add functionality to our
project using JavaScript so see you in the next section all right in the last section we have
finished with the CSS part of our project in this section we're going to start adding functionality
to our project using JavaScript so let's go back to the visual studio code we decrease the size
of the browser and here in the left we open the Explorer section we use control shift e to
open the Explorer section here we can right click and we click on the new file and create
our Javascript file we name the file index.js and we press enter before using JavaScript in our
project we must add a link to the JS file within the HTML code so we switch to the index.html and
just at the end of the body tag we add a script tag and we click on the second Auto suggestion
the one with the Cs SRC SRC actually is defines the destination of the link and as both files
I mean the index.js and index.html are located at the same directory we just need to write here
index.js for the URL now we can use JavaScript in our project so we save this file actually we have
a typo here this one should be years so first fix this one all right we save the file we go to the
Javascript file to start adding functionality we have to Target the counter this number uh they
have the class of counter as if you see here all of them they have a class of counter 1 2 3
we can bring them inside the JavaScript or we can say we can return them using query selector
method we just need to make a constant we call it counters element it means all of them and we
just inside the document we use Query selector all because we bring we want to bring more
than one counter so we just in uh inside a parenthesis we add a double code and we say dot
counter because the counter is a class we added dot here let's uh close this Explorer section
so we can have more space and we we can use alt C to turn on the WRA so we can see the code
completely so here uh we need to Loop through the all the counters first of them second and the
last one we just need to use for each method to execute a function once for each element of the
array that we are getting here this is actually an array of three elements so we use four each
method we get each uh each element so we call the element counter element we make a function
and uh first we can set the numbers to be zero because we want to start from zero so we just
say counter element which we are getting from here do enter text because we want to change the
the text inside the counter so we we just set it to be zero now we can see all the counters are
zero all right now we need to create a function to increase the number of this every for example
uh few milliseconds we can use we can do we can create a function and then we can use set timeout
method to trigger that function every few seconds so we just first we create the function here we
call the function uh for example increment sorry increment counter first we need to call this
function here we just call it here and inside this body braces we add our function first we
need to get this number the zero so we just say current number or current yeah just say we
just current num and we K we make this one as a variable current n is equal to counter element.
inner text but this one is a string actually we should convert this one to number so we can add
a plus at the beginning and also we want to get this uh data seal so we want to we want to know
what is the maximum number that we can reach so we create another constant we just say con
because we don't want to use this uh again we can just say constant actually we don't need
this one let to we just because we never use them again we we don't want to change this one again
so we just say con data seal sorry seal equal to this counter element we want to get this attribute
for getting the attribute we just need to we can use the get attribute method we just write get
attribute and inside the parenthesis and instead of and a double code set we just write data seal
the same as this all right so now we have the current number and the data seal we can uh console
log data seal and we check we check them in the console all right so we just open the de tools pan
and we can get now we we are getting the data SE the first one is 15 260 and 227 all right next
uh we need to set how many increment the number should be for example this one goes from 0 1 2 3
to 15 and this one is 250 we cannot increase it 0 1 2 3 because we want all these number to reach
to the to their data seal at the same time so we needs to have some uh as we call it increment
number so we make another constant and we we just say increment and we just want this data
seal whatever the data seal is divided to the smallest one because this one we want this to be 0
1 2 3 to 15 and this one we want it to be exactly like this and finish at the same time so we target
the the smallest number so we just say here 15 so this one would be one and this one will be a a big
number like around 10 so now we have the increment so each time we have to update the current now
so so in this case that's actually should be lit so I made a mistake here sorry about that so
we just say current num equal to its previous Value Plus this increment so that should be
fine we check the console if we don't get any error that's fine and uh yeah we set this current
counter element. inner text to this current number here as you can see the in the first loop after
calling the function we got the current number and then we got we set the data seal and we say
the increment would be data seal divided by 15 and then we updated the current number in the
first Loop and we set it inside the textt the first one is one because it divided by itself the
second one is 1733 and the last one is 1.8 so the problem is this we don't want this uh numbers
uh we want this numbers to be rounded so we can easily before this add a math here and just
say sorry math dot uh seal and then we put them inside the parenthesis so now we have one here we
have 18 and two so now we finish this one we just need to call this function every for example
50 milliseconds using the set timeout method but we don't want this to be infinite so we
just say until this current number is smaller than the data Target the the data seal until it's
smaller then this one we just uh do this we just call this function by using S time out we just
say uh increment counter every for example 50 milliseconds so the data Target was 260 but we are
getting now 270 and here it was 27 we are getting 28 so that is actually wrong so instead of seal
math that seal we can we have to do math. floor actually floor so now we are getting 15 200 we're
still getting two more than that for this one so this one is correct now but this one still is more
than that it's a passing because this if is before this so uh actually we just have to bring this
one inside so now we are getting number less than the data Target but still is not the data Target
so we just need to add a else here we just say else just set the counter element. inner text to
the data seal so now we just we are getting the exactly the data seal so 15 260 and 27 we can
increase the speed by just uh decreasing this number for example put it 10 we get it very fast
100 to get it is lower I feel that the best number is 50 milliseconds let's check it inside the BR we
refresh yeah that looks fine yeah let's try this uh math seal again I want these numbers to finish
at the same time so we go here we refresh again now they are finishing at the same time because we
were using the floor this was 15 and this was uh 27 divided by 15 and we Flo it uh that was wrong
because it was getting one 4 increment and it was taking twice of as this one almost now we finished
all the numbers at the same time yeah that was it for the project I hope you enjoyed and sorry about
the some mistakes in the codes see you in the next project welcome back to another project in this
project you're going to create a movie trailer popup as you can see from the final version of
the project we have an image here with a movie title and some lowen if some text then we have a
button so when we click on the button we can see a video pops up and we can play the movie and we
can full screen the video and also we can change the playback speed and uh we can download it and
also we can watch it in a smaller screen and also we have a button here for closing the video and
just pay attention the video is in the 15 second when we close it and we open the popup video again
by pressing the watch now button we can see that the video is reset to be in the zero second and we
can play it from the beginning we're going to use JavaScript to add this functionalities like
resetting the videos and also uh adding and removing this popup window when we click on this
button and we can close it using this button using JavaScript and also we're going to use the video
tag of the HTML to create this video player and we're going to style it using CSS so see you
in the next section for the HTML part of our project all right let's start our project first we
open the visual studio code and here we close the get started tab in the file menu we click on the
open folder I would like to create a project in my desk desktop but you can create it anywhere
you like in your computer so here we click on the desktop and here we click on the new folder
button to create a new folder we name the folder for example video trailer popup and we press enter
and here we click on the select folder button to select the folder we close the get started tab
again and now we can create our HTML file so here on the left side in the Explorer section
we right click and we click on the new file we name the file index. HTML and we press enter now
we have an HTML file on the right side which is completely empty but we can use an exclamation
mark to have an HTML file po plate in order to see the browser inside the visual studio code we
can use the live preview extension that we have installed so we right click and we click on the
live preview Show preview now we have the browser on the right side which is completely empty but
with the title document let's close this Explorer section by dragging this line to the left so so we
have more space on the right side in our browser and also the coding editor so let's change the
title to be the same as the name of our project which is video trailer upop and inside the body
section we create a div with a class of uh top container or the main container which is the main
section for our website including the title the image and also the paragraph of the movie so we
create this St with a class of main container and inside this St we add an image tag which is IMG
and in in the source we we just get an image from a website for example we get from the pixels.com
so so we go to the desktop and here we click on the Google Chrome here we search for pixels and
in the search results we we click on pixels.com in the search result we just search for movie and we
just choose a picture for example this one and we right click on the image and we click on the copy
image address we go back to the visual studio code and here in the SRC attribute which the which is
the destination of the link We paste the link we can see the image now inside our browser which is
huge but later using CSS we're going to style this image in the alt we just say uh movie image all
right after the image we have the name of the our movie we can use a h2 tag we just say movie title
as an example you can see it here then we have a paragraph which is we just can use luren epsom to
create some random words we just say luren and we press enter so we have a kind of paragraph of
the lurm Epsom Texas then we have an anchor tag or a button we can create a button with a class
of PN and inside the button we just say watch watch now so for the trailer and we can press
enter to accept the auto suggestion to have the button with the class of BTN and the text of watch
now okay that was it for the main container Dev I think uh yeah we should put this button H2 and
the paragraph inside this div not the outside so we just cut this and put it inside this St right
that is correct now and outside this div we can uh we can have our popup video window so we create
a there with a class of trailer [Music] container and inside this St we just add a video tag and
inside the SRC we can just find an a video from the from the pixels.com website it just here
we are inside the photo section we can click on the the videos and we just choose on a video and
anything is fine we just uh click on any videos and yeah that's the video we just download it with
the original or any quality you want we can just full HD is fine we just free use free download
to download it and in the download section of a Google Chrome we we just drag this file and
bring it inside the folder that we have created for our project and we go inside the folder and
we change the name of this file just trailer we go back to the visual studio code and inside the
source we just say trailer. MP4 as a index. HTML and the file are located at the same directory we
just need to have trailer. MP4 for the SRC of the video tag we can see the video here but it doesn't
have any controller like a play or pause button so here we just add the controls uh attribute so now
we have the controller we can play the movie we can pause it we can just uh change we download it
put it in a picture in picture mode but the size is big but we're going to use CSS to style this
video or other parts of our project later other things we're going to have is a a a close button
for closing the video popup section so here we just uh we go back to the browser and in the new
tab we search for font awesome to bring the icon so we here in the search result font awesome.com
we click on icons in this in the search bar we search for uh times and in the first result we
have the closing closing icon so we click on it and here we see the HTML tag of this icon which
is an IT tag with the class of fas fa time we click to copy the HTML tag and we go back to the
visual studio code and we paste it here we can't see it yet because we must add a link to the font
awesome CDN within the HTML code so we go back to the browser and inside a new tab we search for
cdnjs in the search result we click on cdnjs Doc and here in the search bar we search for font
awesome we click here on font awesome and we scroll down a little bit and in the first results
we click on this icon to copy the link tag we go back to the visual studio code and just under
the title tag we paste the link using control V if you scroll down we can see the letter icon
here we can increase the size of this Icon by just adding fa- for example 2x we can double the size
of the icon yeah that was it for the HTML part of our projects in the next section we're going to
style our project using CSS so see you in the next section all right in the last section we have
finished with the HTML part of our project in this section we're going to start stying our project
using CSS first we need to create a CSS file so on the left side in the Explorer section we right
click and we click on the new file we name the file install. CSS and we press enter now we have
the install. CSS file on the right side but before using CSS we must add a link to the CSS file
within the HTML code so we go back to the index set HTML and just under the font awesome tag and
at the end of the hitag we add a link tag and we press and we select the third Auto suggestion
the one with the CSS now we have a link tag with the relationship between the HTML file and
the external style sheet the HRA attribute here defines the destination of the link and as both
files I mean the indexed HTML and installed CSS are located at the same directory we just need to
have install that CSS for the URL now we can start installing our project using CSS we just Sav the
file using cont s we close this Explorer section by dragging this line to the left to have more
space on the right side and we go to solid CSS and we start Starling from the body section first
we remove the the margin around the body element using margin zero and uh we can use box sizing
border box to easily assall the uh containers inside our project and we change the font family
to for example send ser and then we want to position everything to the center so we have to
change the width to be 100% or we just change first we change the display to flex and then we
use justify content Center to bring the items to the center horizontally and we set the height
of the body to be 100% of the view portte and we use align items Center to bring the items to the
center vertically and we change the background color to be black we can't see the changes yet
but uh we're going to decrease the size of the image so we can see everything better so for the
main container that we have here that covers the image the hed2 and the paragraph and button this
one so here we just write main container we set the max width to be 550 pixels and we change the
image size we just say main container IMG which is the first image we change to Max width to be
100% we can't see it yet because it's under the video tag and we change the margin button to be
15 pixels all right so let's uh remove this video section so we can see our everything else first
we just dis change the display of the trailer container To None otherwise we don't know what
we are doing here display none and we're going to change it later so now we set the image to
be 100% of the max width and the the width was 550 pixels you can see here and then we cannot
see the title and the textes yet because the the color is black and the background color is black
as well so here we we target the main container H2 and we change the color to white firstly and
uh we change the font weight to be 500 which is a thinner font and we change the font size we change
the size of this and make it double by using two em or instead of this we can just use a H1 TCH so
we change this H2 to H1 and we change this one to H1 so the size would be enough all right let's uh
style the paragraph So we just say main contain paragraph first we change the color to white so we
can see it properly and uh we just add some margin to it margin 15 pixels we just add margin for 15
pixels and uh yeah just 15 pixel for left uh top and button and zero for left and right you can
see that's responsive to and then if we add some padding to the main container probably we don't
have any problem for the we just say five pixels I want to yeah maybe 10 pixels so we have some space
around these elements when even we have a smaller screen so this is completely responsive now and
after this paragraph let's insty the button so here we just say the main the button has the class
of ptn so we just remove we change the background color to white we remove the Border using border
none we add some padding we add 10 pixels up and down or top and bottom and 20 pixels left and
right and uh change the cursor to be pointer so we see a pointing hand when we hover over the
element and uh I think everything looks fine we just add some border radius five pixels yeah
everything looks okay we let's check this one in the real browser like Chrome so we open it inside
the browser we close this yeah as you can see now we have a like this website and in the smaller
screen looks okay too let's add some border radius to the image as well so we go back to the visual
studio code and the image section we just add a border radius 10 pixels all right looks okay now
let's add some hovering effect when we hover over the BN so we just say BTN hover and we change the
background color to for example orange like this all right so next we going to like a install the
video section so we remove this display none so we can see the video but we're going to sty them
first so for the trailer container we position it fixed so we can bring it in the center we by using
top 50% left 50% and we use transform translate to because this is in the center but the edge of
the video is in the center so in order to bring it exactly in the center we can add minus 50%
or translate X and Y all right and let's change the background color to be black for the video
container we change the width to be 100% the height to be 100% as well and we bring the video
to the center using display Flex justify content Center and align item Center all right so for the
video inside we just uh trailer container and we target the video tag so now if you check we have a
de with the class of trailer container and inside the D we have a video uh video tag so now we're
Target targeting the video so here we position this as a relative and we change the max width
to be 900 100 pixels so we have a smaller and we remove the outline to by using Outline 9 none
inside the browser now we can see the image but it's in the left side now so uh we can position it
first so we already position it using this trailer container this oh I I I made a mistake here the
left is 15% it should be 50% sorry about that so now we have the video exactly in the center
that was a little bit confusing for me so here now we have the video at the center we can play
it we can pause it but we want this video to be a smaller when we have a smaller screen so we can
use media query to set this so we just say media query and we say if the max width is for example
991 pixel we set the trailer container video to the we change the max width to 90% so as you can
see now the if we have a smaller screen we have a video like this let's test it here as well see
in the Bigg screen we have only this size but in the smaller screen we have the 90% of the width so
that was it for the video part let's install this uh close button the that we have brought this one
so let's uh now we have this close button has the has a unique class but we can add another class
we just say close icon and we can install it using this we just say close uh sorry close icon we
position it absolute and we just say top 30 pixels and right 30 pixels we can't see it because the
color is white so we change the color the color is black we change the color to white so now we
can see the button on the right side let's make it a little bit like a thinner or that's fine we
here is the size is okay yeah yeah that's that's fine for the we change the cursor to be pointer so
we have a pointing hand when we hover over it so I think that was it for the CSS part we just need
to remove this popup video when we have a class of active inside the uh inside this here inside the
div with the main container if uh not sorry here inside the trailer container if we have the class
of active we want to remove this pop off video so here the trailer container we just say if we have
the class of [Music] active we want to change the visibility to Hidden so now when we add this
class we don't see the popup window and if you remove it we see the popup window so in the next
section we're going to use JavaScript to add and remove this active class when we click on this
button and also we remove it using the closing button that we have here all right so see you in
the next section for the JavaScript part of our project all right in the last section we have
finished with the CSS part of our project in this section we're going to add functionality
to our project using JavaScript first we need to create a Javascript file so here we open the
Explorer section using control shift e and on the left side in the Explorer section we right
click and we click on the new file we name the file index.js and we press enter before using
JavaScript in our project we must add a link to the Javascript file within the HTML code so we
switch to index set HTML file and just at the end of the body tag we add a script tag we just write
SC and we click on the second Auto suggestion the one with the SRC as both files are located at
the same directory I mean the index. HTML and index.js we just need to write index.js for the
URL of the Javascript file so we can close the explor section now we don't need it so we have
more space on the right side and the elements we need to bring and uh return to the JavaScript
is this button and also the closing button and this trailer container di to add and remove the
active class so three things we need we create a constant and first we bring the button we just
say BTN element and uh inside the document we use Query selector method to return the element with
the class of BTN so here we can use alt C to turn on the word RP so we can see the codes clearly and
after this we bring the closing button so we just say close icon elements the document. quy selector
and the element at the class of we add the this class here close icon we copy this and we paste it
after the dot the next element we need to return is this trailer container because we want to add
and remove the class of active to this class so we just say const trailer container element and
inside the document we used query selector method and and the class name is trailer container all
right we have everything now inside the JavaScript we first we add a add event listener method to
this button so when we click it we can trigger function so we just write BTN element. add event
listener the first parameter is the event handler uh the event is Click because we want to track
the click and when the track click event happens we want to trigger a function and what we want to
do is to remove the class of active when we click on this uh button from this uh trailer container
element this element here so we just say trailer container element dot class list and we remove
the class of active so when we click here now we see the video pop up now we want to add the event
listener to this closing button so when we click on this button we're going to uh add the class
of active so we just say close icon element. add event listener the event is click and the trailer
function and inside the trailer container element we want to add the class of active like this
I want to add some like a transition to this popup because it's coming very suddenly so
for the the trailer container we add the we add the [Music] opacity opacity uh one and when it
has the class of active we want this opacity to be zero but uh we want to add the transition here so
we just say transition on opacity and we just say 4 seconds now we see a transition when we're doing
it just make it a little bit more maybe seven all right now when we click on this play button uh
after a few second if we close the button and we open it we still see that the video is uh playing
even we are not seeing the video so we can uh fix this one by adding by just the after Clos the
button we want to stop the video so we need to bring the this video tag inside the JavaScript
so here we just say const video element and we use the query selector method and uh we target the
video tag and here we just say video element first we pause it we check this so we're playing as when
we click on this the video should be paused you can see and then with we want to set the current
time of the video to zero so when we play it for example now the seconds is f six then we close it
and we open Again the video time is zero and it's already passed so we have to play again so each
time someone click on watch now watch now sees the video from the beginning Let's test it inside
the browser you can see in the full size we have a bigger screen we can play it and we close the
video we play you see that this is reset already as you can see we can use the change the volume we
can pull screen the video and the other features is you can change the playback speed like a
increase it or decrease it as well yeah that was it for the our project I hope you enjoyed and
learn many things so see you in the next project welcome back to another project in this project we
going to create drum kits as you can see from the final version of the project we have four buttons
and if you press on each button you can hear the associated kit for example if you click on Crash
we can hear the crash sound and also kick snare and Tong also we have background image for each
button and when we click on the button we can see an animation in the background image another
feature of this project is if you press the first character of the letter for example if you press C
or k we can hear the sound as well for example now I'm pressing C now I press T S and K also we see
an animation and change in the scale of the button in the next section we're going to start with the
HTML part of this project so see you in the next section all right let's start the project
first we open the visual studio code and here we close the get started tab in the file menu
we click on open folder I would like to create the project in my desktop but you can create it
anywhere you like in your computer so we click on desktop here we click on new folder button to
create a new folder and we name the folder drum kit we press enter and here we click
on select folder button we close the get started tab again and here in
the left in the Explorer section we create an HTML file we right click
we click on new file we name the file index.html and we press enter now we have
the index.html file on the right side which is completely empty but we can use an exclamation
mark to have a HTML 5 boiler plate so we write an exclamation mark and we click on the first Autos
suggestion in order to see the browser inside the Visual Studio code we can use the live preview
uh extension that we have installed previously we just need to R right click and click on live
preview Show preview now on the right side you you can see the browser which is completely empty
but the with document title we can change the title here we uh we just write drumkit drumkits
which is the name of our project and now we can see the drum kits in the title of the page let's
uh add a uh H1 tag here inside the body tag we write down drum kit I would like to addit an
icon here that is similar to drum I would like to use Font awesome for bringing icons to
my website so in order to use the font aome we need to just go back to the desktop and we
click on Google Chrome and here we search for f aome in the search results uh we we see the
font aum.com website uh we can click here on icons we can see a lot of icons here that's
some of them are pro so we need to pay but most of them are free we in the search
bar we search drum and we click on the first drum icon which is the free version
and here we click on the HTML tag which is an I tag with the class of fas fa drum we just
click to copy the HTML tag we go back to the vs code and just after the drum kits here we had
a space and we paste the link using control V we can't see the icon yet because we must add
a link to the font awesome CDN within the HTML code so we go back to the browser we open
a new tag to new tab and here we search for cdnjs the first website is cdnjs tocom we Ser we
click on this website and here we can search for the font aome CDN we write font and can click
here the first font the first link and if you scroll down a little bit we can click here to
copy the link tag we go back to the PS code and just under the title tag and the the end of the
head tag we paste the link now we can see the drum icon in the browser let's add a container
and empty div so we write dot container and we press enter to accept the auto suggestion so
now we have a de with a class of container and inside this empty container we add some uh buttons
because uh we want to style the buttons after the HTML part we just make the buttons hardcoded
now but later we going to make these buttons using JavaScript so first we just write button we
had a clear class of BTN and you press enter to accept the auto suggestion and the first button
is uh we just write snare for the drum uh drum kit name first drum kit name snare we copy this
button three times using alt shift arrow down one two three we just change this snare to for
example kick and we have trash or crash sorry uh and and T so we have now our four buttons
here and uh that was it for the HTML part in the next section we are going to start styling
the website using CSS so see you in the next section all right in the last section we have
finished the HTML part of our project in this section we are going to start styling our project
using CSS first we need to create a CSS file so in the Explorer section on the left side we right
click and we click on new file we name the file install. CSS and we press enter now we have our
install. CSS file here but before installing the website using CSS we need to include a link
to this to the CSS file within the HTML code so we switch to the index.html and just after the
font awesome tag F awesome link tag we create a link tag and we choose the third Auto suggestion
the one with the CSS now we have a link tag with the relationship between the HTML file and
the external Styles sheet the H refere the HF attribute defines the destination of the link
as both files I mean the index. HTML and St CSS are located at the same directory we just need to
have here install. CSS now we can use CSS in our project so we go to the install the CSS we start
installing uh the body so we write body and inside a set of curly braces first we remove the space
around the body by margin zero we can see that there is no space and for bringing the items to
the Middle where uh where uh I mean horizontally we need to add a uh we need to change a display to
flex and we want the the the title and the bottoms to be on the top of each other we change the flex
direction to column because the default is row now we can see them on the top of each other and we
can use align items Center to bring the items to the middle horizontally after that we can change
the height to be 100% of the viewport height to makes us the ability to bring the items to the
middle vertically because the body body would be the same size of the viewport height which is
the size of the screen and any screen including mobile or desktop screen it doesn't matter the
items will be in the middle in order to bring it to the middle we need to use justify content
Center all right let's change the background color of the body to be for example pink and
for the heading and the icon we target this H1 so here we write h one and we want the size to
be bigger so we change the font size for example 50 pixels and let's change the the font uh to be
for example in a different font family so we use the font family we use impact we can use alt
C to see all the codes and uh let's increase the increase this distance between the characters
of the text using letter spacing and and we just say four pixels now we have more space between
the letters let's change the color to be white and let's add some shadow effects around the
text using text Shadow so we write here text Shadow the first uh value in the text Shadow is
the position of the uh position of the vertical Shadow which we want it to be two pixels the next
one will be horiz horizontal Shadow we set it to be two pixel as well and we want to set the blow
radius to four pixels and the last value of the text Shadow is the color of the Shadow we want
it to be black but with transparency so we use rgba function and we use zero for blue sorry for
red zero for green and finally zero for blue which gives us the black color and if we use uh three
for the alpha value which gives us 30% opacity all right that's enough for uh title but you can
see that when we decrease the size of the screen the title wraps in two lines in order to remove
this uh line wrapping we can use white space no wrap now always the title will be the same in the
same line all right let's start uh styling the buttons so we target the button using its class
here the class BTN so we write BTN first we add a padding 30 pixel for the padding top and bton
here and here and 50 pixels for left and right and let's remove the background color we just set
the background color to white let's remove the Border by using border none and let's add some
space around the buttons using margin just say 10 pixels as you can see it's responsive but the
buttons are on the left so we can fix it by adding text align Center to the parents of the buttons
which is this div div with the class of container so we just here we write do container to Target
the div and just say text align Center to bring them in the middle all right let's increase the
size of the text just say font size for example 30 pixels and let's uh you see that the size of the
this button is smaller than this this one because it has only four characters and this one has five
characters so we just change the mean width sorry mean width to 200 pixels so all of them will be in
the same size we can add some box Shadow as well first uh let's around the border of the buttons
by using border radius 10 pixels and we add the Box Shadow same as the text Shadow the first
value is the hor uh vertical Shadow I think uh it's the horizontal Shadow because the Shadows
goes this way and that way yeah that's correct the horizontal Shadow so we callor it we we set
this one to be zero the vertical Shadow we want it to be four pixels so it's yeah and we set the
blur to be eight pixels and we change the color transparency by using rgba 0 0 and zero for the
black color and3 for 30% transparency now we have a beautiful button Shadow also we want to add the
background image for this button the the images we want to use uh if you go inside the and if you
download the resources of this project and if you go in the folder you you see two folders one
is images and one is sounds the images has four image four Images including crash kick snare and
th and the sounds are four audio files including crash kick snare and so you just need to copy
these two folders you go inside the folder that you created the project I created the project
in the desktop in this folder and you go any uh wherever you created the project and here paste
the two folders if you go back now to the visual studio code we can see these folders here you want
to change the background image firstly you want to make it like a static all the all the buttons
has the same background image for example the Tom one and later we're going to use JavaScript
to dynamically change the background images one by one so here we just say background image and
we use URL and the UR Ur L is images sl.png so we write here images sl.png that is suggested
here now we can see all the background images let's increase the size of the image as biggest
to fit all the uh container by using background size cover and let's change the color of the snare
cake and Tom Texas so we just say color we make it white but uh let's change the font family to be
for example cursive and let's add some text Shadow as well like the same as we use for the H1 so we
just write it again text Shadow two pixels for the position of the horizontal Shadow two pixels for
the position of the vertical Shadow and we have four pixels for the blur and also the color we
want to use is black with 30% transparency the alpha value and these are red green and blue all
right the next things I want to do is to change the cursor to be pointer so when we hover on the
buttons we see a the hand pointing a pointing hand and when we hover over the button we can use the
pseudo class hover to change the color of the text so we just write BTN hover and we change the color
to be for example pink now when we hover over the buttons we see the difference in the color of the
text and also when we click on the button let's change the background size and we can use active
sud sudo class so we just write BTN and use the active CSS sudo class to change the background
size of the image for example to be 105% and then we click on them you see the change in the
background size yeah that was it for the CSS part of our project in the next section we're going to
start adding functionality to the project using JavaScript so we're going to create these buttons
dynamically using JavaScript and we going we're going to add some audio tags as well to hear the
sound of these uh drum kits so see you in the next section all right in the last section
we have finished installing our project using CSS in this section we going
to start adding functionality to our project using JavaScript first we
create a Javascript file we go here in the Explorer section we right click and
we click on new file we name the file index.js and we press enter before adding
functionality to our project using JavaScript we need to add a link to the Javascript file Within
the HTML code so we switch to the index.html file and just at the end of the body tag we add
a script tag and we click on the second Auto suggestion the one with the SRC as both files I
mean the index.js and index.html are located at the same directory we just need to write index.js
for the URL of the link all right let's go back to our index.js file and first we create an array we
just add a we name the aray kits and for the first element we just write down the name of the our
uh kit or instrument so the first one is Crash the second element is kick the third one is snare
and the last one is Tom we can use alt Z to turn on the word rra so we can see all the quotes now
we need to Loop through the kits uh array using for each method so we just write kit do for the
for method actually triggers a function for each element one by one so and we can get each element
in each uh in each Loop here so we just write kit so we get each kit and we can write our function
inside this early brackets the one the things we want to do is to create these buttons using
JavaScript dynamically for all the instruments so first we go back to the index.js and we delete all
these buttons that we created hardcoded and we're going to create these buttons using JavaScript
here for creating an element inside JavaScript we can use uh create element method so we just
create a constant and we name the constant BTN element for the button and inside the document we
create an element the element we want to create is button so we just write here inside a double code
button now the buttons is created but we cannot see it yet because we have to uh append it as a
child inside this div the div with the class of container first we need to return this div inside
the JavaScript so we create a constant we name the constant container element as the div has a class
we need to return it using query selector method so we just write document do quy selector and
as the selector is coming from a class we need to add dot here and write down the class name and
the class name is container all right now we can append this button inside this container so here
we just write down container element and we use append sh method to append BTN element to The
Container element all right now we can see the buttons here but they're not installed yet because
in the stalled CSS we use the class BTN to style the buttons but we haven't add any class to the
buttons uh for being more clear let's go to the browser using opening browser we open the web
developer tools using Contra shift C and as you can see inside the the de the class of container
we just have four buttons but they don't have any class the method we can use to add the class is
the class list method inside JavaScript so we go back to the our index.js file and just under
the create element we just write BTN element do class list and we use add method to add the
class the class we want to add is uh BTN so we just write BTN here as soon as we we write BTN we
can see the buttons style inside the browser but still we don't have any text inside the buttons
we can use use the let's let's first check it inside browser now we have a Dev with a class of
container inside this Dev we have buttons with a class of ptn and here we can add another method
that is called inner text we just write dot inner text and the text we want to add is the elements
inside the array for example crash kicks snare on top we are getting these elements here kit so
we just write round kit and in for each Loop we get one kit and we create the element accordingly
so we have crash kick snare and to we can uh make the first character of each letter each word
uppercase using U text transform capitalize actually so we need to go back to the solid CSS
and in the BTN section and at the end we add Tex transform capitalize and all right we already
made the buttons the next things we want to do is to add a their song for example if we click on
Crash button we can hear the crash. MP4 MP3 SS so if you uh the only things we need to do is just
create another element and the element we want to create is an audio element so we create a constant
here we call it audio element and we just created using Create element method and and we just inside
the parentheses we write down audio so if you go back to the browser inside the DI the class of
container we can see the buttons but we we cannot see the audio tags and we need to use the append
child method again to append this element so we write container element. append child and the the
child we want to append is the audio element all right let's go back to the browser we open the
D with the class of container and now we can see the buttons as well as the audio tags next let's
add a source for the audio tags and the source will be uh sorry inside the image tag we have the
our images and inside the Suns folder we have our crash uh files uh I mean this the audio files so
we added just under this we add the SRC resource so we just write down audio element. SRC and
we equal it to this folder and the SRC will be actually sounds slash and we wanted the the name
of this The Sounds would be dynamic so we use plus kit and plus Do MP3 so if you go back to the
our browser and we see inside the div we have the audio files and the source The Sounds the first
one is Crash the second one is kick and snare and to Let's uh change the background image as well
because the background image is all the same so we go back to the index.js and for the button before
appending it we just add the background image so we just need to style it first and dot background
image as you can see the the JavaScript Syntax for CSS properties are different from the CSS in
CSS for background image we we use background Das image but in JavaScript we just connect them
together background image together and this one would be equal to URL we open this parenthesis and
this one we want it to be dynamic so we just add a plus and kit and we just say oh we need to add the
folder as well so here we just add Images slash and kit.png and also we close the parentheses so
we can see different images background images for the buttons now uh let's add an event listener to
the button so when we click on the button we can hear the associated sound so here we just write PN
element. add event listener the event listener the first parameter is the event and the event you
want to use is Click so we just right click and the second parameter is a call back function that
will be triggered after the event happens so after we click here this function will be triggered so
but the they want to the things we want to do is just play the song we just say audio element
do play and if you now go to the browser and we just close the web developer tools and if we
let me Zoom it a little bit if you click on the first button you can hear the sound and second one
snare and to the the next things I would like to do is to play the sounds when we uh press C in the
keyboard or k or s or t so we just Target to the first letter of each uh text and if this uh key
is pressed we want to play the song so we go back to the index.js and just at the end we add event
listener in this time to the window and the first parameter which is the event is key down it means
if someone uh press the key this function will be triggered so we get the function and we want to
know which key is pressed so here we get the event and if we console log event. key and you open the
console here it's using open dep tools pen and inside the browser if you press for example now
I'm pressing s now you can see s here or F or H the reason we have four because we are in the loop
and the loop is has four elements all right so instead of console logging let's add a condition
here we say if the key at event do key which which is the key that someone pressed is equal to the
the first letter of the each uh text so we can get it here like just say kit. slice method the slice
method actually returns to the parts of a string and here for example for crash the first letter
is has the uh position zero and the second one has the position one and if you want to get the
first character or letter we just need to write inside the parentheses zero and one so now we are
getting the first letter and we equal it to the to the key that someone pressed and we just say if
this condition happens we want to hear the sound just we we write down audio element. playay you
go back to the browser and here now I'm pressing C you can hear the crash sound T you can hear
the th sound but we don't see any animation in the buttons we can add some animations as well we
can change the scale of the button for example so we go to the index.js and here we just change the
scale by using a scale function so we just say PN element do the transform method and transform
method has the scale function inside it so we just say scale and inside a set of parentheses we
just say 0.9 it means 90% of this gift so if you go back to the browser and now we press C it
didn't work transform oh we missed the style here because we are changing the style we have
to write down a style first now you go back to the browser we press C you see that the scale of
the button changed now we press k s and t but the we want the scale come back to normal after a
few seconds actually after some milliseconds so here we added set timeout method we just says set
time out same timeout actually triggers a function after a a timer is expired actually we can the
first place is a function the first parameter so we create a function and if this function will
be triggered after a delay and then we can set the delay here for example we say 100 milliseconds
so we just say after 100 milliseconds just change the scale to the 100% again so we just say
BTN element. style. transform and we set it to scale again but this time the scale would be
100% so we go back to the browser now I press K you see the animation the pick C for crash and S
and to also we can click it by the mouse you see the animation differently yeah that was it for our
project I hope you enjoyed and see you in the next project welcome back to another project in
this project we're going to create an analog clock as you can see from the final version of
the project we're going to create a clock with the Rolex logo that is uh showing the current
time the real time that we are getting from the browser so we're going to use JavaScript
to dynamically get the time from the browser and convert it to a degree form that uh can
be shown in the clock like this in the next section we're going to start with the HTML
part of the project this see you in the next section all right let's start our project I just
leave this uh final version as our reference and uh we create another folder and we create our
project and we just check our final version for the reference okay let's open Visual Studio code
let's go to desktop I open the visual studio code we close the get started Tab and in the file
menu we click on uh open folder let's create a new folder I would like to create the project
as always in my desktop but you can create it anywhere you like in your computer so I just
create a new folder and I call it block and I select it and here I click on select folder to
select the folder let's close the get started tab again and on the left side in the Explorer
section we create create a index.html file so we just need to click here or we can right click
and click on new file we just say index. HTML or HTML here we have this empty HTML file we can uh
but we can use an exclamation mark like this and using EMT we can create our HTML boiler plate
uh let's open the browser first we see what's happening in inside the browser I'm now using a
a extension called live server it's free to use you just click on it here and then it's going to
open your project and anytime you sit save your project you see the change here as well so the
title here is this document let's bring this one in on the right side and our code on the left
side let's close this and let's close the left side by using control B so let's change the title
to be the name of our project which is clock now we can see the change inside the tab then uh if
you look at the final version as you can see the body the color of the body is a salmon color then
we have a diff that is covering the clock and we call it clock so we need to add a div here inside
the body with a with a class of clock and inside this we have the numbers which is 9 12 3 and six
then we have the arrows for the second minute and hour and also we have a logo the Rolex logo so
three things we need to add inside this St so the first St is for numbers so we have to div
with the class of numbers and inside this St we have our numbers so one def for for example 12 we
just say 12 and here we hard code 12 so we should see in our final version now the number 12 let's
copy this one three more times using alt shift Arrow done 1 2 3 and next one is three this one
should be six and the final one is nine okay the next things as you can see from the final version
is the these hands so these are just the empty div as well so we have a div that covers all of them
and we call it arrows and inside this div we have one div for the hour then we can copy this one two
more times using alt shift Arrow done the second one is minute and the last one is second okay
and finally we we want to add this Rolex logo so we just can search for Rolex on the Google
the SX then we go to images and let's use the tools and change the color to be transparent
and we search Rolex logo actually because it is showing us just just the watches so the first
one is kind is from Wikipedia we click on it this as you can see this is transparent so it doesn't
have any color behind it so we can just copy this one using uh we just right click and click on
copy image address so we get the image address we don't need this we can close it let's bring
this one to the right side again and here after this div we add a image tag and inside the SRC
which is the source of the image we paste the link that we have copied now we should see the
Rolex image here as well but as you can see it's very huge but later we're going to use CSS to
style it just for now we'll leave it like this and for alternative we just say relax logo okay
so that's it for the HTML part of the project in the next section we're going to start styling the
project using CSS so see you in the next section all right in the last section we have completed
the HTML part of our project in this section we're going to start styling the project using CSS first
thing we need to do is to create a CSS file so we open the Explorer section using control shift e
and we create a new file and we call it style. CSS so we have now the style. CSS file but for uh for
being it able to work properly we need to add a link to this file within the HTML file here inside
the indexed HTML just after the title and at the end of the head tag we add a link tag and we click
on the third Auto suggestion the one with the CSS now uh we can install to our file using CSS this
is the link tag and this is the relationship with the external relationship with a sty sheet and
href is the address of this uh file because it's located exactly at the same folder as index.html
we just need to write a solid CSS here so we go to install a CSS we close this Explorer section
using control P then we can start firstly we start from a body section we remove the default margin
and padding so just say padding zero margin zero you see we don't have any space now between these
things and the wall then and let's H decrease the size of this logo so we can see everything better
so before H continuing on the body section let's install the image tag and we just set the width
to be 70 pixels so that's nice now let's continue with the body section I want the background color
of the body section to be Salon color and uh I want the font family of our website to be cive new
which is here then let's uh set the height to be 100% of the viewport height so now we can bring
everything to the center by just uh changing the display to flex then we set the justifi content
to be center now they come to the center in a horizontally but for the vertically we need to
align items Center okay so everything is fine for the body section now and we install the image
later but let's do the clock this clock in the final version this rounded with the background of
gray is actually the the de with a class of clock that's covering everything so we need to install
that one I create this this uh Square sorry the the circle so we just say clock and because it's a
class we added a DOT here then we need to give it a width and height but before doing the weight and
high let's change the background color so you can see the change the background color is light gray
okay you can see it's a little square covering everything so let's change the width to be 350
pixels height 350 pixels as well and let's make it rounded let's make it a circle using border radius
50% okay we wanted to have some like a border and Shadow effect as well so it looks like a 3D so
we can just add a border like just same border and let's make the width of the border to be five
pixels then we make it solid and this is now black but I don't want it to be black I just make it
dark gray okay looks nice and let's add a shadow effect as well we just say box shadow box Shadow
one pixel for the horizontal Shadow one pixel for the ver vertical Shadow and four pixel for the
blue radius you can see it now but the shadow is completely dark I don't want it to be dark
I want it to be black but with the for example 70% transparency so for the black we have 0 0 and
zero for RGB and for the alpha value we set it to be7 which is 70% okay that was it for the clock
let's bring this Rolex here we need to in order to position this Rolex here we need to position it
absolutely but it should be absolute in relative to the its parents which is the clock so we need
to change the position of the clock to be let's add this one at the top we just say position
relative for a clock and we position this one absolute okay now we can position it exactly the
place we want for example I want it to be in the center so we just say left 50% so this one brings
the edge to the uh Center but I want it exactly to be in the Center so I change the uh translate it
should be translate sorry transform and translate so it say transform translate and minus 50% this
one bring it exactly in the center and uh from the top we just say top um let's make it 60 pixels
okay that's fine now uh and also I want it to be uh with a z index of two so we have this clock
okay at the bottom then we have the Rolex and also we have the arrows I want the arrows to be on the
top of this Rolex as well so we change the Z index of this one to be two so the clock is one then we
set the Z index of the numbers uh numbers should be two as well because they're on the top then for
the arrows we make the Z index three and for this here for this circle in the center we make the Z
index four so if you wait now for the seconds to go here we see the seconds hand is uh going to uh
this way on the logo and also the hand is located under this circle so just you can see now that's
uh passing on it looks like a logo is attached to the block like that okay let's position the
numbers first we have a for numbers we have a div with a class of numbers and each number has its
own class so we we first we target them using this numbers we just say numbers div and we install all
of them but for positioning them we position them separately using their own class for example 12
should be here nine here three here and six here so let's do this like that so we just Target
the numbers and the diff they have so we are targeting all of them together first we need to
position them Absolute in relative to the clock the clock has a relation position of relative so
we position them uh absolute firstly then let's change the font size to be 27 pixels so you can
see all of them are now on top of each other but later we're going to individually position them
so just bear with me so let's set the font weight to be bold so we make it a little bit thicker then
uh let's change the color color I just want to use light Golden Rod yellow this color it's kind
of yellowish color okay and also we I want to add a Shadow effect so I just say F Shadow and
one pixel for the horizontal one pixel for the vertical Shadow and two pixels for the blow radius
and the color should be rgba that's 70% black with the 70% transparency okay that's it and now we
target each number first we target uh 12 is 12 so we just say dot 12 what did I write 12 Okay so
12 should be on the top and let's do the top six pixels and left to be 50% so as I mentioned before
that one actually bring the edge to the center so we need to do the transform translate minus 50% to
bring it exactly in the center so 12 is finished uh let's copy this one for the or we just stop
it again that's fine we just do the three three should be from the right to be six pixel okay
you can see it here then from the top to be uh 50% but that is not actually 50% so we need to
add this transform translate uh this translate we used here that's actually translate X okay and
uh the images will translate X but this translate for three is Translate Y so we just say transform
Translate Y - 50% okay so the other one let's do the next one which is six so six from the bottom
is six pixel then we have left 50% and transform translate x minus 50% okay and finally we have the
nine nine should be left 6 pixel and then we have this uh could be from top 50% or bottom doesn't
matter we just say translate transform Translate Y minus 50% so now we positioned all these numbers
correctly so now we just start doing the handles so the handles are actually the hands the clock
hands they have a Dev of Cl with a class of arrows and each class each handle has its own class hour
minute and second so firstly we apply to all of them we just say arrows if we stall the common
one and then for particular one we use their own classes also for bring them bringing them in the
center we just need to Target the arrows as well we just say arrows or I think it was arrows let
me check again the arrows arrows we want it to be in the center so we just uh set the display to
flex and also we need to set the width to be 100% and height to be 100% as well and for bringing
it to the center we use justify content Center Center or bring it it to the center horizontally
and for items align item centers bring it to the center vertically so we cannot see it yet because
they don't have any Dimensions yet uh first things first we need to position this circle this circle
actually there's no uh a specific there for this one we can use the before pseudo class to achieve
this one we just say here do Arrow arrows before and this is going to be first need to add a empty
content for before stud class you always have to remember to add content with just empty string
then we just add a width of 25 pixels Let's see we can see it still we cannot see it but uh
let's add a height of 25 pixels as well then uh we add a background color of dark green yeah
now you can see because the background color was similar so we it's actually located exactly in
the center because of these display flakes then we just needed to make it Circle so we just say
border radius 50% then we add a box Shadow uh with one pixels in a horizontal one one pixel for the
vertical Shadow and two pixels for the blow radius then with the rgba of 70% transparency black okay
looks fine now and as I mentioned before this Z index should be on top of everything so the rlex
was Z index was two the hand handles should be three and this one is the index four okay so after
this we need to Target all the arrows so we just say arrows and we target their diff uh let's add
it width so let's change their background color first we can see so background color should be
white we cannot see them yet because they don't have any Dimension so we give them a width of
seven pixels you see a little bit movement here but uh we because we're going to position them so
it's going to be different so first we position them Absolute so they come up come outside so we
don't bother this circle here and let's give them a height of 120 pixels now we can see it but all
these three are now on top of each other and their handles is in the center but we want this one to
be here so we need to change the transform origin we just say transform origin to be at the bottom
center and now we just Chang the uh we bring it up okay we just say bottom 50% so we bring it up
50% at the top so and then when we want to move it it's going to move from its bottom center okay
also you can see the handle is under the Rolex logo so we want it to be at the top of the this
logo so we Chang the the index to be three so it's over the logo but it's under this circle because
the circle has a z index of four and the Rolex has a z index of two then uh now and also you just
wanted to this one to be a little bit sharp you know uh let's let me do it you can see you just
said border radius the Border radius we just say 50% 50% you can see we have 50% at the top and
50% at the bottom but actually I just want it to be at the here so we make it zero for the other
parts except for these two sections okay and uh let's add a box Shadow as well so it has some
Shadow too so just say box Shadow uh actually I want it exactly to be like this so we copy that
on WE paste it here so now we see the Shadow and uh yeah it looks a little bit too much for this
one we just change this three that's Alpha value to be three or maybe because they are on top of
each other it looks like this so let's H change the position of each of them so we target the
hour we just say hour and hour I want it to be a smaller but height it to be 80 pixels and let's
a little bit rotate it using transform rotate and we just 30° rotate it we can see them yeah okay
that's nice for the hour and let's do the same things for the seconds so we copy this one using
alt sh alt shift Arrow done we change this hour to Second and the height for this one uh we don't
change it same height and this one we make it 250 pi 250° so this is the this is the for the second
long one and yeah the height the height we don't need to actually have a height for this second so
but the color the background color we set it to be gold Golden Rod see so let's check this that
second this a second I don't see any change the color let's so everything is working nice but
except this background color doesn't change so yeah it should uh we just Target the seconds let's
target it like this like arrows second yeah now we targeting actually correctly H because we want
we don't we want to overwrite this classes we need to specifically Target them we do this one
for uh this one as well we just say arrows hour now the hour looks better because I want it to
be a smaller uh so because this one didn't have transform rotate so the transform rotate work very
nice but for the height because it was different from the this one we need to overwrite it so
we need to specifically apply it to this class so it's inside the arrows okay so now everything
looks good for The Styling looks like our final version uh in order to the watch to work properly
and be exactly like the time of our computer so this is a as you can see it's close to uh to 12
like this so that is uh working now exactly like my computer at time so in the next section we're
going to use JavaScript to uh dynamically get the information from the computer and based on that
information we're going to change the position of these seconds hours and minutes and we're going to
have a proper watch that is working simultaneously with the real time of your computer so see you in
the next section for the JavaScript part of our project all right in the last section we have
completed the a styling of our project using CSS in this video we're going to start using
JavaScript to add functionality to our project the things we want to do is to get the data from
the browser's uh date and time and convert that time to the degree for example for the second a
minute and also the hour first things we need to do is to create a Javascript file so we open the
Explorer section using control B and here on the left side on the Explorer section we right click
and we click on new file we create a file called index.js in order to use this file we need to add
a link to to it within the HTML file so in inside the index. HTML just at the end of the body tag we
add a a script tag we just say s c and we click on the second Auto suggestion the one with the SRC so
the SRC is the destination of the file as the file is located exactly at the same directory as the
index.html so here we just write down index. as now we can use JavaScript in our project and uh
we just need to get the elements we want to get few elements the first one is we want to get the
three elements actually the hour minute and second uh in order to get them we can use a method called
query selector so we need just create a constant and for example we call it our element and this
is going to be equal document because we want to H Target document all the document and you
want to use Query selector and the selector we want to use as it's a class as we targeting a de
class we need to add a DOT here and we just say hour okay let's close this uh Explorer section
so we have more space then uh we can copy this one two more times using alt shift error done and
we just change this hour you can use contrl D to select both and make this one minute as this
one would be second okay so let's check hour minute second now we have the elements uh let's
console lock and show you uh just use console log for example let's console log our element so
you can open the console using uh F12 so we go to console as you can see we return the elements
with a class of hour okay uh we want to change uh install this uh diff based on the uh information
we get from browser the the time but we want the because the information we get from the browser
is athetic we need to get that one every second so to update that information I'll show you in a
second let's first create a function and we call it update uh clock and let's call this function
here one time so the one the things we want to get is for example we want to get the current
time or current uh date as you can say because we it gives you time and date at the same time
so we get the current time it's and we can get it using new date we construct a new date and this
is going to give us an object and it's going to be saved inside the current date so let's a console
log current date and let's open the console now we are getting the date and time but it's just
a string and the things that we are interested is this hour minute and second we don't want the
other information so and then as you can see now it's 8 36 27 if you refresh the page it's going to
be changed because each time we we are requesting it but we can use some methods for example we can
use the two way we can use a set timeout or set interval to execute this function every second
for example let me try the set time out so we just say set time out set time out takes in two
things first is a function we can use the arrow function and uh we this is the delay that uh that
makes this function that execute this function uh as we are calling this function we don't need
to create a function we just can uh just put the functions name here so now if you console log
the time the current date we are getting it every second as you can see in the console so 13 15
16 so now we're getting a and uh we just as I mentioned we just want we are interested in the
uh the time the hour the minute and the second so for example if you want to get the hour instead
just the hour we can just add a method here and just call get for example hours okay now we just
get the hour or if you want to get the minutes you just say minutes or you just say seconds just
say get seconds and see three four five six okay so we can get all these three things so instead
of Conant logging I just create a constant and I call it for example hour and uh this is going to
be parent date. get hour this let's copy this one two more times using alt shift Arrow done and this
is going to be a minutes and this is should be capital and this is going to be seconds okay now
we are getting all of them hour minute and second we can conso lock here see so we are getting the
hour the minute and also we are getting the second so that is okay but the our clock is analog so
we need to convert these things to a degree the seconds uh let's H Let's uh change the for example
the first one the hour to degree so we just say const and uh we just say our degree is equal to
first we need to because the we have we have 12 hours in a in a clock but we need to just get
this out and divide that one to 12 and also we need to multiply that one to 360° because we have
360° in a watch okay now uh and then in order to see it in our plock uh we need to change the style
of this uh hour if you remember inside the style we were using transform rotate 30° or 250° for
example for hour is 30° now if it's for example 60° it should be here now we want to change this
one dynamically using javascripts here so over here we just say uh this our element we have we
want to change it its style uh and the transform because we use the transform here and the function
is rotate so this is going to be equal as we it is dynamic we need to use fatic to have a variable
so we just say rotate and we can use the dollar sign to have the dynamic variable here and the
variable we want to use is this our degree and we just need to add a word dig at the end because
in the St we use uh degree here dig okay now our hour is uh 8 which is the current hour now I'm
recording the video so we need to do the same things for the minute and second so we need to
copy this one using alt shift Arrow done two times and then we change this hour to minute then
uh the minute is not 12 it should be 60 because we have 60 minutes in an hour okay after hour we have
have the second we just say second here and second is 62 okay now the time is working perfectly as
you can see the this is the my current time in the computer 8:44 3536 okay the other methods
I mentioned instead of using set time out we can use a set interval so let me just comment
this one and instead of calling this function here directly we can just say set interval and
set interval is going to call the update clock and you're going to call it every second but
this is going to work exactly the same okay that was it for our project I hope you enjoyed
and learned many things see you in the next project welcome back to another project
in this project we are going to create a temperature converter as you can see from
the final version of the project we have three inputs here that is for the Celsius
Fahrenheit and Kelvin temperature formats and if you change any of them for example if we
choose the Celsius 100° we get the equivalent of the Celsius inside the fahrenheit and Kelvin
and for example if we change the input we see a real time change inside the other inputs as
well and we can change the other inputs to for example 100 Fahrenheit is equal to 37 Celsius
and 311 Kelvin so we're going to learn how to use unchange event listener to track the changes
inside the inputs and also we're going to learn how to use the switch statement to track the
changes based on the name of the inputs that we are working on and also we're going to use CSS
to install a project like this new morphism design in the next section we're going to start with the
HTML part of the project so see you in the next section welcome back to the project in this
section we're going going to work on the HTML part of the project as you can see I have put the
final version of the project as our reference to compare our project with the final version when we
need it now the first things we need to do is to create the HTML file of the project so I would
like to use Visual Studio code for uh creating the code after opening the visual studio code we
close the get to started Tab and inside the file menu we click on the open folder we want to create
a folder and work on this folder for the project I would like to create the project in my desktop
so I click on the desktop and here I create a new folder and I call it temperature converter with
the which is the name of our project so we just write down temperature- converter and we press
enter to create the folder now we can click on the select folder to select the folder here we
close the get to start tab again and as you can see see the now the vs code is in default is in
that folder that we have created temperature uh converter and now we can create our HTML file
here so we click on this icon to create the HTML file and we call it index.html now we have
the file on the right side which is completely empty but it is fine we can use an exclamation
mark to create an HTML boiler plate so we just write on an H an excl clamation Mark we get an
auto suggestion from emit abbreviation when we click on the first Auto suggestion we get an
HTML B plate we can open the browser using the live server extension if you have installed this
extension you can click on the go live on the bottom of the uh Visual Studio code to open the
uh default browser with the website that we are working on and the index set HTML is going to be
open by default and the title is document as we have inside the title tag let's bring the website
on the right side and the visual studio go on the left side let's close the Explorer section to have
more space so the title is document we can change the title to the name of our project which is the
Tim prer converter and uh the next things we need to do is just create the website let's let me
show you inside the final version the final version as you can see it has a container in the
middle of the screen then we have a title here then we have three inputs including the Celsius
Fahrenheit and Kelvin each of them they have their own inputs so we're going to add three inputs
plus a title at the top and everything would be inside a container so we need to add a div with a
class of container inside the body section so we just write down DOT container and we accept the
auto suggestion from emit by clicking on tab or enter so this is going to gives us a dep with
a class of container and inside this container we're going to add the for example that title for
example we add a H1 tag with a class of heading and the title is temperature converter so I can
copy from this here the reason I have added the class of heading because we're going to install
this heading later using uh CSS any class I add the purpose of that is to use it later when we
are targeting it inside the CSS after that we're going to have the these three uh section each of
them are inside a Dev so this is a Dev for example and inside the div we have this label Celsius and
this input so we're going to have a div so the div I just call the class for that one for example
box or you can just say for example temperature container you have to be very specified so you
later you check your code you can remember what you have done so inside this div we're going to
add a label and this label is going to be for the Celsius so we just write down Celsius here and
the label is going to say Celsius as well and we can add some clone here so if you can see now we
have the we have it inside the final version the label after the label we're going to have an input
but with the type of number so we can add a column and just say number and we click and press enter
to accept the Auto suggestion the type is number the name is Celsius Celsius and also we're going
to have an idea of Celsius because later we're going to use this ID to track the changes inside
input using JavaScript so we need to add an ID here ID is just unique you cannot use the Celsius
in other section of the HTML anymore then we have a placeholder so when there is nothing inside
this input we see this text or reference so we just say enter temperature you can see here the
other things we want to do is we want to install this input later so we're going to add a class
and we call it input so for styling we use class for JavaScript we use ID this is the uh the way
I use but you can also use class for JavaScript as well but because ID is unique it's easier
to track a specific input using ID but class can be use in many other places so that is that
is fine for this section for this Celsius we can copy this section two more times to create the
other temperature as well so we just use alt shift Arrow done two times to copy this and we're
going to just change the Celsius by using control D we can choose all the Celsius and we change the
second one to fight so we just write down faight okay this one should be cap capitalize so I Chang
this one so the next one we change the Celsius to using control D to Kelvin we just say kill wi and
this one should be capitalized all right so that is uh that's set for the HTML part of the project
as you can see the looking is different inside the final version so in the next section we're going
to use CSS to install this project and make it similar to the one in the final version so see
you in the next section for the CSS part of the project all right in the last section we have
completed the HTML part of the project in this section we're going to start inst styling the
project using CSS if you look at the final version you can see that we have a container here in the
middle and the background color of the body is just a linear gradient from light green to light
BR uh light blue and the container is transparent as well so it's kind of glassy or new morphism
design these inputs as well uh so we're going to firstly create the CSS file so we need to open the
Explorer section here using control shift e and here we click on this icon to create a new file
and we call it EST style. CSS before using the CSS file we need to add a link to the CSS file within
the HTML file so we go to index. HTML and just after the timee title tag we just add a link tag
and we we just write down link and we click on the third Auto suggestion the one with the CSS now we
have a link tag with the relationship between the index. HTML and the install. CSS the HF attribute
here shows the destination of the link and as both files are located at the same directory we just
need to have a stall. CSS here let's close the explor section to have more space here and we
go to the installed CSS and we start with the body section we just Target the body and we open a
set of curly braces the first things I want to do is remove the default margin of the page so that
we can easily bring everything to the center so everything is connected to the wall now uh let's
change the background color and we set it to be linear gradient and I want it to be just the like
here top and bottom uh so we wanted to to the two left bot so this is going to divide the browser
inside the diameter here from here and the color I want it to be light green and light blue it starts
from light green to light blue so we can see it and now because this height of the screen is not
defined we see it like this we can set the main height of the screen to be 100% of the viewport
height which is going to H cover all the browser and it doesn't matter what is the size of the brow
browser we always see did like this and in order to bring this one to the center we need to change
the display of the body to flex and then we can use justify content Center to bring everything
to the center horizontally and align item Center to bring everything to the center vertically but
before using the Align item Center you need to set the mean height to 100% of the viewport height
otherwise it doesn't work and also I want the font family the font of the browser to be font of
the all the textes and elements to be for example mono space and uh let's increase the font size oh
let's uh don't change it we change this font size in each element just change the color of the the
Texas from the black to dark CM which is kind of green color greenish color so that was it for
the body section now we want to uh Target the container this container and inside the index.js
we put everything inside this container with the class of with this Dev with a class of container
so we can Target that one using dot container first things first I want to add the background
color for that one so we can see it so we change the background we use rgba which is the red green
blue Alpha for the red green and blue we use 255 to to gives uh which gives us the white color and
then we can use the last value which is Alpha we set it to be3 which means 30% transparency so we
it gives us this color then we're going to have a padding of 20 pixels to have some space between
the borders and the some everything else inside it and also Let's uh have some box Shadow so we
want the zero for the xais four pixels for the Y AIS and 10 pixels for the bless and the color
I want to use is rgba 0000 for black color and3 for the transparency so we get this color and the
other one things I want to do I want to change the Border here the border is uh is I want it to be
rounded so I want to change the Border radius and I want to St to be 10 pixels so we should see the
change now let's make the make it smaller again and set we set the width of the the container to
be 85% like this and this is going to be applied in all sizes but I want the max width to be 450
pixels which is going to limit it like this and let's set the mean width as well so when in the
mobile size and very small screen size we won't have any problem by just changing it to 350 sorry
this one should be mean width not height okay so this is responsive as well in the small screen we
have a good size so uh and everything we can set the display to flx and we can bring them on top
of each other by changing the flex direction to color so in this case we can bring them to the
center uh using align items Center like this so that was it for the container section let's style
the this box we have here we have a div with a class of temp container so we want to Target that
one so we should just say do p container which is covering the label and the input and we set this
one we set its width to be 100% so this is going to take all this places let's add some padding of
15 pixels and we set the font weight to be bold like this so I forgot to install this uh heading
as well so this temperature converter let's target that one by just targeting do heading which is
the this H1 tag with the class of heading so the heading I just want it to be we just change the
font size and make it bigger so uh 32 pixels for this so we make it bigger and uh I think it's
enough for this heading now it's let's install this inputs so the inputs all the inputs they
have the class ofof input so we can Target them with just saying do input so the first things I
want to do is increase the width so we set the width to be uh 220 pixels like this then we just
uh change because uh the font fa we change it to be monospace we add some padding and we set it to
be five pixels and we float it to the right side you can see it's just connected to the label we
can float it to the right side so it's going to be like that and uh let's remove the outline
so when we click on it we don't see that line around it and finally we change the background
color to be rgba white with 30% transparency and let's check the Border color to be an rgba white
but this time with the five 50% and transparency so we get this design and let's change the color
to be dark green so the text inside so for example we type something we get dark green and we set the
font size to be for example 20 pixels so this is a bit big so let's make this one 18 this one should
be fine the just this these textes are small so we can Target that one by just changing the font
site inside the temp container and we make it for example 18 pixels here so if we change this font
size we don't need to have this font size so we can remove that actually oh you no for the input
we need to add it as well but that's fine so for both of them we use font size 18 pixels all
right so everything looks okay except this uh placeholder we can just uh Target the placeholder
by just saying do input to double uh clone and we just say place folder and we just want to change
the color to dark gray like this so everything works fine let's refresh the page this is the
final version the final version the text is bit bigger but looks fine too this one looks fine too
so that was it for the CSS part of the project in the next section we're going to add functionality
including the getting these inputs and calculating the other uh temperatures and automatically
call A function and change the other ones so we're going to use a method an event listener
and we just want to add an event listener for the unchange and we're going to call a function
and do this mathematics to calculate the other temperature simultaneously when we're changing
when we are changing these things so in the next section we're going to work on the JavaScript
part of the project so see you in the next section all right welcome back in the last section
we have complete the CSS part of the project in this section we're going to add more functionality
to the website using JavaScript if you look at the final version you can see when we come to the
website all the inputs are empty but if you add something for example here in Fahrenheit I just
say 100 Fahrenheits this this is going to gives us the Celsius and Kelvin after pressing the enter
or if we change it like this from the input we see the real time change inside the other uh format of
temperature so we need to add uh a function that is going to calculate the other ones and also we
need to add unchange event lessen error to each input so when there is a change inside this input
a a function would be triggered and calculate the other one and update the other inputs so the first
things we need to do is to create a Javascript file so we go back to visual studio code and we
open the Explorer section and here on the left side in the Explorer section we click on this icon
to create a new file and we call it index.js and uh similar to the CSS before using the Javascript
file we need to add a link to the HTML file in order to use that Javascript file and the link
is going to be at the end of the body section because we want all the elements to be loaded
first for example all the inputs to be loaded first and then the functionality is added using
this javascrip otherwise the elements would be empty and we cannot have access to them so we need
to add a script tag here so we just write down SC and we can click on the second Auto suggestion the
one with the SRC the SRC is the destination of the file and both files are located at the same
directory I mean the index. HTML and index.js so the destination would be just index.js so now
we can use the Javascript file in our project as first thing first I want to create a function here
I want to create a function and I'm going to call it for example compute or calculate temperature
or temp for short so this function is going to be called using these inputs and let's try try
to do it so in our website we want to want when we have a change inside these inputs we want to
call that function so inside index. HTML we can add unchange event listener to the input so we can
just use dual cursor using alt and click on this sections and we can add an unchange event listener
the first one and this is going to trigger that function that we have created so we're going to
call the function here we just call it compute Temp and we need to call it so we need to add
a parenthesis here at the end okay after saving you can see that's a pretti here formatted our
inputs so now for example if we console log for example we console log change and if you go to
the our website and open the console using F12 to make sure this is console and here you can see
the changes so if we change this one you see that we console log change the one that we have added
inside the function any any of them we change we see the changes but the things is important for
us we want to get the value of these inputs and also we want to know which input is changing we
can do that by adding an event here so we need to just add event here inside the function that
we are calling so we need to add event at each of them and inside the JavaScript inside the function
we can get the event here for example if I console log event dot for example target. name so this
one should be name now when we change here you see the name of this input so inside the index.
HTML we see the name is here for example it's Kelvin the first one the name is uh Celsius and
the second one is Fahrenheit so whatever we have changed we see the name is printed inside here
for example we can get the value too instead of name we can just get the for example we can get
the value so now for example this one is one 2 three five if I do this one this one is one so we
getting the value of this one that is changing so in this way we can have the information inside
the inputs and we know which input is triggered and we can calculate the other uh temperature
formats based on that uh input and also we can change and uh update the other inputs so we need
to bring the all the inputs first because we want to change them so if you look at the HTML each
of them they have an ID for example the second one has the ID of friend height the first one
the ID is Celsius so we can bring that element using the method called get element by ID so
so we need to create a constant for example for Celsius I call it C Celsius element and this
is going to be equal to document because we want to Target all the browser and all the documents
inside the browser and we can use the G element by ID to Target that ID which was for the first
one Celsius all right now we have for the first one let's copy this one using alt shift arrow
down and we change the Celsius for the second one using control D to select both of them and
we change the second one to Fahrenheit so we just write Fahrenheit make sure that you don't
make a a spelling mistake because otherwise you don't get the result so we got the Fahrenheit for
the uh third one we use control D and we change this one to Kelvin now we have the elements now we
can change the elements based on the input so we have the value here so we create a constant and we
just say a current value or the the input put that is triggered so we just call it current value
the one that is calling the function value so we missed the a here so this one is equal to that
event that we are getting. target. value but there is just some Block in the JavaScript sometimes
the input is actually this input is number but sometimes it pass the it passes the string instead
of number so we need to always convert this value to number we can do that simply by adding a plus
sign before the value so in this case we always get the number not the value because we want to
do some computation some mathematics so we need to really have the number not the string because
if we have a string we cannot do the uh the uh mathematics or math operation on this value so
now we can use the switch here to base on the name of the event we change the other ones so
the switch works like this the switch statement if you click on that it has a key the key is the
this event. target. name so for example if the name that we are getting is Celsius so in case
that the this one is Celsius so we just write down here inside the quote celsius if this is
Celsius we want to change the fahrenheit and Kelvin so for example the Kelvin this one we want
to change its value so we just Target its value and this one is going to be equal to the current
value which is the value of the Celsius plus 27332 so this is a formulation to con to convert
Celsius to Kelvin if we add 27332 to K to Celsius we get Kelvin and also for Fen height we change
the value so this is going to be the current value but this is uh for changing it to Fahrenheit we
need to multiply this one to 1.8 and add 32 to it so this is the way we uh do that one for the
Celsius so we need to add more cases because in case that we have Fahrenheit for the input and the
event. Target that name is Fahrenheit so we need to have the fahrenheit so let me copy this fenit
and put it here in case that is Fahrenheit we want to change the Celsius element its value and we can
calculate that one based on the Fahrenheit value which we are getting from the current value
from here so the current value uh Celsius is the opposite we have to we just put it in the
parenthesis we minus this one first from the 32 and instead of multiplying to 1.8 we need to
divide it from 1.8 so it's just the opposite and uh we have to add a clone here too so we don't get
error and for Kelvin this is going to be calculate like this we need to just the current value we
minus that one to 32 we divide it so let's let's put it inside another parenthesis so we divided to
32 and over 1.8 now we need to add 273.15 to that and it should be 32 because this is similar to
this one 273 32 so that is fine so after the break we want to add the final case which is Kelvin
so if the Kelvin happens we want to change the Celsius do value and this is going to be equal
to just the current value but instead of plus 27332 we need to uh minus that so we need to
decrease 272 it's just the opposite and let's do the other one the fahrenheit so this is the
last one so we need to add two parentheses and then this is going to be value minus [Music]
27332 I'm not sure this is 32 or 15 uh you can check it online but it doesn't matter we just
it's U you can change it for yourself so the most important things is these things that we
are learning from JavaScript the other ones is just a an example so we need to multiply this
one to 1.8 and we add 32 at the end all right so we have just created the all the models and
after this just remember to break as well okay so it's automatically removed our parenthesis
so the reason I put the parenthesis because uh let's let me show you here so we are when we are
changing now each of them we see the changes the other one sometimes we get the very long decimal
numbers the the number of decimals are too much so we can remove that one by just adding dot fix
uh do two fixed at the end and we just uh fix it to two digits so we can copy this one and add it
to here to all of them so now if we try we never get more than two digits here so what's this the
Kelvin a Fen height doesn't work when I change the Kelvin so let's check that one so when we changing
the Kelvin so this value oh this one shouldn't be value this one should be current value sorry
about that so now the Kelvin works as well so 273.15 is actually 0 Celsius sorry it shouldn't
be 15 32 we have used 32 here so just let me review what we have done so inside the index at
HTML we have added an unchange event listener to each of the inputs we have added the event so
we can get the value the name type or whatever inside this input is and inside the index.js
we have created the function we got the event we got the value of the input that is triggering
the function and we call it current value and we have used the switch statement so based on the
name of the event that we getting for example if the input is Celsius in case it's Celsius
we we change the Kelvin and Fahrenheit if it's Fahrenheit we change the celsi and Kelvin and if
it's Kelvin we change the Celsius and Fahrenheit and also we have just used this formulation to
change their values and finally we have added two fixed to limit the number of decimals to only
two digits so that was it for our project I hope you enjoyed and learned many things we have
practiced the switch statement we have also learned how to use unchange event listener to call
a function from the HTML and also we have learned how to bring the elements using get element by
ID so I hope you enjoyed so see you in the next project welcome back to another project in
this project we going to calculate the body mass index or BMI based on the height and
the weight of the user as you can see from the final version of the project we have two
inputs here that is going to get the height of the user based on centimeter and also the
weight of of the user based on kilogram and the default value is 180 and for the height and 80
for the weight and if you click on the compute BMI this is going to calculate the BMI based
on the height and weight and shows the weight condition here for example for the 180 and 80
the weight condition is normal weight but if you are for example 90 kg we are overweight if
we are for example 100 we are obesity and if you for example we are 50 kg we are underweight
so this is going to calculate the BMI and based on the BMI condition we going to add some if
statement and calculate the weight condition here so we're going to firstly install the project
with this new morphism design then we are going to use JavaScript to calculate the BMI and finally
we're going to show all the results inside this input and inside the this section the text
information at the end of of the container in the next section we're going to start with the
HTML part of the project so see you in the next section all right welcome back to the project in
this section we're going to create the HTML part of the project I have opened the final version
of the project for our reference to compare our website with the final version and also we we
can be familiar with the structure of the project so if you look at the final version we have a
title here at the top then we have two inputs which are the number input then we have a button
then we have another input showing the result of the BMI then we have we have also have another
information text at the end of the list all these things are inside a container so we have to create
a diff with a class of container and work on this inside this container and so let's first create an
HTML file so I'm going to use Visual Studio code as a text editor but you can use any other text
editor you are familiar with after closing it the get started tab in the file menu we can click
on the open folder to create a folder and open it inside the visual studio code I would like
to create the project in my desktop so I click here on desktop and here I click a new on the new
folder button to create a new folder and we call it folder the name of the our project which is BMI
calculator after creating the folder we can click on the select folder to select the folder this
is going to open the folder inside the visual studio code as you can see here we are inside the
Explorer with the folder bmi-calculator so let's close the get started tab again and inside the
Explorer section and inside the folder that we have created we create a new file by clicking on
this icon we call the file index and with with the extension HTML so this is our HTML file and which
is completely empty but we can use an exclamation mark to create a new HTML boiler plate so we click
on the we just write down an exclamation mark and we click on the first Auto suggestion suggested
by emit abbreviation let's see see it inside the browser by opening the browser we can use the
live server extension by clicking on go live and this is going to open the our website inside
the our default browser which in my case is Google Chrome you can see that the title is document
let's bring this one to the right side so we can see the changes in real time and we bring
the visual studio code to the left side we can close the Explorer section so we have more space
in our code let's change the title to the name of our project which is BMI calculator now we can
see the title has been changed to BMI calculator so as I mentioned before if you look at the final
version we have a container that has everything inside it so inside the body section we can create
a div with a class of containers so we just need to write down a period and container and after
pressing the enter we're going to accept this Auto suggestion that is going to gives us uh a de with
a class of container and inside this container we're going to start with the heading this heading
which is a and H1 tag the H1 tag with the class of heading I have added the class because we want to
later use CSS to install this uh HTML file on our website so we need to Target the each element by
its class so the class here is heading and inside the H1 tag we just write down body mass index
or BMI for short and we just add calculator at the end so if you look at our website we can see
the title at the top let's fix this one so that is correct body mass index calculator as a title
after the title we have two inputs first for the height and then we have for the weight and here
we just have a text we just say your height and we just say centimeter and we add the input here
this input has a class of input because we want to use this class to style it later and it has an ID
of height so the input has a type of text but we want the input to be in the class in the type of
number because we just want to accept the number here and we can change the number here so it has
a class of input and the IDE of height we're going to style it using this class and we're going to
Target that using JavaScript and get the number from this input using JavaScript using this ID
and also I want the value the default value of this input to be for example 180 centimeter
so when you refresh the page and come to this website you always see 180 and you can change
it after that and also I want a placeholder a text inside the input when it's empty we just say
enter your height in centimeter so if this one is empty you see the this placeholder all right so we
have created the first input the second input is similar to the first one so we can just copy this
one using alt shift Arrow done one time and we just change this height to weight ctim should be
kilogram and the input the class is input but the ID is weight the value let just say 80 kog and the
placeholder is enter your weight in kilogram all right so we have completed the two the first two
inputs the next thing the next things we need to add is this button so we're going to add a button
here the button is going to have a class so the it has a class of BTN which is a short for button
I usually use BTN and we add an ID to Target it later using JavaScript and we call the ID BTN as
well and uh inside the button we just write down compute or calculate BMI so you see the button
here and after that we're going to have another input showing the results so we just let's say
we added input with a class of input but with the idea of BMI or BMI uh result we can say BMI
result this uh input doesn't have any placeholder or something but we want this input to be disabled
because we don't want to change the value of this we just want to show the result here so we made
this one disabled after the button we have this info text here so we're going to have an H4 or
heading four with a class of info Das text and this one is going to say weight condition equal to
and we want to add the condition inside the span so we want to separate that and then this spam
because it is dynamic later we're going to change it using JavaScript it is going to have a ID of
the weight condition all right like the final version for example if you click on on compute BMI
we see the weight condition which can be normal weight of if someone uh is over eight for example
is 120 kilogram it shows obesity so it depends on the weight you see a different things so we're
going to create this one using JavaScript later but for now we just keep it empty so that was
it for the HTML part of the project it's kind of messy but later in the next section we're going to
install this using CSS and we're going to make it like this beautiful uh as you can see in the final
version so just wait for it it looks a little bit messy in the next section we're going to work on
the CSS part of the project so see you in the next section all right in the last section we have
completed the HTML part of the project in this section we're going to install the project using
CSS the first things we need to do is to create a CSS file inside the visual studio code we need
to go to the Explorer section again using control shift e and here on the top we click on this icon
to create a new file with the name is Style with the extension CSS and now we can just the code
inside this file but before using the CSS file we need to add a link to this file within the
HTML code so we go back to index set HTML let me close this section so we have more space and
just after the title tag we add a link tag we just write down link and we just click on the
third Auto suggestion the one with the CSS now we have a link tag with the relationship between
the HTML file and the CSS file and uh the HRA here defines the destination of the file which is
because we are they are on the same directory we just need to write down a stalled CSS inside the
HRA attribute now we can use the stall that CSS in our project and first we start with the body
section we just write body and first we remove the margin the default margin of the page and
we set it to be zero to remove the margin okay after this I'm going to change the background
color I want to have a gradient in color like the one you see inside the here inside the final
version it starts from blue to green so in order to create that this one should be only background
not background color and we just write down linear gradient and we want it to be on the top right to
be green and the on the bottom left to be uh blue so we just say two left bottom and with the
color we want to use the first color is light green it starts from light green to light blue
now if you look at our final version we see that the color but the reason it's repetitive because
we haven't set any height for our screen because it doesn't have height it's repeating itself so
we're going to fix it soon so first we're going to bring everything to the center using display
Flex we set the display to flex and we set the height of the screen to be or the minimum height
to be 100% of the viewport height so which is the 100% of the screen now you see the color is just
one color but now the size of the screen is 100% of the size of the browser if you change the zoom
level see you see the same size 100% now we can bring everything to the center using justify
content Center to bring them to the center horizontally like this and for bring them to the
center vertically we can use just uh align item Center to bring them to the center vertically and
also we want I want to change the font of the text to be career new the font family cor which is this
text this is my favorite font but you can use any other font you want or you can import the fonts
from other sources like a Google font which I have taught in my other projects all right so that
was it for the body section now we want to install the this container that is covering everything
the container if you remember we had a div with a class of container because this one is class
we can Target that one inside the CSS by adding a DOT here and we just write down container so
the background color for the container is a rgba which is the red green blue Alpha color for the
red green green and blue we just choose two 255 255 and 255 which gives us a white color and we
want this white color to be 30% transparent so we can see the behind of the color as well so this
one makes a glassy design or neomorphism design for our container after that I want to add some
padding so it's a space around the elements but inside the container so this is going to be
20 pixels so this is going to push everything inside and let's bring everything on top of each
other by changing the display to flex which bring everything to the next to each other and then we
can change the flex direction from row to column to bring everything on the top of each other like
this now everything looks better than before but we still have to work on this section for example
I want to make the Border rounded by using border radius and we set the Border radius to be five
pixels we can see it now here I I have to zoom so you can see the rounded corner here okay after
the Border radius let's add some Shadow effect on the bottom we just use box Shadow and we set the
shadow effects in the x axis to zero 10 pixels for the Y AIS which gives us this black color
on the bottom but we can use 10 pixels bless to make it blurry and this is going to be blured
in the on the right and left side as well and also I don't want it to be this much black so
we can make it less transparent by using rgba red green blue and Alpha color we set a zero for
the red green and blue which gives us the black color and we can use 30% transparency so which
give us this beautiful Shadow effect for our container but in the mobile size we see that
they are connected to the wall the container so we can here change the margin to five pixels
which is going to push everything to the inside more and also I I want to uh I think everything
is looks okay now for the container let's install this heading if you remember here we have the H1
with the class of heading we can Target that one by just adding do heading in the CSS file and we
change the font size to be 30 pixels for example and make it a little bit smaller and uh for the
inputs we have three inputs but all of them they have a class of inputs this one this one and this
one we can Target them I'm using do input and uh let's add some padding we add a padding for the
top and bottom 10 pixels and 20 pixels for left and right let's make the size bigger using font
size and we set it to be 18 pixels like this and let's change the background the background color I
want to choose the rgba that 255 for the white and 30% transparency but the 30% is a bit low we can
change this one to 40% as you can see the Border color is black I want the Border color to be rgba
as well but instead of 40% I want it to be 50% transparent so gives us this beautiful looking
border and let's set the margin and the space around the input to 10 pixels it's going to have
some space around the inputs so the inputs looks fine let's install this button now the button
has the class of BTM as you can see here so we can Target that button by just saying BTN I want
the background color to be light green like this I want to remove the border so we just say border
none but instead of this border I want to give it some box Shadow so we we make it more beautiful
but uh let's add some padding first so we just add a padding of 10 pixels on the top of and
bottom and 20 pixels for left and right and we add some border radius and we make it rounded
on the corners for five pixels let's add some margin it's similar to the one we added for the
input 10 pixels and we set the font size to be 20 pixels to make it bigger now it's time to add
the Box Shadow so we just add the Box Shadow we set it to be zero for the xaxis and zero for the
Y AIS just four pixels bless that gives a shadow in around it and we can use RGB a the black color
with 30% transparency to make it less visible and when we when I hover over the button I want to
see a pointing hand instead of the Cur for the cursor so I set the cursor to be pointer so when
I hover over the button I see a pointing hand the other things I want to do when I hover over the
button I want to see more Shadow so we we target the button but we use the hover stud class we we
we can Target the hover effect and we change the Box Shadow 0 0 for the X and Y AIS and 8 pixels
bless which is more than the previous one and we set the rgba to black color 30% transparency like
this but this is going very fast the change is very fast we can add some transition to make it
smooth and we added uh transition to everything with 30 milliseconds duration and with ease effect
so this is going to be like this the last things I want to insty is this weight condition text at the
bottom this one has a class of info text now we just change the font size to be 20 pixels we make
it bigger and we set the font weight to be 500 to make it thinner like this so that was it for
the CSS part of the project we made the website exactly like the final version in the next section
we're going to add a functionality that we can calculate the BMI by clicking on the button and
and also we want to calculate the weight condition based on the BMI so we're going to use JavaScript
to firstly get the information from the inputs and we're going to calculate the BMI and show it
inside this input and based on the BMI we're going to show the weight condition so see you in
the next section for the JavaScript part of the project all right in the last section we have
completed the CSS part of the project in this section we're going to start adding functionality
to the project using JavaScript if you look at the final version you can see by just changing
this input for example I just choose 160 cm with 50 kilogram and we compute we click on the
compute BMI we get the BMI of the person which is calculated based on a formulation so I'm going
going to show you the formulation then based on this BMI we're going to calculate the weight
condition that can be normal obesity underweight uh or overweight so we're going to create these
uh conditions the using if statement in JavaScript based on the BMI the first things we need to do
is to create the Javascript file so here inside the VSS code we we're going to open the Explorer
using control shift e and here on the left side in the Explorer section we click on this icon to
create a new file and we call the file index with the extension JS which stands for JavaScript
so we have the JavaScript file here but before using the JavaScript we need to add a link to
the HTML file for this Javascript file as well like the one we did for the CSS file so we go
to index. HTML and just at the end of the body section because we need to all the elements to
be loaded before H calling the Javascript file otherwise the JavaScript doesn't work because we
need to manipulate some elements here and here at the end of the body SE section we add a script tag
we just write down SC and we click on the second Auto suggestion the one with the SRC and the SRC
is the destination of the Javascript file and ASB files I mean the index. HTML and index.js are
located at the same directory The Source or SRC is just index.js now we can use the Javascript
file inside the project we can open the we can close the Explorer section by dragging it to the
left side to have more space and let me show you what we need to do so we need to add an event
listener to this button so when we click on the button we're going to call a function so in the
final version that we have now when we click on the button nothing happens but we can bring this
button element first the button here has an idea of BTM so we can bring and Target this element
inside the JavaScript using get element by ID method so we could just create a constant and
we call it BTN element and this is going to be equal to document because we want to Target all
the document inside the browser then we just use get element by ID method and we just need to call
the ID and the ID of the button is BTN so now we have access to the element we got the element
here now we can add the event listener to it so we just call say BN element. add event listener
and the event we want to add for this one is click and then we want to call a function we're going
to calculate the BMI inside the function so I'm going to call the function calculate BMI and we
need to create the function here so I just create a function I call it calculate BMI and we're
going to show it like this let's console log this one and we just console log for example
clicked and inside the final version if you open the console using F12 Let's uh let me just
go to the console so you need to click here and just go to the console and the console is empty
but when we click on this button we going to uh print click because we are calling that function
and the function has a console log saying click each time we we click on the button we see the the
number of Click is going up so the the function is working and the add event listener is working
as well so instead of just console logging click we're going to calculate the BMI based on the
inputs that we have here so we have two inputs at the top one for the height the ID is height and
one is uh weight here so we're going to firstly bring these two inputs inside the JavaScript
using the get element by ID method and we get their value so instead of console logging we're
going to create another constant and we call it for the first one I we just call it height value
and this is going to be equal to document because we want to Target the document and we use get
element by ID to Target that ID of that input which was height and we want to get the value so
we need to Target the value at the End by just adding dot value we need to do the same things
for the weight as well so I copy this one using alt shift Arrow done and here we just change this
height both of them by just using control D I'm going to delete it and add weight value so now we
have both of the values let me conso log and see so if I conso log height value and also the weight
value now when we when we click on the button we see the value of the first and the second input
for example if I change this one to 50 and this one to 20 and we click on compute we get 50 and
20 so we have access to the both of the inputs inside the JavaScript here now we can calculate
the BMI based on the height and the weight the formulation is height over the weight a square
but the height should be uh based on meter but the weight is based on kilogram because we are
getting the height based on centimeter so we can convert this one to meter by dividing it to 100
so now we are getting the height based on meter so we can now calculate the BMI so we just say
BMI value is equal to that formulation so the formulation is the weight value so B weight over
the height Square so I think I made a mistake saying that first time so it's weight over height
value multiply to height value again so height value square at the bottom but weight value at
the top but height is the based on meter and weight is based on kilogram so now we have the
value of the BMI so we can for example console log BMI value So based on this values 180 and
80 we compute so the BMI is 24 so if I change this one to 100 for example 92 the BMI is 21 so we
have the BMI now we want to print this BMI inside this input so we need to First bring this input
inside the JavaScript by using the get element by ID method we can bring it at the top because the
first we just need to bring it one time we don't need to bring it each time we call the a function
so I'm going to call call create a a constant and I call it BMI input uh element and this is going
to be equal to document. get element by ID and the ID that we going to Target is this one here the
this input has the ID of BMI result so I'm going to copy this and I paste it here inside this G
element by ID so now we have the value of the BMI here so we're going to put it inside this BMI
input element so here I just write down BMI input element. inner text oh sorry uh we need to change
the value because this is the input we change its value to this BMI value so I paste it here so now
if we click on compute BMI we see the 24 inside this input and if we change it for example to 190
we see it's 22 so we've done with the first part that is Computing the BMI and show it showing
it here inside the input this the next step is to calculate the weight condition so I'm going
to put some condition here and this is just the scientific condition so if the BMI value is less
than 18.5 the weight condition is under weight so we need to bring that uh the text info at the
end this one so we added a span here the span is empty but it has an idea of weight condition
so we need to bring this one here so at the top I'm going to create another constant and I call
it a weight condition element and this is going to be equal to document. get element by ID and
the ID that we have copied was weight condition now we can change the value inside this spam
this element by just uh bring it here and we just changed its inner text and we set it to be
for example under weight all right so in this situation that for example this person is 180
the BMI is 24 but if for example he's 50 kg so it's kind of underweight and if we calculate BMI
the BMI is less than 18 here so it's 15 so now we can see the weight condition is under weight so
let's add the other conditions for example we just add else if and the second condition is if the
BMI BMI value is more than or equal is is more than or equal of 18.5 and if the BMI value is
less than or equal to 24.9 in this condition we want to set the weight condition element inner
text instead of under weight we want to set it we just call it normal weight so for example for
the 180 and 80 kilograms V are normal weight but the because the BMI is less than 24.9 and it's
above 18.5 so let's add more conditions we have two more conditions so we just say else if if the
BMI value is more than or equal to 25 sorry more than that not less than so more than 25 and it's
less than so the BMI value is less than or equal to 29.9 the condition is over weight over weight
and the other condition is obesity so if the BMI value is more than or equal to 30 the condition
is obesity but this is a two fact all right so now the height for example is 180 this is normal
weight if we for example we are 90 kilg we are overweight if you're 120 kg we still overweight
under 50 oh this this overweight that's a lot okay probably the last condition doesn't work ah this
one should be more than 30 sorry about that so now I think it's around 100 it's obesity okay so uh
that's working so we finished uh we have done the last part of the project which was calculating
the weight condition based on the BMI and show the condition inside this span yeah that was it
for our project I hope you enjoyed and learn many things we have learned uh some methods like uh how
to calculate something how to call a function how to add an add event listener that was a simple
project I hope you enjoyed see you in the next project welcome back to another project in this
project we going to create a sticky navbar as you can see from the final version of the
project we have an image at the background of our main section we have a napar at the top
with the logo and the menu and if you scroll down we see some uh like lurm it some texes
and if we scroll down more we see that the our Navar has been changed to black color and
also if we go back again to the top we see our Navar has been changed to white color again
we're going to use JavaScript to calculate this certain point that the nav reach and
we're going to add and remove some classes to reach different styles for the Navar so see
you in the next section for the HTML part of our project all right let's start our project
first we open the visual studio code here we close the get started tab in the file menu
we click on the open folder as usual I would like to create the project in my desktop but you
can create it anywhere you like in your computer so we click on the desk up and here we click on
the new folder button to create a new folder we name the folder sticky Navar which is the name of
our project we press enter and here we click on the select folder button to select the folder
we close the get started tab again and on the left side in the Explorer section we right click
and we click on new file to create an HTML file we name Thea [Music] index.html and we press press
enter as you can see now we have the indexed HTML file on the right side which is now completely
empty but we can use an exclamation mark to have an HTML 5 Oiler plate so we write an exclamation
mark and we click on the first Auto suggestion we can see the browser inside the visual studio code
using the live preview extension uh we just need to right click and we click on live preview
Show preview now we have the browser on the right side which has the title document we close
this Explorer section to have more space on the right side by just dragging this line to the left
let's change the title to Sticky Navar which is the name of our project we can see the sticky nav
bar here on the title in the body section we have three parts for this project first is the nav bar
part then we have a image section which is the top container and we have the text container which
is the bottom container so we need three uh div to divide the our website to three sections so the
first div is um just the top one it's a div with a class of navbar and it contains the logo and also
the uh navbar menu for creating the logo we can use a website uh for a website called SVG logo
creator or generator to create an SVG logo SVG logos are uh SEO friendly and it helps usually the
websites to be ranked better in the search engines so we go to our browser the Google Chrome and we
search for SVG logo generator here if we scroll down a little bit here we can see a website called
SVG Loom maker.com we click on this website and we just make the logo in my case I just write my name
you can make any logo you you like so I just write my name we first refresh we see the logo here the
font size is fine but I want the width to be 200 so we don't waste width after the logo and also I
want the height to be uh just 40 yeah that's looks okay and I don't I don't want to have the frame
for my logo so I remove it by just using this Frame and set it to be no we change the logo to a
color for example red we refresh it and we we can download the logo by clicking on this button
we drag this downloaded logo to our folder I created the project in desktop so I bring it to
the desktop and put it inside the folder sticky navbar I go inside the folder and I would like
to change the name of this SVG logo go to Just logo if we go back to the visual studio code and
we open the Explorer section we can see now we have another file called logo.svg we can have a
access to that one just making a image tag here and inside the source as the both files I mean
the indexed HTML and logo. SV are located at the same directory and or folder we just need to write
here logo. SVG as soon as we write down the URL we can see that we have our logo on the browser on
the right side we don't need an alternative or we just write logo for Al alternative all right
we can close the Explorer section now we don't need it so we can have more space after the image
we have the menu the menu is just the unordered list tag and inside the under list tag we have
a list and the first list would be a link so we we use an anchor tag to have a link and the
address would be nothing just we don't want to go anywhere now for this website we just add a
hashtag and inside the anchor tag we just write for example home the first one now we can see it
here we just need to copy this you uh two times using alt shift arrow down one two and we just
change this home to for example block and these are optional as as well you can have anything
you like in your computer sorry in your website all right yeah that was for the that was it for
the Navar section we go to the top container so we created there with the class of top container
and the the top container is just an image and uh we have some uh like a title in the middle
so we add a H1 tag we just write welcome to our website all right so after that we have the bottom
containers so we add ative the class of bottom container so this is just the I want to create
just a lurm uh like a LM text so just a junky text so we just write we add a a paragraph with
a class of for example text and inside that we we want to add a 100 words of lurm so we just
write lurm and we add LM we add 100 after lurm if we enter and accept the auto suggestion
we get 100 words of lurm eps all right so we just make kind of this uh paragraphs a
few times so we copy this paragraph using alt shift Arrow done for example four times
1 2 3 4 so we have some text here because we want to able to to uh scroll down and see the
nav bar changing from for example background color white to background color black and YSA
be going up but if you don't have any text so we are not able to scroll down because the page
would be very small all right that was it for the HTML part of our project uh see you in the
next uh section for styling our project using CSS all right in the last section we have finished
with the HTML part of our project in this section we're going to start installing our project using
CSS first we need to create a CSS file so we open the Explorer section using control shift e
and on the left side in the Explorer section we right click and we click on the new file we
name the file installed CSS and we press enter but before using the CSS in our project we need
need to add a link to the CSS file within the HTML code so we go back to the index.html file
and just uh under the title tag here and just at the end of the H tag we add a link tag so
we write link and we click on the third Auto suggestion the one with the CSS now we have a
link tag with the relationship between the HTML file and external stal sheet which is the stall.
CSS the hre attribute defines the destination of the link and as both files I mean the index at
HTML and install at CSS are located at the same directory we just need to have solid CSS for the
URL so now we can start staring our project using CSS we just save this file using control s and we
close this Explorer section by dragging this line to have more space on the right side so we go to
the is uh to this file Esty CSS first we start from the body section for removing the default
margin usually we have I think around 8 pixels default margin around the body element so we just
remove it using margin zero and now we can stall our project easier so first we start with the
uh top container section we add the background image so after that we can easier uh install
the Navar section because the Navar is going to be on the top of the top container section
so in the index at HTML first we had a div with a class of top container which contains this
uh H1 tag which say Welcome to our website as you can see here so we we target this Dev and we
return it to the and we we choose it we select it inside the CSS because using dot top container
because it has class so here at the just the bottom of the body section which is just write
dot top container and we just add a background image we use URL function to add the background
image the image we want to choose we can choose it from the unsplash website so we go to the
browser we open a new tab and we search for unsplash the first resolve is unsplash.com so
we click on this link and here we search for for example I want to add a computer behind this
container we search for computers so the first images is just premium you need to pay but if you
scroll down more we see that we have the result for the free images but still you have the we can
see the sponsor one these are uh not free so we go down a little bit uh I would like to choose
this image for the website so we click on this and we right click and we click on the copy
image address to get the URL we go back to to the visual studio code and inside the URL we add
a set of double code and inside the double code we paste the link using control V now we can see
the image but as we don't have uh enough height for the this section we cannot see it properly we
can use alt C to turn on the word WP so we can see all the codes so after that we set the height
to be 100% of the viewport height which means it's the size will be exactly the size of the uh
screen size so and in any Zoom levels this image would be the same size of the all screen we can
check it inside the browser as well we can open it inside the browser using this hamburger icon
and open in browser as you can see the image is exactly the size of the screen we can change the
zoom level we you can see still the image looks like this but it's repetitive we can remove this
one and make the image as large as possible to fill the container using background size cover
now if you come back to the browser we can see the image is bigger and it covers everything as
you can see by changing the zoom level we still have the same amount of image for the height so
we remove this part yeah now let's install this H1 to or before doing that H1 we we need to bring
this H1 to the center so here we just change the display to flex to be able to bring this one to
the center horizontally using justify content Center and then we use align item Center to
bring the uh H1 tag to the center vertically here we cannot see it properly because the color
and the size so so we target the H1 tag using top container H1 first we change the color so we can
see it better so we just change it to White we increase the size of the text using font size
property and we set it to be 50 pixels and also I want this text to be exactly in the middle so we
can bring it in we can bring the in inline content using text align Center all right this let change
the font of this text using font family I would like to choose impact and let's add some space
between the uh characters of the world using letter spacing for example we set it to be two
pixels all right looks good now we can start uh styling our na but I would like to install this
text as well so we finish with the website and then we go to the Navar section so the text these
textes are located inside the bottom container and also it has the class of text as well so we can
Target this class so we just say do text we add some margin we just say margin top and bottom 50
pixels and we have left and right just we say 5% so now we have this one and uh I think it's fine
we just change the font family to be S serf all right that's that's enough because it's not very
important the in this project our focus is the nav bar and how to make it sticky and how to change
it when we reach to the to a certain point all right so let's install this Navar so we target the
Navar by choosing its class Navar here so we just write that Navar and we just change the background
color no sorry we just uh change the display to FX to bring them next to each other but we want this
actually be in the top of this images image and to be like a uh with a different position we just
say position fixed so when we change the position to fix we see the nav on the top of the image so
now we just need to change the height uh we change first we change the background color to be white
and so now we know exactly where the uh navor is so we we sit the withth to be 100% And we change
the justify content to space between so we bring the logo this way and the other menu to the right
side and let's install this menu first so we bring them next to each other so we just say that Navar
UL we target this uh fuel inside the div we just change the display to flex and uh we remove these
dots using uh list style type none and uh next we need to Target the LI so we can change the color
and also remove these text decorations so after this as you can see from the index at HTML we
had the D the class of naar and then we had ul and after that we have Ali and inside the Ali
we have a which is the anchor tag so we want to Target this a to fix everything so we just
say Navar UL Li and then we have a so we don't want the text decoration so the underline we set
it to be nonone as you can see now we don't have any underline then this we add some margin we say
top and bottom to be zero and left and right to be 10 pixels let's change the color to be black and
change the font family to be cursive let's bring this logo to the center using in the Navar we just
we can use align item Center to bring everything to the center uh that looks fine now all right
let's add some hover effect using hover CSS pseudo class so when uh we change the color of the text
when we hover over them so we need to just Target the same things now for UL l i and a but the hover
sud sudo class and we just say change the color to be red when we hover over there that looks fine
also we want the this logo to be click so when we click on this logo we go to the homepage but we
didn't do it from the beginning so here we add a anchor tag which goes to the index. HTML which
is the homepage and we just cut this image and we bring it inside this now if you click on this
logo we go to the homepage all right I think uh if you check this website and change the zoom
level I think it's fine for now uh we can add some box shadow at the bottom so we can have
it more beautiful when it's white so for the Navar we add a box Shadow the first value Inside
the Box Shadow is the position of the horizontal Shadow we set it to be for examp uh zero and then
we have the vertical Shadow which is the bottom of the element we just say four pixels and then
for the blow radius which just say 8 pixel and for the color we we use rgba function and we set
zero for red green and blue which gives us the black color and also we set3 for Alpha which gives
us the 30% trans transparency or opacity so when we go down we can now see the Box Shadow at the
bottom all right the things we want to do in the next section so when we pass this image as soon
as we go to the bottom section we want to change the color of the nav bar to Black and change the
text to White uh the things we want to do is just add a class to the nav bar here we add a class
of active we test it now and then we we change the style of this Navar when the active class
is added differently so we just say for example Navar when it has it it has the class of active
just change the background color for example to Black as you can see now and the we want the
color of the AI sorry the UL Li and a which is here UL Li and a we want the color of the text
of the menu to be white now we can see them so when we have this active we have the black nav
bar but if you don't have it by removing it they have a white back white nav bar in next section
we're going to use JavaScript to actually uh add and remove this Navar when we reach to a certain
point which is exactly this line between the the up top container and bottom container so see in
the next section for the JavaScript part of our project all right in the last section we have
finished with the CSS part of our project in this section we're going to use JavaScript to add
functional to our project we we have a class now active class when we add the active class our
Navar uh turns to black and when we remove it it it returns to its original color which is white
by using JavaScript we're going to calculate the this point when the top container and the bottom
container meets each other so first we create a Javascript file we open the Explorer section
using cont shift e and on the left side in the Explorer section we right click and we click on
the new file we name the file [Music] index.js we drag it to that side before using JavaScript
in our project we need to add a link to the Javascript file within the HTML code so we go
back to the index.html and just at the end of this file and uh at the end of the body tag
we add a script tag we just write SC and we select a second autosuggestion the one with the
SRC as both files index at HTML and index at JS are located at the same directory we just need to
write index S as or the URL of this script tag so now we can close the Explorer section by dragging
the line to the left and uh we go to index.js to start adding functionality to our project using
JavaScript first we we need to return this Navar element to the inside the JavaScript using or
selector method as where the Navar has a the Navar section has a class of Navar we can return this
there with the using its CSS selector and query selector method we just need to make a constant
and we call it navbar element equal to document. query selector and inside a set of parentheses we
need to specify the selector of the nap bar which is Navar because it's a it's a class so we just
write Navar we use alt C to turn on the V trap so we can see the code clearly on the left side so
now we have the Navar we can uh we can actually see it we console lock F Bar element we can open
the uh the def f t pan using this hamburger icon on and we can see the console here now we return
the the element nav bar so first we need to add event listener to the window so we can Target
when we is scrolling in the in the website so we just say windows. event listener and the event
we want to listen is a scroll sorry scroll so when this it happened we want to trigger a function
here so we just conso log here we can see that it's working or not we just say it's scrolled so
now if we scroll we see that we are getting this message we delete it and we get it again that's
working so how we know that actually how do we know that we when we are going down we reach the
this point first we need to Target the es scroll amount so we can cons lock something called
window do scroll y so it shows uh what's the number of the Y amount when we scrolling sorry
scroll y scroll y yeah so at the beginning the amount is zero as you can see at the bottom but
when we going down slowly this number increase and this number is based on Pixel actually so we
are here in the 50 pixels and if we go down we reach to this point we see now it's 272 pixels
as we go to the end of the website we get the 1,560 and this number is B is different when
we have a different zoom level in our website we can check this in our browser we can open the
web developer tools using contr shift C here we should click first and in the console when we are
scrolling we see the number is changing from zero and at the end we have 1,380 if we change the
zoom level of our browser for example we put it to 200% when we go down we get more number right
a bigger number th 2,500 so depend depending on the zoom level we get a different number for the
pixels and also the scroll bar y uh amount so we are getting this one and also we want to get the
the position of this section the bottom section so first we need to bring this bottom container so we
just say here bottom container element we set it to be uh equal to document dot query selector and
because it's a class we just need to add dot here and we just say bottom container so for the bottom
let's conso log it first this console log bottom container elements so it's a we are returning the
dev if we get its uh uh offset top we can see that we are getting let's remove this conso log so we
focus on this you're getting 378 for this number but this number actually it's here after the
margin and also when this place goes to this part to the very top part not here because this
sticky bar is on the top of the website not it's not separate so we need to divide this n number
to the height of the Navar and also this margin so we have to say here inside this function so if
window. escroll Y which we got before is greater than this number which is 375 minus the height of
the uh Navar how we get the height of the nav bar we we can use just first console log at and you
can see if you log the nap for element dot dot offset height so we getting an error because we
didn't finish this part yet so we delete it for now so we are getting 54 pixels for the height
of the Navar and also the position of this is 374 so here we just control Z we get this if
again and we just say if the window. scroll Y is bigger than bottom container element. offset
hot offset top minus this one Navar element do offset height and also we have some margin here if
you go to the solid CSS we added uh uh in the in the bottom section no in the paragraph text in
the text section we added 50 pixels for uh top and bottom of the text so we need to add this
50 as well so here we just say minus 50 so if this one happens we want to add the that class
let's close this one we want to add the class to the Navar we just say Navar element. class
list. add the class we want to add is active Let's test it so when we go down and we reach to
this point this one should work yeah but when we go back we want this to be white again so we add
else here so we just say Navar element. classless do remove and we just remove the active class so
now when we are going down we reach to this point we we change to Black when we going up we get we
change to White let's add some transition to the na bar so we can see this changing a little bit
more smooth so we just say trans transition on background color only for example 4 point Sorry 4
seconds so when we are going down we see a change but with the transition so let me explain this
one again I feel like it's very confusing so we calculate the scroll y so here in this point the
scroll y window. scroll Y is zero and here is in its maximum depending on the zoom level so we say
if this one is greater than this this point when it it goes It goes to the top so when this one
goes to the top I mean uh when this one goes to the top which actually this one is here under
that one I mean this point it goes to the this number the bottom container that offs the top
actually gives us this number when it's in the top but we want this line when it reach to this
this point so we have to minus this amount which is here at the top minus the height of the Navar
and also uh the margin from this point to this point which is 50 pixels so when we calculate
this one we when we reach exactly to this point and reaching this to this we activate this F and
this one becomes true and then we add the active class and also in any other situation we remove
the class which when it's less than this amount we are in the top that was it for our project
I hope you enjoyed and learned many things if it was confusing for you please ask any questions
you have in the Q&A section so see you in the next project welcome to this project in this project
we're going to create a random Emoji as you can see from the final version of the project we
have a button here saying click and also we see an emoji name tag here when we click on
this button we're going to see a random Emoji for example this one is just a person and a pen
and then the meaning of the Emoji is cook and if you click more we're going to get another
one for example this one is man detective medium dark skin tone so we're going to learn
how to retrieve data from API using JavaScript and also we're going to learn how to install
this website in this way using CSS the other things we need to learn is to apply for the
Emoji API website and get their API keys in the next section we're going to start with the
HTML part of the project so see you in the next section all right let's start our project uh I put
the final version here as a reference so we can use it when we are coding okay uh let's go back
to our desktop and we open the visual studio code so we close the get started Tab and we can open
the Explorer section by The View menu we click on view and we open the Explorer section or we can
use contr shift e and here we open a folder so I would like to create a project in my desktop
so I click on desktop and here we I click on the new folder to create a new folder and I call
the project a random emoji and I press enter and here we can click on the select folder to select
the folder so now the folder is selected let's close the start a tab again and on the left
side in the Explorer section we can click on here to create a new file or we can right click
and click on the new file and we just create an HTML file and we call it index. HTML so now we
have our HTML F on the on the right side which is completely empty but we can use an exclamation
mark exclamation mark actually by using emit gives us an HTML boiler plate like here it is so if
you click on the first Auto suggestion you're going to get a a boiler prate of HTML so let's
open the our live server extension we're using a extension called live server that allows us
to see our website live so we click on go live here on in the bottom and this is going to open
a new tab inside the intern uh Chrome in my case because my default browser is Chrome and the
title is document here but we can change the document doent title the title here for example we
just put the name of our project which is random Emoji now if you come back here we see that the
title is random Emoji let's bring the website on the right side and let's bring the in vs code on
the left side so we can see it both of them next to each other we see the result in real time
and let's close this Explorer section to you have more space I also use alt Z to turn on the
WRA if you close uh if you use alt C uh you see all code here so if you look at the final version
we have a title here after that we have a a div here div is an empty tag we have a div that is uh
having a button here and a paragraph under it that is the Emoji name so we need to have a head tag
so I'm going to add a head tag inside so I just write down H2 and I press enter so I get the h2
tag then we can just write down the name of the project random Emoji we should see it now inside
the browser as you can see uh it's not style like the final version because we haven't used CSS yet
so we're going to install this using CSS and after the h2 tag we're going to have a div and inside a
div we're going to have a button which is saying for now click okay let's close this and uh so we
have the button now you can see let me Zoom so you can see it better and after the button I'm
going to have the another paragraph which just say Emoji name let's disable this okay so now we
have done with the HTML we can see the HTML and in the next section we're going to use CSS to
insty this and make it like the final version like this so in the inside the final version
the button is just showing click and so we're going to install this based on the final version
so see you in the next section for styling our project all right in the last section we have
completed the HTML part of the project in this section we're going to insty the project using
CSS the first thing we need to do is to create a file a CSS file so we need to open the Explorer
section using control shift e and here we click on this icon to create a new file and we call
it a style. CSS before using CSS we need to add a link to the index. HTML file and connect these
two files together in order for them to work so inside the index set HTML just after or before the
title tag we need to add a link tag we just write to link and we click on the third Auto suggestion
the one with the CSS so this is going to create a relationship between the HTML file and the CSS U
exal sheet and the H refere is the Destin of the file and as both files are located at the same
directory we just need to write down est. CSS inside the Ed now we can use CSS in our project
so we go to solid CSS we can close the Explorer section to have more space on the left side and
we start with the body section so we just write body and we want to firstly remove the padding
and marging around this around this uh elements so we just say padding zero and margin zero so
they they should be connected so let me refresh okay so it's just connected now and let's H change
the background color of the body so we just say background and we set the color for example I
choose the salmon color okay you see the change inside the here and in order to bring them exactly
in the center we need to change the display of the body to flex so let's change the display to
flex this one bring them uh next to each other but we want them to be on top of each other so we
change the flex direction to column instead of the we just say column instead of the row and if we
want to bring them in the center horizontally we just say justify sorry vertically justify content
Center but you see that it didn't move because we have to set the height of the screen to 100 % of
the viewport height so in this way we have this much height and by using Justified content Center
we bring the elements to the center of the screen and whatever the size of the screen is it's always
stay in the center so I'm changing the zoom level now you see after the bringing them to the center
vertically we can bring them to the center hor uh horizontally using align item Center okay and in
order to uh just so everything looks fine now so that's it for the body section and let's install
this H2 we want to make it exactly like the final version We want to make it change the uh oh
firstly we need to change the font of the uh our project so the font I want to use here in the body
section we just say font family and I want to use The Courier new Courier monospace this is kind of
uh this similar to this I think it's the okay for our project but you can choose any font that you
like in your own project then we need to sell this one inside the indexed HTML we we have chosen the
h2 tag for the header so we can Target the H2 here and we need to style it first thing first I want
to change this size of the font so the font size I want to make it double and in order to make it
double we just need to write down two ram ram is just the basic size which is 14 pixels I believe
and when you double it we can just say 2 RM so now we have the double size then we want to change
the color of that so I want the color to be I just want to use the Lis blue or we can choose white
if you want this is kind of a little bit different from blueish white okay and we need to I think
that's enough for the title let's install this button and this uh text so these two are located
inside the div inside the index set HTML you see that these two are inside a div but uh it's not
good practice to Target a div we need to add a class name to the div and class and then we're
going to InStyle it here so we just call this div for example section and we can Target that using
dot section so this is going to be exactly let me just say div but if you have more than one devs
so you're going to change the style of all of them but in this case you're just changing the sty of
this diff here this by just exactly the same diff okay so we just want to bring them everything to
the center we can use align uh let's make a text align Center so we want to bring them exactly
in the center so that's enough for that and the next things we want to Target is this button so
the button doesn't have any class to so we need to add a class here and we just call it uh we
just call it BTN okay and here we can sty it we just say vtn and uh first thing first we I want to
increase the size so I just say font weights sorry font size I want to make it five times so just
say five RM okay and uh for the I want to remove the border so just say border none I don't want it
to be to have a border but and also I don't want a background color but I want it to be like this one
it has a background but it's transparent okay you can simply achieve that by just saying background
okay we choose background and the we can just say RGB RGB we can choose the color and also we can
add the transparency as well so the color I want to choose is 255 255 255 which is just the white
color and then I want the2 transparency okay which is I believe is 20% transparency okay so the
background color which is salmon now you can see from here then we want a some uh corner here
some rounded Corner we can simply achieve that by just adding border radius let me see border
radius and the we set the Border radius to be 10 pixels okay then we want to add uh some padding
some space between the text and The Bard order so 15 pixels for the padding so right so looks fine
but if you look at the final version inside when we have a something here when we don't hover over
it we see it's gray and when we hover over it it becomes colorful we can make the icons inside gray
by just saying filter and they set the filter to be gray a scale and we don't set anything inside
the parenthesis this is completely make the make it great and when we want to achieve the color
we set the gray scale to zero okay so now we have this uh gray filter as well and as you can see
here we have some transition it doesn't suddenly change so in order to add a transition we just
write down transition the transition we want to apply is just for the filter because we don't want
to apply for other things because it makes the your website slower and we want the transaction
is just to be 2 seconds and the ease in and out effect the other things I want to do is uh when we
hover over it okay we want to see a pointing hand so when we we just set the cursor to be pointer
so when we hover over it we see a pointing hand okay that was it for the button let's insty this
uh so another things you want to do for the button is just I told you when uh when we want to hover
over it you want to make this icons colorful so we just say BT and. hover we want to use the hover
Studio class and we just change the filter from Gray scales which is here completely Ser to zero
so it's going to be colorful this way okay and let's install this uh text quickly so let's add
some class here so we add a class here and we just say MOG Das name so for the class name you
have to add a dash so we can Target this one by just saying Dot Emoji Das name and I want just
uh make it a little bit Bolder by just saying font weight 600 and also I want the color of
the text to be dark blue okay so as you can see here all right that was it for the CSS part
of the project in the next section we're going to add the functionality of getting these random
emojis and also the name of the Emoji instead of just showing Emoji name so see you in the next
section for the JavaScript part of the project all right in the last section we have completed
the CSS part of our project and we have styled the uh the website in this section we're going to
start adding functionality to our project using JavaScript first thing we need to do is to install
and add the Javascript file to our Visual Studio code so we need to open the Explorer section
we can use control shift e to open the Explorer section and on the left side we can create a new
file and we call it index.js and as we did with for the CSS file we need to connect the HTML
file and the Javascript file as well otherwise we cannot use the Javascript file for doing that
instead of adding the link tag at the beginning of the project we need to add the a script tag at the
end of the body tag the reason we are adding the script tag at the end of the body tag because uh
JavaScript needs the elements to be loaded first and then we need to manipulate these elements
using JavaScript so first thing first we the elements should be loaded then JavaScript should
work otherwise we cannot see the elements inside JavaScript so we need to add the script tag at
the end of the body tag so we add a script tag using just we write down SC and we click on the
second Auto suggestion with the one with the SRC SRC in the script tag is similar to the H ref
inside the link tag it's just the destination of the file and as both files the index. JJs and
index. HTML are located at the same directory we just need to write index.js for the destination
of the file now we can use the JavaScript inside our project so now we can go to the index.js
and start our uh manipulation so two things we need to change here first this we need to track
the click on this button so when we click on the button button we need to do something and also
we want to change this Emoji name as well so as you can see from the final version when we
click on this button we we track the clicks on this button Let me refresh the page so we click
here the JavaScript detects a click and loads a new Emoji here and also change the uh the the
definition of the Emoji here under the button so we are changing two actually uh place the button
and also this text and also we are detecting the clicks on the button as well so we need to add a
add event listener to the button and also we need to change the value of these two buttons using a
method called inner text okay let's do it inside our own website the final version here the current
one so we need to bring in two things the button and the this text so the button has a class of BTN
so we can add ID here so because we want to have a unique button to track so we need to add a ID
we can also track a bring it using this class but it's a bit a better practice to add ID to anything
we want to bring inside the JavaScript so here we just write BTN and uh inside the index at JS we
can bring it inside and create a reference using we create a constant and we call it BTN element
okay and inside inside a document document is everything we have inside the website so we just
say if inside a document we want to get an element by its ID so we use this method get element by
ID and the the ID we want to get is that BTN okay so the ID here was BTN okay let me close the
style now so we brought inside the BTN now we can add the event listener or other things here and
the next things we want to bring in some is this paragraph So the paragraph I add ID as well so I
call this emoi Das name okay and inside index.js we're going to create another constant and we call
this one emoji name element and this is going to be equal to document do get element by ID and the
ID name is MOG Das name so we have both elements now now we we can add the event listener here for
this button so we just say BTN element we add the add event listener to this and the event you want
to track let's see so the event you want to track is clicks so we just click here and when someone
click we want to trigger a function so we need to add a function here so when we someone click we
want to trigger a function so we need to create a function here and so let's first console log we
see it's working so we just console log clicked and let's open the console log here inside our
website using F12 so the console is open let me bring it down okay so when we click on this click
we should see the text clicked so I click here so let's refresh the page okay it's uh sometimes when
you start coding you need to refresh to everything be applied sometimes the live Server doesn't work
but by by after refreshing everything would be fine so we click on click again so you see each
click is going to be considered here all right so after this we want to manipulate this text and
this button and we want to replace this button by some random emojis for getting the Emojis we're
going to use an API uh and we need to search for a website on Google called Emoji API just search
Emoji API and in in the search results you click on a website called - ai.com okay for this website
you can see they're giving you the API key as we I registered before but if you don't see the API
key you just write down your email and they're going to give you the API key it's completely free
and there's no need to any registration you just need to uh verify your email okay for example
if I open this website inside a new incognito website let me open Emoji let me search Emoji
API and open it inside an incognito so as you can see you don't see any uh API key but if
you write down your email for example I write down one of my other email for example code with
hand at gmail.com and if you click on get a key they're going to give you an API key okay so
you can just copy this and go back to visual studio code so the things we want to do here let
me show you how we would do it okay so we want to have a a constant called emoji and first we want
to keep it an empty bracket so an empty array and then we want to fill this array with the Emojis
by each request they're going to give us uh lots of emojis but we just store some of them inside
this uh constant I'm going to show you how to do it first we need to create a function and we call
this function add Emoji or get emoji okay and uh we're going to call this function once the website
is loaded so we need to call this function here so so when we refresh the page we're going to call
this function okay one time and this function is going to fetch the data from that emoji API
so we create a variable and we call it response response and this is going to fetch the data but
the for fetching we need to use a weight because this is going to return a data so we need to wait
for this response so we we using a wait here and the method we using to fetch the data is just
fetch okay and inside this one we need to add the URL of the API we want to get so the URL is
https and uh two for Slash and we just say Emojii Doc and we add forward slash because we want to
get all the Emojis we just write emo emojis here and after that we need to add the API key that we
have copied so we just add a question mark we add a parameter called access underline key and this
is going to be equal to the API key that we have copied so I need to paste this one so this is the
same C code that we got here so I copy it here okay as we are using a weight we need to change
this function from normal function to asynchronous function that's the rule of using a weight because
this is returning a promise so this function needs to wait until it gets the result and go to the
next line and anytime you use weit the code should wait for the response and we need to change the
function to asynchronous function all right so we got the response here then we need to change
the response to a Json data so we need to get the data here and this is going to be AWA too because
for changing it to response we need to a wait to so we just change the response by calling the Json
method so this is going to uh convert this respond to the Json now we can conso log and see what
we are getting so we just conso log data so let me close this Emoji API this one as well so let's
open the Explorer section sorry console log using F12 all right as soon as we refresh the page we
get an array of emojis okay you see so there are around uh 2,693 94 uh emojis so each of this one
for example if you click on 0 to 99 it gives you the emoji for example the happy face and all the
facing emojis to the end okay and I want to show you for example if you don't get your API ke
for example I delete the last digit here and just delete this one now if you refresh the page
we get an error and the error is access to the fit from the origin has been blocked by course
policy no access controls are around so you need to get your API key otherwise you cannot get the
Emojis okay so I return the last digit here and I as you can see we again we got the all the apis
all the icons but I want to show you the after after 1,500 most of the Emojis is just a country
code or Flags or other things we don't need to use them so until th I feel until 1,500 they're okay
so there are some emojis that you can see okay so I'm going to limit this emojis on 1,500 and put
them inside this uh constant that we have created all right so let's delete this console log and
we create a for Loop here the for Loop is going to use the starts from zero then it's going to be
until 1,00 500 okay and this is going to increase uh one by one so it start from 0o 2,500 and it's
going to be increased one by one for example 0 1 2 3 to the end okay so we created a for Loop now
we want to push the uh response inside this data so we just say Emoji so this Emoji do push and we
want to add an object here because we want to get the Emoji Emoji and also the Emoji definition
so let me conso lock this one again so you see what's I'm talking about so if you look at here
let me Zoom this a little bit okay each of them has a character which is this emoji and also uni
uni code name so if I open this so each of the each of them has a character we want to get this
character and replace it with this button and also we want this uni code name which is the name of
the or definition of this Emoji okay we want to save both of them so here inside this object we
want to get the name which is equal to this data we are getting and uh we want to Target each of
them so we just say in the uh bracket we just add I and after that the first thing we want to get is
the character character which we can see from here so we want to get the character and also uni code
name so let me copy this uni code name as well so after the name we want to get the uh so this is
the name so or we can just say character or Emoji name we can just call it Emoji name or and then
this one is Emoji code okay and this one is coming from data and this one is is uni code name okay so
now we have stored both of them and instead of now conso logging the data let's conso log here the
let's conso log the Emoji that we have created so now if you open the console we still get an array
let me see let's refresh the page so we console oh we still okay so we have limited to 2,500 but
we still uh uh this is the sorry this is for the final version Let's uh check our own website okay
now if you open this one if refresh the page so now we have the array Let's uh decrease the size
this array is now 1,500 with the just the Emoji name and Emoji code that we are getting here Emoji
name and Emoji code okay now we can replace this button with this Emoji name and also we can uh
replace this uh paragraph with the Emoji code okay so let's do this here so let's Cate clear
this console log and inside this function that we are clicking on this button we're going to Target
that uh BTN and the Emoji name but first thing we need to create a random number because each time
we want to click we want to see a random like in the final version we want to see a random emoji
and its definition so first we need to create a random number for creating a random number we can
use the math. random this is going to create a random number between zero and uh one for example
if I console log a random number we can if we go to our website and open the console each time we
click we get a random number between zero and one okay but we want the the number to be completely
just zero or or one some numers so we need to make this one uh rounded by we just use floor for floor
is going to bring it to the down okay so now each time we click we get zero because between zero and
one Whatever number is it's going to be rounded to its minimum which is zero but we want to create a
random number between 0 and 1,500 or the uh length of this emoji so we need to multiply this one to
theog do Len length so the length of thiso this uh constant is 1,500 so this is going to create a
random number between zero and 1,500 so each time we click we get a number between 0 and 1,500
randomly as you can see from the console log all right so now we can use this number to fill
this a button and the paragraph using this Emoji name and Emoji code okay so we for the BTN for the
button we added enter text so we want to fill the the text inside the button using that emoji that
we have and we use a random number to choose one of them and we just get the Emoji name here all
right so now if you click we see that the button inside the button is replaced by a random Emoji
okay and also we want to change the that emoji name as well so we target the Emoji name element
and we changed its inner text by the Emoji random number dooji code this time so now if you click we
see a random MOG and it's definition for example this is uh leave this one is dango seat and also
we can see the transition and changing the color as well so let me Zoom a little bit you can see
the difference okay that was it for our project I hope you enjoyed and learn many things you
can add more functionality yourself and share it with u Us in the comment section so I hope you
enjoyed and learned many so see you in the next project welcome back to another project in this
project we're going to create a tip calculator as you can see from the final version of the project
we have a container here with the title tip calculator then we have two inputs including the
bill amount and the tip percentage for example we can choose $100 bill amount and a tip percentage
of 20% and if we click on the calculate this is going to calculate the total number of amount
that the customer should pay to that uh store for example so as you can see we have designed
this calculator tpe calculator using CSS in a model design then we have used JavaScript to get
these two elements the value of these two inputs and calculate the total amount based on these
inputs and also we're going to add some event listener to this button to trigger function
which is going to calculate these amounts in the next section we're going to start with the
HTML part of the project so see you in the next section all right let's start our project in this
section we're going to work on the h HTML part of the project as you can see we have put the final
version here for our comparison as you can see there is a container in the Middle with the title
tip calculator then we have two inputs one is bail amount one is tip percentage and finally we have
a button to calculate this the first things we need to do is to create a folder and we're going
to open this folder inside the visual studio code so I'm going to create a new folder I'm going to
call it the name of our project which is tip Das calculator and once we have created this folder
we can just open it inside the visual studio code by right click and click on open with code so
now we have this folder as a default folder of the Explorer section of Visual Studio code as you
can see T calculator let's close the welcome Tab and here we just create a new file and we call it
index.html and once we have created the HTML file now we need to just create the HTML 5 boiler plate
which we can a by just adding an exclamation mark if you have uh activated your image abbreviation
you you should see this suggestion and if you press on Tab you're going to get the HTML 5
boiler plate let's open this website inside the browser using the extension that we have
installed and which is called live server so if you click on this go live this is going to
open it inside the visual inside the browser and uh you can see that it is open in the port
5,500 and the file is called index at HTML and then the title is document let's bring the website
to the right side and the visual cud code on the left side and let's change this title to the name
of our project which is tab calculator as you can see now the title is Chang to tip T calculator
after that we're going to have uh inside the body section we're going to have a container which is
going to cover everything so I'm going to add a div with a class of container by just writing
down DOT container and if we press enter we're going to create a div with a class of container
and here we're going to have an H1 tag saying tip calculator after the H1 tag as you can see
we're going to have a paragraph and inside the paragraph we're going to say Enter The Fill amount
and tip percentage to calculate the total after the paragraph we're going to have two inputs
and each input is going to have a lay label so I'm going to add a label and this is going to be
for the bill so we just say for Bill and then the name uh inside the label we're going to say build
amount after that we're going to have a input with the type of numbers so just say type number and
this input as you can see we can now change this value inside the input after that we're going to
have a line break we just say BR R we add a line break this is should be like that and then we're
going to have another uh label and this label is going to be for the tip which is going to say
tip percentage and this is going to be number as well the input with the type of number so in
order to distinguish between these inputs you know later using JavaScript I'm going to add an
ID for the first one and then call it build and for the second one I'm going to add an ID saying
tip and then after the inputs the second input I'm going to add another line break and then we're
going to add the button so we're going to have a button with the ID of calculate so I'm going to
add a hashtag for the ID we just say calculate and we press enter this is going to create a button
with the idea of calculate and inside the button we're going to say just calculate so we see the
button now after the button we're going to have another line break so I'm going to copy this
and after the but but here we're going to have another label for the total say total and this is
going to be an span not an input because we don't want to change its value and is this is going to
just have an ID of total okay yeah that was it for the HTML part part of the project as you can see
we have just added the H1 tag here paragraph two inputs with the labels and a calc calculate button
and finally another for total in the next section we're going to work on the CSS part of the project
and we're going to style it like the one in the final version with this beautiful modern design
with a box Shadow and uh we're going to create this beautiful hovering effect for the button so
see in the next section for the CSS part of the project all right in the last section we have
completed the HTML parts of the project in this section we're going to start project using CSS the
first thing we need to do is to create a CSS file here so I'm going to create a new file here by
opening the Explorer section using control shift e and here we can click on this icon to create a
new file called C style. CSS before using this CSS file we need to add a link to this file within
the HTML code so we need to come back to index that HTML and inside the head tag at the end of
the title tag we're going to add a link tag tag we just write down link and they click on the
one with the CSS this is going to create a link tag with the relationship between the HTML file
and the CSS St sheet and the address is a solid CSS because the the both files are located at the
same directory so now we can install our project first we start with the set the body style we
just because we want to install some input when you have an input you need to add this at the
top of your CSS which is Bo sizing border box this is going to help you to style the boxes like
inputs better because this is going to calculate the extra borders and the space around this input
after that we're going to Target the body section I'm going to change the background color to
something like light gray which is F2 F2 F2 as you can see the color is changed so the CSS file
is working and after that we're going to change the font family to something called H hela hela
and if this font is not available I'm going to use S serf instead okay so we have just uh installed
the body section now we're going to start with the container this container this de with the class of
container which is going to be in all section so if you see the final version this is the container
we have so for the container because it has a class of container we can Target that one using
dot container we open a set of Ky braces first thing first we're going to change its background
color to white okay and then we're going to set a maximum width of 600 pixels as you can see
it's smaller now but it's not in the center so what I want to do here is to create a margin so
I just say margin 100 pixels top and bottom and left and right to be Auto so it's this is going to
have an equal margin to the left and right and uh if you remove the zoom level now because it has
200 level per Zoom so if you remove it this you can see the box is this size and then we're going
to have some padding which is a space inside and around the elements inside this container which
is going to be 20 pixels and let's add some box Shadow so let's add some Shadow fact so zero zero
for X and Y but 10 pixels for bless so you can see we get the bless in all Direction and let's change
the color of the Shadow to be an rgba which is the red green blue and Alpha and here we set the red
to be zero green zero blue zero which is stands for black and for the alpha I'm going to set it to
be2 which is 20% transparency as you can see the Shadow and now we're going to change the Border
radius add some border around the corners of 10 pixels okay looks fine in the mobile size we have
some margin two that is nice and uh that's it for the container next things we want to style is this
H1 tag which is saying tip calculator so I'm going to go outside this container I'm going to Target
the H1 tag here and then let's add the margin top of zero we remove the margin at the top connect
it to the wall and we bring it to the center using text align Center that's it that's it for the
H1 the next things we want to style is the input these two inputs here so we're going to Target
these two inputs by just saying input so let's add some padding padding of 10 pixels then we're going
to have a border of one pixels solid which is going to be a line and then the color would be CCC
which is a kind of gray color after that let's add some border radius and we set it to be four pixels
so make it rounded in the corner and then we let's add some margin of 10 pixels up and down and zero
for left and right and and then I want it to be in the all Direction all the screen so I'm going to
set the width to be 100% okay as you can see we have two beautiful inputs can change the numbers
okay and then the the next things we want to style the button is this button we're going to Target
the button simply by just saying button so let's change its background color we just say background
and the color I want to use is 4 CA s50 and then let's change the color of the text to be white we
also want to add some padding of 10 pixels let's remove the border so we set the border to be none
and let's make the cursor to be pointers so when we hover over it we see a pointing hand in the
mouse effect and then we're going to have some margin top and bottom 10 pixels and zero for left
and right and we set the width to be 100% like this so we have all I have added everything now
so we can just make the text bigger for example you can just change the font size to be 18 pixels
and then we can just make it uppercase for example just say it takes transform to be uppercase okay
that's it for the button the other things you want to add to the button is when I hover over it I
want to see the color to be different so I'm going to add a pseudo effect of hover pseudo effect so
we just say hover and for the hover effect I want to change its background color this time to 45
049 45849 this color so and if you want it to be smooth you can just add a trans for transition for
the background color so just copy this and then we just added 3 seconds with ease effect you can
see a little bit smoother okay2 would be enough and the last things we want toy is this total
the total amount and uh we're going to Target that because the total is inside an spam and the
ID of total we can Target that one using the ID of total we just want to change the font size
to be 24 pixels and font weight to be Bol and finally we set some margin top of 10 pixels okay
you cannot see it yet we need to add some values here for example I just say th we see the value
here that's bold okay uh so I'm going to delete this one because lat in the next section based on
the input we're going to to calculate the total amount using JavaScript so we're going to first
thing first we want to get the value of these two inputs and then when we click on the button we're
going to calculate the uh total amount and show it inside this span all using JavaScript so see you
in the next section for the JavaScript part of the project all right in the last section we have
completed the CSS part of the project in this section we're going to work on the JavaScript
script and add functionality to the to the project and just make it work with the inputs and
show it uh inside the total like the one in the final version for example here if you choose ,000
bill with 20% tip the total is going to be 1,200 so the first things we need to do is to create a
Javascript file so I'm going to open the Explorer section using control shift e and here I'm going
to write down index.js to create a Javascript file before using the JavaScript file we need to add a
link to this file inside the HTML code it should be inside the body section and at the end of
the body section because we all the contents need to be loaded first and then we're going
to manipulate using JavaScript so I'm going to add a script tag I just write down SC and I'm
going to click on the second Auto suggestion the one with the SRC and the SRC which is the
source address is index.js because both files are at the same directory so now let's close the
Explorer section the first things we need to do is to add an event listener to this button with the
idea of calculate so here I'm going to bring ins bring in the button I'm just going to call it
BTN element and we're going to Target that one inside the document because we want to Target all
the browser and then we're going to use a method called get element by ID I'm going to pass the ID
which is calculate now we have this element we can just add the event listener to it so we just going
to Target this BTN element we have and we add an add event listener to it and the event we want to
listen is Click so when we click on it we want to trigger a function and uh we can just create a
function here or we can just call the function for example we're going to call the function
H calculate total and then I'm going to call create the function here so I'm going to create
the function I'm going to call it calculate to all so for now we just console log for example we
just console log click so let's open the console using F12 we go to console let's clear the console
and now let think if I click on calculate this is going to console log clicked as so this is working
after testing the function to be working instead of just console logging we going to get the value
of these elements like build amount tip percentage first we need to bring these elements so they are
inside an input the first input is this input for the bill it has an IDE of bill so I'm going to uh
go to the JavaScript and then I'm going to create a constant and then first I want to call it Bill
input and this is going to be equal to similar document that get element by ID but the ID is
Bill or Bill so we can copy this one and make it for the tip to so just say tip and the ID
is tip so we have access to these two inputs now we can just uh get their value so I'm just
going to say con Bild value this is going to be equal to this bill input and we target its value
so now if I console log if a console log build value and if I open the console again using F12
I just change the value here for example I just say 2,000 something if I click on calculate we
can get the value of this bill here so whatever value we have for example 32 calculate we get 32
because we are constant logging the value of the build let's do the same things for the tip so I'm
going to change this build using control D to tip so we get the value of the tip as well now we
can calculate the total we just say total value is going to be equal to this formula we're just
going to multiply this bill value to 1 plus tip value divided by 100 so whatever the tip value
is we divide it by 100 and uh we add one to it and then we multiply it to Bill value so now if
we console log total value for example we have a $100 bill with 20% tip the total is going to be
120 so let's test it so if you calculate as you can see the total value is 120 If the percentage
which is 10 this is going to be 110 but as you can see we are getting some weird numbers this
is a JavaScript problem uh but we can fix this one as well because this is the base on the binary
values so now instead of console logging I'm going to bring the input as well this uh total at the
top I'm going to bring the total so I'm going to copy this one I want to change this to Total spam
and then this is going to be total so now we have access to this element so instead of just console
logging we can change the total SP spam iner text to be equal to this total value okay so now if we
change for example we just say 100 and we just say 20% the total is 120 if it's 10 this is going to
be10 but some uh values here so we can fix this one we just add uh a method called two fixed okay
two fixed and then we just fix it to two digits maximum so I'm going to say again 100 10 this is
going to show it like this 100 10 and zero for example sents if you do it for example 2.5% this
is going to be $102.50 all right so that was it for our project I hope you enjoyed and learn many
things we have learned how to bring the elements how to add an event listener to it and how to
calculate calate the value based on the inputs and how to print the value inside the output
which is our total span so see you in the next project welcome to another project in this
project we're going to create a loading bar as you can see from the final version of
the project we have a header here and also we have a a percentage loading percentage
number and also we have a loading bar if you refresh the page we see the numbers is
incrementing from 0o to 100 this project is going to be useful for as a pre-loader
for any websites and you can use it in your own project we're going to learn how to
increment these numbers and change the bars of withd using JavaScript so see you in
the next section for the HTML part of the project all right let's start our project first
we open the visual studio code we close the get started Tab and here in the file menu we click on
open folder I would like to create the project in my desktop but you can create it anywhere you like
in your computer so we click on desktop here and here we click on the new folder button to create a
new folder we name the project loading bar and we press enter now we choose the select folder here
and we close the get started tab again now we can create our HTML f file so on the left side in the
Explorer section we right click and we click on new file we name the file index.html and we press
enter now on the right side we have our index.html file which is completely empty but we can use an
exclamation mark to make an HTML 5 boiler plate so we write an exclamation mark and we click on the
first Auto suggestion in order to see the browser inside the visual studio code we can use the live
preview extension that we have installed so we right click and we click on live preview Show
preview tab now here on the right side you can see the browser which is completely empty but with
the title document let's change the title to our project's name which is loading bar and inside the
body tag let's add a container that covers all the code uh I mean the div with the class of container
and we press enter to accept the auto suggestion so we get the div class of container inside the
container let's add a heading tag just H1 and we just write loading loading after that we have a
div with the class of counter so we just put the number uh here so we press enter and we just add
0% for the text which is hardcoded now but later we are going to change this one dynamically
using JavaScript after that we have two uh bars or line braks we use HR tag to make a long
break we set the class of the first one loading bar back because we want this to be behind the
main bar and we have another HR tag with a class of loading bar front so later in JavaScript we
position these line braks to Absolute so they will be on top of each other and we set the color
of the back loading bar to a lighter color so we can see a empty line and and the filling line yeah
that was it for the HTML part of our project in the next section we're going to start styling
the project using CSS so see you in the next section all right in the last section we have
finished with the HTML part in this section we're going to start styling our project using
CSS so first we create a CSS file so on the left side in the Explorer section we right click and
we click on new file we name the file style. CSS and we press enter before starting to style our
project using this file we need to add a link to this file within the HTML code so we go back to
the H index. HTML and just after the title tag let's first close this so we can see it better
so just after the title tag we add a link tag we just write link and we click on the third Auto
suggestion the one with the CSS as you can see now we have a link tag with the relationship
between the HTML file and the external instal sheet which is the inst. CSS the HR the href
attribute defines the destination of the link and as both files I mean the index.html and the
stall. CSS are located at the same directory so we just need to write here EST style. CSS all right
so now we can use uh our CSS file we go to the install the CSS and we start styling the body
section so we just write body we open a set of curly braces first we remove the space around the
body section the default margin so we just write down margin zero then we change the display to
flex to be able to bring the items to the center horizontally so we write justify content Center
to bring them uh to the center horizontally and we can bring them to the center vertically just
first we have to set the height to the to be 100% of the viewport height so it's 100% of the screen
size and you use align item Center to bring them to the center vertically we change the background
color to be black and we change the color of the text to be light gray and uh we change the font
family we change the font of the heading and the zero% using font family property and the font I
would like to use is cursive but you can use any font you like in your project so we just try we
just choose the first Auto suggestion now we get this beautiful font Let's uh next install the main
container which is here which covers everything and it has the class of container so we just need
to use the CSS selector dot container and we open a set of kly brackets or kly braces just first
we bring the the numbers to the middle using text align Center and let's increase the width
of the loading bars to for example 300 pixels and that was it for the container part then we
have uh let's yeah let's uh style this CL this St with the class of counter so just under this we
write do counter and we open a set of cly braces first we change the font size to change the size
of the number we just said it to be 40 pixels I think that's big enough and next we're going
to install the next the next HR tag which is which has the class of loading bar back these both
are they have the similar styling but the pro the difference is we want the color of the bar in the
back to be lighter than the bar in the front so in the stal CSS just under this we target the loading
bar back first first we change the position to be absolute so we bring the both lines on top of each
other so we just say absolute and we want this be to be absolute in relationship with the container
so in the container we should change the position to relative otherwise the positioning will be uh
relative to the body which is the main parent then we have uh let's change the height to be 8 pixels
let's change the background color to be light gray and let's give it some width H just say 100% now
we can see it clearly let's add some border to the bar just a little bit of border so we use border
radius 5 pixels and let's increase the width a little bit more just make it 400 pixels so we can
clearly see the bar and let's remove the border the black border just in Border none it looks
much better and yeah that's it for the loading bar back for the loading bar front it will be the
same styling but with the different colors so we just copy this using alt shift Arrow done first we
have to highlight it and then use alt shift Arrow done and we just change this back to front and we
change the color to be for example let's see what color we have here just any colors you like yeah
just choose the orange red and this width if you change it if you for example check the 10% you
can see the bar has 10% orange red color and the behind bar still is 100% which has the color of of
light gray so later in JavaScript we're going to use uh some methods to change the width and the
number dynamically when we refresh the page so let's change this WID to 0% and we're going to
change it inside the JavaScript so in the next section we're going to add functionality to our
project using JavaScript so see you in the next section all right in the last section we have
finished installling our project using CSS in this section we're going to add some functionality
to the project using JavaScript first we need to create the Javascript file so we open the Explorer
section using Contour shift e or you can open the Explorer from here control shift e so we right
click and we click on new file and we name the file index.js before using JavaScript in our
project we need to add a link to the Javascript file within the HTML code so we go back to the
index.html file and just at the end of the body section we add a script tag we just write script
or we just write SC and we click on the second Auto suggestion the one with the SRC as both
files I mean the index.html and index.js are located at the same directory for the SRC section
which is the destination of the link we just need to write index.js now we can use jav JavaScript in
our project so let's close this Explorer section by just dragging this line to the left and we
go to the index.js file the the elements we need to manipulate in using JavaScript is this
uh percentage number and also this bar but the front bar so in the index.html we have to Target
this counter class and also this loading bar front class in order to return a an element with a class
we can use the quy selector method so in in index JS we just add a constant we just name the element
counter element we want to Target this so we equal this to document. query selector just quy selector
we use alt C to turn on the report W so we can see all the code and inside the set of parenthesis
we need to specify the selector because it's a class because it's a class we not we just need
to name with a DOT at the beginning so we just write Dot counter the next element we need to uh
return to our JavaScript file is the bar but the front bar so the class is loading bar front so we
copy this name we go back to the index.js and we create a constant we call it bar element we just
write document. query selector and inside a set of parentheses and a double code we just write
Dot and we paste the class name all right now we can manipulate them for example uh as you can see
here just we can just say country element dot for example inner text and we just can set it to for
example 20% instead of 0% so in order to do so we just make a function to update it every like a
1% 2% 3% and a bar as well so we make a function here so first we create a variable and we call
it index idx and we set it to zero so we start from zero and we call a function we just call the
function n update n and we create a function just under it so we just say function update n and
oh sorry I just made a mistake here update n and here we just manipulate our hter elements
just change the inner text to I I said it to as you remember we did it 20% like this but I I
want it to be dynamic so we keep the percentage but we add the index at the beginning so now
it's 0% because the idx is zero if we change the idx to 10 we see here that the percentage
is 10 or 100 we have 100% so we uh return this to zero and next things we want to manipulate
is a bar element we just write bar element the things we want to change is the width of the bar
so we need to tap to the stall and then we use the width and we equal this you can do we can
do the same things here as well for example we check 10% and we see the 10% a red bar or 20 or
50 so we make this dynamic as well so we delete this and outside we just say IX plus this and if
you change this idx to 20 for example we see 20% here and 20% with of R let's return this to zero
and we need to Loop this until uh 100 so use set timeout method first we need to increment the
idx one each time the function is called and we check if the IDS idx is less than 10 101 which
means until 100 we we use set timeout method to call this update num function again but we
just say every 20 milliseconds so you can see it so if you refresh the our browser again
we can see that the bar is uh changing with at the same time time with the counter number
counter value that was it for our project that was a very short project I hope you enjoyed
and learned new things so see you in the next project welcome back to another project in this
project we are going to create blur background popup as you can see from the final version of
the project we have a our main website which is very simple it has a background image with a
title and also a call to action button which mean which saying click to join when we click
on this button a popup window appears from the top with the transition and also we have
a blured background in the back the popup window has an input for email and also a
joint button and also a close uh icon at the top right when we click on the close icon
the popup window disappears and also our main website returns to uh normal and without any
filter or blur we can try it again in the next section we're going to start with the HTML
part of our project so see you in the next section all right let's start our project first
we open the visual studio code and here we close the get started tab in the file menu we click
on the open folder I would like to create the project as usual in my desktop but you can create
it anywhere you like in your computer so we click here on the desktop and we click in uh here on
the new folder button to create a new folder we name the folder for example background image
scroll effect which is the name of our project we press enter and here we CL we click on the
select folder button to select the folder we close the get started tab again and on the left
side in the Explorer section we right click and we click on the new file to create an HTML file
file we name the file index.html and we press enter now on the right side we have our index.
HTML file which is completely empty but we can use an exclamation point to create an HTML 5
boiler plate so we write an exclamation point and we click on the first Auto suggestion now we
have our HTML file po plate in order to see the browser inside the visual studio code we can use
the live preview extension we just need to right click here and we click on the live preview
Show preview now we have the browser on the right side which is completely empty but with the
title document let's close this Explorer section by dragging this line to the left side and we
have now more space on the right side let's change this title to our project's name which is
background image SC scroll effect you can see the background image scor effect in the tab of the
browser as the title and inside the body section we create a div with a class of background
image we just write BG image and we added ID of BG image as well background image this is
just an empty div that uh we're going to use later CSS to change the background image of this
empty Dev but for now we just leave it like this and then we we have the main container that our
website con uh uh text and titles goes there so we just write down that container and inside this
container we have a H1 tag we just say Welcome to our website after this H1 tag we're going to
have a paragraph that inside it we have just some Lauren pick some texts and we're just going
to copy this paragraph a few times to have more text so when we are scrolling we you can see the
scroll effect this is just a simple uh website that we're going to use this is not important
the important part is this background image that we're going to add the zoom and opacity effect
using JavaScript to it in the next section we're going to start styling our project and add the
background image using CSS so see you in the next section all right in the last section we have
finished with the HTML part of our project in this section we're going to start a styling our
project using CSS first we create a CSS file here we open the Explorer section using control
shift e and on the left side in the Explorer section we right click and we click on the new
file we name the file style. CSS before using CSS in our project we must add a link to the CSS
file within the HTML code so we switch to index. HTML and just after the the title tag we add a
link tag we just write link and we click on the third Auto suggestion the one with the CSS now we
have a link tag with the relationship between the HTML file and the external Excel sheet and the
HF attribute here defines the destination of the link and as both files are located at the same
directory we just need to have solid CSS for the HF or the URL now we can use CSS in our project
we we save this file using control s we close this Explorer section by dragging this line to the
left to have more space on the right side and we go to solid CSS and we start from the styling
the body section of the project so we just write body and we open a set of curly braces first we
remove the default margin the space around the body section and we just write margin zero and
we change the front family to send Ser that was it for the body section next we're going to style
the background image diff the empty D we're going to add some image to it so we just Target it bybg
image first we set the height and width we just say width 100% and height 100% of the viewport
height which means 100% of the screen size you can see now the D at the top it's completely
empty but we add a background image to it in in order to have the background image I would like
to use the website called unsplash so we go to desktop we click on Google Chrome and here in the
search bar we search unlash in the search results in the first one we have unsplash.com we click on
the unsplash beautiful free images and pictures and in the search bar we search for for example
nature all right and we can choose one of them I just choose this U image of ocean so we right
click here and we click on copy image address and we go back to visual studio code and here we
add a background property and we use URL function to add the external image so we add a double
code here and we paste the link now we can see the image on the right side but uh we want this
image to be fixed at the top and when we going down yeah that's fine for now and then later using
uh let's first uh change the background position to be Center so we see the center of the image and
we change the background attachment to fixed so as you can see the background became fixed and when
you're moving down uh they don't move which just uh go to them so this is all right for our project
the only things we need to do is just when we're scrolling down we zoom zoom out the image and also
change the opacity all right so let's install this uh H1 tag and also the paragraphs here before
going to the JavaScript part so the the here the the dev that contains this one has the class
of container so we target that and we change the heading to be 100 pixels to push everything
inside uh we just check this one in the browser yeah here it's fine for this size but uh let's
add some media query so we just say media query if the max width is 500 pixel I mean when we have
a screen as smaller than 500 pixels we want this dot container as only like a pen pixel padding
all right now it looks fine when it increase the size you see that the image like this that's
actually not important our website uh the design this this picture is important that we're going
to style later and let's change the size of this heading so we target H1 and we just say we change
the font size and we set it to be 50 pixels we can see in the browser and as you can see the image
has some uh repeated effect on the top we can fix this one by just adding the background size
to for example 160% and if you check the browser now now is actually in the zoom mode and when we
are scr scroll down we want to zoom out the image so we're going to have a a zooming effect later
using JavaScript yeah and let's also increase the paragraph looks fine to me just change the color
of the paragraph we set it to be gray all right so that was it for the CSS part of our project in
the next section we're going to add functionality to our project using JavaScript we're going
to add zooming and opacity effect when we are scrolling down the project so see you in the next
section for the JavaScript part of our project all right in the last section we have finished
with the CSS part of our project we added a background image and also we installed our
main website in this section we're going to add functionality to our project using JavaScript
first we need to create a Javascript file and here we open the Explorer section using control shift e
on the left side in the Explorer section we right click and we click on the new file to create a
Javascript file we name the file index.js before using JavaScript in our project we must add a link
to the Javascript file within the HTML code so we switch to index.html and just at the end of the
body section we add a script tag we just write SC and we click on the second Auto suggestion
the one with the SRC as both fils I mean the index that HML and the index.js are located at
the same directory we just need to have index JS for the URL now we can use JavaScript in our
project first we save the follow using control s we close this Explorer section by dragging the
line to the left and we go to index.js and start coding our JavaScript the first element we we
need to bring is just this background image which is here a if with a class of background
image and an ID of background image we can use get element by ID method to return an element with
the ID attribute so in inside the Javascript file we just add a constant and we call it background
image element and we equal it to document. getet element by ID and the ID was background image we
can use alt Z to turn on the world rap so we can see all the codes and we want to add add event
listener to the window so when we scrolling we can track this scroll so we just write here
window. addevent listener the event we want to add is a scroll and we want this when this
event happens a a callback function triggered and you want to call a function and update the
size and also the B opacity of the image so we call a function we just make a function we call
it update image and we create a function here we just call it update image so in this update image
we're going to Target this element which is this background image and we're going to change the
first we change the opacity so we're going to change the style so we just write do style and
we change the opacity opacity we want to start when it's full uh we are in the top we want to
have uh just one the opacity to be one and we want to decrease it by when we are scrolling we
can calculate the scroll by just uh using window. page y of set all right and then we want this
number to be divided by a big number like 800 so this number will be smaller than one and we
want to uh minus one use one minus this number so now when we scrolling down you see the opacity
of the background image is changing we can console log this to see the number so we con lock two
things the windows. offset and also W 1 minus windows. offset divided by 800 so you open the
console here using this hamburger icon and open diff tools pain and we go to console section and
we scroll down as we scroll down you see that the windows y offset is two something and then the
opacity starts from uh 9 9% and it's going down when you're scrolling down and finally when we
reach to the botton you see that uh the opacity is going to zero and also getting the minus and
this opacity page offset is 837 so we can choose different numbers so we don't get minus so we
can change this one to 900 it depends on the zoom level and the screen size of your but uh
it doesn't matter even the opacity becomes all right now we add CH we added the opacity let's
change the background size and we start from this 160% background size so we just Target the
background image element. style. background size and we change the background size from 160% and
we decrease it by this uh window. page Y ofset and also this one is a PR percentage so we should
add a percentage at the end so when we going down you see that this one is getting smaller but
this number is uh very big so we divide it by for example 12 so now we see that the zoom level
is okay let's test it inside the real browser the Google Chrome as you can see when you're going
down the zoom level is decreasing and also we're having more opacity at the top in different zoom
level we you can see it as well yeah yeah that was it for our project I hope you enjoyed and
learned many things uh we have used CSS to sty our background image and fix it at the top and
also we used JavaScript to change the opacity and the background size of the uh the background image
when we are scrolling down so see you in the next project welcome back to another project in
this project we are going to create a mouse event project as you can see from the final
version of the project when we move the mouse around the screen we see a different numbers in a
mouse X position and Y position then we go to the top left we see the numbers is going toward zero
and if we go to the right down we see that uh the numbers is getting bigger this is actually the
position of the mouse the left and uh horizontal and the vertical position this website is going
to be useful for someone who wants to design and do the CSS for his website you can get these
numbers and check how many pixels they are uh far from the here from the top from the left
in this project you're going to learn how to use ad event listener to get these numbers and uh
uh how we track the mouse position in the browser in the next section we're going to start with the
HTML part of the project so see you in the next section all right let's start our project first
we open the visual studio code here we close the get to started Tab and in the file menu we
click on the uh open folder I would like to create the project in my desktop but you can
create it anywhere you like in your computer so here we click on the desktop here we click on
the new folder button to create a new folder we name the folder mouse event which is the name of
our project we press enter and here we click on the select folder button we close the get started
tab again and here on the left we create an HTML file so we right click and we click on new file we
name the file index. HTML and we press enter here on the right side now we can see our index.html
file which is completely empty but we can use an exclamation mark to create an HTML 5 boiler plate
so we write an exclamation mark and we choose the first Auto suggestion we can turn on the WRA by
using alt C to see all the code in order to see the browser inside the visual studio code we need
to use the live preview extension which we have installed uh in the introduction section so we
right click here and we click on live preview Go preview now we can see the browser on the right
side with the title document we can change the title here and we set it to be for example mouse
event which is name the name of our project we can close this uh Explorer section for now so we
have more space for the index.html all right in the body section we add a empty container it means
a div with a class of container so we just write dot container and we press enter to accept the
auto suggestion as you can see now we have a div with the class of container and inside this Dev
we create another Dev with a class of mouse event and inside this we firstly we added number as a
hardcoded which is the mouse position but later using JavaScript we can dynamically get the mass
position and uh change this number automatically so and then we have the H4 tag which just the same
Mouse X position and we add a parenthesis saying pixels which means in pixels and also we we should
copy this to have the Y position as well so we copy this using alt shift arrow down and we change
this x to Y so now we have these numbers and also uh everything in in a hardcoded version but later
using JavaScript we're going to add functionality to the project and change these numbers uh
systematically and based on the position of the mouse that was it for the HTML part of our
project in the next section we're going to start styling our project and uh bring these numbers
to the middle and in a box so see you in the next section all right in the last section we have
finished with the HTML part of our project we just hardcoded the mass position X and Y in
this section we're going to start installing the project using CSS first we need to create a
CSS file so we open the Explorer section and on the left side using control shift e and we right
click here and we click on new file we name the file style. CSS and we press enter before stying
the projects using CSS we need to add a link to the CSS file within the HTML code so we go back
to the index.html file and just under the title section and at the end of the hit tag we just
add the link tag we just write link and we choose the third Auto suggestion the one with the CSS
now as you can see now we have a link tag with the relationship between the HTML file and the
external style sheet and the HF attribute here defines the destination of the link or the URL uh
as we have the index. HTML and the installed CSS at the same directory you just need to write
install that CSS for the URL all right now we can start installing our project let's save this
file and we go to solid CSS and let's close this for now we open this a little bit we start from
the body section we just WR body we open a set of curly braces and first we remove the default
margin as you can see there is a small Gap here so we remove this space using margin zero as you
can see here then we use display Flex to be able to bring these items to the center horizontal
first using just thei content Center and then we use height 100% of the viewport height so we
write 100 VH to be able to bring the items to the center vertically because we set the height
of the body to the height of the screen size so we just write align items centers to bring the
items in the center perfectly let's change the background color to be dark blue and let's change
the color to be uh brighter to see them so let's change the color to be white let's change the
font of the text using font family property we just need to write here font family cursive now we
have a beautiful fonts and next we need to add add a box for the each of these elements the elements
we have here is M uh as you can see in the index. HTML this class with the uh mouse event class
we're going to Target this de with the class of M event so we're targeting both of them with this
class so in the is CSS here we just write that Mouse Dash event we open a set of K braces and we
add a border to see just say border we change the border to solid so you can see a border we Chang
the height of the or height of the border to be one pixels and change the color to be light gray
all right let's add some margin so we have we add some space between the two elements so we just say
margin let's say 20 pixels or even more we can do 40 pixels all right let's uh bring these elements
next to each other when we have uh a bigger size screen so we target the parent of mouse Elements
which is container here we just say that container and we change the display to flex but we want
these elements to be on the top of each other when we have a smaller screen and also we want this
width to be always big so we change the first we change the mean width to be for example 50 pixels
oh I changed the main height so we just change this to width all right now we always have this
same we have the same size here let's change this 100 change it to 180 so yeah that's fine but we
want these elements to on top of each other when we have a smaller screen so we had a media query
here so we just write an and side % sign so we just check the media quy we remove this screen and
change it to Max width to be 500 pixels and for the screen is smaller than 500 pixels we change
the container it's a flex direction to column so when we have a smaller screen these these are
going on top of each other all right that looks fine so let's bring this mouse X position to the
top and this 20 to the middle so the mouse event uh let's add some text we don't need text align
Center actually if we add it here we can add text align Center to bring them in the middle and
also let's bring this to the top so we can Target that using Mouse event and we're targeting that H4
so we just write H4 here and we set the position to be absolute but we want it to be absolute
relative to this box which is this this container mouse event so we set the position of this to be
relative and let's add some height too to this so say mean height to be 100 pixels for example all
right so so we set the position absolute for this and we can bring it to the top using top minus
let's try 30 pixels it's not enough 50 pixels so that looks fine but the size of the the size of
the font is is to Big we just change the font size to be 12 pixels or just say 14 yeah and we bring
them to the middle too by using left 50% but we have we are bringing the the edge of the edge
of them to the center in order to bring all of them to the center we can use transform translate
x minus 50% and also we don't want these uh lines to be on the top of each other we can turn off
the word wrap using white space no wrap so they're always next to each other and also we want the the
font weight to be a little bit smaller so we just set the find weight to be 100 and let's change the
color to be light gray too so it's going to be a little bit dimmer all right let's bring this 20
to the center as well so here we just add justify content Center and align item Center but we have
to change the display to flex all right so we need for bringing them to the middle we can use display
flex and justify content and align items centers bring them exactly in the middle and let's change
the size to be a little bit bigger so we just say 20 pixels or just say 30 pixels yeah this looks
fine now for The Styling in the next section we're going to change this number based on the position
of the mouse in this screen dynamically so in the next section we're going to add the functionality
using JavaScript so see you in the next section all right in the last section we have
finished installing our project using CSS in this section we're going to start adding functionality
to our project using JavaScript we're going to dynamically change these numbers based on the
mouse X and Y positions first we need to create a Javascript file so here we open the Explorer
section using control shift e and on the left side in the Explorer section we right click and
we click on new file we name the file index.js and we press enter before adding functionality
to the project using JavaScript we need to link the Javascript file to the HTML file so we go back
to the index.html and just at the end of the body tag we just write SC and we click on the second
Auto suggestion the one with the SRC now we have a script tag and we can link the HTML file to
the index.js file SRC similar to H defines the destination of the link and as both files I mean
the index.js and index. HTML files are located at the same directory we just need to write index.js
for the URL now we can use the JavaScript in our project the first thing we need to bring to the
JavaScript and the first element we need to Target is this one the dev with the class of container
because it has a class we can return it using Cory selector method so inside the JavaScript we create
a concept and we call it container element we equal this to Let's close this section to we have
more space to see the code we just write document. quy selector and inside a set of parentheses we
just write do container because the the dev has a class so we just need to have dot here let's
use alt C to turn on the wraft so we can de see the codes clearly then we we need to add a event
listener to the window so we can can get all the information of the mouse so inside the window
we add a event listener so we just write that add event listener ad event listener has two
parameters the first one is the event and the second one is a function that will be triggered
when the event happens and the event we want to Target is the mouse the mouse moved so when
whenever we move the mouse this this events will be triggered will trigger a function so we write
a function after a comma we use an aror function function first we can see the event we just write
event here and we we console log the event so when we let's open the console using the open the
diff tools pane here from the hamburger button so we open the diff tools and inside the console we
can see that the mouse event is showing now if you move the mouse inside the browser you can see that
they are showing a new position for the mouse when we get close to the top we get the lower amount in
client X and client y as you can see and we go to this way we get the higher numbers the things we
want to get is client X and client y so we close this console we don't need it anymore we delete
the log and we need to change this container inside the container so we we just say container
element and we do inner HTML because we want to change the HTML inside the container we set it
equal to a backt so we can have a variable inside so we copy this copy this all divs and we bring
them here now we have uh here all the HTML inside but we want to change this 20 to the X position so
we added variable so we write a dollar sign a set of craes and inside this we just say event. client
X so when we move our Mouse now inside the browser we can get the the mouse exp position inside this
box so let's do the same things for the Y position as well so we we write an a dollar sign and open
a set of K braces and we just get the event but this time we get the client y so before entering
inside the browser we just get the 20 which we are here uh we have here and when we enter we can see
the exposition for example here we have 10 and 11 pixels from the X and Y position it it calculates
from here so we have zero and zero here and the maximum is this site and if you open the browser
too we just open the browser inside the Google Chrome we can see now we have a bigger screen and
we are getting a bigger X and Y position here yeah that was it for our project I hope you enjoyed
and learn new that was very a small project but it you could learn some important things like
ad event listener and uh using the event mouse mouse move and how to uh have the inner HTML
and change change it dynamically yeah that was it for the project and I hope you enjoyed and
learned many things I'll see you in the next project welcome back to another project in
this project we're going to create a dice roll simulator as you can see from the final
version of the project we have a dice at the middle and we have a button saying roll dice if
you click on this button this is going to create an animation first and then create a random
Dice and show it here in the middle and also we we have added this roll dice inside this list
the history list so let's do it again this time we got five and we have added to the list as well
so as you can see we have just installed this one using CSS with a modern design and also we have
used JavaScript to add an event listener to this button which is going to create and simulate a
dice row by creating a random number and also we're going to save these numbers inside an array
and show it here in the history of the r dice so in the next section we're going to firstly start
with the HTML part of the project and then we're going to work on the CSS and after that we're
going to work and add functionality to to this project using JavaScript so see you in the next
section all right let's start our project in this section we're going to work on the HTML part of
the project so I'm going to create the project in my desktop so I'm going to create a folder here so
I'm going to create a new folder I'm going to call this folder the name of our project which is Dice
Ro simulator and once you create this folder you can just right click and click on open with code
this is going to open it inside the visual studio code so now the visual C code is uh having this
dice roll simulator folder as a default folder now now we can create a new file here by clicking on
this icon and just Rec call that file index.html and now we have the HTML file but it is completely
empty let me close this but now we can use an exclamation mark to have an HTML oil plate as you
can see from the image abbreviation we get this suggestion by just writing down an exclamation
mark and then when you click on the first Auto suggestion you get the HTML 5 boiler plate if
you have install the live server extension in your Visual Studio code you have this button go
live so you can cck on go live and this is going to open the website inside the default browser
which in our case is Google Chrome as you can see we have the document here as our title and
then we can just change this title to the name of the project which is Dice simulator so now if
you check the browser the title is going to be dice roll simulator so now let's bring the website
to the right side and then the visual studio code on the left side so you can see the changes in
real time because we have uh we are using the live server extension anything right here we're
going to see in real time on the right side so inside the body section we're going to have an
H1 tag saying dice roll simulator so after just a few second and after saving the project you
can see the dice roll simulator heading inside the website and after this H1 tag you're going
to have a div with a class of dice and also with the idea of dice so for adding the class you just
need to have Dot and for the ID you just need to write down a pawn sign and then you get the auto
suggestion from M abbreviation a d with a class of dice and an ID of dice if you press enter you
get that div now inside this D I'm going to add this uh icon which is the dice pH uh one so for in
order to find this uh they have some uh uni code if you search on Google let me search for you so
we just say for example dice unic code dice unic code there are plenty of websites showing you
the uni code characters of this you can just go for example this compare compart as you can see we
have for example uni code for this uh five so for the HTML entity the code is this so just if you
copy this code for example you just put it inside your this div this is going to show the five uh
dice so you don't need to just get the icon you just need to have this kind of HTML unities and if
you want for example for the this is for D Phase 5 you can just copy this and search for Di pH one
for example and then just click here and then get the code from here okay so let's continue
so let's remove the zoom level so the icon is here but we cannot see it yet but later using
CSS we're going to increase the size of these things and make them more beautiful then we have
a button the button has an ID of roll button and inside the button we're going to say roll dice so
you can see the button here and after the button we're going to have the history like the here we
have the history I'm going to just create a UL unordered list with the ID of ro- History so we're
going to use this ID or classes to later using CSS or JavaScript to manipulate the website and asy it
so we have the UL with the idea of Ro history and then we have an Li here I just want to hardcode
some lii for example the first one we just want to say Ru one and then we just have an span this
span is going to have that for example this this code here and then we can just have another one
for example r two and we just for example get the five one so we have one and five this is just
hardcoded because we want to style this one using CSS in the next section we need some dat here to
uh style it but later we're going to create this one using JavaScript so if we roll more Dice and
then we can just see the history here for example like the one here so you see the each time you
you see it new history data and add it here so that was it for the HTML part of the project in
the next section we're going to work on the CSS and make the website as beautiful as the final
version as you can see here we have a h effect for a button and we have this title and also we
have this a style like B Shadow effect for these Ro histories so see you in the next section for
the CSS part of the project all right in the last section we have completed the HTML part of the
project in this section we're going to insty the project like the one in the final version using
CSS the first thing we need to do is to install the and uh create a new CSS file inside our
Explorer section so I have to open the Explorer section using control shift e and here inside the
Explorer section inside our folder which is called D simulator we just create a new file and we call
it a style. CSS and before using this file we need to add a link to this file Within the HTML code so
we need to come back to the index at HTML and then just after the title tag inside the hit section
we need to add a link to the CSS file as you can see if I'm getting this suggestion you just
can write down link and then click on the third Auto suggestion the one with the CSS let me turn
off my get up copilot all right so now we have a link which is a relationship between the HTML file
and the S sheet St CSS and here the St at CSS the address of this file and as both files are located
at the same directory we just need to have a solid CSS here now we can start stying our project here
now I want to start with the body section so which is covering everything I want to change the font
family to open sense should be Capital so open sense is do like this and if the open sense is
not available we're going to say use this sense serf instead so this is a backup font after that
I want to bring everything to the center using text align Center like this and then let's remove
the default margin of the page and we set it to be zero so we cany it better so we have completed the
body section let's move on and go to this H1 tag saying dice roll Ator so we just Target that one
using H1 and open a set of curly braces and here we just change the font size first to change the
size of the font as we set it to be three RM which is three times of the uh base sizing and mostly
it's default sizing is 16 pixels but it depends on how you set your browser if I remove the zoom
level which is 200% now this is the size that we have created by creating three RM and then I want
to add some margin at a top of 2 RM so we bring it a little bit down from the top and uh after the H1
tag I want to Target this dice here this de with the class of dice which is having this dice here
so let's target that one because this is a class we can just say do Dice and let's just change
the font size to be seven RM so make it bigger then let's add some margin of five pixels here
so you add some space around this dice I'm going to add the animation later as you can see from
the final version when we change the dice some animation happens but if we don't have the ability
to change the dice we cannot see the animation so I'm going to after creating the JavaScript I'm
going to come back and create that animation I'm going to teach you how to create a cool animation
like this so let's move on and uh let's go to the next section which is the button so we target
the button which just say button so the button uh we want to have the background color for that
the background color I want to add is this code 47 A5 C4 which is kind of bluish color and then
let's change the color of the text to be white can just simply write down white or # FFF would
be similar and then let's change the font size to be 1 and2 RM and then let's add some padding so
padding the top and bottom I just write down one RM and for the left and right we just write down
two RM like this and then we can just uh border remove the Border here because I don't want this
black color around it instead I want to add some uh so just remove the border for now we add some
border radius we make it rounded in the corners by just adding a border radius we set it to be one r
like this and set to the cursor to be pointers so when we hover over it we see a pointing hand and
uh yeah that was it for this creating this let's add some transition effect and hovering effect for
it so we when we hover over the button we just add a sud class hover we just change the background
color to be different which is 2 e 8 b a s and then we can add some transition so when we hover
over it we don't see it suddenly so we can add a transition on background color with 3 seconds
and EAS effect so you can see now the changing is a little bit slower so after that we're going
to Target this UL here this UL with the idea of Ro history we can just Target the UR let's remove
these dots so we just have to Target the list style to be one and a half RM soorry this is the
list style should be null so you remove that dot and then we add remove the padding we just say
padding zero so if they come in the center when you remove the list style you need to set the
padding to zero and then we set some margin of 2 RM so we add some space around it and we set
the maximum width of that to be 600 pixels and we set the margin of left and rights to be Auto so
we bring them exactly in the center okay so now so this one this one is not necessary we can just
set this one to two RM for top and bottom okay now we just Target the LI the list each list so
we target the LI we set the font size first to 1 and A2 RM so make it bigger we add some pading
of5 RM margin of5 RM padding the space inside and margin is is the space outside the element and
then we have some background color F2 F2 F2 which is kind of gray color we add some border radius
to make it rounded in the corner and then we set this one to 0.5 RM we also want to add some box
Shadow so we can see it better the Box Shadow is going to have a zero for the x-axis two pixels
for the Y on offset two pixels for the bless and then we can have some RG ba color which is a
red green and blue color for the red I just said it to be zero green zero blue zero so this is
going to gives us a black color for the alpha which is the transparency I just set it to be 3%
transparent as you can see it's a beautiful now box Shadow and then we wanted to set a display
to flex so I want the rule one to be in the left on the left side and this icon on the right side
so I set a display to flex and then I want to set a justify content to be a space between so add a
space between the two elements and finally we can use align items Center to bring them to the center
vertically like this inside the uh container and then finally I want to make this uh icon this
dice symbol to be bigger so we can Target that from this spam here so we just Target that from
we just say Li spam and we set the font size to be 3 RM and then we just set some Maring on the
right side of 1 RM okay it looks fine let's make it bigger so as you can see it has some Maximum
width of 600 so never gets bigger than that the button looks good and also this dice looks fine
all right so that was it for the CSS part of the project I hope you enjoyed and learned many
things in the next section we're going to work on the functionality and we make it like the final
version so each time we add we click on the roll dice we get the new Ro dice randomly and then
added inside our list here so see in the next section for the JavaScript part of the project
all right in the last section we have completed the CSS part of the project we have exiled the
project now it's time to add functionality to the project using JavaScript the first thing we
need to do is to create a javascrip file inside our Visual Studio code so here I'm going to open
the Explorer section using contr shift e and here we can click on this icon to create a new file
I'm going to call the file index.js uh similar to the one we did for the installed CSS we have
we have to add a link to this file within the HTML code but the link should be at the end of
the body section as we need the file the HTML to be loaded first and then we need to add the the
functionality to it so we need to add a script T here we just write down SC and we can click on the
second out the suggestion the one with the SRC and the address for this script tag would be index.js
as both files all located at the same directory so let's close this and let's start adding some
functionality the first things I want to do is to add the animation so when I in the final version
when we click on this row St we have animation so we want to add this but first we want to add
an event listener to this button which is going to trigger an animation so let's bring this one to
the right side and he this one to the left side so now what we want to do you go to uh index. HTML
so what we want to add some add event listener to this button with the idea of roll button so
when we click on it something happens so first thing first we want to bring this button to the
JavaScript so we want to create a constant called button element and this is going to be equal to
document let me stop the co-pilot so we just uh Target the document because we want to Target all
the browser and then we can use get element by ID method to Target the ID that we have here which
is a roll button we can copy this and then paste it inside here now we have access to the botton
let's add the event listener to it so we just say button element. add event listener and the event
you want to add is Click because when we want to click we want to trigger something so what we want
to do we want to create a function here so this function is going to be triggered once we click on
it for example if our console log something here for example click and now if you open the console
using F12 let's bring this one down so now if I click on the button you see the clicked is logged
inside the console but instead of clicking I want to add anim an animation to this element the
this dice element here so first we need to add the animation inside the CSS so if you remember
inside the dice we didn't add any animation but we have to create an animation here and we need
to name an animation so I'm going to create an animation class we just call it R Das animation
and this one is going to have an animation name which is going to be R and now we create this
animation with key frame so we add a key frame this key frame is going to be the name of that we
have created here row and and it starts from 0 to 100% for the 0% we're going to have a transform
which is going to have some uh change inside the like a in the xaxis in the y axis but we want to
rotate it in y axis so we just say rotate y first we start with 0° and we for is rotate X we start
from 0 degre 2 then when we reach to the 100% we want to have the transform but this time instead
of 0° we want to have 720° in both sides y- AIS and xaxis we going to have these two so we have
this animation now we want to add it to the dice now so to the dice we want to have some animation
duration for 1 second but we want this one to be infinite so we want to just say animation fill
mode to be forwards which is going to be infinite but in JavaScript we want to remove this animation
after uh few seconds so I'm going to show you how to do it so now we have this animation inside the
CSS let's add it using JavaScript so inside the Javas scpt we have to add that animation this
is very simple we just need to bring this dice element inside HTML we know that the dice element
it's a it's a div with the idea of dice so we can bring it here at the top we create a constant
call it dice element and this is going to be equal to similar to the above like a document. get
element by ID and the ID is called dice so now we have this element we just can add that animation
to it by using class list. add this is going to add that class list which was R animation roll
do- animation so basically we have added this roll animation class to this element now so if
you now press this button we see the animation okay but this is only working one time so we want
to add this and after a few one second we want to remove that so we can just add a set time out here
which is going to trigger this function after 1 second which is th millisecond and this function
is going to we just copy this one and instead of add we want to remove it so just say remove after
one second we're going to remove that so if I click it's going to remove it and then we can just
click again click again C again as you can see now we have the animation in our uh dice but we want
to just randomly change this dice so we're going to call a function after removing this called
blade Dice and we need to create this function here at the top so we create a function called R
dice so this is how we do it we create a random number between one and six each time and then
we're going to base on this number we're going to show different dice face so this is just a five
for example if the next number is four we're going to show the D phase 4 so first we create this
random number so we create we just call it we create a constant we call it roll result which is
going to be we just create a random number first this is going to create a random number between
one and zero but we can multiply this one to 60 so sorry six so which is going to be from zero
and six but we don't want the numbers like 0.2 or3 or 1.5 we want a a rounded number so we can just
cover this one inside a parenthesis and then just use a method called called math. floor so this
is going to create the number between zero and five actually so this is going to create because
floor is going to bring it to the bottom now we just need to add one to it to create the number
between one and six this is the one way the other way was to use math. so this is going to create 1
2 six so math. floor is going to round it to the lower number and then we just need to add one to
it to create a random number between one and six so we can consel out now the roll result so let's
see if we click on this we going to see a number and now we got two next time we get three four
5 it's going to be always between 1 and six okay so we're creating this number now now we want to
based on this number change the dice face so I'm going to create another constant called dice face
which is going to call a function called get dice face and we want to pass this number R result so
let's create this function we create a function here called get dice space which is going to get
this number and based on this number is going to change and uh return that uh that face that dice
face so we need to create a switch here I want to show you how to use the switch so the switch is
going to get an input and based on an input we're going to have an output so here we have the switch
in case the number is one this is going to return the one which is here if you remember we we need
to have the unit code so for the phe one let's search here so dive Phase 5 let's search for dive
phase one so the uni code for this one is this for HTML I'm going to return this okay and in case
of two we're going to return two so I'm going to paste the so let's search for the days D Phase
2 okay so we just need to keep going create this until 6 so for the in case we have three we're
going to return the dice three so let's search for dice three I'm going to use my cont V dice
three so let's continue for the case four we're going to return okay four is this one so two more
left case five we're going to return di face five and finally let's for the case six we're going to
return the six one so I'm going to just search for the six okay so this is the six and for default
you need to add a default if you want to use a switch so any other cases we going to return just
an empty string okay so this is how the way the switch works so based on the input we're going to
return output so it's going to be one to six and we return different faces here so now we have this
one now we we have the dice face so if I console log dice face here so each time we roll a dice
we we return a dice face instead of number now as you can see okay so we got this dice face now we
want to change this this dice element text content to dice face so we just say dice element do text
content we want to change it to this dice face so now if I change this one we see this number okay
okay but we want to see the actually the the I think we need to instead of this one we use inner
HTML so let's check okay now we see the die face so the instead of text content you use inner HTML
so each time we see a different dce okay so we have done this part but we haven't completed this
history yet because the history is always the same so we need to change the history and save the each
uh each dice R so I'm going to create a constant create a variable here called history list and
this is going to be an empty array and we're going to update this empty array each time we click on
this one and we're going to add the information we have so each time we change the inner HTML of
this one we're going to update the history list so we just say history list we're going to add the
new one by just saying. push and we add this roll result okay which is which can be one two three
or anything like that and then we can just uh update create a function called update Ro history
okay now let's create this function so we're going to create a function called update history so the
function name is update history update Ro history I put it here so update history is going to first
thing first make this one completely empty so we're going to have this role history first so
this role history we need to bring it inside the JavaScript which is which includes all the list
so here at the top I'm going to bring that one using a constant and we call that one Ro history
element and this is going to be equal to document. get element by ID and the ID for this one is way-
history so first thing first we're going to empty that one so here inside this function we're going
to say R history element. inner HTML is going to be empty first so each time we click we're going
to empty this one first okay and then we're going to fill it with the all everything we have inside
the history list which is going to save here each time okay so we create a for Loop we just create a
for Loop we create a variable called I here which is going to start from zero and this is going
to continue until the this history list length for example it can be one we can be two three and
Etc and then we're going to increase this I one each time for this Loop and for this loop we're
going to create the list item so we're going to create this list item here in each Loop so we're
going to say list item which is going to be equal to we can create it using a method called create
elements so we just Target the document and then we just say create element and the element we
want to create is Li which is the list now we have created we want to change the inner HTML of
it so we just say list item. inner HTML and this is going to be dynamic so we need to add a backt
backt is located on the uh Tab Key it's not the single quote actually okay it's backt so we're
going to say roll we want to say r one r two but r one and r two is going to be based on this I
okay because I starts from zero we need to add one to it so we just create a variable we just
say I plus one because I starts from zero now we want to start from one and after that we're going
to have a Spam and inside this span we're going to have that uh this face which we can get from
creating getting from this get dice face so we're going to create another variable we just say get
we call this get dce face function and we're going to pass this uh we have the the the number here
history list we have saved all the numbers inside the history list by just passing the RO result so
we going to just say history list but we want the number I for example the first one second one the
third one we pass this I and then we get the face and then show it inside this span so I'm going to
create close this span now so add a closing tag here now we have created the list item so we need
to add it to the role history so we just made the RO history empty now we can just add this element
to it by just using aend child so aend child is going to add this element so we add this element
to R history Elements which is this element here we have uh we have this element here we have added
appended these childes to this element so now we done it we've done it using JavaScript so if I
click now we see that the first now we have two if if I click again we can we can see the next
one is added to the list now the third one this just we can keep going see the each one and then
the number is updated here as well using RO number and uh the other thing is when we refresh the page
first we see this two we can just delete this two now or we just comment it using control control
forward slash so now we don't see any list but when we click on the r dot we see the first one
second one and third one so what we do here I'm going to explain again we just created an empty
array called history list each time we create a random number we're going to add that number to
this variable inside its array by using that push and then we're going to create the element Li I
element here based on that number and added as a child to the unordered leas item so that was it
for the JavaScript part of the project I hope you enjoyed and learned many things in this projects
we have work on the some difficult task like updating the history creating an animation and
how to add and uh use the appen child to add some element to another element so I hope you enjoyed
I learn many things see you in the next project