Build 3 Projects With HTML, CSS & JavaScript (Beginner / Advanced)

all right what's going on everyone in this video we're going to be building three mini projects using html css and javascript now to begin let's go ahead and run through the project that we're going to be building here today so first off we have our article preview component here which is going to be very simple it's going to be your basic html and css where we use flexbox go ahead and align the left side here the image and the right side our content and then we'll use flexbox a few more times to go ahead and align a few more things now the one thing we're going to be using javascript for with in this project is to go ahead and expose the share menu when we go ahead and click on the share icon right here so when we click on this you can see it's going to expose the share menu right here and if i click on it again it's going to close now all these projects are responsive so if i go ahead and click inspect here you'll see that it's going to convert to uh it was a row and now it's going to stack as a column here and we click on the share button now it's going to be a little bit of a different setup or the whole bottom portion of the card is going to be our uh sharing here okay so that's the first project we're going to be building now next we have our faq accordion card here so how this works is when we click on one of the questions here it's going to expand the answer like this now one thing i did implement into this component or project is when we click on another question here it's going to automatically close or collapse the previous question okay and like the first project is also responsive so if i go ahead and inspect this here you can see that it looks really good on mobile devices as well all right so the last project we're going to be working on here is going to be a little more complicated it's going to be a pricing component with a slider so how this works is you can see here by default for sixteen dollars a month you get 160 000 page views this is supposed to be for a website traffic uh application or something like that so what happens here is when we change the slider from left to right you can see that it's going to change from 19 a month and it's going to recalculate the page views here now another cool feature we're going to implement here is the ability for monthly billing and yearly billing so if we have yearly billing selected we want to give the user a 25 discount so if i flip this button right here you can see that it's going to apply the 25 discount to the monthly price for the page views okay so this one's also responsive as well so if i go ahead and click inspect here you can see that it's going to look well on mobile applications here all right so those are the three projects we're going to be building here today so let's go ahead and get started now really quick i would like to mention that all three projects that we're going to be building here today are coming from front end mentor which if you've never heard of the service before i'll leave the link down below in the description they provide you with a whole bunch of free project ideas that you can go ahead and use to practice your front-end development skills here so as you can see they have a ton of projects so if you struggle with coming up with project ideas this is definitely going to be the platform and service for you okay so here in vs code i have a folder called three mini projects and inside of here we have a folder for each project that we're going to be building here today now if i go ahead and expand one of these folders here you'll see that i have it populated with all the assets and files that we're going to be needing to build out that particular project i went ahead and done this for each one of our projects so if i go ahead and expand faq you'll see the same thing and also the pricing slider now for each one of the files here i've already went ahead and pre-populated it with the default or kind of the starting structure that we're going to be using for each one of our projects here so for example here inside of the index.html i have the boilerplate here and all i've done is set the title and i've done the linking of our style sheet and also the app.js now within the style sheet here what i've done is a reset and then we're importing a google font right here now one thing i did do within the app.js for each one of these projects is for each thing or each kind of like item that we need to do for that particular project i went ahead and did a comment here so that way if you want to pause the video and try to attempt these yourself you can go ahead and do that then you can unpause it and see what i come up with alright so if you want to follow along with me with the structure all you need to do is head down below to the description i'll have a link to the github repository and i'll go ahead and go over here now and it should take you to right here and if you're not seeing the starting files which the link should take you there make sure you're on the branch right here of starting files and not the main the main branch is going to have the completed version for all these projects so if you want to follow along with me from the start make sure here on the starting files and just download the code from github alright so let's begin on our first project which is going to be the article preview component which is this right here so you can see this is the mobile form and then this is going to be the view when it's on desktop okay so let's head over to vs code and get started so first off let's open up the article component folder here and then let's navigate to the index.html file now what i want to do first off is i want to open this file with live server now if you've never heard of live server it's an extension for vs code that allows us to view the changes live that we make within our html file within our browser okay so if i go ahead and click on open with live server we should see that it's going to open up this file right here which currently we don't have anything in so it's going to be blank but we do have the title right here okay now what i should also do or probably would be helpful is i want to go over the additional extensions i'm using within uh this video that may be helpful for you as we go along building these projects so if i click on the extensions tab here we're going to be using the extension of bracket pair colorizer which is very helpful for when you're doing javascript to go ahead and colorize the brackets within your javascript to go ahead and make it easier to read then we have this html and css support which i highly recommend helps out a lot then like i mentioned we have live server here and then the last one is going to be prettier which is going to format our code to make it look a lot easier and better to read okay so those are the extensions i'm going to be using here so let's get started with our markup now to begin what we'll do here is we'll create a div with a class of card now within this then we're going to have two children elements we're going to have one for the image and then one for the actual article content itself so we'll create a div here and give it the class of img and then inside of here we'll have our image tag and then we'll navigate to our images folder here and we want to select the drawers.jpg and that's going to be it for our image div here now below this we're going to have a div for the article content so what i'll do is we'll go ahead and give this a div with the class of article okay now inside of here we're going to have an additional two divs one for the article preview and then one for the bottom portion which is gonna have the author and also the share menu okay so let's go ahead and say div and we're gonna give this a class of article and we'll do let's see if i can type preview here now within this we're going to have a header and then a paragraph tag now to save some time what i'll do is i'll just copy and paste this content in and feel free to do the same from the finished repository to save some time here so that's going to be our article preview now below this what we're going to do is we're going to create our second div which is going to have the class of share so we'll say share now how i did this is if we go back over to the finished version here you can see that the desktop share menu is a little bit different from the mobile share menu here so what i went ahead and did was actually created separate markup for this version right here and then also this version here now we didn't need to do this but i felt in this instance of how we needed to align all this and how it worked on the mobile version it made sense to have separate markup for the desktop and the mobile version okay so within our share here first off what i want to do is we're going to create a div with a class of share slash bar and then mobile here now within this what we want to do is we want to grab or we want to insert a span here and we're going to have to say share now what we need to do is we have our images from our images folder here which are going to be you know facebook pinterest and twitter okay so obviously if you wanted to actually have these go somewhere you'd wrap them in an anchor tag but for this uh you know project and component we don't really need to do that it's not going to go anywhere so all i'm going to do is just create image tags here and then we're going to go ahead and navigate to the images folder here and we'll select facebook and then i'm going to duplicate this down two more times and then we'll go ahead and change this out here so we'll say slash and we'll do twitter and then we'll go ahead and remove all this as well and we'll do the last one which is going to be pinterest here okay so that's going to be the styling or sorry that's going to be the markup for the share bar mobile now the desktop one will be the same exact markup so we'll go ahead and just copy and paste and once we get to that so i'm going to go and collapse this and then the next step we want to go ahead and create here is going to be for the actual author so that's going to be this section right here so we'll say div and we'll do a class of author here now inside of here we're going to have our image and then we're going to navigate to the images folder once more and we want to get the avatar i think her name is michelle so we'll say avatarmichelle.jpg and then below this you want to create another div here which is going to be the author and we'll say details and then we're going to have a paragraph tag here which is going to be michelle appleton i believe is her name so i'll go ahead and copy that in here and then this is going to be the date here of when this article be posted so we'll say 28 june and we'll do 2020 here okay and that's going to be it for the author now the next thing we need to do here is we're going to have a div for the actual share image itself which we're going to be able to click on to toggle the share bar okay so we'll do div and we'll have the clash of share image here and then what we want to do is inside of here we're going to have our image so we'll say img we'll navigate to our images folder once again and we're going to look for the icon.share svg now since we are going to position our sharebar desktop very close to the share image here or this actual icon what we're going to do is we're going to place the share bar desktop markup directly inside of the share image div and then later on within the styling we'll go ahead and position that absolute so that we can go ahead and move it relatively close to this right here so all i'm going to do is because it's the same exact markup i'm going to copy this right here and then what we'll do here is instead of saying share bar mobile we'll say share bar desktop like that and that should go ahead and do it for our markup so if we go ahead and close this up and we head over to our live server here you'll see that we're left with this so that's going to be our markup like i said so let's go ahead and get into the styling to make things look a little bit better all right for the styling what we're going to be doing is a mobile first approach meaning we're going to style everything out for a mobile viewport and then anything that needs to be adjusted for desktop we'll do inside of a media query okay so let's begin here and let's go ahead and target our body here first now what we're going to do is we're going to pass a height value here and we're going to say 100 vh we're going to display this as flex now to go ahead and push everything to the center here we're going to say justify contents at the center and then we'll do align items at the center as well and then lastly here on our body i want to add a padding here on the left and right of 20 pixels so we'll say padding on the top and bottom we'll set that to zero and then the second valley here will be for the left and right and we'll set that to 20. okay now next up here let's target our card so we'll say our dot card here and then we'll display this as flex and we'll say flex direction here on mobile we'll set to a column then once we get to a viewport we're comfortable with for desktop we'll set that to be a flex direction of row okay then let's give this a max with our mobile we'll say 350 pixels then we'll give it a width of 100 here and we want to round the quarters uh the corners onto this card so we'll say border radius and we'll do 12 pixels around all the sides and then we'll pass it a background color here of white and then lastly what i'm going to go ahead and do is copy and paste in this box shadow here as it is a little bit lengthy so that is going to be the styling for our card here now next up let's go ahead and target our image so we'll say our image class here and then the image tag and then what we're going to do for this is we'll start off by displaying this as block then we'll give it the width value of 100 percent and then we're going to pass it a border radius here so what we want to do is you want to give it a border radius on the top left of 12 pixels then the next value is going to be for the top right we'll say 12 and then the next two we want to set to zero so this is going to be for the bottom right and then for the bottom left okay so if we save this and take a look we should be left with something like this where we have everything stacking now so let's go ahead and move on to targeting the actual article preview content here okay so let's go ahead and go below the image tag here and let's target the article preview and then what we want to do for this is we're going to just pass it a padding value of 32 pixels on the top then we want to do 32 on the left and right and then for the bottom we don't want any padding so we'll pass a third valley here for or as zero okay and that's going to be it for the article preview itself now what we want to do is we want to target the h1 and paragraph tag within the article preview div itself okay so we could just go ahead and pass h1 here because we only have one h1 within our project but to keep things consistent what we'll do is we'll say article preview h1 so it only targets a specific header and then we'll say font size we'll give it 16 pixels we'll pass it a color here and we'll go with four eight five five six a and let's go ahead and get into a better view here and then we'll pass it a margin bottom value of 12 pixels okay then next up let's go ahead and do our article preview class again and let's target specifically our paragraph tag here so let's go ahead and get into view again and what we want to do here is we're going to pass it the color oh we'll start with font size here so font size we'll do 13 pixels and then we're going to give it a font weight of really light which is going to be 200 and then we'll pass it the color of 6 e 8 9 okay and that's going to be it for the paragraph tag here okay so if we take a look that should look a lot better now next up we need to begin working on the share section right here so let's go ahead and begin to target that so we'll say share here specifically and what we want to do here is we want to display this as flex and we want to align the items to the center and to push it away from the preview content we'll go ahead and pass it margin top and do 30 pixels and then we want to add a padding value here of 22 pixels on the top and bottom and then 32 on the left and right okay now next up we're going to target the author so we'll say author here and we're going to display this as flex we're going to give it a flex value of 1 and what we want to do here is we want to provide it the property of gap which is going to add separation between the flex items of our author div here and we're going to pass at the value of 12 pixels and then we're going to align the items to the center here okay now next up we need to target the actual image within our author div here so let's say author and then our image and we want to give this a fixed width of 40 pixels and we'll give it a fixed height as well we'll say 40 pixels and then we'll give it a border let's see here radius and we'll do fifty percent okay and that's gonna go ahead and do it for the image now next up we have our author details we have the actual paragraph tag which is gonna be uh the name here and then we have our span tag here which is gonna be for the date so what we want to do is let's target those specifically again to keep things consistent so we'll say let's see here author details and then let's target our paragraph tag here and we'll give it a font size of 13 pixels and a color which we've already used before of 48556a and that's going to be it for the paragraph tag and then let's do the same thing author details here and target our span tag and we'll say font size again 13 pixels and then we'll give it a color here of let's see 9 d a e c two okay and that's gonna go ahead and do it for the span tag okay so that's starting to look a little bit better now the next thing we're gonna actually target is our share image right here or the share div which has the share icon and currently the unstyled share desktop bar okay so let's go ahead and go below our span here and let's do a scroll up here so we'll target our share image here and we want to give this a fixed width of 30 pixels and a fixed height of 30 pixels as well we want to give this a border radius to make it round and we're going to say 50 percent we're going to display this as flex and the reason why we're doing this is because we have the icon inside of here so to get it to the center we're going to display it as flex and we'll say justify content to the center and align items to the center okay so it's going to go ahead and push it horizontally horizontally and vertically to the center of the actual share image div here okay then what we'll do is we're going to pass it a cursor a pointer and then we're going to give it a background color here and we're going to say f1 f1 f1 okay now let's go ahead and target specifically the image inside of our share image div here so we'll say share image and we'll do image and we're going to give it a pointer events of none now right now this really doesn't make sense to why we're doing it but once we get into the javascript i'll explain why we added this property to the image but for now just know we are adding it to the image and then we want to display this as block okay now the next thing we want to go ahead and work on is actually these two bars right here because currently they're making things look a little bit weird so let's go ahead and start to target these now we're going to have some shared styling between the desktop bar and the mobile bar so what we'll do is we'll start off with our shared styling so we'll target share dashbar dash desktop and then we'll also target share bar desktop and we'll say mobile here now the shared style that we're going to have between these two is we're going to have a background color of the 4 8 5 5 6 a we want to do the text transform to uppercase we're going to have a color for the text which is going to be the 9da ec2 we're going to pass it the gap property of 16 pixels because these will both be displayed as flex then we'll pass it a font size of 13 pixels here and then we'll align the items to the center here and then we'll pass it the flex value of one okay now for individual styling here let's go ahead and target share bar desktop uh we'll do actually mobile first so we'll do mobile here and then what we want to do for this one or this mobile bar specifically is pass at a padding value of 10 pixels on the top and bottom and then zero on the left and right and initially what we want to do is we want to have this displayed as none so we don't want it to show and then we're going to pass it a width here to take up the full entirety of its space and we'll say 100 and that should already make things look a lot better so you can see that now this author portion got pushed over to the left hand side so now we need to work on this specifically right here okay so what we'll do is we'll come down below here and we'll say share bar desktop and then we will display this as flex we are going to position this absolute and we want to give it some padding on the top and bottom of 18 pixels and then 32 on the left and right we're going to give it a border radius to match the cards roundness of 12 pixels here and then let's go back actually above position here to keep things kind of uh together and we want to go ahead and put this to or we're going to set the top property here and we're going to say negative 45 pixels okay then let's go back below border radius here and we're going to pass a transition here a 0.3 seconds ease and all so that way when we actually show and hide this is going to be coming in very smoothly so if i go ahead and show you this right now we're missing one property here but i want to show you what this looks like it's going to sit let's see here did we actually display flex position absolute what do we do wrong here okay so the issue is we forgot to add a property to one of our classes therefore what's happening is we have set the share bar desktop to position absolute to our body tag which is all the way up here at the very top and since we also set the top property to negative 45 pixels it is barely even visible on the page up here so what we need to do is head back over to our style sheet here and on our shared class here we want to add the property of position instead it's a relative and that should go ahead and resolve our issue and that should put the share of our desktop in the correct location here okay now what we also want to do is hide this initially until a user clicks on it so we haven't hooked that ability up yet but by default we want to hide this so let's head back over to our styling here and let's add the opacity of zero here and that should go ahead and hide it now what we want to do next is set up some media queries because currently you only have the mobile view now once we get to a certain viewport we want to go ahead and convert this from a column to a row like this okay so let's go ahead and do that now first off what i'll do is add a comment down here for desktop and then let's open up our media query here so we'll say add media we'll do a min with and we'll say 750 pixels and then what we want to do is we want to target our card class here and we want to set the flex direction to a row and what we also want to do is set the max width from the initial value of 350 pixels we want to set this to 750. okay so with this implemented we should be able to head over here now and see that it is in a row format here and it's no longer stacked but if i go ahead and inspect it here once we get down to a certain viewport it'll go ahead and stack okay so there are still a few things we need to go ahead and complete here for the styling so first off our image looks a little bit weird it's not going the full uh height of the card now so let's go ahead and work on that and also the border radius here on the top right needs to be adjusted okay so let's head back here and then let's target the image image okay and we're going to add a property of object fit and we're going to set this to cover we want to set the height to 100 on here and we need to update the border radius so we want to set the top left to 12 pixels still now the top right we want to set to zero and then the bottom right when it's at the zero and then the bottom left you want to go ahead and set the 12 pixels here okay so that should go ahead and fix that and you can see now it looks a lot better okay now the last thing that we need to do is we need to set up some classes that we're going to be using for when we activate the uh share menu here so what we're going to do is we're going to go back to our style sheet and above desktop here we're going to go ahead and add a comment and we're going to say active share i can type here and we're going to say mobile here and we're going to go ahead and create some classes so we're going to add a class to our share so if i go back over here we're going to use javascript and we're going to add a class dynamically to this class right here of share okay so what that class name is going to be is called active share mobile so we're going to have two different ones we're going to have active share desktop and active share mobile now when this class is active what we want to do is we want to set the background color to this div to the color of 48556a and then we want to set the border radius here from zero on the top left 0 on the top right 12 pixels on the bottom right and then 12 pixels on the bottom left here okay then what we want to do is you want to once again target active share mobile and then we want to target the class of author here now currently this is visible but when we activate the share menu we want to go ahead and hide this so what we'll do is when this class is active then we want to say we we don't want to display the author div anymore so we'll set this to display none okay and then what we want to do is once again we'll target active share mobile here and then we'll say share bar desktop or sorry share bar mobile here and then we want to display this as flex because currently it is displayed as none so we'll say display and we'll set this to flex okay and then i'm going to add one more comment down here and we're going to say active share and then we'll do desktop here now what we want to do here is we're going to have a secondary class that's going to be or sorry a second class we're going to add that's dynamic if it's on the desktop version so we're going to say active share desktop here and then we're going to say share bar desktop and then what we want to do is you want to change that opacity value of 0 that we had and we're going to change it to 1. okay and that's going to be all we need to do for the dynamic classes we're going to be adding to our project here so if we head back over to our finished project here or the one we're working on you can see that everything looks really good now the last thing we need to do is hook up javascript so that when we click on the share icon it displays the correct share menu okay so here inside of the javascript file what i did was lay out exactly what we need to do in order to implement this functionality into our article components so what i'm going to do is go through all the steps here and then after i do that feel free to pause the video and give it a try for yourself and once you finish or if you can't get it just unpause it and i'll show you my solution okay so the first thing you want to do is store our share class and our share image in variables now once we have that we want to listen for a click on our icon which is our share image right here so we're going to do is use that variable and listen for a click now within listener itself what we want to do is show and hide the correct share menu so we need to add those classes we added earlier of active share mobile and active shared desktop now we also need to consider which one we're going to add so we also need to check the actual width of the current browser itself when we do click on the icon okay and then the last thing we need to do is avoid shutting the share pop-up when clicking on it because what's going to happen when we click on the actual desktop version it's going to close if we don't implement a certain functionality to go ahead and check for that okay so feel free to pause the video and give it a try and once you've done that or gave it a try and you can get it unpause it and i will show you the solution okay so let's begin by creating our variables here so the first one we're going to call const share is equal to document dot query selector and we're going to target our share class here okay and i'm going to copy and paste this down and then we want to target our share image here and then we'll change this variable name from share to share icon now what we want to do is you want to listen for a click on this variable right here of share icon so we need to say share icon dot add event listener and then in here we want to go ahead and pass we want to listen for a click and then we want to run our callback here okay now like i mentioned before we want to avoid shutting the share pop up when clicking on it so what we're going to do is actually use the event param inside of our function here so i'm going to go ahead and pass the param of e so we can go ahead and use that event param within our function here so let's go ahead and say an if check here so we only want to start to toggle the classes if the uh the target the user is clicking on is this right here so let's run our if check here and say if e dot target is equal to share icon then we want to run this code now we also need to consider which class we're going to add because we do have the active share mobile and the active shared desktop so we need to do one more check if this is true we want to go ahead and check the width of the current window so we're going to say window dot inner with is less than or equal to 750 so if it's less than or equal to 750 we want to apply the active share mobile class so how we can do that is now we can use this variable right here of share and we're going to say share.classlist.toggle and then we want to toggle the active share mobile here okay now what we also need to do is if this is true we don't want we don't want to run the remaining of the function we're going to create so we need to return out of here okay now if this isn't true then we want to apply the active shared desktop class so right below our if check here still inside of this if check where we're checking the target we want to run the sharer.classless.toggle except we want to toggle the desktop class here all right so let's go ahead and move all this inside of here okay so that is going to be our function we need to go ahead and toggle our share bar so let's go ahead and test it out to make sure everything is working all right let's test this out here first on the desktop view so i click on the share icon here we should see that our share bar is going to be toggled in and if i click anywhere on the share bar here you can see it's not going to close but if we go ahead and click on the share icon once more it should go ahead and close the share bar here for the desktop view now let's go ahead and test this on mobile really quick so i'm going to go ahead and shrink the viewport down here to a smaller size and now if i click on the share icon now you can see the whole bottom portion of the card is now going to become the share bar all right and the same thing applies if i go ahead and click on the share icon once more it's going to revert back to the initial state so that's going to wrap it up here for our first project all right for our second project we're going to be building this faq accordion card where we have an image on the left hand side here within our desktop view and then on the right hand side we have our faqs now when we select the question what we want to have happen is you want to show that answer for that particular question here now we also want to implement the functionality to only have one question open at a time so if i go ahead and select on another question here what's going to happen is you want to close the previous question and then show the one we just clicked on okay and this is also mobile responses so if i go ahead and inspect this here you can see that it's going to stack on once we get down to a smaller viewport here okay so let's go ahead and get started so let's go ahead and close this and head back to vs code and within our faq folder let's go ahead and expand this and let's start off with our markup here so first off i want to go ahead and open this file up with live server here so we can see the changes as you make them so currently it is blank because we don't have any markup in here so let's go ahead and fix that now within our body tag here let's go ahead and start with a div with a class of faq card now inside of here we're going to have two children elements we're going to have one for the image and then one for the faq questions themselves so we'll start off with the div for the image here so we'll say div dot image and then inside here we're going to have our image tag and we'll say dot slash to go into the images folder here and we want to select the illustration woman online desktop svg here and that's going to go ahead and do it for the image div here now next up we want to create our div for the faq questions so we'll say div dot faq and then we'll say dash questions like this now inside of here you want to have another div for each one of the questions that we're going to be having for this accordion menu okay so first off we want to have an h1 here and it's going to say faq and then let's create our div for the actual faq question itself so we'll say div dot faq like that now within here what we want to do is we're going to have another div let me just put this into the better view for you guys here so we'll say div dot accordion q for recording question now inside of here we're going to have a span and the first question i'm going to copy and paste in the markup here or the text for this is going to be let's see here how many team members can i invite and then below the span we're going to have an image tag here and we want to go ahead and grab the arrow down svg okay now below this still within our faq div here we want to go ahead and add a paragraph tag here and we're going to apply a class here let's go ahead and go within here we'll say class and we're going to give this the class value of answer here and then once again i'm going to go ahead and copy and paste in the text here for this as well okay so that's going to be the general structure for faq now to save some time because the structure is going to be the same for all of our questions i'm going to go ahead and copy and paste in the rest of them from the finished repository so feel free to head over to github and go to the finished repository and grab the markup to save some time because these are all the same class structure okay so if we go ahead and paste all those in you can see we have all of our faq questions out so let's go ahead and collapse this to make it look a little bit cleaner here and then let's go ahead and save this and that is actually going to be it for our markup so if we go over to our index.html file here within our browser you'll see that we're left with this now for the styling once again we're going to be using a mobile first approach so let's start off by targeting our body tag here so what we want to do is pass this the property of display flex we want to justify the content to the center we also want to align the items to the center here you want to pass this the height of 100 vh we want to give it a padding value of 0 on the top and bottom and then 16 pixels on the left and right now for the background here we're going to do something a little bit different we're going to pass it a linear gradient so how we do a linear gradient here is we can say background image and then we pass linear gradient here and then we want to specify how we want the linear gradient to appear so what we're going to do here is we're going to pass it to and we're going to say if i can spell bottom here and then what we say next is we specify the colors that we want the linear gradient to be so in our case here we're going to use the colors of let's see b 0 6 8 e 9 and then we want to pass another comma here and specify the second color which is going to be 6 4 6 three e seven okay so now if i save this and we go back over to our browser we should now see for our background we have this linear gradient which goes from the top to the bottom here and then we have all the content pushed to the center now okay so let's scroll down here a little bit and let's target our next class which is going to be faq card here now for this what we want to start off with is a position relative here we're going to give it a width of 100 and then the max width here is going to be 920 pixels and then we're going to specify the height to be 100 and give that a max height value of 500 pixels here okay and then we're going to add some padding around all sides here of 15 pixels and we want to display this as flex and let's scroll down a little bit to get this back into the view and then we're going to align the items to the center here and then above this will say flex direction and i'll put that to column okay now we can specify the gap here between the two items so what i want to do is put a column gap here and we're going to say 64 pixels and for the background color we're going to go ahead and pass this the value let's see here it's not showing up background color and we're going to say white so fff here then we want to pass it a border radius here to around the corners and we're going to say 24 pixels and lastly we want to add a box shadow which once again i'm just going to go ahead and copy and paste in as it is a little bit lengthy okay so there we go now next up here let's go ahead and target our image class so we have dot image and let's once again scroll down here and what we want to do is you want to display this as flex we want to justify the content to the center here now for our image this time what we want to do is you want to position this absolute so if we take a look at everything right now you can see it looks a little bit weird but we want to position this image right here absolute to the card itself okay so that's why we went ahead and specified this property of position relative on the faq card up here so we're going to say position relative we're going to pass it the left property here of 0 and then we're going to say top negative 100 pixels here and then we're going to say width take up 100 okay so things should still not look quite right because the image is way too big so we got to go ahead and adjust that so let's go ahead and target our image image here and we're going to say with 220 pixels and we're going to give it a height value of auto and that should go ahead and fix it a little bit so you can see the image is now a lot smaller here okay now next up let's go ahead and target our faq questions here so we'll say faq dash questions here and we want to specify here with 100 percent we're going to give it a max width here we'll say max with and we only want this to be as large or as wide as 450 pixels and let's scroll down here a little bit and we're going to give it some padding on the top here and we're going to say 80 pixels and then we want to center this in the middle of the screen so we're going to say margin 0 auto okay so that should look a little bit like this now next up what we want to do is you want to pass the our target or h1 here and we're going to say margin bottom and we're going to say 40 pixels and we want to text the line here to the center okay and then next up what we want to do is target our faq themselves so this is the actual wrapper for the question and the answer so the first property that we want to add here is going to be overflow and we're going to set this to hidden here so this is going to go ahead and hide the answer within the faq accordion menu itself and then we're going to say margin bottom here we're going to say 16 pixels and then we're going to pass it a border on the bottom of one pixel we'll say solid and then f2 f2 f2 right here for the color okay so we're going to take a look at it now we should see that it looks a little bit weird what's going on here did i do something wrong here let me see let me see i believe okay so you probably caught this mistake before i did but we have to set this to position absolute not relative here so we'll say absolute here and that should go ahead and fix our issue because what was happening is we didn't set this to absolute so it was applying a column gap here which now that i think about it we don't really need so let's go ahead and remove that from the faq card here okay so that should go ahead and fix that issue all right cool so now below the faq here what we want to do is target the accordion question itself so we'll say accordion dash q here and then inside of here we want to display this as flex and then we want to align the items to the center here so that's going to align the question and the icon here into the center okay so that looks good and then we're going to pass a margin on the bottom here of 8 pixels as well so the next thing we want to do here is target the accordion queue and the span and we're going to pass this a font size of a little smaller so default i believe it's 16 we're going to pass this to be 14 and then to push the icon or the image all the way to the right hand side we'll just go ahead and pass the margin right property here and set that to auto so that should do it for our span here then let's go ahead and target the accordion queue and image now we're going to be doing a transition or we're going to be altering the we're going to be rotating this image inside of the accordion queue when a user clicks on it so to make that smooth we're going to go ahead and apply the transform here or sorry transition and we're going to say 0.4 seconds and we'll pass the value of ease and set that to all all right now next up here we want to target our answer specifically so we'll say answer here now what we want to do is we want to pass this by default the max height of 0 because we don't want to show any of the answers we want them all to be hidden by default so to achieve this along with the overflow hidden here we can set the max height to zero and that'll go ahead and hide it so you can see now we don't have any of the answers showing okay so what we also want to do is we're going to pass some other styles here which you're not going to see we're going to give it a color of 787 887 we're going to give it a max let's see here max width and we're going to set that 320 pixels and then the font size is going to be a little smaller at 12 and then once again we're going to pass the transition here so that when we go ahead and toggle or show and hide each answer it's going to happen in a smooth transition here so we'll say 0.4 seconds ease and set that to all okay so that's gonna do it for the mobile i should say uh styling here so what we need to do is we need to add some media queries here to alter the appearance of desktop because right now no matter how big we get this is how it's going to look and that doesn't look so great okay so let's head back over here and let's open up some media queries so let's go ahead and do a comment here and we'll say desktop and then the first media query we're going to have here is going to be let's see media we're going to target the min so i can type min width and that's going to be 700 pixels okay now once the screen gets to 700 pixels what we want to do is we're going to target the faq card here and we want to give it a padding of 60 pixels around all sides and we're also going to position or sorry we're going to say overflow and we're going to set this to hidden okay now for the image what we want to do is let me go ahead and get this into the right view we're going to position this i believe we already have that as absolute i do that twice let me see here so image it's position absolute so we don't need to actually do that that was a mistake on my end so we want to set the top here to zero we're going to set the left hand side to negative 80 pixels then we're going to say height here and we're going to say 100 percent and then we want to set the width back to initial here back to what it initially was because if you recall what we did is we set that to i believe 100 right here so we want to go ahead and reset that back once we get to 700 pixels here and then we are going to align the items to the center and then justify content we had set that to center we're going to set that to flex and we're going to say start okay so you can see that right now it looks like this so next up what we want to do is you want to target the size of the image because right now it's way too small so we'll say dot image here and then target our image and then we'll say width and set this to pixels and we'll give it a height of auto here okay now next up let's target the h1 here so we had initially set this to text align center on mobile we want to go ahead and put this back to start on our uh 700 pixels viewport or larger and then we need to target our faq questions here and what we want to do is we want to remove that padding on the top right we had set that to 80. so we're going to put that to zero we're going to give it a max width itself to 350 pixels here and then the margin we want to do is we're going to set 0 0 0 and then the left to auto so that way it pushes it all the way to the right hand side okay and then we also want to target the faq here and we want to set this to a flex direction and i believe we actually let's see here we should need to actually target that as well that should be all set okay so if we go over here now you can see this is pushed all the way over here to the right hand side which looks good okay so there we go now the next media query that we want to go ahead and target is going to be once we get to 850 pixels okay so we'll say at media again and we'll do min width here and we'll set this to 800 pixels now inside of here what we want to do is first off we want to target the faq card again we're going to adjust the padding so it's a faq card here and the padding when we want to pass here is going to be 85 pixels on the top 95 pixels on the right then we want to do 65 pixels on the bottom and then 30 pixels on the left here okay and then lastly what we want to do is once again we want to update the size of the image here so we'll say image image and then we'll do a width here of 425 pixels and then the height to auto and that should go ahead and wrap it up for the styling here so as we get so right now we are above 700 pixels so we're going to be in that media clear which we just did a few moments ago and then once we get to 800 picks you can see it's going to get a lot larger here and it's going to mimic what we have here in our finished version okay now one last thing i want to do for the styling here is i want to add the active state for when or the active class is inside of our styling here for when we have a question open so let's go ahead and do a comment here and we'll say active state here and then it will say the class we're going to add is this going to be active so once that is active we want to target our image here and then we want to transform and we want to rotate this 180 degrees here okay and then lastly we want to target active once more and then we want to target the answer here and then we're going to pass it a margin bottom of 16 pixels and that is going to go ahead and wrap it up for the styling here now lastly what we need to do is implement our javascript so that way we can show and hide each one of our questions here when we click on it all right now what i've went ahead and did very similar to the previous project is inside of our javascript file here i've laid out all of the steps or requirements that we need to take in order to implement this functionality into our project here so what i'm going to do is go through all the steps here and then once i finish with that feel free to pause the video and give this a try on your own and once you have the solution or you gave it your best shot feel free to unpause it and i'll walk you through the solution that i came up with okay now first thing here we need to do is store the accordion questions and the faq card in variables all right now next what we want to do is we want to listen for a click on any of the questions now within the listener that we go ahead and create to listen for that click we want to go ahead and first off get the height of that specific answer or the specific answer of the question that we just clicked on now next what we want to do is you want to check if the question has already been clicked and if it has and it has the class that we're going to add down here if it already has that we want to close it and then return out of the function now next up what we want to do is we then want to reset all of the questions and answers back to the initial state of being closed so that way we only can have one possible answer open at a time and then at the very end here what we're going to do is you want to apply or add a active class to the question selected and then apply this height that we went ahead and obtained right here in the beginning of our listener all right so those are the steps or requirements so feel free to pause the video now and give it your best shot and once you have it completed or like i said you gave it your best shot feel free to unpause and i'll walk you through my solution so let's begin by creating our variables here so the first one we're going to call questions and we're going to set this equal to a document.queryselector and we're going to select all because we have multiple elements with this class and that we want to go ahead and grab so we'll go ahead and say accordion queue here and then what we'll do is we'll go ahead and duplicate this down enter semicolon and then the next one we want to create is called faq card here okay and then we don't want to document that query selector all we just wanted to document that query selector here and we'll change this to faq card like that okay now next what we want to do is you want to listen for a click on any of the questions so what we first need to do is we want to run a for each loop through each one of our questions here so how we can do this is we'll say questions dot for each and we need to pass a param here which will go ahead and call this question and then we have our callback all right so what we want to do at this point is you want to look at the question here and we want to add a event listener here and we're going to look for click and then every time we hear a click we want to go ahead and run our arrow function here okay so the first thing you want to go ahead and do is let me go ahead and just copy and paste all this into the add event listener here now okay and we'll go ahead and put this right there so first thing we want to do is get the height of the answer so how we can do this is let's first create our variable here and call this height and we're going to set it equal to the question now what we want to do is we need to somehow get a hold of the answer which if we go back to our html here you can see right now this question parameter right here or this question right here that we're using is actually this class right here now within javascript what we can do is we can actually get the next sibling or next element sibling after this right here so how that's going to look is we're going to say constitute equals question dot next element sibling and then we can go ahead and get the scroll height which is going to give us the height of that particular answer here so we'll say scroll height okay now if i go ahead and say console let's see let's show you this cancel that log and we say height here and then we go back to our application and we go ahead and inspect this and go to the console so what we should see now is the height for whenever we click on one of these questions so you can see this is going to be 30 pixels the first one the second one is also 30 and then the third one's here a little bit longer that's 45 pixels 30 and then 30. okay so that's how we can dynamically get the height of each one of our answer divs all right so let's go ahead and close this off and we don't need this here okay so the next thing you want to do is we need to check if the question is already been clicked and if it is we want to go ahead and close it and then return out of the function because what in this case what's happening is the user clicks on the same question therefore we want to go ahead and close it so we need to run a f check here and what we want to do is we're going to say if question and then what we want what we're going to be doing here is we want to add a active class to the parent element of this question here so what we're referring to is this right here so we're going to add an active class to this element right here now how we're going to do that is through another property called parent element okay and then what we want to look for on the parent element is if the class list is going to contain the class that we're going to add which is going to be active here now if this is true that means the question is already open so therefore we want to go ahead and close it so we need to do a few things so first off at this point the question is going to be open so we want to go ahead and first off remove that active class so we're going to say here is question dot parent element dot class list and we want to run the remove method here and we want to remove that class of active here okay now the next thing you want to do is we want to set the max height back to zero because what we're going to do down here is we're going to dynamically set the max height of the faq or the answer with in the question here to the height that we have right here so we want to go ahead and reset that questions max height or the answer max height back to zero so we'll say question and we're going to use the next element sibling again property here and then we're going to say style and then we want to go ahead and target the max height so don't know why i did that but we'll say max height now remember when you target stuff in javascript that has spaces like max height does right here or i think dashes you need to go ahead and do camel case so what we'll do is we'll set this equal to zero pixels okay and then we want to return out of the function because we don't want to do anything else below this if this is true okay now the next thing we need to do is if this isn't true that means the user clicks on or clicked on a new question so therefore we want to go ahead and reset all the questions back to their initial state of being closed okay so what we'll do is we're going to go ahead and target the questions here and we're going to do another for each and i'm going to go ahead and pass the param here of q because we've already used question we can't use it again and then we're going to run our callback here so what we want to do is going to be very similar to this right here so i'm going to go ahead and actually copy and paste this in here so what we're going to be doing is let's go ahead and change this to q though and not question so we can target the right one so what this is actually saying is that it's running through all the questions we have and it's going to remove active and set the max height back to zero okay pretty easy and pretty pretty simple there now the final thing we want to do is if all of this so if this is not true we reset the question here but now we want to go ahead and select or we want to set the question that we clicked on to have the class of active and then apply that dynamic height that we've got right uh right here okay so how we're gonna do this is we're gonna say question dot parent element again dot class list but this time you wanna go ahead and do add and then we're gonna add the class of active here okay and then lastly we want to go ahead and actually give it that max height of the height variable that we have up here at the very beginning of our event listener so we'll say question dot next element sibling dot style dot max height is going to equal now in order for us to actually apply this we need to use uh interpolation here so we're going to say our back ticks our money sign we'll use our height variable here and then we're going to go ahead and say pixels here okay and that's going to go ahead and do it for our javascript so let's go ahead and test this out to make sure that we can now show and hide each one of our accordion questions all right so now that we have our javascript implemented we should be able to click on our questions here and show the answer for that particular question so let's go ahead and test this out so i click on the first one here you can see that the answer is going to be exposed and we have our icon here rotating 180 degrees and if i click on the question again it's going to close that question back up now if i go and select another one and we go to open the first one again you can see that that question down here is going to close and then this one's going to open now one thing i do want to change here is the cursor on the question itself it looks a little bit off so what we can do is here inside of our style sheet on the accordion cue class itself we can just add a cursor property here and change it to a pointer and if we go back over here that is going to look a lot better and that is going to wrap it up for this project now for the final project we're going to be building a interactive slider component for a hypothetical hosting service so how this works is we have our slider bar right here and when we slide it to the left and the right is going to update the amount you pay per month and how many page users are going to get for that price now in addition to this we can also change the billing type from monthly billing to yearly billing which is going to give you a 25 discount and when we flip this switch right here you can see it's going to update the amount you have to pay per month compared to the monthly price right here all right so that's we're going to be building so let's head over to vs code and get started here so let's head into our pricing slider uh folder here and then let's open up our index.html to begin with our markup so let's also open this up with live server here okay and then inside of our body tag let's start off with our div with a class of title here which is going to hold our uh header and sub header which is this uh these items right here okay so to save some time with this so i don't have to type all this out i'm going to go ahead and copy and paste these h1 and h2 tags into our project here so if you want to go ahead and get the markup for this i would just recommend going to the github repository or you can pause the video and just type it out but i believe going to the repo would probably be a little bit easier so uh below this we're going to have this little image that we have right here which is going to be the circles behind our header and subheader here so let's go ahead and add that so we'll have our image and we want to navigate to our images folder and we're going to grab the pattern circles.svg and that will go ahead and do it for our title div here now below this you want to create the markup for our pricing components so let's start off with the div here and give it the class name of pricing dash card here and then inside of here we're going to have a few divs the first one is going to be pricing and then we'll go ahead and duplicate this down and we'll give this a class name of cta now in between here we want to go ahead and create an hr tag now let's start off by populating our pricing div here so within this we're going to have a few divs as well the first one is going to be for the actual price here so we're going to go ahead and give it the class name of price now within here we're going to have an h1 and it's going to have a span tag which is going to have the class of page views now for this you want to populate it with the default value which is going to be 1 million six hundred thousand and then we'll say page views right here and what we're gonna do later on is use javascript to go ahead and dynamically change its value as our slider changes now below this let's go ahead and create our paragraph tag here once again we're going to have a span tag within this and we're going to give this the class name of slider value which is pretty self-explanatory this will contain the value that's currently inside of the slider which we'll go ahead and create in just a few moments here so by default we'll go ahead and populate this with the value of 16 and then we'll say outside of the span tag slash month okay and that's going to go ahead and do it for our price or our div for the class of price here now below this let's go ahead and actually create our slider so we're going to create a div here and give it the class name of slider wrap and then inside of here we're going to create our input which is going to have the type of range we're going to give the class of slider then we want to pass it a few different attributes here so we're going to say min set that to 0. the max value we want to have is going to be 32 and then we also want to set a default value that it's going to be at when the page loads in so we'll say value and then we'll set that to 16. now right below this you want to create our actual button because we're going to customize this slider as you can see if i uh save this and we head over to our browser this is what the default slider looks like and this is what we want to go ahead and have it look like now to get this like this we can't actually use the default input here we have to go ahead and create our own styling and markup to go ahead and achieve that okay so right below our input here we're going to create a div with a class of selector and then within this we'll have another div which is going to have the class of select dash btn and then we'll have our image tag here and we're going to go navigate to our images folder here and we want to go ahead and grab the icon dash slider.svg and that's going to go ahead and do it for our selector markup here now below this we're going to create a span tag for the filled amount of the slider bar so we'll go ahead and dynamically set all this with javascript but for now we'll just create this and say slider filled and then we'll use javascript to go ahead and actually uh fill in the width and color of this well i should say the width of this actual span tech right here okay so that should do it for our slider wrap div here now below this what we want to do is create our last div which is going to have the class value of billing now we'll go ahead and have our span tag here and this is going to say monthly billing and then below this we'll create our input which is going to have the type of checkbox here and then we'll pass it the class of billing dash type and then below this we're going to create a div which is going to have the class name of yearly and then we'll have our span tag in here to indicate this is going to be yearly billing and then we want to create a little tag if you can see right here on the finished version we have this little 25 discount tag that we need to create so to do this we'll just have a span and then we'll give it the class of tag and then for the value inside here with a 25 discount like that and that is going to do it for our billing and then our pricing div here so last that we want to do is actually fill out the markup for our cta div here so what we want to do is we're going to have a div with the class of features here and then we're also going to have a button which is going to say start my trial so we'll say start and let's go ahead and capitalize this start my trial like that now inside of our features div here we're going to have our individual features so we'll go ahead and create a div with a class a feature here and then i'll duplicate this down three times because the markup structure is going to be the same for all three of them we'll just go ahead and change out the actual content within the span so what we want inside of our feature div here is going to be an image and we want to go ahead and navigate to our images folder and we want to grab the icon check that svg here then below this will have a span tag and the first one is going to be unlimited websites here so i can type there we go and then all we need to do is duplicate this down two more times and change out the contents so the second one is going to be 100 data ownership and then the final one is going to be our email reports all right and that's going to go ahead and do it for our mark up here so let's go ahead and take a look at how things are looking right now so as you can see they're not great so let's go ahead and address the styling here now just as we've done for the previous two projects we're going to be using a mobile first approach here for the styling for our last project so let's go ahead and start off by targeting our body tag here and giving it a min height of 100 vh we're going to display this as flex we want the flex direction here to be a column and we want to align the items to the center then we're going to pass it some padding 0 on the top and bottom 16 on the left and right and then we're going to provide a background image here which will say url and then inside here we want to go to our images folder and we're going to be using the bg pattern circles here okay or sorry this is actually going to be the bg pattern svg so we want the top one here and then what we'll do is we're going to pass the background repeat property here and set that to no repeat and that's going to go ahead and do it for our body now next up here let's target our title div and then we're going to position this relative because we are going to position that image inside of this div absolute to it then we want to text align everything to the center and we want to give it some margin here which is going to be 104 pixels on the top zero on the left 92 pixels on the bottom okay and then what we want to do is actually that's going to be it for our title here then let's target our h1 inside of our title div here so we'll say title h1 and we're going to give it a font size of 22 pixels we're going to pass it the color of 29335 and then we're going to give it a margin on the bottom of 12 pixels here then let's go ahead and target our h2 so same thing we'll do title h2 and then we're going to say color and we're going to provide at the color value of 848 ead and give it a font size of 13 pixels and then lastly inside of this title div we need to position our image absolute so we'll target once again our title div here and then our image and then we want to position absolute we want to give it a top and we're going to say negative 80 percent then we're going to say left 50 here and then below this we're going to say transform and then we'll say translate on the x-axis negative 50 percent here and then last that we want to do is we want this to be behind our h1 and h2 so to do this we'll go ahead and pass a z index of negative one so let's go ahead and save that and see how things are looking here so if we go over to ours you can see now we have our header our sub header and then our background image right behind that so that is looking good now what we want to do is start to work on our pricing cards so let's go ahead and target our pricing card here now first thing i want to do is we're going to give this a max width of 540 pixels we want to pass it a background color and we'll say white so fff then we're going to give this a width of 100 percent and let's go ahead and actually put oop i don't want to duplicate that let's just put that up there to keep things consistent and then we'll give it a height of 100 percent as well and then we're going to pass it a box shadow which i'm going to go ahead and copy and paste in to save some timer it's a little bit lengthy and then lastly we want to round the corners of this pricing card so we're going to say border radius and give us a value of 12 pixels now next up we want to target the pricing div inside of our pricing card but we don't need to go ahead and specify pricing card because we only have one pricing dip so we'll just go ahead and say dot pricing here and then inside of here all we want to do is pass the padding value of 40 pixels on the top 48 pixels on the left and right and then we're going to say 56 pixels on the bottom here okay and then let's go ahead and target the price div now which is inside our pricing but once again we don't have to price price div so we can just go ahead and say dot price here now inside of this we want to go ahead and first off give it the display flex we want to say flex direction set that to a column we're going to align the items to the center here and then let's go ahead and give it a row gap of 16 pixels and then a margin on the bottom of 30 pixels here now inside of the inside of our price div here we have our h1 and also our paragraph tag so let's go ahead and say price h1 and then we're going to say text transform and we're going to set this to uppercase we're going to give it a font size of 14 pixels and we're going to use a color we've already used here before which is going to be let's see here color and we'll go 8 8 4 8 ead and that should do it for the h1 and then let's target our actual paragraph tag here and we're going to display this as flex we're going to align the items to the center and we're going to say color and we want to pass this the color value of 848 ead i think i did that wrong c848 there we go okay now next up inside of this paragraph tag we have the class of slider value which is going to be right here so you want to go ahead and style this up specifically so what we'll do is we only have one slider value again so we can just go ahead and target this like this slider dash value now inside of here we're going to give this a much larger font size and say 40 pixels we want to go ahead and separate it a little bit from the slash month so we'll say margin right and put that to 8 pixels and we're going to go ahead and give us a color of 29356 all right and that should go ahead and do it for our price div here so if i save this and we take a look you should start to see things are looking a little bit better but as i said before this is going to be a mobile first approach so we need to go ahead and set up some media queries to make it look like this on desktop right now you're seeing it in a mobile view okay so next up we're going to target our slider wrap here so we'll say slider dash wrap and we're going to set this to be position relative we're going to give it a width of 100 percent and a margin on the bottom of 40 pixels okay now first off we want to start to target our slider here which is actually going to be this input right here okay we gave it the class of slider so for this we want to pass the value of web kit dash or sorry yes dash appearance here and we want to set this to none and then we also want to set the appearance in on which if we go ahead and save that and take a look we should no longer have the background color of the slider here any longer okay so that looks good then what we want to do is we want to have this a width of 100 percent we're going to give it a height of 8 pixels and we're going to give it a background color of the color value e c f o f b and then we're going to give it a border radius so we'll say border radius 4 pixels and i believe i still have the box shadow in here copied in so i'm going to copy and paste that in here for our slider okay so you can see that now we have this which looks a lot better from the default version that we seen initially all right so next of what we want to do is we don't want this thumb or this little circle here visible anymore because we're going to create our own so we need to go ahead and remove that so let's go ahead and begin to do that so how we can do this is we can say dot slider colon colon and we can say dash web kit slider and we're going to say thumb here and then we can go ahead and do our styling and this should go ahead and remove or style this up uh specifically to how we want it so once again we're going to say webkit appearance we're going to say none then we want to go ahead and do a border radius on here of 50 we're going to give it a width of 50 pixels we're going to give it a height of 50 pixels and then we're going to pass a z index value here of 3 we're going to do a position relative and then we want a cursor of pointer here okay so if i save that we should no longer see our circle here but it actually is still here if i was to go ahead and pass a background color of let's say orange we should now see we have that circle right here just much larger okay but since we're going to go ahead and make our own custom slider we're going to go ahead and remove that background color for now okay next up what we want to do is actually start to style our own custom selector here so what we want to do is target our selector class now inside of here we're going to pass the z index value of 2. we want to go ahead and do a pointer events property set that to none we want to do a position and we're going to say absolute we're going to say top at negative 13 pixels and then what we want to do from here is we're going to give this a width of 50 pixels we're going to give it a height of 50 pixels and we're going to say transform and we're going to say translate on the x-axis and do negative 50 percent and let me go ahead and get this into the view and then we also want to pass the left value here of 50 so right now you're not going to see anything because we actually haven't added any background color or anything and we'll do that to the actual select button but you can see nothing has changed there okay so what we want to target next is going to be our actual select button so we'll say select btn here and then we're going to say display flex here then what we want to do is justify the content to the center we want to align the items to the center because inside of the select button we have our image which you can see right here so that's the image and then what we want to do is we want to pass the width to 50 pixels we're going to say height 50 pixels and then we're going to give it a background color here of 1 0 d8 c4 and then we want to pass that box shadow once more okay and then i believe you want to go ahead and pass a border radius here and set that to 50 percent so now with that set we should see we have our button right here which we can go ahead and move uh well we are it's it's moving but we need to use javascript in order to actually move our selector button right here but that is how it's going to look all right so that looks good now the last thing we need to do here is we want to style the slider filled so by default we have the value set to 16 which is half of the slider bar by default so let's go ahead and target our slider fill here and we're going to say first off position absolute we want to give this a height of 8 pixels because that's the size of the actual uh slider here if you go back up we gave it a height of 8 pixels so we want to go ahead and do the same thing for the slider field we're going to pass a border radius on here of 4 pixels we're going to give it the background color of the same color that we set our button to so 1 0 d8 c4 and then we're going to say left 0 and then by default we want to go ahead and give this a width of 50 percent and we're going to say bottom and we'll set that to 4 pixels and to go and keep things consistent we'll go ahead and position these two or group these with the position absolute here okay so now if we take a look now we should see we have this slider bar filled halfway which represents where the current slider button is at all right and that's going to go ahead and do it for our slider or do it for actual slider for now next up what we want to target is going to be the billing section so we'll go ahead and target billing and we're going to display this as flex we're going to say flex direction is going to be a column we're going to align the items to the center and then we're going to justify content to the center and we're going to give it a gap property of 16 pixels we're going to say font size for everything we're going to say 12 and then for the color we're going to pass the value of 848 ead now what we want to do is start to target the actual input and make that custom slider now i've done a video on this before and i'm not going to go ahead and get too in depth with how this actually works so if you want to see exactly how i create this and kind of get more in depth with how it actually works i'll go ahead and leave the link down below to the video and you can go ahead and watch that i'm going to quickly breeze through the styling here but if you want to see more on how to make something like this in more detail be sure to check out that video down below so what we want to do here is target the input and we only want to target the type that is equal to check box here now once again we don't actually have any other inputs on here so it would be acceptable just to go ahead and target all inputs but it's never a bad idea in case you add it more to only select the one that you want to target okay now first off what we're going to do here is we want to say webkit appearance which we've used a few times and we want to set that to none we're going to set the position to relative here and we're going to transform this and we're going to rotate it 90 degrees and you'll see why in a moment this is only for the mobile version we're going to go ahead and change this on the desktop version then we're going to say border we're going to set this to none we'll do a background color here and we're going to set this equal to cf d8 ef we'll do an outline it'll set that to none and we're going to pass this the width of 43 pixels height of 22 and then a border radius of 20 pixels and then our box shadow here okay and then what we want to do is then we're going to target the input the type see here type equals check box and then we want to target it on before okay now what we want to do here is when we're using the before selector we have to pass the content of an empty string and then we're going to position this absolute so we set the checkbox to be positioned relative so we're going to set this right here to absolute then we're going to give this a width of 14 pixels we're going to give it a height of 14 pixels and if you're wondering what this is it's actually going to be this dot right here which we see in uh in the middle here which is going to go back and forth so this is what we're currently styling up all right now let's go ahead and continue on here so we're going to set a border radius 250 percent then we're going to say because we position position this absolute we want to go ahead and do a top value on here of 4 pixels and then we'll say left three pixels okay and then for the background color here we're going to go ahead and specify it to be white and then we want a transition on here to make the uh transition of the circle from the left hand side to the right hand side fairly smooth otherwise it'd be very instant it wouldn't really look that good so we'll say transition we'll do 0.5 seconds ease in out and we'll say all and then lastly once again we're going to use that box shadow here okay now how this works is when we select the checkbox we can actually target our checkbox on the check state and when it's checked we're going to go ahead and push the dot right here if i go ahead and show you from the top to the bottom or from the left to the right if you're on desktop okay so what we need to do is we want to go ahead and say input and we'll do colon and we're going to say checked here and then we want the type again equal to check box and then we want to target the before selector here okay and then all we need to do is we want to specify the background or sorry we only need to specify the left value here and we're going to set this equal to 26 pixels okay so now if i go ahead and click on ours right here we should see go from the top to the bottom here okay and then if i go and click it again it's going to go back up so what we're doing is this is actually just a check box and we're clicking on it and we're just manipulating the circle in here to go from the top to the bottom okay so pretty simple but it looks a lot more complicated than it actually is from all the styling that we have to do to achieve that okay now next up what we want to go ahead and style is going to be our yearly div here which is going to have our tag in it so inside of here we're just going to position this relative and then for our tag here we're going to go ahead and position the tag absolute so let's go ahead and get this into the correct view here so we're going to say position and we'll say absolute we're going to say top 22 pixels and then we're going to say left here and we're going to set this to negative 7 pixels and then we're going to display this as a block element we're going to give it a min width of let's see here 90 pixels then we're going to provide it some padding and don't know why i got down there we'll say padding and we're going to do three pixels on the top and bottom six pixels on the left and right we're going to give it a background color of f e d e eight and then we want to give it a color of orange which is going to be ff eight 8 d68 here and then we're going to pass it a font weight of a little heavier of 600 and then a border radius of 12 pixels and if we save that we should now see we have our tag right here position absolute to this yearly billing div okay and that's going to go ahead and do it for the pricing now the next thing you want to start is with our cta but first for our hr here what i want to do is we're going to give this a border and i want to set this to one pixel we'll say solid and then a color of e c f o f b okay and that should do it for hr which is just going to color this a little bit differently than it was by default okay and now lastly let's go ahead and target our cta here so we'll display this as flex we'll do some padding on the top and bottom 32 pixels left and right 48 oh sorry 32 on the top and 32 on the bottom 48 pixels on the left and right here and then we're going to let's go ahead and actually keep things consistent and organized here we'll do align items to the center here and we'll set flex direction to column and then we'll go ahead and provide a row gap here and we'll say 24 pixels now inside of our cta we have our features divs so let's go ahead and target our features so let's say features and we're going to display this as flex we're going to align the items to the center here and we're going to set flex direction to column and then a row gap to 10 pixels to go ahead and separate each flex item within our features div here now speaking of our features let's go ahead and target those so we'll say feature and inside of here we want to display this as flex as well we're going to give it a column gap so let's say column gap of 8 pixels and then we're going to align the items to the center and then lastly what we want to do here is style up our buttons so we only have one button within this project so i'm just going to go ahead and target the button specifically so the first property that we want to add here is going to be a cursor and we're going to give it the value of a pointer we're going to add some padding here to the top of 12 pixels on the bottom of 12 pixels and then 46 on the left and right we want to pass at the color value here for the text and we're going to say b e c d f f then we're going to give it a background color here and we're going to say 2 9 3 3 5 6 and then we're going to pass it a border radius here to round our button off and we're going to say 20 pixels and we're going to set border to none here and that should go ahead and wrap it up for our mobile styling here so let's go ahead and check it out and see how it looks so we're going to be left with something like this now the next thing you want to do is for our desktop view we want it to look something more like this so to do that we need to set up our immediate query so let's go ahead and begin to set that up here so right below our button i'll add a comment and we'll just say desktop like that and then let's open up our media query here so we'll say at media and we're going to use a min width here and we're going to set this equal to 540 pixels here now the first thing we want to target is going to be our headers inside of our title div so we're going to say title h1 and we're going to say font size and we're going to change this to 20 a pixels here and then we want to target our title again and we're going to say our h2 and we're going to say font size and we're going to change this one to 15 pixels now the last thing we want to do inside of our title diff here is readjust our image and what we want to do is we're going to say title image and we're going to change the top property and we're going to set that to negative 50 percent here okay now next up you want to target our pricing our pricing div here so we'll say pricing and then what we want to do here is update the padding so we're going to say padding 40 on the top and bottom and then 48 on the left and right and that's going to go ahead and do it for our padding now for the price currently it is set as a flex row or sorry flux column we want to go ahead and set this to a flex row so we'll say flex direction here and we're going to say row and we're going to pass a margin bottom of 24 pixels then what we want to do is target the price p and we want to give this a margin on the left of auto to make it go all the way to the right hand side okay and then that's going to do it for our price div next up we want to target our billing here and we want to give this a flex direction of a row currently it as a column and then if you recall we set the transform rotate on our checkbox to 90 degrees so that way it fit inside a mobile inside of our mobile view now that we're on desktop we want to go ahead and target our input and we're going to say type and we'll do check box here and let's go ahead and get into this a better view here and all we're going to do is we're going to take the transform rotate and we're going to set this back to zero so it's back at its initial uh rotation so we went ahead and did like a 90 degree rotate so it went up and down now we want it to go back from side to side okay and then what we want to do next is we're going to target our tag here so remember we position this absolute so all we're going to do is adjust the top and left properties here so we're going to set the top to negative 2 pixels and then the left we're going to set to 75 pixels then what we want to do is target our cta so currently once again this is at a flex column so we're going to change the flex direction here and we're going to say row and we'll save this then we want to target our features here and then we're going to say align the items to the flex start because what we did on mobile is we align them to the center so once we get to our desktop view we want to go ahead and have them start at the start of the div not in the center and then lastly here for our button we're just going to provide it the margin left value of auto and hopefully if we didn't mess anything up that should go ahead and complete our styling here so let's go ahead and check it out and there we go so the last thing that we need to do here is enable us to or give us the ability to drag the slider here and then we need to update the value of the month here or sorry the value of the price per month and then also the page views and then we need to implement the ability to change the billing type from monthly to yearly and then give us a 25 discount on that current value that we have inside of our slider so let's go ahead and begin to implement that functionality here into our pricing component now again i've laid out the steps that we need to take in order to implement this functionality into our pricing slider so i'm going to go ahead and walk through all these steps and then after i do that feel free to pause the video and give it a try and then i'll walk you through my solution so first off what we want to do is store slider slider value slider filled selector page views and billing type all in variables now once we have that we want to create a function that's going to convert the slider value into a currency format for monthly or yearly billing type now the reason why we have to convert it for monthly or yearly is if it's monthly on the application or our component they're not going to get a discount but if they have it selected to yearly billing then they're going to get a 25 discount now next up what we want to do is we want to listen for our slider input to change so what we want to do is we want to listen for the slider to be changed now whenever we hear that change what we want to do inside of this listener is we then want to first off call the function that we created right here to go ahead and obtain the currency value then next up what we want to do is we need to calculate the page views based on the slider values so 100 000 for each value and then we need to go ahead and dynamically insert that value into our html file right here inside of this span okay then what we want to do is we want to obtain the slider max value now to make this dynamic we want to go ahead and get this directly off our slider input okay then once we have that we want to calculate the percentage for the filled bar and for the selector button we're going to go ahead and use this percentage to then set the width of the slider filled to the current percentage that we have when this slider changes and the same thing we're going to be using that percentage for to update the selector left property and also the transform using that percentage and that's going to go ahead and do it for that listener and then lastly what we want to do is we want to listen for the billing type for that to change as well and then each time that changes we're going to want to go ahead and once again call this function right here that we created to obtain the currency for the monthly or yearly billing so let's begin by creating our variables here and to save some time i'm going to go ahead and copy and paste these in so we have our slider slider value slider filled our selector page views and then our billing type now the next thing we want to do is we need to create a function that's going to convert the slider value into currency or currency format for either monthly or yearly billing so let's start off by creating our function we'll call this const get price and we'll set this equal to a arrow function here now first thing you want to do is you want to check whether or not this billing type is true or false so if it's true that means you want to calculate for yearly if it's false then we want to calculate for monthly and we're not going to do anything so the reason we need to check because if it's yearly then they get a 25 discount per month okay so what we'll do is an if check here and we're going to reference our billing type variable and then we're going to look at the checked property here now this is true that means we're going to calculate for yearly so what we want to do is i'm going to create another variable here called discount it price and we're going to set this equal to the slider now we can get the value of the slider where it's currently at by saying slider and then referencing the value property here and then what we want to do is because when it's yearly we want to give them a 25 discount so we'll times this by point 75 here now what we want to do is we need to then set this variable of discounted price to this right here if we go back up the slider or the span here with the class a slider value so what we're going to do is we're going to say slider value which is our variable right here and we're going to say enter html is going to equal discount it price and we're going to go ahead and convert this to a local string because we want to go ahead and format it as a currency and to do this very easily instead of having to do some you know crazy manipulation we're going to go ahead and pass it to local string method and we're going to pass the en that us for the first param here and then for the second param we're going to go ahead and pass an object and then what we can do is we can set the style and we can set this to currency okay and it's currency like that and then what we want to do here is we're going to set the currency and we're going to set this to usd now you can set this to whatever you want but where i'm at it's united states so we're going to set this to usd here now if this is true then we want to go ahead and return out of here because we don't want to perform the rest of this function now this isn't true what we want to do is then we're going to create another variable here called const and we'll say price and we're going to set this equal to and we're going to do parse in here because when we get this number back from the slider value it's not like a number so when i go when we try to go ahead and do local string here it doesn't work properly so we want to go ahead and do parse int and we're going to say slider or sorry slider dot value here okay and then we're going to do the same exact thing so i'm going to go ahead and copy this right here and then we'll go ahead and paste it right below and then we'll change out price oops we'll change out or copy price here and then we'll change out discounted price and that's going to be our function to go ahead and get the price for either monthly or yearly billing now the next thing we want to do is listen for an input change here so what that's going to require is a add event listener so we're going to go ahead and reference our slider and we're going to say add event listener now instead of saying or looking for a click we want to go ahead and listen for the actual input itself so we're going to go ahead and pass input here and then we'll have our callback now the first thing that we want to do in here is call that function we just created to obtain the currency value and to make things a little easier what i'll do is we'll throw the comments inside of our ad event listener here and then a few line breaks like that so let's go ahead and call our function so we'll say get price our parentheses and then our semicolon okay and that's going to be it now the next thing we want to do is calculate the page views based on the slider value 100 000 for each now one thing we have to account for is what if the slider value is set to zero if we have it set to zero zero times a hundred thousand is zero and we don't want that so if we go over to the finished version here you can see that when we get to zero we have a default to ten thousand page views which is like you know the free version so let's go ahead and do an if check here so we're gonna say parse ins again because the slider value that we get from saying slider dot value isn't actually a number so we want to convert it into a number by using parse ends and we're going to look if this is equal to 0 here not o now if it's zero what we wanna do is we're gonna create a variable here called const free version and we're gonna set this equal to ten thousand like this now to format it what we're going to do is we're going to say page views or to insert this into the actual uh span right here we're going to say pageviews.enterhtml very similar to how we did inside of our function here for getting the price and then we're going to say equals free version to local string like that and that's going to go ahead and format it correctly with a comma after our to go ahead and say 10 000 with a comma here okay now if this isn't true then we'll do an else statement here and then we're going to say const new value is going to equal the slider dot value here and we're going to multiply this by one hundred thousand and we're going to do the same thing here we'll say page views dot inner html equals new value and we're gonna say to local string okay and that's going to be it for calculating the page views based on the slider value now the next thing we want to do is we want to get the max value of our slider so what we can do is we're going to create another variable here and we'll call this max value and we're going to say equal to slider and to get the max value attribute off our slider we can go ahead and use the get attribute method here and then we want to look for the attribute of max so pretty easy now the next thing we want to do is calculate the percentage for the filled bar and for our selector button so we're going to use this percentage to go ahead and set the width of our slider filled and then the uh left value of our slider selector and also the transform of our slider selector so what we're going to do here is say cons percentage is going to be equal to and we're going to go ahead and use some parentheses here and we're going to say slider dot value divided by this max value that we just had here so we'll say max value and then we're going to go ahead and times this by 100 and that's going to go ahead and give us our percentage now the last thing our last two things here we need to do is actually apply this percentage to make our application look good so we can actually have our slider filled and our button will go ahead and go from left to right as we move it on our range slider so what we're going to say here is we're going to reference our slider fill a slider filled variable and we're going to say style and then the width and we're going to set this equal to and we'll do some interpolation here and we're going to say percentage and then we're going to have a percent here okay so that's pretty easy and then let's go ahead and save that and then the last thing we need to do here is update the selector left and transform to this percentage variable here so once again we'll go ahead oh actually now once again we're going to reference our selector this time we're going to say style and then we're going to reference our left and we're going to set this equal to once again some interpolation here and we're going to say percentage and then add our percent on the outside here and then we want to say selector dot style once more and then we want to effect or we want to target the transform property here and we want to set this equal to and do some more interpolation here we're going to say trans late on the x and then we'll do our parentheses here and we're going to say negative and then we want to reference our percentage okay and that's going to be all of the code here inside of our event listener here now we need to do is we also want to listen for the billing typed uh input to go ahead and change and if it changes we want to go ahead and run our get price function so we can say billing type dot add event listener and we're going to listen for the change event on this and then once we hear that we want to run our callback here and then all we want to do inside of this callback is run our get price function here okay and that's going to go ahead and do it for our javascript so let's go ahead and test this out now before we test this out i realize i forgot to add the percentage here on line 55 to our translate x so this won't work properly without having that percent so let's go ahead and add that save it and let's test this out now so if i go ahead and refresh our browser here once more so hopefully now once we move the slider back from left to right we should see the monthly price be updated and the page views updated as well so if you go back and forth you can see that there we go our pages are being updated and the monthly price is changing and now the final test here is to make sure that when we switch this from monthly billing to yearly billing it's going to account correctly so let's go ahead and switch this and there we go you can see that it's applying that 25 discount for the monthly price all right so that's gonna do it for our three mini projects if you guys did enjoy i would really appreciate you guys leaving a like down below and subscribing if you're new for more content like this and i will see you guys in the next one take care

Channel: John Komarnicki

Views: 652

Rating: 5 out of 5

Keywords: html, css, javascript, javascript tutorial, beginner javascript tutorial, html css, html css javascript tutorial, Build 3 Projects With HTML CSS & JavaScript, javascript tutorial for beginners 2021, build html css and javascript projects, html and css, learn javascript, web development 2021, html tutorial for beginners, javascript tutorial for beginners, website design

Id: UFauyg7Nyoc

Length: 105min 49sec (6349 seconds)

Published: Fri Sep 17 2021