Expandable Image Carousel with HTML CSS and JavaScript

hey what's up everybody and welcome to another javascript project in this project we are going to create some expandable cards now let's just say we're creating a game site and we want to have more than one element on the screen but only the main element should be displayed and this is where this expandable cards project is going to become really handy now let's also take a look at how we're going to achieve this we are going to use query selector query selector r we're going to use variables like const functions regular and error functions now we're going to manipulate the dom a bit by toggling classes adding and removing classes and also selecting child nodes from the element in order to achieve all of this we're only going to use one event and this is going to be the click event okay so this is going to be just a simple project let me also show you the project the main focus as i said is on this cards when we hover over the all over our one card we are going to have a bit of hover effect but this is going to be achieved using css now when i click on another card it's going to expand that card that i clicked on and compress the other card now this is going to go through all of them and as you can see expand them and compress them again up here we're also going to have a navigation but this is achieved using bootstrap so as i said the main focus is on this card part also the site is going to be responsive so if i go into inspect mode and make this smaller we'll see up here the navigation is going to change we also can drop it down if we wish but also the cars on also the cars are going to expand be responsive okay so that's it for the project let's get into it okay so on the left side we're going to have our code editor and on the right side i just have open my finished project now we are going to use also and on splash for the images so i'm going to have this opened the site is source.unsplash.com so let's get into the code editor and let's create our first file which is going to be the index.html then let's create the border place shift one and within here we're going to create first of all three things so within a body we're going to have a navigation so let's type in here comment of nav after that we're going to have a header so let's type in here header and the last one will be the cars themselves so let's type in here another comment of cards okay now for the navigation i'm going to use bootstrap so let's let's go to bootstrap.com and we we're going to just click on get started and i would suggest getting the css file so copying the link and if you wish to make your navigation responses you can also get the javascript file so get the javascript file copied and get the javascript link copied after the css link and there we go let me make this just a bit smaller okay next up right before my title also i'm going to link up our style.css style.css and we need to also create this file okay so let's create our style.css and just for now i'm not going to touch it next up let's go back into our navigation and underneath our navigation underneath the comment of navigation we're going to create the navigation itself well i'm not going to actually create it because there's a lot of code that it goes in there but bootstrap is going to help us out so let's go back to bootstrap components and from here we're going to go to nav bars down here now after nav bars after clicking off nav bars we're just going to select the first nav bar that pops in so copy this entire code just click on copy you could just select it and right click copy it and now we're going to just paste it in and there we go we should have a navigation also let's open this up using live server so right click open with live server and close up the other one so hey there's a navigation and we click on it it's also responsive okay so that's it for the navigation part we can also close up bootstrap we don't need it anymore now for the header part the header part is actually just the title so we're going to create within here a h1 and we're going to type in here games and that's it now for the cards i am also going to use bootstrap for the cards so let's first of all create a main tag and also give it a class of cards dash container and i'm going to use capital c here in order to differentiate between the main container which is cars container and now each cart is going to have its own container which is going to be called with a class of card container and then with our within our card container we're going to create another div for the card itself so just a class of card and after this class of card we're also going to create the card title which is going to be in h4 with a class of card title and that's it now for the first title let me also type in here for the first time we're going to type in pc game and now we can just copy this five more four more times so one two three four and we're going to have five cards if they have a cards we can now type in down here our script so let's link up our javascript file script source let's call this cards dot js and let's also create a file cards dot js hit enter and that's pretty much it for this now let's go ahead and style this and for here we're going to start up with the body now for the background i'm going to go straight ahead and use the url for unsplash so the randomized url so https source unsplashed and then just paste in this random url and instead of random i'm going to paste in the id of a picture okay so after we paste in this id you will see we have just copy in this id because if i search for this again on the web i'm going to go crazy so this is ids are actually from unsplashed.com and each time you click on a picture for example this picture right here you will see up here in the oh the url after photos forward slash you will have this code and it's actually the id of this photo so whenever you change a photo this is the id okay let me close this up and this is where i get actually this id now in order to center this because you can see this is a bit out of place we can now use right enter the parenthesis center forward slash cover and then no repeat in order for the image not to be repeated now i wish to have my body as 100 viewport heights this is going to stretch everything out and also everything that i pla placing to the body should have a display of flex now because we use flex we cannot display their display everything as flex direction column and we can now justify the content as centered in order to have the items aligned to the center we could also use align items center okay so that's it for a body next up let's go let's go ahead and create a overlay over this part because you can see that the image is quite quite bright now the trick to do this is to grab onto the body and use a before or after it doesn't matter now we can set the empty content so content of empty string and we could give it a height of 100 viewport heights and a width of 100 viewport widths and now in order to achieve that gradient over over the image we could use now a background color of rgba and let's type in zero zero and zero and zero point four oh and i forget i forgot the zero for the reds so as soon as we do this we can see this entire image has now a black gradient now let me also position this radiant as position absolute so it's over our entire image because if not it is just treated as a separate element and it's going to take up its own space now i also wanted to have it as a background so right now we can we can select all of our elements so i could push this to the background by using a z index of minus one all right so this one is done now let's take care of our navigation because our navigation is down here and it should be up here so for this we're just going to grab onto the class of nav bar we're going to position it fixed now by positioning it fixed we can position it in a certain area of the page face so i'm going to position it up here to the top you could also push into the bottom to the left to the right whatever you wish but i'm going to push it to the top so let's just try type in top and just let's just type in top and zero okay now the neighbor's position to the top now now in order for our navbar to be spanned over the entire width of the page we use width 100 and it's going to be spanned it's going to expand the element to 100 of the width of its own container and now let's just change the background by giving it a transparent background so a very important thing with bootstrap each time we change a specific property of bootstrap we need to type in important so the important marker will just overwrite all of the settings that bootstrap has initially initially for its styling next up let's take care of our anchor tags within here so we can just grab one from the nav bar the class of navbar again anchor tags and let's change the color color to a hexadecimal of ddd and also important okay now we will see all of the elements appearing again so one last thing we need to take care of the navigation button up there and it's also pretty easy it has a class let me just check it to do of nav bar toggle so this is the button from right here right here so let's take this class of network toggle go into our css target it and let's just change the its background color to a hash of ddd and again important and there we go let's just take care of our h1 our header title right there so let's grab on to the h1 and let's text align it to the center let's change its color to hashtd let's increase this font size to 8 ram and let's also give it a text shadow of 1 pixel 1 pixel 2 pixels and hash 333 okay so there's our title next up let's take care of the cards container so class cards container i'm going to display this first of all as flex and now i would resize this by using width 90 viewport widths as you can see we're flexing our containers our cards into a row direction and they also occupy only 90 90 viewport width now you will see up here a bit of a border and this is form from actually from the card class so let's take the class of card and this is a building booster property so we can take this out by targeting the borders and displaying them as none okay so we got rid of our borders now let's do a general styling for our cart containers so we can select our div with the class not the class div but the div itself so the element tag with the class of card container so not the card contain cards container but the card container itself and now let's start now let's start off by giving them a height of 500 pixels then a width of 600 pixels and now this would change later on let's also let's first give them a box shadow so we can see where our cards are so box shadow one pixel two pixels five pixels one pixel rgba of a white color so i don't want this black color but let's go completely white also with the opacity of 0.4 so there are our cards now when i go over our cards i want to have a cursor of pointer so i know that i'm over the card and let's also give them now a bit of a border radius of 15 pixels now let's also change the color because for now we have this dark color for our text so let's go ahead and change the color to hash tdd let's also give the text a bit of a text shadow of let's say one pixel two pixel 2 pixels and 333 okay now i could i want to give it a bit of a margin left and right so let's go ahead and let's type in and let's type in margin so i said left and right so top and bottom will be 0 and left and right 5 ram now i will position each and every card as a as relative because later i want to position the text as absolute within it so let's position this relative and that's basically it for now for our cars now in order to give them those background images i'm going to now target each card on itself but first let me also give it a hover effect so i know when i'm over a specific card so let's say div the class of card container and now hover and when we hover our cards i'm just going to change let me change the box shadow i should close this up i'm going to copy the box shadow paste it in here but i'm going to change it to a opacity of 0.8 so when i hover over a card we have the box shell intensity changing now because this is just a bit too quick for me let's also give it a transition and this will only affect the shadow so point free and ease in so when i'm hovering over it it's going to have a bit of an easing effect now let's take the class of card so div card and now i'm going to select each element on itself so for this i'm going to use and child and the first one i also could have used first chart here instead of n child but i'm going to just copy this so let's go in here but after i set a background as a url image and for the images i'm going to use unsplashed again so let me go up here and copy in actually this entire background paste it in here and as i said all you need to do is change the id so the first id will be actually let me leave it this way copy it four more times one two three four let's change this will be the second the third the fourth and the fifth let's hit save so we have five images within here and i'm just going to go over them and change their ids so the first one is going to have this id let's hit save so there's our pc then we're going to have for the second child this id so just double click on the id is going to be selected now let's go to the third one which is going to have this id the fourth one will have another id so this one and the fifth one will have this id and that's it now each of them has an image within them now let's also go back to our html and change the descriptions so the second one was actually strategy so let's go down pc gains but strategy then we have console the multiplayer and the last one was sports or esports actually should be esports okay so that's it for html now in our css we just need to do a couple of things and then we're done so in order to achieve that effect i'm going to now target all of the cars so div with the class of cards container this one so card containers each div that has the class of card container and when they will have a class of visible then they're going to flex with the flex of five now let's go up to up to our main class when we right here not only do i want them to have that flex but also the transitions on when they are going to flex i wanted to have a transition effect transform a transition effect only for the flex of let's say 0.3 seconds easing and that's it okay now let's go back to our html and let's give the first card class here also the class of visible i'm sorry this should be active not physical what am i doing the visible comes later on active and also in our style.css we need to change this to active all right now for the titles so first of all let's grab on to the class of cart title and as i said we need to position it absolute and now we can play around with it by pushing it from the left to with 30 percent and let's also push it down from the top so let's say from the top it should also go down uh let's say 40 percent now let's increase their font size let's say 5 ram and i'm going to make them disappear by giving them a opacity of 0. now we're going to make them appear again using javascript but when they appear we're going to have a transition effect for the opacity with the duration of 3 seconds ease in and a delay of 0.2 seconds okay so that's pretty much it for the ui next up let's start with our javascript so let's open up our javascript okay so let's first of all start by grabbing out a couple of things from our dom and going to assign them to a couple of variables so let's start with the const and first we're going to need our dark mode vtn so let's go to the document let's go with a get element by id i'm going to grab onto the id of dark mode btn okay so let me just quickly console log this as always i love to cancel lock things when i'm grabbing onto elements from the tom because we can constantly make mistakes so let's go open up our console and i'm going to change this to be at the bottom and zoom it in a bit so there we go let's save there's an input tag with the class of b10 we can't see it because we hit it and here you dark button you should be [Music] you should be [Music] left button oh yeah this square okay so let's go back to javascript so we grabbed onto our input tag next up let's grab onto the body let's say const i'm going to grab on to the entire body i'm going to grab on to the entire body of our page so let's go to document dot quiz selector i'm going to select the body tag okay let's also console like this one you see now we have everything that is in our body tag next up i'm going to grab on to the image but when you're applying these two sides you should grab on to all of the images not one particular image because the problem is the way we're going to flip this dark mode is not affecting images and that is why we need to specifically grab onto also images so i always suggest create a concept images dot document quiz select all and grab onto all of the image tags now believe me this is going to save you a lot of headache so we also got grabbed onto this let's console.log it and images oh yeah because we're using query selected we're getting a nod list okay so if we had multiple images you see we have the length of zero which is actually one but you know javascript starts at zero okay so we go down to anything that we need now let's grab onto a button so dark mode button dot add event listener and we're going to listen for a click and when we're going to click we are going to use the arrow function or so i could use function and we need an argument we want to grab on to event or you could use an arrow function now as you wish you could leave it either this way or take out the keyword function and use a arrow this is going to be exactly the same thing so let's go in here let's go into a function and let's first of all create a condition so if and in the comment out this if statement and show you first something so let's console.log the event if i click on this button it's going to give me the event event mouse event okay now if i do e dot target is going to give me what the event targeted and in this case is what it was this button now you know that input tags with the type of checkbox have a state of check if i check now so let's go now down into in our if statement if i check if the e dot target is checked so this just means it exists as checked then let's say console.log yes and else we are going to console.log the string of no so if i click on it it's going to give me s now if i click on it again it's going to uncheck it it's going to give me no so each time i click on it it's going to either check or uncheck itself okay we got this out of the way now let me comment this out and let's actually do something so we want it when we check this to go into dark mode so if that either target is checked and the first click will be check so yes then we want our body dot style dot filter and we're going to give it a filter on of invert of 100 just type in here 100 and if it's not checked so if it's unchecked we're going to go back to zero so what this will do is if i click on it i'll show you it's going to filter and change everything into and flip everything around accepting the image now in order to solve this we would need to grab onto the image and do the same thing specifically for the image okay it does not work with images automatically we need to specifically target the image this is why i said you should use images to grab onto all the images and apply it to all images at once if not you should then you would need to apply to each image indiv individually that was a hard word individually okay so that's it let's copy this body.style.filter and replace it with image if you you would have one image but we don't have one image so let's go down here and do four each i'm going to use a function callback function within here for each image or you could do a error function so take out the keyword arrow for each image grab onto the image and style.filter.100 and if not because if i only save here and do the dark mode boom the image is correct if i flip back that is going to do the same thing so it's not going to flick flip back to this so we're going to take all of the images and change them back to zero when we come out of dark mode okay so as you can see this is working perfectly now in order to have that effect that we talked about that is in effect for that animation effect now go underneath our if statement and let's create another if statement if and now we're going to use an again a negation so if not body dot class list that contains the class of animate so if it is the if it if it does not contain the class of animate this is why the exclamation mark is there which is the negation then the body dot classless dot toggle the class of animate okay so let's check this out so if we click on dark mode then it's going to add that class of animate if we click on dark mode again and then again on dark mode then we have a problem okay because it's still having this class of anime so we need now to remove it so else body dot classlist dot remove the class of animate okay so if i click on dark mode it's going to let me also go out of here so if i click on dark mode wait a second now if i click on dark mode it's going to animate into our dark mode and you can see also this hover effect changes as you can remember we although we gave it a tattoo although we gave it a hover of background color well a dark color and a text color of a grayish color where in dark mode it's exactly the reverse of this okay so let's click on this again and let's also try our navigation you can see the navigation also changes color okay so that's pretty much it for a project hope you enjoyed it and catch you next time bye

Channel: Norbert BM Web Development

Views: 33

Keywords: Norbert BM Web Development, javascript, image carousel html css, build a image carousel, create a image casrousel, create image slider using html and css, how to create a image slider using javascript, html, build a image slider, animated image carousel, accordion image carousel slider

Id: hEyjdBkaQ_Y

Length: 30min 52sec (1852 seconds)

Published: Wed Dec 01 2021