Create a Responsive Meditation App With HTML, CSS and JavaScript | PART 2 | Project For Beginners

codexplaine says hi and we'll come to the next part the second part of building our mutation app so in the previous part the first part which you will find the link to it here or in the description we have created our app using just html and css so we have made our app responsive using css grid and now in this part the second part we're going to implement javascript so now i can change the background video and i also can change the audio duration i can also play the video and animate our svg here i can pause the video and when i am not inactive when i am not moving the cursor for a certain time they will disappear the buttons will disappear also on the mobile version i can click on this button to open and close our menu here so i can change the the background video so like always before typing any code i'm gonna go and explain the logic behind it using some animations and diagrams and i'm gonna ask you to like the video and subscribe to my channel that's how you're gonna encourage me to make more of these videos and that's how you're gonna help beginners out there so without further ado let's go and start this so the first thing we're going to do is like toggling our menu so when i click back on this same button i'm going to close the menu so to achieve this all we're going to do is add in a class name to this div here which is our menu and when i click back on this one we're just going to go and remove that class name we've added in the first time so let's go and talk about the logic behind this before typing our code so let's say we have here a text which is inside the tab with the class name text if i go and select that text using any method i want query selector for example now this text is an object and it has a property called classlist so let's say text.classlist this will return an array of class names that were set using our class attribute so in this case this return text now this class list here has a method called add so if i see classlist.ad and then black background and this black background here is just a name of a class which is inside a css file that its background color here property is set to black so if i say add the black background class name to the class list of text this will just go and add that class name to the classlist of our dev here and this will make the background of this text black so that's easy now i can also remove a class name using the method remove so this will do the opposite of the add and remove the black background from there and we don't have anymore the black background and now we have the last method which is the toggle method which is the one we're going to use so the toggle method here will simply toggle our black background class name so if the black background class name is there in our class list it will remove it if it's not there it will add that black background so in this case here if i run this line of code the black background isn't there so it will add it to the class list of this dev and this will add our black background and now if i run the same line of code again this will go and remove black background class name from the classlist of our dev and our black background will disappear so that's how we're going to open and close our menu by just toggling a class name so let's go and see this in action now the first thing i'm going to do is i'm going to go to our folder js and i'm going to open toggle seasons menu.js so this is where our code for opening and closing the menu will live now inside our html code i'm gonna go and link that js file to our html file and then here i'm just gonna go and add a class name called open for our seasons menu dev and i'm gonna go and set the right property in our star that says for that class name so just under seasons i'm gonna add open the class name and all i'm gonna do is just play with the left property so i'm gonna set to zero now if i save you can see that the menu is opened and if i remove that class name it's now closed so i'm just going to go and tackle that that that class name now i'm going to go and add another class name called rotate to rotate that button the arrow button i'm going to rotate it by 180 degrees when the menu is opened like so so let's go and do this using javascript so i'm gonna go to my file toggle season menu and i'm gonna need to select two elements the button the arrow button and our menu so i'm gonna use here toggle menu class name to toggle the button and to toggle the seasons menu i'm gonna use the class name seasons and now let's go and add an event listener to our uh button the arrow button so all i'm gonna do is use our toggle menu to toggle that class name open so now if i click on this you can see we open our menu but we have no animation there so i'm just gonna go and use transitions so i'm gonna transition the left using easing out for timing function now if i click on that you can see the animation there now i'm gonna go and do the same thing for our open menu button so we need to rotate it so i'm gonna toggle rotate the class name rotate we have created it so now you can see the button has been rotated when i open the menu but we need a transition there but we already have the transition for the background so i'm just going to use all to transition all now if i open that you can see the transition is there and now we're done with closing and opening our menu so let's go and move on to other things and now it's time to make our buttons fade away when the user is inactive for a certain amount of time and bring them back when he moves the cursor so let's first close our toggle seasons menu.gs we're done with that and now i'm gonna link a new js file which is the file where the code for hiding the buttons with left which is under our js folder so it's here now i'm going to go to the index.html and for our whole app i'm going to add a class name called inactive and then i'm going to go to the style that css and just under my app here class name i'm going to add the inactive and what i'm going to set as a property is the opacity and i'm gonna set it to zero and that's how i will hide my buttons but i'm gonna add some transition there to make the fade away and fade in effect all right now i'm gonna go in my js file and i'm gonna select our app using query selector and then instead of adding our inactive here i'm going to add it using javascript so i'm going to use the class list and then the add method and add my inactive class name if i save you can see that the patterns are hidden now but we won't do this like this we need first to know the last time the mouse has been moved so i'm going to use the date object to set the time when the mouse has been moved for the last time and then i'm gonna go and listen for the mouse movement so whenever the user moves the mouse i'm gonna go and bring back those buttons so i'm gonna go and remove the inactive class name from the app so i'm gonna show the app by getting to the class list of our app and remove the inactive class name all right now in the other hand we need to deactivate our app when the user was inactive for a certain time so i'm going to create a function to do that which is called deactivate app and inside this function we need first to check if the user was inactive for a certain amount of time so the amount of time to consider the user is going to be a constant so i'm going to go and create the constant and you can choose the time you want to consider the user inactive for me i'm gonna go for three seconds so the constant is gonna be called inactive time and i'm gonna set it to 3 000 milliseconds so which is three seconds so here i'm gonna go and create a variable called now which is the now time and then i'm gonna go and see the difference between the now time and the the last time the mouse has been moved and i'm going to call it delta time and that's the difference of time between the last time the mouse has been moved and now if that's bigger than inactive time this means that the user was inactive for more than three seconds and in that case i need to hide the app so i'm just going to go and add the class name inactive to the class test of our app it's simple and now i need to check if that's true so i need to run our deactivate up like every millisecond so i'm going to use a request animation frame to create a loop and i need to call the function now just one time so i'm creating a loop here using request animation frame now you can see that the app that the the buttons are gone but when i when i move the cursor you can't see them again so here whenever i move the mouse i need to reset the last time the mouse has moved so i'm just going to sit back to the new now time so now if i was inactive for more than three seconds they fade away and now when i move the cursor they come back but again if i don't move the cursor the cursor doesn't fade away so we need to make the cursor fade away also beside the buttons so i need here to hide the cursor also when the user was inactive i'm just going to say document.body that style and then the cursor and i'm gonna set its property to none so this is just css to hide the button and here when the mouse when the user moves the mouse we need to show back that cursor by sitting to auto and now if i save if i was inactive for three seconds the cursor must fade away but you can see that it's not because i'm using a screen recorder that records like the the cursor in a certain way that's not like it appears like it's not fading away but it does and here i'm gonna go and comment this out there this uh hide button.js script because i don't want my buttons to like fade out each three seconds when i am developing my app so now let's go and move the next part now it's time to control our audio using these two buttons here play and pause so i'm gonna go and link our file the last file which is the app.js file and here i'm going to go and close this two files and open our app.js the first thing i'm going to do is select our app and pause buttons using query selector so the class names are play dot play and i'm just gonna go and copy this whole thing to use it for our pause button and then all i'm gonna do is i'm gonna add a an event listener a click event for the play button and the pause button so here i'm gonna use a click event and there it must be a semicolon then i'm going to run an anonymous function but first we need also to select our audio element to control using javascript so i'm going to select the audio using the query selector method so this is our audio it's inside the dev with the class name audio so i'm just gonna say here audio and then the audio the html5 audio now what i'm gonna do is use the play method to play the audio and then use the pause method to pause the audio so if i click now you can hear the audio is playing and then if i click on pause this will pause the audio but i have here a little issue and it is and then the issue is i can't click on the buttons in this area so i'm gonna go and open my my inspector here and you can see that my my svgs here like cover these areas here from the buttons so that's a css issue so we need to go back to our style.css file and look for the start for the svgs and all i'm going to do is i'm going to go and set the z index of the svgs to minus one and this will put them in the background and the buttons will be in the foreground now you can see that i can click on my buttons in any area i want [Music] and that's it for this part let's go to the next one and now it's time to change the background video so when i click on one of these buttons this will change the video in the background so let's see how can we achieve that so we're going to achieve that using what we call the html5 custom attributes so we have our buttons here to change the background video and these are the html codes for each button so adjust the dev with the class name seasons a season for all of them and inside it's an image all right now in the other hand the search of the video we're going to play in the background it's like this so so we have a folder called assets then inside it's another folder called video and then we have our videos so when i click for example on this button here i need to set the video search to this source here spring so how do i know the source of the video when i click on each of these buttons so i'm gonna use the html5 custom attributes so in this step here i'm gonna add an attribute called the video search so this is a custom attribute i can call it whatever i want and i'm going to set equal to the path or the search of my video so assets then video then spring the same thing for all of these buttons or all of these devs now when i click on one of these here one of these buttons i'm going to go and look into the video search attribute get the video search and set it to my video search and that's it now let's go and implement this so let's go to our app.js and here i'm gonna go and select all of those buttons the seasons are the season buttons so i'm going to use query selector all so i'm going to select them all because they all have the same class name which is season so that season so here you can see that you have all the same class name season and then i'm gonna go and also select our video so that's how we can change its source using javascript so i'm gonna select it also using query selector and let's go to our html so the video here is inside the dev with the class name video so i'm going to see that video then video so now that i selected my video i'm going to go and add an event listener to all of my seasons buttons so i'm going to use a four each to loop over the seasons buttons and then for each season i'm going to add an event listener and on click i'm going to run an anonymous function and what i'm going to do is i'm going to change the video search the video we have selected in the line 16. so if we do that search then i'm going to use the season which is our dev and then we're gonna get an attribute so let's go to our index.html here so so for each one of these buttons i'm gonna add an attribute a custom attribute called video series and my videos are under their assets folder then video you can see it from here so assets then video and these are my videos so i'm gonna go here and say winter that mp4 and then it's gonna be spring then summer then autumn and now let's go and get that attribute using javascript and see it to our video search and that set and now if i go and click on the buttons this will change the background video and that's it for changing the background video let's go now to the next step and now it's time to do the same thing with these buttons here so when i click on one of these buttons we're gonna change the audio duration here so it's basically the same thing we're gonna play with the attributes and get them using javascript and then change the audio duration here so let's go and see how to do that so i'm gonna go here and add some comments some stupid comments so here it's gonna be pause audio then here it's gonna be like play audio so and now we need to select our uh durations or the buttons there so i'm gonna use again the query selector all because all of those buttons are devs with the class name duration so here you can see it i'll have the same class name duration and then i'm gonna go and create a default audio duration so when the app is loaded for the first time we gonna play the audio for two minutes so that's the default duration so 120 seconds which is two minutes so the audio duration now can be changed from two minutes when the user clicks on one of those buttons so i'm going to use a for each to loop over all those buttons add an event listener a click event to each button so when i click on one of those buttons i'm going to need to change the audio duration to this order duration here to the duration dot get attribute so we're going to create an attribute called audio duration and we need to create that attribute so we're going to go to our index.html and here i'm going to go and paste in audio duration attribute and it's going to be 2 minutes which is 120 seconds 300 seconds and 600 seconds and 1200 seconds and now before i move on i'm gonna need to create a new button for 10 seconds so just for like development purpose so i'm going to go here and and console log to audio duration so whenever i click on one of the buttons i'm going to console log the audio duration so if i go to the console and then zoom in i'll make that bigger so if i click on 10 you can say 10 seconds 220 300 600 and 1200 seconds and that's it now let's go and move on to the next step now it's time to create this animation the svg line animation so if i hit play you can see this animation here of our svg so that's all we need to accomplish in the next step so first let's go and see the logic behind svg line animation so we have here our play and pause button and inside here uh beside the this time here we have two svg so if you have seen the first part you know what i'm talking about so we have two rectangles one on top of the other so we have a rectangle but it's not felt so it's transparent here so we can't see the rectangle but we can see the stroke so because we have a stroke here it's a red stroke and it's with its 10 pixels so we can just see the stroke of our rectangle and the second rectangle is on top of the first one of the red one except it's a is it's a white stroke so they have all the same properties except the stroke color it's it's what is changed so the stroke here is red and the stroke here is a white straw so you can only see the white stroke and then when you click on the play button then you see the animation happens and that's when we see the red stroke is going up so actually the rectangle or the red stroke isn't moving at all what's moving is actually the white stroke so we're moving the white stroke from here and that makes it like the bridge stroke is getting bigger as we play the audio so how can we achieve that first i need to select the second rectangle the white rectangle i'm not going to select with rectangle because we're not going to do nothing with it so i'm going to use this query selector and i'm going to select it using the class name here rect which you can see here and i'm gonna set that to a constant called path now this path here is just our stroke here the white stroke now let's simplify this by by using just lines so let's say this is our red stroke and then on top of it we have our white stroke now if i go and use the start property and then the stroke dash array property and set it to 50 pixels this is what's going to happen so we have our red stroke and then our white stroke now will be dashed and if we dash will be uh of a 50 pixels length so we're gonna have the first dash its length is going to be 50 pixels in a space so 50 pixels then another dash then space another dash in a space another dash and then a space so each dash here its length is 50 pixels now if i set it to 100 pixels you know what's going to happen we're going can have dashes of 100 pixels and spaces of 100 pixels also and then if i set the stroke dash array to 400 for example this will make it like a dash of a 400 pixels and it's gonna be like we have just one dash there and now we have achieved the same thing we have before so you can ask why do we need to use stroke dash array as we have already what we have here what we have achieved so why we need to use stroke dash array because if i use stroke dash array now i can use the dashes i can't move here the stroke but instead it can move the dash so to move the dash i'm going to use another property which is called stroke dash offset so if i set the offset of the dash to 50 pixels this will move our dash here by 50 pixels if i set it to 100 150 100 200 and here you can see that as the dash offset is growing up the this theory is moving to the right so if i do this faster okay one more time you can see that we have this animation here it's like this line is moving uh to the right so that's great that's how we're gonna move our stroke here or actually the dash using the stroke dash offset now the only problem here is that here the stroke dash array is set to 400 which like covers the whole red stroke so we need to cover the whole red stroke none of the red stroke must be shown to the user which is the case here we need the white stroke to fully cover the red stroke but if we set this stroke dash array for example to 400 it may cover the red stroke in a mobile version of our app but in a desktop version this will get bigger and it's not going to cover the red stroke so in that case we need to use another property called total length this will get the length of the whole stroke and that's what we're gonna set to be our stroke dash array so if the length of this is 500 pixels then the dash array the stroke dash i will be also 500 pixels and that's the way we're gonna 100 sure that we're gonna cover the red stroke now let's go and see this in action so let's go now and select our uh stroke our rectangle and the remaining time so time inside that stroke so i'm going to use query selector to select both the rect the path and our remaining time element so the class name here is wrecked so that's means i'm going to use query selector and then for the remaining time element i'm going to use the class name so the class name is audio remaining time and that's it now the first thing is i'm gonna go and get the total length of our path which is the same as like saying the perimeter of our rectangle so the path length here is going to be our path dot total or get total length i didn't know why i need this and now i'm gonna go and set the the stroke dash array to path length so we can so the dash will cover the stroke or the rage stroke fully cover their the rage stroke all right now if i set pathing just to five it's not gonna cover it so we have dashes of 5 pixels dashes of 60 pixels dashes of 80 pixels dashes of 500 pixels and dashes of 300 pixels so it must be exactly the path length that way it will cover the weight stroke totally and now we're just going to play with the path that start that stroke dash offset that's how we're going to move the the white stroke so 20 by 40 by 50 and you can see that it's going anti-clockwise if i use a minus it's not going clockwise so that's how we're gonna move our white stroke and it's look like we're actually we're the red stroke actually grew growing but it's not so i'm going to use update function to update our stroke dash offset based on the person played from the audio so if i played for example 50 of the audio then i want to move my stroke dash offset by 50 of uh of the path length okay so person played the person played is the audio that current time divided by the whole length of our audio which is audio duration and now for the stroke dash offset it's going to be proportional proportional to the persian plate so path that start that stroke dash offset will be equal to portion plate times the path length i hope you understand this okay now i'm gonna use uh i'm gonna call update once and then i'm gonna use request animation frame to create a loop because we need to update the stroke dash offset each each millisecond so if i click on play now you can see that our dash the white stroke is moving [Music] but we need to move it clockwise i'm going to add a minus here so i'm going to click on that again now it's moving the other way [Music] and that's great now if i choose 10 seconds you can see that very well and when it reaches the end it starts over so we need to stop to stop the audio from playing when we reach the audio duration so i'm gonna check if the audio that current time is greater than the audio duration so we need to like pause the audio and then to actually stop the audio i'm gonna go and set the audio current time back to zero zero seconds so the beginning of the audio so we pause the audio and then stop the audio by setting the current type to zero and now if i check that again [Music] and good so when it reaches the end it stops but now i'm gonna go and do something i'm gonna go and console.log something to the car to the console update for example if i open the console you can see that our update is still running although the audio has been paused which is not good so what i'm going to do here is i'm going to use an if statement i'm going to say of audio that passed not paused that's when i want to request animation frame update so now if i go and open my console and then refresh and click on play the audio is playing but you can see the update function we can't see the stroke moving which means that we need to go and fix this so we need to go to the top when i click on the play button when i click on the play i need to play the audio and now and also initiate the loop by calling the update function so now if i go and open my console play now you can see that stroke moving and also our update function there is been called each time so when that ends when audio reaches the end you can see that the update has been stopped and that's it for this step let's now move on to the next one and now we have reached the last step and in this step we're gonna handle this count countdown timer or clock or whatever so when i click on the play button you can see this counting down so let's go and see the logic behind this so to achieve such thing we need to talk about the remainder operator in javascript so when we have four for example modulo 2 this will return 0 because 4 divided by 2 is going to be 2 and there is nothing left from the division so but instead if i say 10 divided by 3 that case is going to be 3 as a whole number and 3 times 3 it's 9 so 10 minus 9 is 1 so what's left from the division is 1. so 10 modulo 3 is going to be 1. so the remainder operator returns the remainder leftover of a division let's say we have here an order duration of two minutes when i click on play for seven minutes this is how it's gonna look like so one minute and 53 seconds is the remaining time means we have like played seven seconds of our audio all right now how can we figure it now this this is the question how can we figure out this all right we have selected our audio using query selector now if i use the current time property this will return 7 so 7 seconds is what we've played from our audio and then the audio duration is 120 which is two minutes all right so this is what we have as like data so to know in the remaining time here i just need to like subtract seven from 120 so 120 minus seven is the remaining time so when at 20 is the audio duration minus the audio.current time will be just the remaining time in seconds and the result of this in this example is going to be 113. so now it's just a matter of how we're going to get the seconds and the minutes of this 113 seconds to get the minutes it's going to be easy we're just going to go and divide 113 by 60 this will return a decimal number 1.88833 so one here means one minute right so when 113 seconds has one whole minute inside of it so i'm going to use math that floor here to get this integer i don't want this so matlab floor will return the number of minutes in 113 seconds and then to get the seconds or the remainder of this division here i'm just going to use the modulo or the remainder operator so i'm going to say 113 modulo 60 and this will return 53 which is exactly what we have here so now i just need to take the minutes and the seconds and format them like this and that's it now let's go and see this in action so now we need to like calculate the remaining time or the remaining minutes and seconds for that i'm gonna go and create a function called render remaining time so this function here will calculate the remaining time in minutes and seconds and also render it to the user interface and from time in second we're gonna get our minutes and i'm going to use math.floor here to get an integer because it could be a a decimal a float number and then i'm going to get the seconds using the remainder operator just like we have seen before and now i'm gonna go and render this using inner html property to the user interface so i'm just gonna put the minutes then a column and then the seconds and then that's it i'm going to go now inside our update function and then here i first need to calculate the remaining time in seconds so let remaining time in second is going to be equal to the audio duration minus the audio that current time and i'm going to use now my function render remaining time and it's going to take in the remaining time in seconds i'm going to hit save and now you can see we have this not good looking timer timer so what i'm gonna do here i'm gonna go to the bottom so if i play that you can still see that we have that problem so i'm gonna go here and check if the minute is less than 10 which means the minute are a single digit i'm gonna go and return the minute with zero just before that single digit the same thing for the seconds so here what this does what these two lines of code does if the minute or the seconds is a single digit example nine eight seven so less than ten we add a zero just before that single digit all right so now nine will be zero nine eight will be 0 8 etc so if i save now you can see that now our timer is looking just like we want it to look and now we have the 0 before 1 because one is one digit right is a single digit now what i want you to see here is when i click on on these buttons you can see that the remaining time is changing that's good but if it's not playing when i click on these buttons nothing happens although the audio duration in the in the background it's changing you can see that when i click on play it's it has been changed you can see it now so to fix this what i want to do is i'm going to go and call the update function whenever i click on a button and a duration button and that's how i'm gonna update the remaining time so i'm gonna go now and check if it works and yes so whenever now i click on a button we call the update and we update the whole thing and that's good so i think that's it for our tutorial uh this is the end i'm just gonna go and check one more time our meditation [Music] app and yes i still need to like uncomment that script here to hide the buttons when the user is not inactive now i'm just gonna go and change the background and go full screen and let's meditate okay this is guys thank you for watching don't forget to subscribe and like the video thank you see you in the next tutorial [Music]

Channel: Code Explained

Views: 1,379

Keywords: programming, coding, web development, learn web development, learn coding, html, javascript, frontend development, web design, html tutorial, css tutorial, beginner projects, javascript projects, javascript tutorial, html projects, css projects, web development projects, coding projects, learn to code, javascript beginner projects, easy javascript projects, web development tutorial, freecodecamp tutorials, javascript beginner tutorials, source code, flexbox, css grid, meditation

Id: 9KH8ocwIc3I

Length: 45min 28sec (2728 seconds)

Published: Sat Aug 14 2021