Responsive Admin Dashboard Using HTML CSS & JavaScript with Light & Dark Mode

hello guys and welcome to another html css and javascript project tutorial today we are going to create a responsive admin dashboard for an e-commerce website using html css and javascript and this is going to have a couple of features like the light and that theme and other features so let me quickly walk you through the whole project so we are basically going to have three sections we are going to have this sidebar section we are going to have this main section with our calendar our insights with these cards and then we are going to have our orders table okay we are actually going to generate this table using javascript on the right side we are going to have our toggle menu for the light and that theme we are going to have our profile we are going to have some recent updates we are going to have our sales analytics and then lastly we are going to have our add product button now let's see the responsiveness this is actually going to be responsive so this is how it is going to look on mobile that's how it is going to look on mobile we have our sidebar everything looks great we can still select or change our dates in the calendar we can change our theme now let's see how it's going to look on an ipad all right so this is what we are going to create in this video so let's get started so in my main folder i have three files i have my html for my javascript file and then my style sheet and i have a folder with five images i have my logo and then some profile pictures okay i'm going to leave a link to these images in the description and i'm going to open this folder in vs code okay that is going to be my text editor and put this side by side all right so with vs code i have some ins um extensions i have some plugins installed i have emit let me show you real quick and it actually comes with vs code so you may not need to install that and i have preview on web server okay this is actually going to help me preview my web page without having to reload myself so it emits in my html file i'm just going to do exclamation tab and then the title is going to be responsive dashboard using html css and javascript i'm going to link our style sheet and then we are actually going to use material icons okay so material icons i'm going to grab the cdn okay so looking at our finished project let's check that out looking at our finished project we have three sections we have the left section which is going to be the sidebar we have the main section with this inside set in the table and then we have the right section so let let's first start with our left okay here's the sidebar so for that i'm actually going to open this with live server so i'm going to open this so that we see what's going on so that's our web page i'm going to have everything in a container and then we are going to have our sidebar it's going to be a side the aside tag that side semantic tag and then i'm going to have a top okay that is going to have our logo it's going to have our logo and then this icon all right so we are going to have our logo and then we are going to have an h2 the logo is going to have a span okay i'm going to have a span around the t-o-r i'm going to have a span around that so that we have that difference color okay that red color let me actually give it a class of danger so in the css we are going to have um a class of danger and then that that is going to have a color of this red okay so that is our logo now let's have our close icon i'm going to give this a class of clothes and an id close btn okay so that is going to be our icon let me go to google icons and then grab that and for the google icons i'm actually going to use the shop okay so i'm going to search close there's the icon i'm going to grab the spam and then put it right here okay let me format this so that is our close let's check that out and we have okay so because i'm changing this from fill to sharp i have to add that here in the cdn okay so sharp and now we should have our icon so that is our close next we are going to have the sidebar itself that is going to be a sibling of the top so the sidebar is going to have links which are going to be the individual menus so we are going to have expand we are going to have the icon and the first one is going to be the dashboard to grab this that is our icon paste that in and then we are going to have an h3 and that is going to be the name of the menu okay so we have this let's check that out and that is it okay so i'm just going to duplicate this so looking at our finished projects we have dashboard customers orders and all that so let me quickly change those so we have customers we have orders you have analytics you have messages and these messages is actually going to have a span with a class of with a class of message counts and that is going to hold this okay the notification count all right that is going to hold that so we have 26 messages let's proceed so from messages we have products reports we have settings add products and then lastly we have logouts all right so those are our menu items let's check that out now let's change the icons for each of those so the second one is customer so that is going to be a person icon there is going to be a person icon let me see there is it the outline so i'm just going to grab the name then for the person i'm going to change this and that should change so we have that now that should be for the person the customers okay so we have that come on i made a mistake here so i'm just going to remove this so it is going to be all right so we have our customers icon this is going to be for our orders it's going to be for our orders so we have that as well next we are going to have our analytics and that is going to be insights that is the name of the icon we have that next we are going to have mail outline next for the products that is going to be inventory that is for our products we have that and then for reports it's just going to be report gmail error red that is for our reports settings icon we have our ad products there is going to just be a plus so add and then we we have our logout so those are our icons so let's just hope right into the css and start styling this for our css we're actually going to use some variables so i'm going to grab the variables here and then paste it in here so to declare variable we just need two hyphens this is going to be the root okay so these are going to be the root variables so we can access them everywhere in the file in this css file so to declare a variable you need two hyphens and then the name of the variable a colon and then the value so that is how you declare variable we have the primary color so color primary there is going to be our primary color we have color danger we have success and order so these are our colors we have some variables for our border okay our border radius so it is going to be the card border radius all of the cards are going to have the same border radius so if i change this to a different value or they are all going to change at the same time we have other border radius variables as well pattern so it is going to be the pattern for the cards and then we have box shadow okay so this is going to be the box shadow for the cards i'm going to use popping so i'm going to go to google fonts and then grab poppings from there i'm going to search poppings puppies i need the light the regular medium semi bold bold and then the extra board okay and i'm going to import it into my css file into my style sheet so i'm going to grab that and then paste it at the top first let me zero out everything so the margin is going to be zero that is for the margin the pattern is going to be zero as well outline is going to be zero appearance and i don't want these underlines okay so let me set the box sizing to border box as well okay so that is what we have now let's move on and then give our html a font size of 14 pixels and then for the body we're going to have a width of 100 viewport width a height of 100 viewport height and then i'm going to give it the poppings font okay so phones family is going to be puppies sans serif let's move on to font size i'm going to give it a font size of 0.88 frame i'm going to change the background for the body and that is going to be the variable color background so color background which is this is our background so if i should change this to a different value let's say ff 000 that is red you see it's going to change okay so that is how css variables work perfect let me get this back to the normal color from the background let me give it i'm going to set user select to none and then overflow overflow x to hidden so that is all for our body from there we are going to have some general styles okay so our colors our font sizes for the various um headings and all that so for every link every anchor tag i'm going to have the color set to the variable color dark okay that is going to be for every that is all for anchor tags every image is going to be displayed block they are going to have a width of 100 percent they are pairing with okay so every image is going to have that we're actually going to resize this image so ignore that for now let's move on to our h one every h1 is going to have a font weight of 800 and then a font size of 1.8 ram that is for our h ones h2 every h2 is going to have font size of 0.4 ram h3s are going to have font size of 0.87 ram so you see our h 3s here change all age fours are going to have a font size of 0.8 ram and then the last one we are going to have our h5s okay which are going to have font size of 0.77 from there we are going to have our small so every tag of small is going to have a font size for 0.76 ram let me actually make this 75 frame every small tag is going to have that now every profile picture so you see here in the messages we are going to have some profile pictures right and and then our own profile as pictures so every profile picture is going to have a dip with a class of profile photo okay and that we are going to have a width of 2.8 ram it's going to be the same for the height we are going to set the border radius to 50 and then overflow is going to be hidden okay that is for our profile photo text muted okay so some texts are going to be muted they are going to have a little bit of gray color so let me show you real quick there's a muted there's going to be a muted text there's going to be a muted text as well so what we are going to do is we are going to have the style here so that whenever you want anything muted we just add a class of text muted okay so every text muted class is going to have color info dark let me show you that color right here color info so we have color in full light but we also have color info dark okay so this is going to be our text muted now you let me show you that real quick let me put the text muted class on any of these values let me put it on the logo here so class of text muted and then you're going to see the color is going to change all right so now the color is gray okay so that is that is why we have in those classes let's go back from here we are going to have our p tag okay so every p tag is going to have a color of color that variant let's move on every b tag which are going to be both tags are going to have color of color dark moving on we are going to have our primary so anything with a class of primary is going to have a color primary i'm actually going to duplicate this for danger and others so everything with a class of danger is going to have the color danger let me show you real quick so these are the colors so we have the danger color which is this we have success we have warning and then we have the primary so that is what we are doing here so anything with that class any anything with this class are going to apply we are going to have the success which is going to be the color success then lastly we are going to have the warning all right that is going to be the color warning okay perfect moving on we are actually going to style our side bar okay so that is going to be our aside you know what first we are going to there is going to be three sections okay three sections so left middle and then right right so this is going to be the site which is the left section and that for that we are going to use grid so you see everything is going to be inside this container so i'm going to display grid on this container let me actually do that here so container i'm going to display great i'm going to set the width to 96 96 i'm going to set margin to be 0 auto so that it pushes everything in the middle okay let me actually give this a background so background let me set this to red so that you see what i'm talking about so we have this margin zero auto that is why we have everything in the middle like that i'm going to give a gap of 1.8 frame and then the grid template columns are going to be 14 rooms for the aside or the sidebar section and then we are going to have auto for the main section and then 23 rams for our right section so this is how they are going to be structured okay so this is going to be the aside the main section is going to be around this area then we are going to have the right section right here let me remove this red background from there so for as we have a width already for our a side which is 14 ramps we are not going to have any width here okay so we are just going to give it a height of 100 viewport with viewport height sorry so that is going to be the height let me actually give this a difference color so that you see the difference let me give this a color gray so inside the aside we have our top okay we have our top which is this which has our logo and then the close icon we have our top that is what we are going to start next so top for that i'm just going to give it a different background so i see what i'm talking about i'm going to give that a background of white yep so that is it i'm going to display flakes okay and then i'm going to align items to the center i'm going to justify content to be spaced between and then i'm going to give it a margin top 1.4 rams okay so that is the margin top let me resize the image okay let me resize that image so aside logo img i'm going to give it a width of two rams height of two ramps as well and it is resized and inside the logo we are actually going to put this logo and then the name the brand name side by side so here aside logo i'm going to display flex and that is going to do the job and i'm going to give a gap of one ram let me actually make this 0.8 room okay okay so we have some space between them now i'm going to remove this closed icon okay so it is not going to show on the desktop view so aside close i'm going to display now for that all right let me remove this gray background it's distracting me perfect now let's move on to our sidebar i'm going to give the sidebar a background of white so that you see what is going on so that is what we have i'm going to display flex okay and i'm going to change the flex direction to column i'm going to give it a height of 86 viewport height position of relative and then push it down a little bit okay so top is going to be 3 ram so that is our sidebar let's move on to the h3s in the sidebar menus okay so these h3s i'm going to give them a phones weight i'm going to reduce the font weight okay so the font weight is going to be 500 and then moving on we are going to style the individual menu items okay so those are the lengths the anchor tags here okay so these are what we are going to install next a or a side sidebar which are the links for that i'm going to actually display flex okay on them and then next i'm going to give them a color of the color dark info coloring for dark yep that is the color which is light gray push them from the left two rims and then give them a gap of one rev they should be margin left push them from the left i'm going to align items to the center and then i'm going to position everything relative give it a height of 3.7 ram and then i'm going to have some animation okay some kind of transition on hover okay so i'm going to give this a transition of all 300 milliseconds is okay so that it smoothens the animation or the transition moving on i'm going to change the sizes for our icons okay so aside sidebar a spawn and i'm going to give them a font size of 1.61 now i'm going to push this logout menu down here so what i'm going to do is select that that is going to be the last child so i'm going to select that sidebar and that is going to be the last child okay i'm going to position that absolute give it a bottom of two ram and then a width of 100 percent let's move on to the active okay so i'm going to give one of these an active class so that we can see how it looks on active so class of active we are going to style that so a side sidebar a active i'm going to change the background i'm going to change the color to the primary color and then i'm going to set the margin left margin left is going to be zero okay so that is our active class so that is the active element right there the active menu right there now you see how we have this blue then at the left side we are going to do that so aside sidebar a active then we are going to target the before okay then before pseudo element we are going to give it a width of 6 pixels a height of 100 and then the background of the variable primary background or primary color okay so that is what we have now i want to style the icon in the active element okay so i'm going to grab this and then the span in it okay so the span is going to have a color that is going to be the color primary and then i'm going to have a margin left and i'm going to calculate that that is going to be one ram but i'm going to subtract half the width of this before element before studio elements okay so half six pixels is going to be three pixels okay so we have our active elements okay our active menu item now i want to have some hover effects for all the menu items so and i'm going to have a hover effect for them so on hover i just want to change the color on hover we are going to have the primary color on hover okay so you know what on hover i want them to shift okay so you see these um kind of transitions or animations we have here i want to have that as well so side sidebar a over and then the span i'm going to target the span i'm going to change the margin left to one rem okay i'm going to give it a margin left of one rim but it is not smooth okay this animation is not smooth so i'm going to go to our span which is up here and i'm going to give it a transition of all 300 milliseconds is and they show smoothing our animation okay so now we have the smooth animation okay this smooth over effect perfect now let's move on and install our message okay our message counts give that a class of message count i think let me see messages where is it okay so that is the class message count background i'm going to give it a color danger i'm going to change the color to white i'm going to change the pattern to 2 pixels and then 10 pixels font size is going to be 11 pixels border radius is going to be the variable border radius one so now we have that all right so i think we are done with our sidebar okay we are done with our sidebar i'm going to remove this white background from this next let's move on to the main section okay so this is going to be the main section we are going to write the markup for that i'm going to have a main tag for the main section and inside that i'm going to have an h1 that is going to say dashboard i'm going to have a dave with a class of dates and then inside it i'm going to have an input with a type of date now let's move on to our insight so i'm going to have a day with a class of insights inside it i'm going to have three dips okay the first one is going to be sales the next is going to be expenses and then we are going to have the income so those are going to be the different cards that we have here so let's move on and then create the sales we're actually going to duplicate the first one which is the sales after we are done filling in the markup okay so inside the sales we are going to have we are going to have the icon okay so that is going to be a spam let me actually get back to material icons so this is the icon we are going to get so let's say that there's going to be on latex i think so that is it this is it let's grab this pan copy it and then i'm going to paste it in here that is it we are going to have a div with a class of middle and inside that we are going to have another div with a class of left okay so the middle part is going to be this is going to be the middle so the middle is going to have the left which is going to be the heading here and then the amount here then we are going to have a progress so a left and then a progress we are going to have this progress thing right here and then lastly we are going to have a small tag with last 24 hours okay that is our left inside our left we are going to have an h3 that is going to be say total sales and then we are going to have an h1 okay that is going to have the amount so 25 000 and 24 hours next we are going to have another day with a class of progress that is going to have the svg and then a circle okay so the circle is actually going to have some attributes so that is for our svg we are going to have a sibling with a class of number a day sublime with a class of number with a p of the percentage in here okay of this percentage okay so that is the first one is going to be 81 percent 81 okay so that is what we have for our sales lastly as i said we are going to have that small tag okay we just let me show you real quick which is this that is going to be the small tag so small with a class of text muted okay you see it has that gray color so we are just going to give it a text muted class and then it's going to say last 24 hours i'm going to copy the sales duplicated two times and then change the contents here there's going to be expenses and then this is going to be end of income now let's move on to this is going to be income let me actually change the classes it's going to be expenses perfect so that is all for our markup let's head to the css all right so actually let me first change these colors okay this color is too black so i'm going to go back to the body and then give it a color of our dark gray which is our color dark or color dark let's go back to our main let's start styling our main i'm going to push it down with margin top of 1.4 mm so it's a little down now let's start our date okay so this the day with a class update so main date i'm going to display inline block then give it a background of variable color light butter radius is also going to be a variable border radius border radius 1 which is this 0.4 rams i'm going to give it a margin top of one rim okay so that is pushed down a little from the dashboard and then i'm going to give it a pattern a pattern of 0.5 frame top and bottom and then 0.6 where i'm left and right i'm going to start the inputs and that is the inputs the dates the order calendar is going to be inputs with the type of dates let me give the let me remove the background so background is going to be transparent and then i'm going to change the color okay so that is going to be the color dark we can change our dates let's move on to the insides okay so main insights so i'm going to display grid on the insides and then the grid templates columns is going to be repeat three one fractions okay let me give it a gap of 1.6 ram now let's move on to the individual cards they're going to have a background of white which is color white and then a pattern variable card pattern so you should see them now and give them a border radius as well that is going to be a variable cardboard or radius and then margin of one rim let me push it down a little bit let me give them a box shadow that is going to be the variable box shadow and i'm going to have some hover effects with a with a card so let me actually just copy this and then paste it right here over on hover i'm going to remove the box shadow so the box shadow is going to be none so now we have the hover effect now i want this to be smooth okay so i'm going to have a transition here or 300 milliseconds is so we have that smooth hover effect now let's tell the contents of the cards okay so let's move on let's start the icons which are these icons here so they are spans right and they are going to have a pattern i'm going to give them a pattern let me just give them a background right now so that you see all right so i'm going to give them a pattern 0.5 frame border radius is going to be 50 today to make them a circle i'm going to change the color to white so color white then font size is going to be 2 grams color primary which is going to be for all but we are going to change the two the last two so let me grab this and then the second one is expenses okay so the expenses icon which is the spam is going to have background color danger then the next one the income is going to have income it's going to have color success all right so that is it let's move on to the middle so the middle is going to have this the left and then the progress the middle we are going to display flex going to align items to the center line items to the center and then justify content to be spaced between okay i'm going to start the h3 i'm just going to increase the font size so h3 let me actually make this 0.6 from the bottom then change the font size to one ram let's move on to the progress which is going to have the svg okay progress i'm going to position that relative give it a width of 92 pixels a height of 92 pixels as well and then border radius of 50 from the progress we are going to start svg okay so and then svg let me actually give this a background so that you know what the svg is so you see we have some problem with the svgs the width of the svgs okay so the we are going to change the width to 7 ram okay and then the height as well we are going to change the height to um let me make this seven row so that is it let's move on let me actually remove this background let's move on to the circles or the circle in the svg so you see in inside if you have the circle let's move on to that so main inside svg circle is going to have a fill of none the primary color a stroke width of 14 so that is it the stroke line cup is going to be round okay and then the stroke let me actually move this let me position this wall with transform and then translate five pixels on the x-axis and then the same for the y-axis stroke dash array i'm going to give that 110 and then stroke dash offset is going to be 92. we are going to adjust them for the different cards okay so let's adjust them quickly so for the sales we are going to adjust the circle the offset is going to be negative 30 and then the stroke dash array then the stroke dash array is going to be 200 that is for our first card let's start the second one which is going to be the expenses the expenses is going to have a stroke the offset is going to be 20 and then there is going to be 80. now let's move on to the last one which is the income the income you are going to have 110 and then 35 okay so those are the difference but actually you know what let me change this let's say it is should actually be 35 then this should be 110 all right so that is what we have now let's position these percentages inside the circles okay that circle progress so main insights progress and then number we had a david a class of number okay here this is the day with a class of numbers so that is what we are going to position inside this okay so let's position that absolute we gave our progress a relative position which is this okay so there's going to be position absolutely net let's give it a top of zero left of zero a height of hundred percent a width of a hundred percent as well and then i'm going to display flex justify content is going to be center i'm going to align item center all right so it is positioned right in the middle of the cycle progress okay so we are done with our insights next let's move on to our orders table or our recent orders table and later in the video we are actually going to generate the rows the different rules using javascript okay but for the mean time we are just going to do the first one and then duplicate it and then in the end we are going to generate the whole thing using javascript all right so let's get on to that in the html you know what i'm going to push this a little down okay so main insights and then that is inside a small tag right i'm going to give that a margin top of 1.6 ram let's see um it is not working maybe i have to display block on that and now it's down okay yeah i think this looks great just like the finished project okay now let's move on to our recent orders so what dave with the class of presents or this we are going to have an h2 that is going to say recent orders and then we are going to have our table it is going to have a table head and then table row inside it we are going to have our th it's going to be product name duplicate this a few times the second is going to be the product number we're going to have the payment and then the status okay the status the shipping status that is going to have the details okay so that is what we have a t body so inside our t body we are going to have a table row and then a table data the name of this product is that is our product number and then our shipping status is pending okay and actually i'm going to give this a class of warning okay so if the product if the shipping status is pending then it's going to have a warning class and that is going to give us that yellow color so we are going to have different colors depending on the status of the shaping okay we are going to have different classes and that is going to change the color of the text content all right so this is for our table and then lastly at the bottom here we are going to have and there is going to be this link right here this show all links okay lastly we are going to have our details so td and then we are going to have details our details is going to have a class primary okay our details is going to have a class of primary for you to have that primary color i'm going to push it down a little bit with my end top of two ram okay um what is wrong should come down recent orders recent orders okay that should be the name of the class let me target the h2 i'm going to give it a margin bottom of 0.8 ram okay all right let's go to the table so main recent orders and then table i'm going to give it a white background so color white width is going to be hundred percent border radius is going to be card border radius the pattern is going to be card pattern okay so with a variable card pattern so that is our table coming together text aligned to center and then we are going to have a box shadow okay that is going to be the variable box shadow let me actually give this a transition as well since we are going to have that hover effect on hover the box shadow is going to be none so we have the cool hover effect i'm just going to go back to the atmo and duplicate this tr let's move on to the table body okay so table table body and then the td let's move on to the td i'm going to give them height of 2.8 ram border bottom of one pixel solid and it's going to have that color light so our table is coming together nicely and i'm going to give them color of the dark variant so they are a little lighter i'm going to remove the border from the last to tr and then last child the border is going to be none and now let's see see buddy zero the td okay it's going to have no border i think i gave i gave it a class so so this is what we are styling by the way i'm going to text a line align that to the center i'm going to display block margin is going to be one ram auto so we have it i'm going to change the color so now our table is all done now let's move on to the right okay the right side of the page which is going to have the recent updates the theme button and then all that okay so let's move on to this right side the right section is going to be a day with a class of rights and then we are going to have another div inside it with a class of top okay so that is going to be the top part of the right section so this is going to be the top part and the top part is going to have the button and then the profile and we're actually going to have this menu icon okay that is going to be hidden in the desktop so that is why it's not there but we are going to have that so the top we are going to have our button which is going to be our menu icon let me actually give this an id menu btn so that is our icon it should see that that is it and then we are going to have our theme toggler okay our team toggle button so those are going to be two spans so we are going to have the sun and then we are going to have the moon copy the name come here just duplicate this and then change this name okay so that is all for our toggle and then lastly we are going to our profile okay we are going to have our profile and and inside that we are going to have our info it is going to have a p and then a b and then a small tag let me give this class of text muted and it's going to say admin all right so that is what we have profile photo which is going to be the image profile one all right so that is all for our top section top let's move on to our recent updates that is going to be the sibling of the top let me leave a comment here let's have an h2 that will say recent updates and then we are going to have a day with a class of updates and inside that we are going to have another day with a class of update okay inside each update we are going to have another div which is going to be the profile photo that is going to be an image images and then the second profile picture we are going to have another div with a class of message we are going to have a paragraph and a b which is going to be the name the name is going to be bold okay so that is why we are putting it in a b tag and we will say receive and we are going to have the time okay so that is going to be in a small tag with a class of text muted so this came in two minutes ago so that is our first update and i'm just going to duplicate the first one and then change the contents real quick i'm just going to change the image nothing else this is going to be the fourth one and there's going to be the third image all right so we have three two is enough let's proceed alright so that is for our recent updates let's hop on to the css and start styling that i'm going to push it down by 1.4 ram so it's down a little bit and then for the top let's start at the top so i'm going to display i'm going to display flex justify content end and then i'm going to give it a gap up to ram so that is our top let me actually give this a background so i see what is going on that is not clear enough let me make it gray okay so that is our top let's proceed to style our button okay so this is going to be our button let me start that that is actually not going going to be visible on large screens so top and then button i'm going to display now that is gone let me focus on the theme toggler button i'm toggler to give that a background display flex going to justify content space between i'm going to align items to the center give it a height of 1.6 ram a weight of 4.2 ram keza pointer and then i'm going to give it a border radius okay so that is going to be the border radius one so we have that let me actually remove this weird gray background so that we see it clearly now let's move on to the span okay so these icons are response let's move on to that so right and then spawn i'm going to change the font size to 1.2 ram and then the width they are going to have 50 width and then they are going to have a height of 100 okay they are not vertically aligned in the middle so i'm going to display flex i'm going to align items to the center align my items to the center let me actually justify content to the center so perfect down they are right where they should be moving on let's start the active class so let me go back here and then give one of this icon the active class so i'm going to give the light mode the active class so let's start that back in the css so the one with the class of active i'm going to give that a background of color primary a width of 50 they actually have 50 percent weight already so i'm just going to change the color to white and then the border radius border radius one so that is the active class let's move on to our profile and then our profile i'm going to display flex on that give that a grab of two ram and i'm just going to text a line to the right and that is all okay so we are done with the top now let's move on to the recent updates present update i'm going to push it down so margin top is going to be one room and that should bring it down a little bit h2 actually make this 0.8 ram move on to our updates so right and then recent updates and then we give a class of we had a class of updates which holds all these updates so let's see there's the updates class and then inside that we have individual updates okay let me give it a background of the white color a pattern of the variable card pattern i'm going to have a border radius of the variable border radio card border radius i'm going to give it a box shadow of the variable box shadow and then i'm going to have that hover effect so transition all 300 milliseconds is beautiful the hover effect isn't there because we haven't set it so down here we are going to have that hover and then just change the box shadow to none okay so now we have the hover effect let's move on to the individual updates so let me grab this and paste that in here so inside the updates we have a class of updates okay so each of these i'm going to display grid and then grade templates columns is going to be [Music] 2.66 rams auto okay so 2.6 rhymes for the profile photo and then auto for the rest of the content let me give you the gap of one ram and an imagine bottom margin bottom sorry of one rim as well beautiful so that is all for our individual updates i'm going to have an h2 let's say sales analytics and i'm going to have a day with a class of item and each of them are also going to have a different class as well the first one is going to be online the next is going to be offline and then we are going to have the customers okay this should actually be new customers so that is what we are going to do so for this we are going to have our icon which is going to be let me grab the icon real quick shopping carts grab that we are going to have a ride dave with a class of rides and then inside that we are going to have the info and and h3 that is going to say online rs and that is going to say last 24 hours now we are going to have an h5 is going to have a class of success class positive 39 and then an h3 that is going to be the amount okay so that is for our online let's just duplicate this for the offline and then the new customers so this is going to be offline this is going to change to locale more that is the icon and then this is going to say offline orders this value is going to be negative 17 and then we are going to have the actual value set to this and this is going to change the class is going to change to danger okay and it's going to be red next let's move on to the customers okay customers there's going to be person then new customers they're going to say new customers last 24 hours 25 plus and then 849 new customers all right so that is all lastly we are going to have our add products button so let's see a same div with a class of item and another class of add products and inside it i'm going to have another div that is going to hold the span or the icon it's going to be the plus icon so that is add and then i'm going to have an h3 and that is going to say add product so that is all for our markup for the sales analytics let's head to the css i'm going to give it a margin top of 2 rim to push it down a little bit the h2 okay in the heading i'm going to give that a margin bottom as well of 0.8 ram all right now let's move on to the individual items okay so write sales analytics selling item i'm going to give them a background of white with the white color background i'm going to display flex and then align items to the center let me give it a gap of one rep okay let me give it a margin bottom as well imagine bottom of 0.7 ram i'm going to give it a pattern of 1.4 ram and then for 1.4 ram for the top and bottom and then card pattern for the left and right border radius is going to be card border radius border radius is going to be border radius 3 and then i'm going to give that box shadow okay i'm going to give it that box shadow i'm going to give it that hover effect okay so transition or 300 milliseconds is remove that box shadow so on on we have that now let's move on to the right section okay this section which i actually gave um let's see what class was that i think i'll give it a class of right so let's style that i'm going to display flex justify content to be spaced between i'm going to align items to start and then margin i'm going to give it a margin of zero and then a width of 100 now let me style the icons okay so let me start the individual icons we gave them we gave that a class of icon if you could remember this is what we are going to style off 0.6 ram color i'm going to change the color to white so that is color white and then i'm going to give it a border radius of 50 let me give it a background so that you see it well the icons are a little bit stretched okay so i'm going to display flex then the next one which is going to be the offline i'm going to change the background to be color danger nope that is going to be the icon okay let me change the icon background to color danger duplicate this and then there's going to be customers i think i'm going to change that to success all right so we have our sales analytics let's move on to and product let me give it a background to make sure that the club the class we give it good okay so for that i'm going to give it a transparent background okay background is going to be transparent and then i'm going to give it a border border of two pixels dashed and then it's going to have the primary color i'm going to change the color to the primary color as well and then i'm going to display flex align items to the center and then i'm going to justify content to the center as well okay now there is a div inside this okay so let me style that as well i'm just going to display flex on that i'm going to display flex so that they are side by side to the center and then let me give some gap okay so gap i'm going to give it a gap of zero points let me make that 0.6 right that should be okay i'm going to change the weight the font weight of the h3 let me make that 500 it's too bold okay so that is okay that is good actually let me just make that 600 and that looks great all right so we are basically done with the desktop version of the dashboard okay we are basically done with the desktop version of the dashboard now let's proceed to the media queries okay we're actually going to have two media queries the first one is going to be for tablets and smaller laptops and then the next one is going to be mobile and then smaller tablets okay so let's first do the tablet it's going to be for the media queries okay so let's media screen and mags with let me just see the breakpoints i just want to show you the breakpoints so let me give this a background the body a background of red so that you see the breakpoints okay so this is going to be the breakpoints that we are targeting here all right so at this breakpoints i want the container the main container to have a width of 94 percent and then i'm going to change the grade template columns of the container you see our container had a great templates columns let me show you real quick or 14 for the aside or the sidebar section we have auto in the middle or the main section and then 23 rams for the right section right so we are going to change this on tablets so it's going to be seven for the seven ram for the aside or the sidebar section auto for the main and then so we are going to have the 23 rams for the right section okay so that is for our container let's move on to our side and then the logo we are going to remove the h2 okay so this igato we are going to remove that on this media query so we are going to display none for that and now we shouldn't have that okay we're actually removing the h2 so now we have only the logo you know what we have some background for the logo so let me remove that let me go back okay i gave it a background let me remove this good so the h2 has been removed and then we are going to remove the names for our sidebar elements okay our sidebar menu items the h is we are going to remove them so display is going to be none for those we are only going to have the icons moving on we are going to change the width for the icons or the menu items for the sidebar so we are going to have a width of 5.6 ram they are going to have a rate of 5.6 ram for the last child for the last menu item which is the log out which is the logos we are going to position that relative and then we are going to give it a margin top of 1.81 now let's move on to the main section so main and then the insides for the inside i'm going to change the grade templates columns come on grade template columns for the cards okay i'm going to change the grade templates columns for the cards to 1fr and then give them a gap of zero so that's all we have let's move on to our recent orders okay so recent orders i'm going to give it a width of 94 percent going to position it absolute and then give it a left of 50 then i'm going to transform translate it on the x as negative 50 and then give it a margin of 2 for the top 2 ram for the top 0 for the right 0 for the bottom and then 8.8 for the for the left okay so that is for our recent orders okay now let me target the table inside the recent orders the table is going to have a width of 84 percent um let me actually change this let me see and make this 84 if you bought with okay uh let me actually adjust this let me make this 83 viewport with i think that is good 83 is good i'm going to remove the first and then the last columns okay i'm going to remove the first and then the last columns i think the product number and then the rest are okay for you to be able to tell everything about the order so i'm going i'm going to remove the first and then the last column so main table t head zero and then th the last child and then main table t head tr h and then this is going to be for going to display none oh t-body okay t-body all right so we have that that is for our tablets and then small laptops now we are going to have a different media query for mobile so this is going to be the breakpoints for mobile and smaller tablets okay so let me actually make sure that is the breakpoints let me change the body background to red so that you see so the breakpoints is right at this point okay right here so from this point downwards we're going to have these styles okay so from this point downwards i want the container to have a full width okay so the width is going to be 100 for the aside which is going to be this side it's going to be this side i'm going to position it fixed the left is going to be zero and background i'm going to give it a white background that's the variable background white i'm going to give it a width of 18 ram i'm going to give it a z index of three so that it sits on top of everything and then i'm going to have a box shadow okay and then i'm giving it a height of 100 viewport height pattern on the right side pattern variable the low the logo is going to have margin left of one ramp okay i'm going to come back to correct this all right so for the aside the h2 i'm going to now display it in line here on tablets we displayed it none but here we are going to display it in line so now it's going to show let's move on and then we are going to also show our age theories in the sidebar okay so we are going to display those as inline as well and then for every sidebar menu item we are going to have they are going to have the full width and then they are going to have a height of 3.4 ram the last item the last menu item which is this log out is going to come down so we are going to position that absolute and then from the bottom is going to be 5 frame now the close icon which is this we are going to display that in line block and then the cursor okay so whenever we hover over it we are going to have the cursor change to pointer all right so that is all let me go up and then change this real quick this should be margin left okay and that is one ram i'm going to display none on this i'm going to display none on this so aside we're actually going to use javascript to show it okay so i'm going to display none now for the main section i'm going to have a margin i'm going to push it down a little bit so margin top is going to be 8 ram and then i'm going to give it a pattern on the left and right so zero for the top and bottom and then one room for the left and right let's move on so main i'm going to start the recent orders i'm going to position that relative because this was positioned absolutely in the tablet media query okay the first media query so i'm going to give that imagine as well imagine top of i'm going to give it imagine the rest of the size and then i'm going to give it a width of hundred percent that is for our recent orders let me move to the table inside the recent orders so the table is going to have a width of 100 and then a margin of zero i'm going to have a margin of zero the right is going to have a width of 94 percent and then a margin of 0 or 2 4 ram so 0 for the top auto for the left and right and the 4m for the bottom that is for our right and then the right top we actually going to have the top we are going to have the top here okay we are going to have that as a header here so we are going to position it fixed from the top is going to be zero from the left is going to be zero i'm going to align items center because this is already displayed flex so i'll just align items to the center and then give it some padding left and right is going to be 0.8 let me give it a height of 4.6 ram and a background let's see what we have so far so this is it i'm going to give it a weight of 100 the margin of zero let me give it an a z index of two then get a box shadow zero for the x as is one rim for the y axis one ram for the blur the variable color light okay so that is for our top okay that is for top or right top okay the team toggler so we are going to have a width of 4.4 for that 4.4 ram then we are going to position this absolute as well um it's going to be 66 percent from the left so that is it let's move on we are actually going to remove the name and then the admin there so so we are going to display none on that and that is gone for right top and then button we are going to display inline block on that there's the button let's remove the background so the background is going to be transparent so it changes to pointer on over and then i'm going to change the color the color is going to be color dark and then i'm going to position that absolute so that is bigger oh let me put that on this pan so right top button and then this one is going to have font size of two ram um i think there is a problem there is a problem the grid template columns for this is going to be 1fr okay all right all right so that is all for our media queries okay that is all for our media queries next let's move on to the javascript and then start putting some functionalities on the webpage or on the dashboard let me actually link this in my html okay so script all right so it is linked to our html so first what we are going to do is the sidebar the showing and hiding of the sidebar so we are going to grab this icon which i think we gave it an id we gave it an id of menu button okay we gave it an idea of menu button and we're also going to grab the close button which is this we give that an idea of close button as well and lastly we are going to grab this aside okay in this aside tag as well side menu aside next we are going to have our menu icon menu btn query selector and then lastly we are going to have the close okay so close btn close retain now for our menu now for our menu btn we want to add an event listener there's going to be a click events arrow function let me close that and this is going to just show the sidebar okay so let me say the style display for this should be equal to block and whenever we click we're going to get the sidebar all right but we can't close it yet so to close it you're going to put an event list now on this close button as well close btn we are going to add an event listener there is going to be a click event as well we are just going to display none for this but i want this to slide in so i'm going to go back to my css so whenever we we want to show it i want this to slide in from the left so i'm going to go back to my css and then go down from the outside i'm going to set the left to negative 100 percent okay that is going to be negative 100 percent and i want to have an animation so at keyframes and that is going to go to zero let me link this animation so this animation is going to be linked to this animation that is the name is show menu that is the name i gave to the animation this name and it's going to take 400 milliseconds easy and i'm going to say forwards okay so it's going to come in and then it won't go away without the forwards it's going to come in and then go back okay but with the forward is going to stay at the end state of the animation so now we can show and then hide our sidebar next let's move on to changing our theme okay so for that i'm going to grab this variables for the dark theme let me go back to let me go to the top and then put that in here so this is going to be the variables for the dark theme okay so the background is going to change you see we gave every we gave the body a background of this okay so this is going to be the same variable that we are going to change to this color okay we're going to change from this color to this then the white color is going to change to this dark color as well the dark color is now going to change to this you get the idea so we are going to go to our javascript and then you're going to get this icon i think we gave it an id this is what we are going to use to change the theme and we gave that let me add an event listener so team toggler i'm going to add an event list now it's going to be a click event so all we are going to do here is toggle the class which is this class we just created this that theme variables class we are going to toggle that on the body so we are going to get the body so documents dot body dot class list dot toggle okay so we are going to store the class of dac theme variables that is the class we are going to toggle let me see acting variables this should actually be theme toggler okay and that is the class for this icon okay so whenever we click this we are going to change or we are going to toggle that class but now we want the active theme to have this background okay corresponding to the button or the icon so so in here i'm going to say theme toggler and then inside it we have our spans okay we have our spans which are the icons so i'm going to say query selector and then okay so we are done with our theme changing let's move on to fill our table with some orders okay let's move on to fill our table with some orders i'm actually going to create a file this.js and that is going to hold our orders so i'm going to copy this and then paste it in here so these are going to be the oldest just an array of objects okay so i have the product name the product number the payment status and then the shipping status as well so this is our first order our second order our third order and on and on and on so i'm going to go back to the index.js let me actually link this order.js in the html file i'm going to duplicate this and this is going to be the first one is going to be the order.js okay it should come before the index all right so inside or it should be always all this.js that's what we named it so inside our js we are going to fill in our orders in here let me actually go to go back to the html and then remove all these i'm going to remove all these okay um take all this off i'm going to get my orders array and then run a for each loop on it for each of them i'm going to call order and then i'm going to create a t row okay a table row create element and that is going to be a tr and inside it i'm going to have some content so let me actually put this in a variable so inside it we are going to have let me actually just grab this i'm going to grab this and then paste it in okay that is going to be order dot product name okay so we are going to get the product name we are going to get the product number product number we are going to get the payment status payment status we are going to get the shipping status or the shipping and then lastly we are going to have our details okay i'm going to use a short if statement here order shipping so if the shipping is declined so if it is declined then i want the class to be danger okay else if it is so i'm going to grab this again as if the order shipping a spending if it's spending then i want then i want it to be warning else i want it to be primary okay the primary color i hope this makes sense let me close the curly brackets so i'm going to put the t content inside the tr so tr dot inner html and that is going to be the tr content and then lastly i'm going to grab the table body and then append this to it okay so document dot query selector we are going to grab the table and then the t body okay and then we are going to append child tr and we should get our table okay so now we have our table from the orders array here okay so that is our orders all right so that is all for this project that's all for the tutorial our light and that team is working pretty good it's working nice our hover effect is working great on the sidebar we have the cool over effect for the cars and all that and i think i forgot to have the hover effects for the add product button so let me go back to the ecss and then let me see where am i so on the right side i will see on the right side um we are going to have a hover effect for this so on however i want to have the background the background is going to be the primary color then the colors are going to change okay so the color is going to be color white um let's see let me change and now it's color black no i don't want that so i'm just going to use white beautiful our side bar is working great we can show and hide our sidebar our date is there we are done guys all right so that is all for this project i have more projects like this on my channel so you can check that out and then please subscribe for more projects just like this thanks for watching and i'll see you next time bye

Channel: EGATOR

Views: 946,104

Keywords: responsive admin dashboard, admin dashboard html css, responsive admin panel, responsive admin dashboard template html and css, admin dashboard with light and dark mode, dark and light theme admin dashboard, how to create a website using html css and javascript, responsive admin dashboard using html css and javascript, responsive admin dashboard menu layout, simple web development projects for beginners, light and dark mode website, ecommerce dashboard using html css and javascript

Id: BOF79TAIkYQ

Length: 88min 49sec (5329 seconds)

Published: Mon Oct 25 2021