Create a Movie Website in 90 min. HTML & CSS & Javascript

hello my friends today we are gonna be building this beautiful movie website so it's gonna be like that we have featured movies here and here and we have movies here movie lists and when we hover them it's gonna be some informations here and we have beautiful slider it's gonna be shift like that here we are gonna add some dark mode toggle something like that when we toggle this it's gonna be white team and also this design will be a hundred percent responsive and i hope you will enjoy this if you are ready let's get started okay firstly we have image folder here and we have all these images which we'll use on the application so you can find this folder and the other entire code in the description below i'm gonna share them as a github repo so let's go to code editor and here my browser here is my folder i'm gonna create an index file index index.html okay so i'm going to create a style let's close this and also i will make this disappear we'll this one i think okay i'm gonna create our first document then i'm gonna change this name movie design movie i'm gonna add my style css here link style css let's write here something and check open with live server good but it starts from here as you can see i don't want this margin so i'm going to come here and choose entire document and say margin 0 right now it starts from zero on the top and left okay before starting i'm gonna add here something more let's come here and say google phones i'm gonna choose first roboto let's choose these all straight ones we are not going to use all of these but i just want to choose in any case but before i want to choose one more font family i will write here send and this one it's gonna be our logo so i'm gonna copy this link and here let's delete this statistics we don't need this okay so all texts in the body will be roboto and for the logo we are going to be using this one let's create here a null bar of course you can use semantic html you can write here now bar header footer s sites or something like that but i'm just gonna use these divs and after i'm gonna create a sidebar i'm gonna choose this one okay now bear it's gonna contain all the screen so wait a hundred percent and height will be 50 pixels and background color black okay and side bar will be here it was right here sidebar and right now it's gonna be with 50 pixels and height 100 percent and background color black i set here a hundred percent so we can scroll this i don't wanna do that i want this sidebar to start from top and when i scroll the context it's going to be fixed and it's going to stick on the screen so i will come here and say position let's say fixed and top zero we can't see anything i will write here something let's say lrm as you can see i'm scrolling and this sidebar is always there okay let's delete all of them so i'm gonna create first and now bark container because i'm gonna use some paddings margins and i don't want any issue because of this now bar so i will say here now bar container and inside this it's gonna be logo it will be here and here it will be menu and here profile so i'm gonna write here logo container let's duplicate this and write here menu container and profile container let's choose this first let's write before sidebar display flags because all these items are gonna be horizontal align item center let's give a background color and see first we can see because we don't have anything inside this container logo i'm gonna say flex1 let's copy this and paste twice menu container and profile container let's fill inside this as you can see i'm gonna make this bigger let's see like that we can see the logo because it's under this sidebar so this container will start from here i should give some padding or margin i will come here and say padding 50 pixels and top and bottom should be 0 of course something like that but as you can see our height is not a hundred percent i will say this and okay so let's fix this flags problem our container will contain place something like that and menu will be bigger and profile something like that so our menu container will be six which means six times bigger than this logo container and this profile container let's say three or two let's change these background colors also take this something like that and here let's say green as you can see it's flex 1 flex 6 and flex 2. okay let's create a logo i will come here and say h1 and class name will be logo and inside i'm gonna write here flex it's gonna be our brand i don't know why flakes but it looks good it just came my mind let's try it under this logo container logo and this logo will be what was our second font family it was sent let's copy this and paste here and it looks really nice so all these items inside the nut bar will be white so i'm gonna go to now bar container or navbar doesn't matter and say color white good so i can delete this all background colors i think something like that i will change this logo font size font size 30 pixels and color will be something like green let's change this f00 this one perfect so let's create some menu here inside menu container i'm going to create a list menu list and inside this i'm gonna create some list items class name menu list item so i will write here home let's say movies [Music] series popular and here let's say trends it's enough i think let's plate this okay as you can see it's vertical let's arrange this what was our list let's go to under menu container and say mentalist and display flex it's horizontal now let's get rid of these dots i will say list style and it's going to be no perfect so i want to give some margin between these all items many list items a margin right let's say 30. okay it looks good i can make this bold so it can be our active link i will come here and say active and here let's say font weight bolt oops it should be next to this okay cool maybe i can do all of these items here same font family so i will choose this and paste inside navbar okay it looks better so let's go to this profile link i will come here and say first image it's gonna be our user profile picture class profile picture and it's going to be our folder and user what was name profile okay and we have a and some guy here it's really big and his lips is yellow i don't know why okay let's change this size after menu container sorry profile container i'm gonna say with 32 pixels and i 32 pixels and i'm gonna make the circle for the radius 50 percent perfect i will zoom this and it looks a little bit weird so i'm gonna change this object fit it's gonna be cover right now it contains all this circle good so after this i'm gonna create a div it's gonna contain our profile text and some icon here profile container that's a text container we already have this and inside this it's going to be a span profile and class name profile text and next to it it's gonna be a icon so i'm gonna come here and write font awesome is the words most popular and easiest use icon set so you can find any icons here let's say here arrow of course i'm gonna search for free we are really poor and and and and this one is perfect i'm gonna choose this and paste underneath this profile text if i do that we can see anything because we don't have this font have some style css we should add this we can download this css and add our file or you can write your font awesome cdn and you can use from the library let's choose this copy url of course you should say link oops link right now we can see our icon here as you can see there vertically let's make this flexbox profile container flexbox and align item center good i wanna give some margin here but i'm only here for profile so it's gonna be margin from left and right profile text container and margin 0 from top and bottom and maybe too many from left and right good and right now i'm gonna create some dark mode toggle here let's create a do toggle toggle and let's say with 40 pixels and height 20 pixels and background color white let's give some border radius 30 pixels okay i will take care of this later but first i'm gonna shift this to right let's see first if i say background color violet as you can see it's on the left i'm gonna move this to right so i will say here justify content flags and perfect i can delete this okay so far so good so let's create something inside this toggle i will go to font awesome and write here moon this one let's copy this and paste here and let's add sun this one is good this one and i'm gonna add here toggle ball let's see i'm gonna give some class for this icons toggle icon and toggle icon let's say color gold or golden rod okay so i'm gonna arrange these positions i'm gonna come here and say display flex and justify content space between or space around let's center them vertically also align items center oops center perfect let's try to space between maybe it's better no irant is good so i'm gonna add this toggle ball here or here what was the name toggle ball so i'm going to say with 18 pixels because our height is 20 it's going to be a little bit smaller and we can see top and bottom spaces and height will be the same and background color black it's here right now i will shift this here and i'm gonna say position absolute so i'm gonna align this to right to do that i'm gonna say right one pixels if i do that it's going to go here because we didn't give position relative to parent position relative have some let's make this circle also for the radius 50 good so after that when i click this it's gonna be here let's make this cursor pointer awesome so i'm gonna give some icons for this left menu also let's come here and search for some icons this one let's copy this and paste here and some others maybe search let's write this before home i will say users which one let's make this three this or this okay this one let's copy this and paste what's more i can write here bookmarks and tv maybe we can add some hourglass this one is good oops and last one will be shopping carts this one is perfect let's check we can't check because their color are black so i will come here and choose all of these and give some class here let's say left menu ico i'm gonna choose one of them and come here or sidebar we can say or doesn't matter we will not use this that much let's say color white right now we can see them so what i wanted to do is make them here something like that so i'm gonna come here and say display flex flags direction column right now they are vertical and this sidebar i'm gonna give some padding here so it's gonna start from somewhere here it was 50 pixels and let's say 60 pixels padding top 60 pixels and i'm gonna make them a little bit bigger let's say 20 pixels and i'm gonna say align item center and justify content space around let's try it's okay but it's too much space i think so i'm gonna delete this and give spaces here margin bottom let's say 30. maybe 40. good it's nice so let's create a container here after sidebar i'm gonna say container and this container will contain this menu and this content container also so i'm gonna create one more container here content container let's write here something as you can see we can't see it because it's beyond to this container so i'm gonna come here and say first container let's give some background color 50 50 50. oops hash okay something wrong because we didn't give any height it starts from here and ends from here so i'm gonna say height if i say this it's gonna overflow here so i should calculate this null bar also so i will say here calculate 100 vh minus 50 pixels right now it's perfect so i'm gonna write here color white as you can see our text is here so for content container i'm gonna give some margin left of course this sidebar is 50 pixels so i'm gonna say 50 pixels so we can see right now clearly awesome okay let's create something here which is called featured movies featured movies or content firstly i'm gonna give some sizes for this let's say height 50vh and background color for now let's say tomato and c perfect let's delete this and come here i'm gonna give some style inside it's going to be a background image why i am doing this here because i'm going to make this dynamic we are going to use this div in other places so we can change the background image so background url and it's gonna be our image and something wrong here okay image and features one as you can see so i'm gonna give some linear gradient because it's really looks sharp it's gonna be a linear gradient and it's gonna be the same color like here on the bottom okay let's do that before this url i'm gonna say linear gradient and here's comma of course let's say to bottom and let's give the colors rgba it's going to be black first and then what was this color as you remember it was 50 50 50. let's write here as you can see we have perfect effect here so inside this featured container it's going to be title and it's going to be description here and title will be image of course and here's some button let's add here first title class featured title and it's gonna be image and feature title one like that oh it's very huge jungle have you seen this movie it's really perfect i highly recommend this so let's make this a little bit smaller 200 pixels something like that so i'm gonna add description it's gonna be a paragraph class featured uh desk let's write here some lorem and underneath this it's going to be button and class name featured button watch now or only watch let's see okay let's make them fancier first the this title we already did maybe we can give some paddings or for this content we can give some paddings let's say 50. okay it looks good it was our title featured description and width is going to be 50 pixels something like that i will say color gray or light gray oops nice so i'm gonna give some margin from here and here so it's gonna be margin maybe 50 pixels and zero pixels maybe it's too much good let's arrange this button featured button background color will be our main logo color and text color will be white i'm gonna give some paddings paddings what's going on huh okay semicolon here and paddings from left and right and top and bottom will be different let's say 10 pixels 20 pixels good i'm gonna give this aboard the radius maybe 20 pixels maybe 10 nice so i want to get rid of this border and outline so i will say border noun oops and outline now i will make this bolt nice and we have a typo here of course we should change this okay i'm gonna give some lists here so i will come after where was our container here content container here okay i'm gonna say here movie list container and inside this it's gonna be a title movie this title is going to be header tech and inside this let's say new releases okay and after this it's gonna be our movie list wrapper we are gonna need this wrapper because we will use some sliders when we click them inside this dropper will shift to right or left okay inside this i'm gonna create my main list let's create an item movie list item it's gonna be our each movie's here here here and here so it's gonna be some image first class name let's say movie list item image and source will be image one dot gpac oh it was really unexpected after this image let's make this bigger i'm gonna create some title and description and button again let's say span class mobile list item and title her and after that it's gonna be a paragraph movie list item task but it can be shorter here is enough lighting and after that it's gonna be a button and class name movie list put item button and watch and for this container i'm gonna give some padding here that was our container mobilist container padding 20 pixels but there's a problem here because our container height was a hundred percent 100vh let's change this container where are you [Music] here i will come here and say minimum height and it's gonna be work like that perfect i'm gonna make this image smaller more released image and which will be 270 pixels and height will be 200 pixels of course i forgot again this class name list item image it's really hard working without any sass or less it's pure css and it's really hard to follow these class names anyway let's make this image cover object fit and cover nice i'm gonna comment all these titles and descriptions and buttons i will take care of them later let's create more lists sorry at least items two three four five six seven something like that i should give display flex let's write this before image movie list and i'm gonna give height here it's gonna be 300 pixels and of course a line item center something like that and for these items let's say margin right 30 something like that also so when i hover this item i want this image to scale up so i'm gonna write here again and it's gonna affect our movie list item image oops it's additional dot and here also okay and i'm gonna say transform scale 1.2 something wrong i didn't use this hover pseudo class okay perfect but this animation is really sharp i'm gonna give some transition here transition all one second and is in out of course it should be for image perfect if you want to learn more about these transforms and transitions i have perfect css animation course and you can go to the description below and you can check this you can understand every animations and you can create awesome animations by yourself okay but i wanna give some margin after hovering so i'm gonna say here margin and 0 and 30 pixels let's check right now it's so much better so i can activate these informations again i will choose this one two three four five six okay so i'm gonna make them position absolute and all these items are gonna be here let's copy them because i will probably forget okay title i'm gonna say background color 333 let's give some padding 0 10 pixels you can see it here and font size can be a little bit bigger font weight bolt and position will be absorbed if i say here position absolute i should add position relative for the parent so i'm going to go to item and say position relative and after that let's give some position for them top 10 percent and left let's say 50 pixels or 60 pixels let's try something like that let's say 50. of course it's gonna be opacity zero first and then we hover it's gonna be opacity one like that so it's going to be up here only hovering effect let's do the same thing for the description of course let's change this padding time pixels and font size will be 14 pixels i don't wanna bolt let's check it's here of course we didn't change this okay i will say here maybe 30 percent something like this but i want to give some bit because it's overflowing a little bit it can end here so i will say with maybe 200 maybe something like that okay it looks good so for the movie list item button i'm gonna add padding and background color will be again this green color and text color will be white you can see here let's add photo proto-radius 10 percent for pixels get rid of this outline and border known okay i will give cursor pointer and of course say position absolute top maybe i can give after bottom here and say maybe 10 pixels let's try and left of course what was this here 50 pixels let's check um maybe make this 50 or too much 20 something like this so i'm gonna make them disappeared here here and here okay we can see right now so i'm gonna come here and for this image i can add here opacity also when we hover opacity will be 0.5 like that and for the other items moving this title comma i will duplicate this and description button so their opacity is zero right now when we hover it's gonna be one let's try perfect of course i should give some transition for them also so it's gonna looks nicer one second all is in out or is doesn't matter you can play around these animations of course i just don't want to make this curse too long so it looks good something like that so after this i'm gonna add some arrow button here like this and when we click this it's gonna be slides smoothly so let's add this our mobile list here it's going to be independent from this list so it's going to be after this wrapper so i will choose this and inside let's create some icon arrow again why are you asking all the time i'm poor man and this one let's copy this and paste here let's see we can't see of course it's here okay so i should give some class here let's say only arrow font size will be 220 pixels not style size like that i'm gonna move this here so i'm gonna say position absolute and top as you remember our movie list is 300 pixels so it's gonna be and our font size is 120 pixels so i can say top 30 pixels of course it's going here because we didn't give position relative for parent don't forget by the way guys it's really important if you are using position absolute the parent should be position relative we didn't use it okay we can use here we list wrapper right now it comes here let's see the background color here and what's going on there ah because it's not 300 pixels movie list here 300 pixels and this wrapper is much bigger so i can control this and say maybe i don't want to calculate this right now seriously something like that is totally enough i think i don't want to be that much perfectionist okay let's delete this background color okay and right is gonna be zero something like that let's give some color for this gray and opacity 0.5 something like that maybe light gray let's try it's better writing and cursor pointer perfect we will do this all javascript stuff later let's create more list with this container i will take this 2 3 4. nice you can change this name so of course but i will not care about this right now so after tool list i can add something like this so i'm gonna come here where was our featured container here i will copy this and after tool list here i will paste here and okay so i'm gonna change this images and background image it's gonna be dark it's a natural like serious and german series it's really mind serious you should watch it anyway our design is something like that right now maybe i can arrange these spaces it's too much and it's because of our wrapper i think or this padding maybe i can say zero yeah it's better right now so right now what i'm gonna do is making this slide and this toggle it's the horrible part for some of you i know but don't worry you'll understand everything firstly i'm gonna open this activity bar and i'm gonna create a javascript file app.js and here in the index i should define this file before body i'm gonna say script and inside this source and app.js let's check console.log and console and it works okay so what i need here i need this icon and i need this list so i'm gonna come here and say let's close this i will define const and let's say arrow and document query selector and what was our arrow id it was just arrow what i did here i said choose this document which means this whole application and query selector and choose this class name and it's going to be our item let's see what i mean by that console.log i hate this keyboard by the way i'm using laptop keyboard let's say arrow and see what's going on there inspect console oops it's string of course i should write without any code as you can see it's our icon here all these class names everything inside this icon so what this query selector means just choosing any item inside this html file but as you know we don't have just one arrow we have this one also and this one and this one so what i should do here i should say query selector all and it's gonna choose all these items so i will say here arrows and arrows let's check right now as you can see we have list here and inside this list we have four items for each of these arrows okay let's do the same thing for movie list movie list lists of course it's gonna be all again a movie list let's check as you can see we have list again and it contains all of our lists all of these attributes all of these styles inside everything is here and what i'm gonna do here is use these arrows when i click this one arrow i should choose only this item this arrow and this movie list so i should write here for each so i'm gonna write here arrow so i set arrows choose all of these arrows and for each arrow so i'm gonna use index also index or just i and i'm gonna open this function let's see what we have here oops something wrong console log of course as you can see they are separated right now it's not not list anymore so let's see i as you can see is our first item second third and fourth so what i'm gonna do is write here arrow and say add element listener and i'm going to say click this and listener is going to work after clicking and i'm going to create a function here arrow function and here we are gonna write what we want to do after clicking let's say console.log you clicked to i plus so i'm coming and clicking this you click to zero click to one last one click to three and click to two as you can see we choose all these items so how we are gonna decide which movie list we are choosing i'm gonna say here instead of this movie lists it's a array as you know it's not list if i say here i it's gonna show us our element here we choose only this one as you can see so i can use this item i will come here and say style i can say everything here let's try background color and equals let's say red let's typo here of course as you can see when i click i can change the background color i can change every item here every attribute so i'm gonna say transform and here translate x and it's going to be let's say minus 100 pixels so when i click this i will close this and i click nothing happened because i didn't say pixels and as you can see when i click it moves there is something wrong here it goes beyond to this sidebar and also we can see other elements here so it's kinda overflowing so what i'm gonna do is i will come here and for wrapper i will say overflow hidden right now as you can see i can't scroll anymore and when i click this they are already clicked i refreshed and clicked this as you can see it's not overflowing anymore also so as you realize i'm clicking couple times but it's always on this zero point so i should calculate something here so first after every click i should find initial position let's write here something and talk about this if i write here movie lists and i this item so i will say something different here computed style map let's try inspect console again i forgot this i'm so distracted today i think okay we have only size here what i want to see is seeing transform so i will say here transform and right now we can't see anything it's none because we don't have any transform or this list if i come here and say transform translate x 0 we didn't move anything it's just 0. if i refresh this right now we can see some object here and inside this object as you can see we have x so i'm gonna come here and say i'm gonna take only this x i'm gonna say zero first element because it's object and say x and give me this value as you can see we have four zero here for every items so i can use this inside this function because we know right now where we are on the x-axis so i'm gonna come here inside this code i will say backtick here and translate x again and i'm gonna use this value here to use that i'm gonna write your dollar sign and curl the brass and inside i'm gonna use this one let's see like that and i'm gonna say minus 270 [Music] pixels let's see as you can see it's moving you don't have any transition let's add this nc or this one transition all one second is in out let's see right now i will refresh as you can see it's going to left perfect but something wrong here when i click this it's coming to here i will refresh and you can compare with second one i'm clicking and it's coming here it should start from here that's because we didn't consider this margin so i should say here not 270 it should be 300 refresh again and see perfection as you can see i can click this forever it should be a limit and after last element it should be turned back to initial state so how i'm gonna do this but before this i want to give some border radius here border radius let's say 20 pixels okay it looks better nice so what about this limit we have four images here four items so how can i calculate my total items as you can see we have five six and seven items here how i'm gonna calculate this let's write here console.log and inside i'm gonna say movie list and this one and again query selector all and i'm gonna say image because this movie list contains images inside it if i say this let's check image is not defined i forgot code here and as you can see we have a list which contains seven images inside so if i say here length and right now we can reach to this number so i will use this number i will say here const item number or item length doesn't matter okay so let's decide we have four items here so i should click 1 2 3 and after this element it should be turned back it's our limit i can't move anymore so i have limit for 3. what i'm gonna do is i will come here and create let click counter it's going to be 0 for beginning so after every click i will increase this number and i click one it's gonna be one when i click again it's gonna be to something like that so what i'm gonna say here i'm gonna say if item number minus four plus click counter smaller than zero then do this if it's not come here and again transform translate x and it's gonna be zero it's gonna turn back to initial state of course it should be bigger let's try one two three as you can see it's coming back but it's coming after second element so it should be not greater greater and equals so let's try again i will explain this later don't worry if you didn't understand round two three and turns back perfect but there's a problem here if i click again i'm clicking it's not moving anymore because our click counter is right now more than three so i should come here and say if i turn back again translate 0 click counter should be 0 again let's try refresh one two three i saw all of these items and click again and turns back and i'm clicking again perfect let's change these items and we can see better it was not good idea doing this right now but doesn't matter three four five six and so let's see oh okay they are not jpeg okay so we can see right now better one two three i saw all of these movies and again turns back and again i can click perfect so we completed our slider for now because it works only for full screen it's not responsive right now but we will take care of this later let's come here and take care of this toggle i'm gonna create a white theme it's gonna be white here here and these icons and tags will be black so i'm coming to css and choose here let's say container background color white it's going to be our second theme i will add here later active and it's going to look like this let's change this titles i forgot name again what was that title but not least i think sorry not item i think so i'm gonna come here and color black good we don't have to change anything there okay let's change this now bar and sidebar now bar background color white and text color black it didn't work because we chose for number container i will move this here okay it works right now maybe i can move this here also so i can do like this and for this sidebar background color white and for these icons it was left menu icon i think yes color will be black perfect what can i change more i can change this toggle color i will say toggle and background color will be black and inside this ball will be white toggle ball background color white awesome and it's gonna be here not there so i'm gonna say transform i can write here actually left run pixel but if i do that i can add any transition because we can't apply any transition for positions so i should write here transform translate x it was 20 pixels i think oh it should be minus of course right now it works perfectly i want to give transition because i want to give some animation like this if i don't use this transform if i use instead transform left we can't use any animations okay that's all i think let's give them active class it's gonna be active let's copy this and paste them okay so i'm gonna choose this toggle ball in javascript file so i'm gonna come here and say const poll and document again query selector not all because it's only one class and is toggle ball and after i'm gonna choose other classes container let's say first items document query selector it's gonna be all container movie list title now about container coma sidebar menu icon not active toggle of course dot here because it's class okay i'm not choosing this because i already choose here so what i'm gonna do is choosing this ball and add element listener and our event will be click again and our function what i'm gonna do after clicking i'm gonna add active class for this all items so items for each i'm gonna say item i don't need any index and for this all items i will say class list and toggle and i'm gonna add active let's check as you can see perfect but this toggle is still black because we didn't give any active class for this let's say ball and again same thing class list toggle and active perfect let's make this clear i will say elements and when i click this as you can see they are not active anymore when i click this this class list and toggle adds active class when i click back it removes it's kinda toggling it's really awesome so let's give some transition for this toggle toggle ball okay transition one second is and all let's try as you can see it moves smoothly also so we almost finished our project our slider works properly our design looks good our toggle works properly and there is only one problem and huge problem this design is not responsive as you can see this icon underneath this profile text and when i shrink more they are disappeared and we should fix them so what i'm gonna do i'm gonna come here and say media query and only screen and i will say max with it's gonna be 94 pixels so what i mean by that i just created media query and look at this screen and if maximum width is 940 not bigger than this one this this this i will write here what's this i will say menu container i don't want to see this container anymore and i will say display now let's check as you can see it's disappeared right now if it's bigger than 940 pixels we can see it again perfect let's shrink this more and other things are responsible we don't have any problem we have still this arrow here but there is huge problem here i can click one two three i saw this third movie i am clicking and i can see other three movies because we have limit what was our limit let's say here first toggle okay we have limit here because we have counter and we are adding 4 and if it's greater than greater or equal than 0 we can click but we need more click here after 3 clicks we can see only this fourth one so what i'm gonna do here i'm gonna show you something first i'm gonna write here window and in our width let's check console and i will refresh and as you can see it's our inner width if i shrink this browser let's make this first bigger like that i will refresh and right now it's smaller i will shrink more right now 200 so if i divide this by 270 which is our image height sorry image width as you can see we can see this number it's going to be our radio i'm clicking right now to bigger right now it's bigger so we can see float number here if i use math library and say math and floor and this one let's see again as you can see we can see integer right now smaller one and smaller it's gonna be zero so we can use this number if it's zero it means we should click here more and our limit should be bigger so how i'm gonna use this firstly i will choose this one i will just write here first i will define this let's say radio and this one actually i can define this after click ok so instead of this if i'm gonna come here and say plus 4 minus radio let's check 1 2 3 again and i'm coming here one two three four five six so i saw last movie and it's going back let's make this bigger so i can see two movies here i'm clicking one two three four five and i saw last movie and it goes back so it's responsive right now let's check for this also i saw last movie and goes back perfect so what i did here i set our item number it was 7 and i said -4 let's inside parentheses and our click number it was one and ratio if i make this smaller as you remember our ratio was zero here and i add this parenthesis 4 and 0 and it means we have more limit right now we can click four more so if i click again it's gonna be two three four and after if it's equals or greater than zero we can apply this one if it's not this one if we expand this screen it was like this of course it's minus here if i say one it means we can click three more if i expand this screen it's gonna be two it means our click number decreased again something like that i hope you understood it can be really confused for some of you especially if you don't know anything about javascript but don't worry if you write your own application you will understand everything here just you should do more practice so everything works perfectly so we finished our project i hope you enjoyed you can check description below you can find any you can find github repository and also you can find something surprise for you it can be something there that you can use so you can check there you can also add any footer here and additional features so that's all for today if you like it don't forget to like video and subscribe the channel goodbye

Channel: Lama Dev

Views: 43,062

Keywords: html, css, javascript, web design, vanilla js, css animation, responsive, lama dev, netflix, movie website

Id: AOlkcLtyXkw

Length: 93min 18sec (5598 seconds)

Published: Sat Feb 27 2021