[Music] hey guys welcome back to my youtube channel this video you're going to learn the javascript toggle download so here's the demo if i just click this icon you'll see the background is going to be toggled into the dark mode if i just click back again you see it's going to be toggled into the like mode so that's the demo so now let's get started to build this project all right to get started i've created the html file css file and the javascript file so now let's go ahead to link through the css file in the javascript file and set the default attribute so this diva is specific that the script is downloaded in parallel to passing the patch and executed after the page has finished passing right so i'll create the a title javascript toggle that mode and let's go to browser to go to this bootstrap page i will give this link under my description so let's go ahead to grab this the icon you see that cdn quick start with icon and we're gonna paste it over here so after placing we can using the bootstrap icon so let's go ahead to this bootstrap icon officer so search for the sun so this is the icon that we're going to be use so let's go ahead to copy this and go back our text editor direct paste it over here and just giving an id say that target dot right and now let's open default browser so this is the result so let's go ahead to style it so first one we're going to set the body and margin zero percent padding zero percent and i'll send the form family to area okay and i'll styling the i which is the icon and i set the font size to 15 pixels and when your mouse is over it i want to set true pointer and i'll just make it as positions absolute to top 15 left 15 and set transform translate to negative 15 pixels percent and negative 15 so this is gonna be move to the center and lastly i'll set the h1 this heading one okay set to center and i'm gonna set the font size to 3m so let's go ahead to track so that's the result of styling it so now let's go ahead to the javascript console i'll be i'll be using the cons keyword and set the toggle as the variable name it goes to document dot get id so i'll get element by id which we're getting this together so let's go ahead copy this place it over here doing a semicolon so another cons variable body so this one will i'll be using the query selector which is gonna be select our body tag and after selected the icon and the body i'm gonna set the icon sorry the even listener whatever the user is being clicked the icon only running some [Music] functions over here running some of the script so i'm gonna say if this class leaves i'm gonna change to toggle into bi moon so this i this bi mode is the icon so now let's go ahead to search for the icon so here's the one you see the bi moon field so i'm going to be using this if this icon has been clicked and i want to change this icon to this pi mode so let's go ahead to see is that if i just click back again it's going to speed change okay so i'm going to use the if else to change if this class list jogger is equal to this class name so i'm going to grab this one and paste it over here if it goes to this class i'm going to set the body style background to color white and the body style dot color set to black and lastly i'm going to set some transactions set as two seconds and else else if not is not equals to this but not going to set the body style background i'm going to set to black and the color which is the font color set as divide lastly which is the transactions so that's two seconds so now let's go ahead to check refresh this if i just click this icon you're gonna be toggled into the dark mode with transactions if i just click back again it's gonna be toggled into the light mode with the transactions right so it's gonna be uh super easy right so first of all it's going to be grab this toggle dot which is the id and the body this body type and it's going to be checked whatever the mouse is being clicked to this icon i'm going to set the class list which is this class okay i'm going to change to this icon moon and lastly if the is the if else if the class is equals to this brightness which is the design icon i'm going to set as the background to white and the color black with the transitions l is not equals to this brightness i'm gonna set the background to black color white 52 second transactions so that's it for this tutorial and hopefully it's gonna be helpful guys so see you guys in the next javascript project [Music]