Practical Math for Frontend Developers Tutorial

Key Takeaways

what's up everyone welcome to practical math for front-end developers the course where we attempt to answer the age-old question when are we ever going to use this so you might be asking what are we going to do in this course well we're going to build a few projects the first project we're going to build is a shopping cart app we'll generate a list of products we'll calculate the total price of those products and we'll apply a tax rate to that total we'll also generate a weekly schedule app this is where we'll introduce the date object we'll do some more layout manipulation and we'll look at some cool ways to use javascript's reduce function and lastly we're going to build a monthly expense sheet in that app we'll attempt to bring everything we learned so far together we'll also explore some other assorted tips and tricks throughout the course so let's look at the tools we're going to use in one of the first casts we're going to write something that i call the role function this is basically going to be a useful tool just for generating random data we're also going to use the css calc function and we're going to explore how that can help us create some neat layouts we're also going to explore javascript's math object and use the random method floor and some other stuff along the way and we're also going to use javascript's built-in date object a lot of people nowadays use a library like moment.js but you might not always have access to that for every project and it's good to know how vanilla javascript features can be utilized if need be so who am i and why should you care about anything i have to say about these topics well my name is ryan ghanian i've been programming for 10 years and i've spent the better part of that decade doing web development mostly in the front end i have a bachelor's degree in computer science with a minor in mathematics from the university of central florida and i have experience tutoring k-12 and university-level mathematics as well as a passion for the subject if you ever have any questions about the course you can reach out to me by email at coda radical gmail.com where you can even catch a live stream at twitch or youtube and if that doesn't convince you i can also solve a rubik's cube in under 30 seconds so you know i'm trustworthy with all that said let's jump in all right so in this lesson we're going to build the outer shell of our application we're going to introduce the css calc function and we'll apply some tips and tricks to make the most out of it before we start coding let's talk about what our goal is here as you can see we already have the header the main and the footer elements and we've already applied some basic styles to those but ultimately we want our header to stay stuck at the top of the application our footer to stay stuck at the bottom of the application and our main section to fit neatly in between those and scroll if the content overflows if you'd like you can pause the cast now and try to expand the main section yourself so what we're going to do is go into the main css selector and we're going to set the height to 100 vh which is 100 of the available view height so now our main section is the size of our browser's view height but we have a problem our footer is invisible if we scroll down we can see it but we want it to be visible all the time along with our header so what we find is that we don't actually want the main to be a hundred percent of the view height we want it to be a hundred percent of the view height minus the height of the header and the footer now we could accomplish this using javascript by selecting the header checking the height selecting the footer checking the height and then subtracting those values from the main height but that seems like a lot of work so let's see if we can do it just in css so how tall is this header section let's take a look at the css the font size is 1.5 rem and the padding is one rem so that means that the word header is 1.5 rem and then above it we have one and below we have one rem of padding so if we go back to the height we can use the css calc function and say 100 view height minus font size which is 1.5 run and the padding which totals 2 ram so we're a little bit closer now but we still have to subtract the height of the footer if we take a look at that selector we basically have the same thing 1.5 rem font one rem padding so let's move to the next line minus 1.5 ram minus two rem and there we go our main fits snugly between the header and the footer so what if we decided we wanted to change the padding of the header or the font size for that matter or anything in the footer if we decided to do that we would have to change the value in the respective selector as well as the value in the calc function in the main there's got to be an easier way if you'd like you can pause the video now and try to come up with a solution to this where you only have to change the value in one spot the solution is css variables so let's have an all selector if we set up variables inside here then we can access them all throughout our application so let's say our header font size to rank and then in the calc function we can say 100 view height minus header font size we can change this to whatever one maybe we want to be five rem everything still works smoothly but let's go back to two that seemed to look nice let's also set a variable for the header padding let's make that 0.5 rem so remember the padding is on the top and bottom of the header so what we can write is minus two times the header padding there we go so a little bit more clean up here and then set variables for the footer as well all right and now we can control the measurements of our header and our footer all from this one selector and we can always count on our main section resizing appropriately we're not quite done yet let's see what would happen if instead of just the word main we had five paragraphs of lorem ipsum text it's basically dummy text that you can use for mock-up applications alright so look so we've got a problem our text is overflowing way past our footer and if we scroll past we lose track of our entire application now we can't have that if you'd like pause the cast now and see if you can resolve this issue the solution is pretty straightforward all we have to do is add one line in our main selector we set the overflow of the y-axis to auto and there you go now we can scroll through the application cleanly keeping our header and footer intact and in place alright so in this cast we're going to write something called a roll function as we go about front-end development we often find that it's useful to generate random data so that we can test out the layouts that we've been designing let's say for example that we wanted to generate a list of users we have to pick a name from a list of names we can generate a random age we could also generate a random height to accomplish this goal the main thing that we need to be able to do is generate random numbers and luckily javascript has a method that does just that math.random now math.random returns a random floating point number between zero and one it can theoretically include zero but it will always be less than one so we can represent that mathematically like this but we want something a little bit more powerful than that sometimes we want to be able to generate numbers between 10 and 30. sometimes we want to generate whole numbers other times we want floating point numbers we have a lot of variation so we need a way to take what we get from math.random and manipulate it to meet our goals we want a role function that takes in a min and a max and returns a value n that's greater than or equal to the min and less than the max so how do we do this well we're going to be doing a little bit of algebra don't worry it's nothing too complicated but if you want this might be a good time to pull out a pen and paper and work alongside me so our goal is going to be the format listed here we want a formula for r in terms of n so let's first work this out as if we're generating a number between one and six we want to simulate rolling a six sided die and we could write that as one is less than or equal to n is less than seven we use seven here because n is always going to be less than seven it's never gonna be seven but it can be equal to one so how do we get from here to here well the first step we're gonna take is subtracting one from each side of the equation the reason we do this is because 1 minus 1 is 0 so we already get the left side to align properly and we do a little bit of simplification and there we go we have 0 is less than or equal to n minus 1 is less than six our next step is to get the far right side to one what can we do to this equation so that we have one on this side we can divide by six so we have zero divided by six which is going to be 0 we have the value n minus 1 divided by 6 is less than 6 divided by 6 and then we simplify and we have 0 is less than the value n minus 1 divided by 6 is less than 1. pretty straightforward so far right and this is going to be exactly the form that we're looking for we now have something that resembles our goal formula 0 is less than or equal to a value is less than 1. and this is exactly what we get from the math.random function so we have the formula for r in terms of n but ultimately we want to be able to return the value n from our roll function so what we can do is set n minus 1 divided by 6 equal to r and then solve for n so what's the first step here we can multiply both sides by 6 and we get n minus 1 equals r times 6 and then we just add one to both sides and we get n equals r times six plus one now if we wanted to write this function we could say return math dot random times six plus one let's test that out real quick all right so we're definitely getting a number between one and seven we're also getting a floating point number but we're trying to simulate rolling a six-sided die right now so all we have to do is use the function math.floor which just rounds down to the nearest whole number so we should be able to generate any number between 1 and 6. but hang on this only works if we're generating a number between one and seven what if we want something between any given minimum and any given maximum we start from the same place except instead we have the min is less than or equal to n is less than the max and we're going to follow basically the same steps that we're doing except we're going to get a much more robust function at the end of it so let's do that first we subtract min from all sides so we have min minus min is going to be 0 is less than or equal to n minus min is less than max minus min do some simplification and then next we divide by the value on the right which is max minus min so we have 0 divided by max minus min is less than or equal to the value n minus min divided by max minus spin is less than the max minus min divided by max minus min let's simplify that because that's a long ugly equation much better and now we have zero is less than this value which is less than one which is exactly the format we want remember the next step is to find out how we have to modify r to get n so what we do is set this value equal to r and solve for n so the first thing we do is multiply by the max minus the min and we get n minus min equals r times the max minus min and then we just add them in to both sides and there we go now let's write out this function we're taking two parameters a minimum and a maximum and we're generating a random number we're multiplying that random number by the max minus the min and then we're adding the min and we return r so let's see what would happen if we roll between one and five we run that a couple times we can see that it seems to be working what if we decide that we want a whole number well let's add a third parameter to our role function called float flag and we're going to use this to tell our function to either return a whole number or an integer and we're going to take advantage of that math.floor function that we used before if you want pause the video right now and finish writing that so all we have to do is instead of just returning r we say return and then we check for the float flag and if we have the flow flag then we return r and if not we return math dot floor r so we get the nearest whole number rounding down so normally when we run the roll function we're getting a whole number but if we add in the flip flag and we get a floating point number let's do a little bit of simplification here instead of times gets let's put this on the same line and also add them in on this line as well now let's look back at the list of users we wanted to generate so we have a list of names we have some ages the smallest being 12 and the highest being 64. we also have some heights from 5.1 meters to 6 meters now let's take a look at how we can generate a random user based on what we have here using our role function we're going to say let user get an empty object and we'll console log it out so we can test all right we start with the empty object as we expected now the user is going to have a name which we want to pick from the user named array so how do we do that pause the video try that yourself all right so the way to do this is to type usernames and then we want to pick a random element from that list so we either want something index 0 1 2 or 3. so we're going to use our roll function we want a whole number return so we're not going to use the float flag we want something small as 0 and a high is 3 but remember maximum is not included in the possible values so if we say 4 now we can expect to get a value between 0 and 3 inclusively but what if we had more than 4 items in the list do we just always update this number to match that well we don't have to do that because we have access to the length of the list so usernames.length we run this a few times we should eventually see each name in the list awesome so the next thing we want to generate is the user's age and this is going to be between 12 and 64. so we're going to use the roll function again pause the video try it out so again we want a whole number this time between 12 and 64 but we're including 64. so our minimum is 12 and our maximum is going to be 65. run that a few times we can see it's working appropriately the last one we have a height and we want this half to be between 5.1 and 6 meters here's the roll function again of course pause the video see if you can figure it out so our minimum value is 5.1 and our maximum is going to be 6 but we can actually say 6.1 we actually want to be able to get 6 meters and this is going to be a floating point number so we'll put our flip flag in let's run that right now and see what we get okay so it's working except we're getting a long floating point number the heights that we've looked at are all rounding to the nearest tenth so let's do that here by applying two fixed one we run it around to the nearest hundredth we could say two fixed two let's stick with one all right so that's our roll function we're going to be using that a lot throughout the course so definitely play around with it and try to get used to it if you didn't fully follow all the algebra that got us here that's totally fine what we're really focused on is being able to use the role function to generate data all right so in this cast we're going to use the role function to generate a list of random products we're going to generate prices we're also going to generate a count of each product that's being purchased let's go ahead and jump right into it the first thing you'll see is that we have an array of possible products i just pulled all these from the food section on emojipedia now we want a list of five products randomly chosen from our list here and there's a few different ways we could do this we could start off by creating an empty array and then writing a for loop and then push to the products array but in the age of es6 and higher order functions there's a growing sentiment that if you're writing a for loop you're doing it wrong so what we recommend instead so the first thing we could try is creating an array of size five and let's see what that gives us but when we try to map values to this we find that it doesn't work what can we do about that we can use the spread operator now an array of all ones and what do we do here a little underscore because we don't need this value and we have the index so let's start off giving each of our products an index all right so far so good now for the title we want to pick a random product from our list of possible products so this is where our roll function comes in say possible products we're trying to get the item at index something but where does that something come from well again we're going to use our roll function so we want a value in between 0 and the length of the array so possible products.length there you go every time we refresh we're getting a different list of random products now let's generate a price and this price is gonna be in between one dollar and ten dollars so roll one ten and we want a floating point value because it's a price so we put our float flag in all right but now we have these really long floating point numbers and we just want a dollar amount so instead of 2.28184 we just want 2.28 so we can apply two fixed two and our price will only go to two decimal places now if we're shopping for watermelons we almost certainly don't just want one sometimes we're going to want two three maybe even five so let's say we want to generate a random count in between one and five state count is roll one and remember with our roll function the upper bound won't be included so if we want the possibility of five items we have to set the upper bound to six there we go now if we look at our index we can see that we have an id of shopping cart on the main section and then we have a div with the id of products so the first thing we need to do is get the element that we want to insert the html we're going to write into let's throw that in a variable called products element the way we get that element is by writing document dot get element by id and then products now we need to write the html so let's create a variable to hold it we'll call it cart html and let's initialize it now let's take our products array before each for each takes in a function and that function takes in one element from the array and what we want to do for each of these products is html and we want to add div with the class of product let's just write something in there so that it shows up on the screen we actually have to insert that cart html into the product's element and we can do that by saying products element uh enter html gets cart html and so now we have i'm a product listed five times but we don't want to say i'm a product we want the actual products so let's do that we're going to write three separate divs here we're going to write one that has the product title one with the product price and one with the product count and we'll add a couple extra things to make it look cleaner like an emoji dollar sign and an x in front of the count so our date is loaded on the screen but it needs to look a lot cleaner so let's get to work on that let's hop in our style tag here for our product class we'll start by increasing the font size and setting display to flex alright so now these are lining up horizontally add some padding and a margin so there's a couple ways that we could spread out this data evenly in each product tag but the way that we're going to do it is by taking our product tag and then div so we're applying styling to each div inside of the product class we're just going to set the width to be 100 divided by three let's also add a border and a background color and we'll do light green to match the header and footer and that's gonna be it for this cast in the next one we're gonna calculate the total price of all the products in our cart and we're also gonna generate and apply a tax rate to our cart total all right so in this cast we're going to use the higher order function reduce to calculate the total cost of all the products in our cart we're going to use the roll function to generate a random tax rate between five percent and nine percent and we're gonna round that to the nearest tenth and then we're gonna apply that tax rate to the total price of the products in our card let's get started so i'm first gonna write the basic outline of what we need for a reduce function let cart total it products dot reduce and then we have a function it also takes in an accumulator we're gonna start at zero function that we pass in to reduce takes in two parameters the accumulator and the iterable object which is our product so if you'd like you can take a moment right now and try to write this function yourself okay so let's first take a look at what these objects are during each iteration of the reduce function so in the first step the accumulator is zero which is what we initialized it to here and the product is the first product and then we see the rest of the products but we have undefined for the accumulator that's because we're not returning anything yet so if we return the accumulator itself and it stays constant if we added one every time that this returns you'll see that it iterates by one but we don't want to iterate by one we want the total price of the products in the cart so we could first say product.price now we've got another problem because our price is stored as a string so it's just appending to the accumulator we can fix this by saying parts float we're starting to look good but there's still one problem we have two bananas here but we're only adding the price for one banana so we have to say the accumulator plus parse float times product dot count now we're looking a lot better but sometimes we have this weird rounding error this is all right we can resolve it by adding two fixed and rounding to the nearest hundred there we go we have the total of our cart those are some expensive groceries but hey that's the price of avocados these days the next step you need to use the role function to generate a random tax rate between five percent and nine percent i'm going to round that to the nearest tenth so let's say let tax rate get roll and now i'm gonna let you pause the video fill that out see if you can generate a tax rate that we're looking for now remember our role function takes up to three parameters so let's say the minimum is gonna be five percent max is going to be nine we want a floating point number so we're gonna add our float flag in and since we're rounding to the nearest tenth we just add two fixed one right we got tax rate of 5.7 here we go and the last thing we're going to do in this lesson is apply that tax rate to our cart total and we're going to do that by writing a function called taxed it's in a value it's going to apply the tax rate to the card total we should be able to use this function to write let taxed total get taxed applied to cart total if you want to pause the video give that a shot so since the tax rate is a percentage the first thing we need to do say return x rate divided by 100 and now we get the number that we need to multiply by the cart total so let's do that and that'll take x percent of the cart total so this is the value in taxes that we have to add to the cart total so let's add that last part plus cart total and we're appending it so parts float and let's add two fixed and that's basically going to be it for our shopping cart app so in this shopping cart bonus challenge we're going to generate a random weight for each item in our shopping cart we're going to update the view to include that weight and then we're going to find the total weight and display it down here so we're going to use the roll function and generate that random weight before anything else wait it's roll let's say we want to weight between 6 ounces and 20 ounces and we'll round to the nearest go and pause the video see if you can figure that out all right so our minimum is 6 ounces our maximum is 20 ounces and we want to float so we have our float flag and then we want to go to the nearest hundredth so two fixed two all right so our weight's generating all right but before we display it we need to make one change our product div should now take up a quarter and there we go looking good so next we need to figure out the total weight and this is going to look very similar to what we did to calculate the total cost so products.reduce function product returning something we're starting at zero and pause the video give it a shot all right so we're basically using the exact same line that we used from the cart total we're just going to copy that paste it in and replace price with weight look at that we've got the total weight and the total price and that's a beautiful shopping cart app all right so in this cast we're going to learn about the javascript date object let's start out with the simplest example we can let today get new date and date here is a constructor taking in no arguments oh it's console.log that out and you see the date this is recorded on may 22nd 2020. so that's the easiest way to create a date but there are actually four different ways that we can construct the data the second way that we can create a date object is by saying new date and then passing in the year the month the day hours minutes seconds even down to milliseconds so what's especially useful about this method of creating a date is that we can actually be less precise we can get rid of milliseconds seconds minutes hours bay we can even go down to just year and month however if we remove the month then we're actually looking at an instance of the next kind of constructor this is where we create a date just by passing in the date represented in milliseconds and we'll get to how that works towards the end of the cast final example passing in a date string which is simply as it sounds a string that represents a date for example october 13 2014 11 hours 13 minutes and let's print this one out okay as we expected 2014 10th month of the year and the 13th day of the month so let's look at a real example second constructor we looked at so for the year let's say 2015 month 3 day 11 hours 20 minutes 15. seconds 32 milliseconds 51. let's take a look at what this gives us and all right we see that we get the fourth month of the year which is april but we passed in three which we would normally associate with march the reason for this is because the date constructor actually takes in the index of the month rather than the number that we would normally associate with it so three is actually the fourth month and zero would give you january the first month of the year and if we deleted some of these parameters like we talked about earlier you can see they go to the default zero milliseconds zero seconds zero minutes so we can be as precise as we need to be so you can write out the full year or alternatively you can actually write a two-digit year this will give us 1915. the reason for this is because the year starts counting at 1900 so we can use the two-digit years to access the previous century now let's keep using this date object we've created here see how we can access some of the specific data from it for example if we write d dot get month we're using a method that lets us access just the index of the month so as you see we get zero or january we use get date we can get the specific day of the month so the 11th which is what we chose here we can go as far as to get hours seconds or even the milliseconds but let's take a look at what happens if we do get year so we get 15 which is what we set here but what if we set the year to 2020 now we get 120. again this is because we start counting the years at 1900 so 120 years later will be 2020. but normally we're going to want the year to be in the format that we presented here so we can just write get full year instead of get year and as you can see that works out as expected the date object doesn't just have methods for accessing data it also has methods for setting data for example it's a d.set year and say 2011. you'll see that everything else stays the same but we just updated the year to be whatever we wanted here using set year we could also set the year to 1912 by just writing 12 but if we want to do full year we're going to want to write 2012 or in that example 1912. and do the same thing with hours minutes a month seconds and even milliseconds one other useful thing about these setting methods that they give us the date that we set here in milliseconds and that's useful because we can create a new date object based on that so instead of let updated date being the milliseconds that we got there we can actually create a new date object there we go if we go back and look at this number of milliseconds what does this number mean well it's simply the number of milliseconds that have passed since january 1st 1970 up until the date that's represented here all right so now we're going to start building our weekly schedule app we're going to introduce the date object we're going to write a function called get next day which takes in a day and returns the following one we're going to generate a list of random tasks to be done on each day of the week and we're going to write a function to build out the week so let's get started the first function that we're going to write is called get next day we already have the first day set up for consistency i just set this to be the 1st of march 2020 because you are almost certainly watching this cast in the future we have our role function and we have a list of the weekdays so that we can access those alright before we jump into writing the get next day function pause the video and try to write it yourself and we're going to update the next day object to have the date following the day we passed in the way to do that is next day dot set date day get date now if we just ran this as is the next day would get the same date that we passed in but all we have to do is add one and the javascript date object is smart enough to know if we're at the end of a month and it can roll over if need be now we return next day let's test that out all right so our first day was the first of march 2020 so the first thing we're going to do is create a variable called nextday that gets a new date based on the day that we're passing in next thing we want to do update our next day object by calling set date and then passing in a get date adding one and the javascript date object is smart enough to know if you're at the end of the month or the end of the year and it'll roll over accordingly so now let's take a look at what our next day is that's what we want 3 2 starting from 3 1 so let's go ahead and return that all right so now we're going to generate a list of random tasks i'm going to do a little bit of starter code for this one and then i'm going to let you take over so we're going to make an empty array of anywhere between two and five tasks we're gonna use the map function to fill it we're going to return an object inside that function index as i we want to set a name for each task and a property called complete that we can use to check whether or not the task is complete we'll just set that to false for now now if you want to pause the video and generate a random name that matches this format task 54 task 23 etc and also use the role function to randomly decide whether or not the task is complete give that a shot all right so this should be pretty straightforward i'm going to place the name with these backticks and say pass and fill that with the role let's number the tasks anywhere from 1 to 60. instead of just setting it to false let's say roll 0 and 2 the potential values we can get from that are going to be 0 or 1 which evaluate to true or false so we can use the ternary operator and say true or false let's see what we get beautiful and now we're going to build an array of days that represents the week and we're going to use our get next day function to do that and we're also going to use generate tasks to generate tasks for each day all right so we're going to return the array size seven because there's seven days in a week we're going to map to that return an object with the index of i want to be able to access the date object for each day we'll send that to null for now because we have to do some setup and we'll generate some tasks we're just going to type the generate task function let's see what we get so far we'll build a week starting at the first day all right so that's looking good so far but we gotta fill in that date so when we're returning this object we also need to advance to the next day each time so the way we can do that is before we return we can store 8 in an object like this set the date to the current day and then update that day object get next day and we return weekday and that's going to be it for generating data for this app so in the next section we're going to actually build the layout in this cast we're going to take the data that we generated in the previous cast we're going to display it in our app and we're going to use some styling with the css calc function and have some fun with that we already have our array of weeks displaying right here sunday through saturday each one of these is a div with the class day which we've written a style selector for here so our first goal is going to be to have each day take up a third of the height of the application specifically the main height i've also created a variable in the index css that holds the main height which we calculated in earlier cast so that we can access that in the styles here so if you want to pause the video go ahead and see if we can achieve this goal alright so let's first set the height to our main height variable and see if we do that then each day takes up 100 of the view height of the main section but that's probably a bit much it's also a little strange to see where each day starts so let's go ahead and say day and of type even for every other day so the background color to light yellow all right things are coming together and now let's calculate that one third so we're just going to use the css calc function divide by three and remember we can always just change this value if we decide we want to show more per section so by four or even by five it might get a little tight you could even theoretically have different settings for your weekly schedule like a three day view and a four day view but for now let's stick with three alright so now we're going to jump back and take a look at how we got here so we generated the schedule html by using the reduce function with the accumulator that was adding the text of each div and we were getting the weekday using the date's get day method and plugging that in and plugging that in as the index of the weekdays array and now we want to display our tasks for each day so we're going to do something similar here but we're going to write a function called tasks to html xm array of tasks it returns the results of a reduce function tasks got reduced we have our accumulator and our task remember we have to set our accumulator so we're gonna start with an empty string and then we're gonna return the accumulator plus and then we're gonna write some html so i've already written some styles in the tasks.css so we're going to return a div with the class of circle container and inside of that they have a class circle and a label there's a task number back in our schedule html we'll add a div with the class tasks then we'll use literal asks.html on the days tasks all right so our tasks are all being added but unfortunately they're all stacking so let's go back into our index and say tasks as a display flex and flex wrap much better let's actually also add just by content space around very nice but we're not actually displaying the names of our tasks remember we randomly generated a title task and then a number and we also generated whether or not the task was complete but none of these are marked as complete so let's go back into our javascript and we can use a ternary operator right here to conditionally add class so we check task dot complete and if it is complete then we add checked otherwise nothing okay so now we can see if the task is complete let's also replace task number with task dot name there we go we have our random tasks we're looking good so far what if we wanted to know how many tasks were complete for each day well let's write a function to check we'll create a function called get day tasks complete that's in a day now we want to return the number of tasks that are complete for a given day go and pause the video give that a shot all right so we're going to do this using the reduce function again so return a dot tasks dot reduce and we have our accumulator and we have the task we also initialize our account to zero now we want to add one to the accumulator every time we find a task that's complete so we'll use the ternary operator and hit return ask.complete and if it's complete and we want to return accumulator plus one and otherwise we just return the accumulator so it stays the same now let's go ahead and plug that in up here right after the day name it day tasks complete the day here we go sunday tour complete monday once complete etc looking good but what if we want to know how many tasks are complete for the entire week well let's use our get day task complete function to do the same thing but for a week so function get week tasks complete fix in a week and remember to take advantage of this but pause the video and try that out okay so we're going to return we reduce remember we have our accumulator and a day running at zero and in each iteration we want to return the number of tasks that are complete for a given day so return accumulator plus and then we can use our get day task complete function pass in a day and let's just test this out with our week array right so it says seven let's count one two three four five six seven awesome we're looking good now let's display that on top of our weekly schedule and we can actually do that right down here let's say make a div called weekly summary we want to display get week task complete for the week and add schedule html at the end all right so up here we've got 13 tasks completed but now we've got a problem now each day is still taking a third of the main view height but tuesday's being pushed down a little bit and that's because we're not accounting for this up here so let's go back into the index and remember we called that section week summary weekly summary let's do a little bit of styling for this before anything else for the font size to 1.8 rem and we'll do some padding 1.2 rem now remember if we want to use these elsewhere for our calculation we want to store them in an all selector so let's do that now all right things are still looking good but now we want to set the height of each day to account for these variables right so if you want to pause the video and try that yourself go ahead okay so before we divide by three we want to subtract the height of our weekly summary so let's do that first we subtract font size then we subtract two times weekly summary padding because of order of operations this would immediately divide by three but we don't want that we want all of this to be divided by three and that's going to be it for our weekly schedule app and i want to reiterate if you want to download the code for this and modify it make your own cool stuff please do and send me your projects i'd be excited to see what you all come up with all right so in this cast we're going to explore some shapes that we can make with css we're going to make a square a circle a diamond and a triangle and as you can see we've already written all the dibs for this and we've got our css selectors so let's start with the square this one should be pretty straightforward first let's set the height i've rem the width to 5 m as well because the square's height should be equal to its width and let's set a border 0.1 rem solid black actually let's make that border a little bit bigger okay let's give it a margin of say one rem alright so we've already got our square but let's also give it a background color to differentiate pretty straightforward right now let's take the code from the square into our circle selector now we've got two squares and why did we do that well we're going to use the basic set of this square just add a little bit more and turn it into a circle so first let's make that blue now to transform this square into a circle we're going to add a border radius let's first start at say one ram all right so we've got some slightly rounded edges but it still looks like a square let's make a little bit larger let's say two rem two rooms a little bit closer but the real trick that we need to learn is to just set border radius to 50 and we get a circle every time now the next one we're going to do is a diamond so let's take the code from the square again and this time let's set our background color to yellow so for a diamond we basically just need to rotate the square so how do we do that we can use transform and call the rotate function 45 degrees it looks like we need a little bit more of a margin here we go all right so the most complicated one we're going to do is the triangle and this is usually done doing something called a css border hack so for this we're going to set the height to zero and the width to zero and then we're going to set the border to say free ram solid black is that our margin so see we get a square but why is that the border is shorthand so this is actually being applied to each possible side of the border the top the right the bottom and the left so what if we just said the border left is three round solid green i look a triangle we can do something similar border right three ram solid red let's use the bottom triangle so let's make both of these transparent get rid of this and then add a border bottom three rem solid red so there's our triangle but let's make it a little bit bigger five ram five round five round so that's looking good so far but hey this is kind of frustrating all of our other shapes can have a border but our triangle is actually made of the border but what if we wanted to add a border around it well we can use the css after selector so first let's make this one black so it can serve as our background and then we can actually take all this and add a content which is empty because after needs to have a content property there we go we have our red triangle but this red triangle should be a little bit smaller we're almost there we're going to move this triangle on top of this black triangle so first let's set the position of our regular triangle to relative position of our new triangle to be absolute so let's move that triangle left by 4.5 ram let's shift it down just a little bit by say 0.5 round we're almost there let's make our original triangle just that much larger say we move it by 0.6 there you go you can play with these numbers and stretch and shrink the triangle to your liking and that's just going to be a brief dive into css shapes there's obviously a lot more complicated stuff that we could do alright so now we're going to move on and work on our monthly expense sheet we're going to write a function to build out the month creating an array of all days in a month when given a date and a helper function that we're going to need to do that is this one get days in month which is going to take in a month and a year and it's going to return the number of days that are in that month so we know how large to make the array and then we're going to write a function to display the month in our html and we're going to do some styling for it let's get started so we want to start off by building our month array but the first issue that we're going to run into while building this is that our code doesn't know how many days are in the given month so let's do a couple things first let's run our build month based on the start date we have here 15th of march 2020 so to write this build month function we're going to first need to write the get days in month function so this is actually a pretty easy function to write we're just going to return a new date object and we're gonna pass in the year the month and then a zero now let's see what this gives us for january 2020 so you'll see that we're getting the 31st of january that's because setting the date to zero gives us the last day of the month you'll see if we type in february we have the 29th because it's a leap year so we have a date object with the last day of the month so all we have to do is write dot get date and there we go 29 days in february 30 days in april 30 days in september all right so now that we can get the number of days in the month we can start building the array we need so to call that function we need the month and the year so let's go ahead and console that out to get the year we're gonna type day dot get full year we have 2020 and then for the month we're going to write day dot get month we'll see two but we're in march and that's because we're actually getting the index of the month so to get the number that we want to pass into this function we just add one so now we have our arguments so let's store that in a variable let days in month get and then we call get days in month and it takes the month and then the year month is going to be day.getmonth plus one full year now let's print that out we have 31 days in the month that looks right so now let's create our array let month make a new array of size days in month then we're going to map and for now let's just return an object with an index of i return mo let's console that out so it looks like that's working but we want to store the date of each day in the month so let's create a variable called iterable day and we'll make a new date based on the day and we'll set the date of the iterable day to one so it gets the first of the month make sure this is it march 1st perfect instead of returning immediately in our map function let's let month day get this object so we can add a date property of iterable day and then let's iterate the day so iterable day gets get next day iterable day look at that now we're getting somewhere and let's also add a property an empty array called expenses and we'll get to that later so the next thing we want to do is take that month let's write a function that prints it out remember you can do this using the reduce function and each day should print out a div with a class day and then the day of the month so the third for example so now i'll give you a chance to write out this function all right so all we're going to do here create the month html which is going to get month dot reduce and our standard reduce function so an accumulator and the day of the month set our accumulator to an empty string and return the accumulator plus give class day let's just test this out by putting three in and remember we also want to do document.getelementbyid and it's called monthly expenses and set the inner html to month html required network oh i mean it's probably a good idea to call the display month function on our month array all right so that seems to be working let's replace three with the actual date say day dot date dot get date all right so that's looking good so far now that we've got our days displayed in our html let's go ahead and jump into our index and give it some style so the first thing we're going to do is style monthly expenses with flex display and make sure that that data wraps and now let's style the individual days so let's use calc let's set the width to calc 100 divided by three and good so far and then for the height we'll write calc remember we have our main height variable we'll divide that by four starting to look good now let's also set a border oh these are wrapping remember we can fix that by writing box sizing order box so it accounts for the border there we go let's also set the background color of every other day to be light yellow so a and of type even right yellow all right looking good and that's going to be it for the layout of our monthly expense sheet in the next section we're going to generate some random expenses and we're going to display those as well alright so in this case we're going to finish up our monthly expense sheet we're going to generate a monthly budget and subtract the cost of rent and utilities we're going to generate some random expenses throughout the month and we're also going to display those in the app and then we're going to calculate and display whatever the leftover cash is at the end of the month let's jump right in so the first thing we have to generate is a monthly budget i looked at the median income in the united states which came out to around 31 000 a year which i thought was surprisingly low so i decided to create an annual income variable and we're gonna roll for that it's gonna be somewhere between thirty one thousand and forty thousand dollars a year we want it to be a float all right that seems to be good but we're concerned with individual months so we actually need to divide that by 12. so let's create a new variable let monthly income equal annual income divided by 12. remember we need to use parts float because two fixed turns our annual income into a string let's print that out okay seems to be good so far next i looked at the median rent which came out to about fifteen hundred dollars a month so what's that rent get roll anywhere between 1200